/* A Agenda no desenho da SAG v2 (itens 4.3 e 4.6).
 *
 * Folha própria, como a do Atendimento e a da Visão geral: o desenho desta tela não entra
 * na folha de todas. Um verde só — o da moldura (3.1). Medidas da parte 6 da análise e de
 * `docs/referencias/sag-v2/estilos/activities-v2.css.txt` (fontes do cartão e da lateral,
 * a gaveta de 560 px, as ações rápidas e a página de agendamento).
 * Toda cor tem a palavra ao lado (situação, atrasada, ativa/pausada). */

/* AS CORES DA TELA EM TOKENS (22/10/2026): no tema claro, os MESMOS valores de antes, um
 * por um — a tela fica idêntica; no escuro, o par logo abaixo, pela régua do app (`--surface`,
 * `--canvas`, `--soft`, `--line`, `--ink`, `--muted`, `--ok`, `--aviso`, `--ruim`) e, onde
 * ela não tem o tom, o hexadecimal com a palavra da cor. `.ag-gaveta` entra junto: a gaveta
 * abre fora da `.agenda-v2`, por cima da tela. */
.agenda-v2,
.ag-gaveta {
  --ag-texto: var(--sag-ink, #17201e); /* quase preto */
  --ag-apagado: var(--sag-muted, #66736f); /* cinza */
  --ag-linha: var(--sag-line, #e4e9e7); /* cinza-claro */
  --ag-cartao: #fff; /* branco */
  --ag-fundo: #f5f8f6; /* gelo esverdeado */
  --ag-dia: #edf2ef; /* verde-acinzentado claro */
  --ag-dia-borda: #dce5e1; /* cinza-esverdeado */
  --ag-hoje: #edf7f2; /* verde-claro */
  --ag-hoje-borda: #80b09e; /* verde médio */
  --ag-hoje-anel: #b7d5c9; /* verde-claro */
  --ag-divisa: #d8e2dd; /* cinza-esverdeado */
  --ag-linha-suave: #edf1ef; /* cinza-claro */
  --ag-borda: #e0e8e4; /* cinza-esverdeado claro */
  --ag-cartao-borda: #dce4e0; /* cinza-esverdeado claro */
  --ag-metrica-realce: #b9d5c9; /* verde-claro */
  --ag-cartao-realce: #adcbc0; /* verde-claro */
  --ag-controle-borda: #d9e3de; /* cinza-esverdeado */
  --ag-controle: #fbfdfc; /* quase branco */
  --ag-botao: #fafcfb; /* quase branco */
  --ag-botao-texto: #52655e; /* cinza-esverdeado escuro */
  --ag-controle-texto: #3d5049; /* verde-acinzentado escuro */
  --ag-lupa: #85928e; /* cinza */
  --ag-foco: #79a996; /* verde médio */
  --ag-vista-texto: #71807b; /* cinza */
  --ag-rotulo: #60716b; /* cinza-esverdeado */
  --ag-dia-nome: #7a8983; /* cinza */
  --ag-forte: #2e453c; /* verde quase preto */
  --ag-cartao-titulo: #263c33; /* verde quase preto */
  --ag-titulo: #2a4037; /* verde quase preto */
  --ag-proxima-texto: #344940; /* verde-acinzentado escuro */
  --ag-gaveta-titulo: #21352d; /* verde quase preto */
  --ag-campo-texto: #2e413a; /* verde quase preto */
  --ag-linha-texto: #42564e; /* cinza-esverdeado escuro */
  --ag-hora-texto: #43564e; /* cinza-esverdeado escuro */
  --ag-acao-texto: #3d6757; /* verde-acinzentado */
  --ag-rapida-texto: #3d6657; /* verde-acinzentado */
  --ag-cartao-dono: #6d7f78; /* cinza */
  --ag-cabecalho-texto: #82908b; /* cinza */
  --ag-link-rotulo: #778680; /* cinza */
  --ag-link-texto: #61736b; /* cinza */
  --ag-fechar-texto: #61716b; /* cinza */
  --ag-tipo-texto: #697a73; /* cinza */
  --ag-tipo-icone-texto: #62776e; /* cinza */
  --ag-prefixo-texto: #8a9691; /* cinza */
  --ag-rotulo-livre: #566861; /* cinza-esverdeado escuro */
  --ag-pilula-texto: #6f8079; /* cinza */
  --ag-tracejado: #c9d6d0; /* cinza-esverdeado */
  --ag-tracejado-texto: #66766f; /* cinza */
  --ag-tracejado-realce: #7caa98; /* verde médio */
  --ag-adicionar-realce: #f8fbf9; /* quase branco */
  --ag-linha-realce: #f9fbfa; /* quase branco */
  --ag-sigla: #e8f1ed; /* verde-claro */
  --ag-sigla-texto: #366553; /* verde-escuro */
  --ag-tipo-fundo: #e6f1ec; /* verde-claro */
  --ag-verde-texto: #356d58; /* verde-escuro */
  --ag-azul-fundo: #e9f1fa; /* azul-claro */
  --ag-azul: #3d6f9f; /* azul */
  --ag-violeta-fundo: #f0ecf8; /* violeta-claro */
  --ag-violeta: #7056aa; /* violeta */
  --ag-ambar-fundo: #fff4df; /* âmbar-claro */
  --ag-ambar: #a77520; /* âmbar */
  --ag-pendente-texto: #8a6a1f; /* âmbar-escuro */
  --ag-pendente-ponto: #d4a33f; /* âmbar */
  --ag-feita-texto: #2f7a5f; /* verde-escuro */
  --ag-feita-ponto: #3d9776; /* verde */
  --ag-cancelada-texto: #8a5c58; /* rosado-escuro */
  --ag-cancelada-ponto: #b9837f; /* rosado */
  --ag-atrasada-texto: #bb514b; /* vermelho */
  --ag-atrasada-ponto: #cd5e57; /* vermelho */
  --ag-atrasada-borda: #efd1ce; /* rosado-claro */
  --ag-atrasada: #fff9f8; /* rosado quase branco */
  --ag-vermelho: #bd574f; /* vermelho */
  --ag-concluir: #e9f4ef; /* verde-claro */
  --ag-concluir-texto: #357159; /* verde-escuro */
  --ag-concluir-realce: #d8ece3; /* verde-claro */
  --ag-selo-pendente: #fff3dc; /* âmbar-claro */
  --ag-selo-feita: #e7f3ed; /* verde-claro */
  --ag-selo-feita-texto: #39745e; /* verde-escuro */
  --ag-vermelho-fundo: #fff0ee; /* rosado-claro */
  --ag-selo-vermelho: #b7524c; /* vermelho */
  --ag-mais-fundo: #edf5f1; /* verde-claro */
  --ag-mais-texto: #35705a; /* verde-escuro */
  --ag-data-fundo: #eaf3ef; /* verde-claro */
  --ag-pagina-fim: #f2f8f5; /* verde quase branco */
  --ag-pagina-topo: #f6faf8; /* verde quase branco */
  --ag-avatar: #dcece4; /* verde-claro */
  --ag-avatar-texto: #28674f; /* verde-escuro */
  --ag-convite-texto: #2f7058; /* verde-escuro */
  --ag-ativa-fundo: #e2f1ea; /* verde-claro */
  --ag-ativa: #287355; /* verde-escuro */
  --ag-pausada-fundo: #f3e7dc; /* bege */
  --ag-pausada: #9a652d; /* marrom-alaranjado */
  --ag-link-borda: #dbe5e0; /* cinza-esverdeado */
  --ag-acao-borda: #d6e2dc; /* cinza-esverdeado */
  --ag-fechar: #f1f5f3; /* gelo */
  --ag-tipo-borda: #dce5e0; /* cinza-esverdeado */
  --ag-tipo-icone: #eff4f2; /* gelo esverdeado */
  --ag-escolha-borda: #75a791; /* verde médio */
  --ag-escolha: #eff8f4; /* verde quase branco */
  --ag-escolha-texto: #27644e; /* verde-escuro */
  --ag-escolha-icone: #d9ece3; /* verde-claro */
  --ag-escolha-icone-texto: #28684f; /* verde-escuro */
  --ag-rapidas-linha: #e6ece9; /* cinza-claro */
  --ag-rapida-borda: #d9e4de; /* cinza-esverdeado */
  --ag-perigo-borda: #f0ccc9; /* rosado */
  --ag-perigo: #fff7f6; /* rosado quase branco */
  --ag-perigo-texto: #bd514b; /* vermelho */
  --ag-pergunta-borda: #ecd7aa; /* âmbar-claro */
  --ag-pergunta: #fff9ec; /* creme */
  --ag-pergunta-texto: #6f4b10; /* marrom */
  --ag-previa-borda: #dce9e3; /* verde-claro */
  --ag-previa: #f3f9f6; /* verde quase branco */
  --ag-previa-link: #2e6c54; /* verde-escuro */
  --ag-prefixo: #f4f7f5; /* gelo */
  --ag-pilula-ativa-borda: #7eaa98; /* verde médio */
  --ag-pilula-ativa: #e1f0e9; /* verde-claro */
  --ag-pilula-ativa-texto: #28694f; /* verde-escuro */
  --ag-chave: #cbd6d1; /* cinza-esverdeado */
}
:root[data-tema="escuro"] .agenda-v2,
:root[data-tema="escuro"] .ag-gaveta {
  --ag-texto: var(--ink);
  --ag-apagado: var(--muted);
  --ag-linha: var(--line);
  --ag-cartao: var(--surface);
  --ag-fundo: var(--canvas);
  --ag-dia: var(--soft);
  --ag-dia-borda: var(--line);
  --ag-hoje: var(--ok-soft);
  --ag-hoje-borda: #2f7a64; /* verde-escuro */
  --ag-hoje-anel: #1f4a40; /* verde-escuro */
  --ag-divisa: var(--line);
  --ag-linha-suave: var(--line);
  --ag-borda: var(--line);
  --ag-cartao-borda: var(--line);
  --ag-metrica-realce: #3f8f7b; /* verde */
  --ag-cartao-realce: #3f8f7b; /* verde */
  --ag-controle-borda: var(--line-forte);
  --ag-controle: var(--soft);
  --ag-botao: var(--soft);
  --ag-botao-texto: var(--ink);
  --ag-controle-texto: var(--ink);
  --ag-lupa: var(--muted);
  --ag-foco: #3f8f7b; /* verde */
  --ag-vista-texto: var(--muted);
  --ag-rotulo: var(--muted);
  --ag-dia-nome: var(--muted);
  --ag-forte: var(--ink);
  --ag-cartao-titulo: var(--ink);
  --ag-titulo: var(--ink);
  --ag-proxima-texto: var(--ink);
  --ag-gaveta-titulo: var(--ink);
  --ag-campo-texto: var(--ink);
  --ag-linha-texto: var(--ink);
  --ag-hora-texto: var(--ink);
  --ag-acao-texto: var(--ink);
  --ag-rapida-texto: var(--ink);
  --ag-cartao-dono: var(--muted);
  --ag-cabecalho-texto: var(--muted);
  --ag-link-rotulo: var(--muted);
  --ag-link-texto: var(--muted);
  --ag-fechar-texto: var(--muted);
  --ag-tipo-texto: var(--muted);
  --ag-tipo-icone-texto: var(--muted);
  --ag-prefixo-texto: var(--muted);
  --ag-rotulo-livre: var(--muted);
  --ag-pilula-texto: var(--muted);
  --ag-tracejado: var(--line-forte);
  --ag-tracejado-texto: var(--muted);
  --ag-tracejado-realce: #3f8f7b; /* verde */
  --ag-adicionar-realce: var(--soft);
  --ag-linha-realce: var(--soft);
  --ag-sigla: var(--ok-soft);
  --ag-sigla-texto: var(--ok);
  --ag-tipo-fundo: var(--ok-soft);
  --ag-verde-texto: var(--ok);
  --ag-azul-fundo: #1a2a42; /* azul-escuro */
  --ag-azul: #8db8f0; /* azul-claro */
  --ag-violeta-fundo: #2c2740; /* violeta-escuro */
  --ag-violeta: #b7a6ee; /* violeta-claro */
  --ag-ambar-fundo: var(--aviso-soft);
  --ag-ambar: var(--aviso);
  --ag-pendente-texto: var(--aviso);
  --ag-pendente-ponto: var(--aviso);
  --ag-feita-texto: var(--ok);
  --ag-feita-ponto: var(--ok);
  --ag-cancelada-texto: #d9a19c; /* rosado */
  --ag-cancelada-ponto: #c48f8a; /* rosado */
  --ag-atrasada-texto: var(--ruim);
  --ag-atrasada-ponto: var(--ruim);
  --ag-atrasada-borda: #5a3230; /* vermelho-escuro */
  --ag-atrasada: var(--ruim-soft);
  --ag-vermelho: var(--ruim);
  --ag-concluir: var(--ok-soft);
  --ag-concluir-texto: var(--ok);
  --ag-concluir-realce: #1f4a40; /* verde-escuro */
  --ag-selo-pendente: var(--aviso-soft);
  --ag-selo-feita: var(--ok-soft);
  --ag-selo-feita-texto: var(--ok);
  --ag-vermelho-fundo: var(--ruim-soft);
  --ag-selo-vermelho: var(--ruim);
  --ag-mais-fundo: var(--ok-soft);
  --ag-mais-texto: var(--ok);
  --ag-data-fundo: var(--ok-soft);
  --ag-pagina-fim: var(--surface);
  --ag-pagina-topo: var(--soft);
  --ag-avatar: var(--ok-soft);
  --ag-avatar-texto: var(--ok);
  --ag-convite-texto: var(--ok);
  --ag-ativa-fundo: var(--ok-soft);
  --ag-ativa: var(--ok);
  --ag-pausada-fundo: var(--aviso-soft);
  --ag-pausada: var(--aviso);
  --ag-link-borda: var(--line);
  --ag-acao-borda: var(--line);
  --ag-fechar: var(--soft);
  --ag-tipo-borda: var(--line);
  --ag-tipo-icone: var(--soft);
  --ag-escolha-borda: #3f8f7b; /* verde */
  --ag-escolha: var(--ok-soft);
  --ag-escolha-texto: var(--ok);
  --ag-escolha-icone: #1f4a40; /* verde-escuro */
  --ag-escolha-icone-texto: var(--ok);
  --ag-rapidas-linha: var(--line);
  --ag-rapida-borda: var(--line);
  --ag-perigo-borda: #5a3230; /* vermelho-escuro */
  --ag-perigo: var(--ruim-soft);
  --ag-perigo-texto: var(--ruim);
  --ag-pergunta-borda: #5a4520; /* âmbar-escuro */
  --ag-pergunta: var(--aviso-soft);
  --ag-pergunta-texto: #ecd9a8; /* creme */
  --ag-previa-borda: #1f4a40; /* verde-escuro */
  --ag-previa: var(--ok-soft);
  --ag-previa-link: var(--ok);
  --ag-prefixo: var(--soft);
  --ag-pilula-ativa-borda: #3f8f7b; /* verde */
  --ag-pilula-ativa: var(--ok-soft);
  --ag-pilula-ativa-texto: var(--ok);
  --ag-chave: var(--line-forte);
}

/* AS MESMAS MARGENS DAS OUTRAS TELAS (Henrique, 22/10/2026: "nos espaçamentos e margens ela
 * está fora do padrão"): sem recuo e largura máxima próprios — quem dá a margem é a moldura,
 * como na Visão geral desde 16/10 — e um vão só entre os blocos. */
.agenda-v2 {
  display: grid;
  gap: 14px;
  color: var(--ag-texto);
}

/* ------------------------------------------------------------------ o topo */

.ag-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}
.ag-sobrelinha {
  color: var(--sag-green, #15866d); /* verde */
  font-size: var(--texto-pp);
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.ag-topo h2 { margin: 4px 0 7px; font-size: 27px; font-weight: 750; letter-spacing: -.6px; }
.ag-topo p { margin: 0; color: var(--ag-apagado); font-size: 12.5px; }
.ag-topo-acoes { display: flex; gap: 8px; }

/* ------------------------------------------------------------------ os quatro cartões */

.ag-metricas {
  display: grid;
  grid-template-columns: repeat(4, minmax(185px, 1fr));
  gap: 13px;
}
.ag-metrica {
  text-align: left;
  min-height: 106px;
  padding: 16px 18px;
  border: 1px solid var(--ag-linha);
  border-radius: 14px;
  background: var(--ag-cartao);
  cursor: pointer;
  font: inherit;
  box-shadow: 0 3px 13px rgba(25, 55, 45, .035); /* sombra verde-escura */
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ag-metrica:hover {
  border-color: var(--ag-metrica-realce);
  box-shadow: 0 8px 25px rgba(25, 55, 45, .08); /* sombra verde-escura */
  transform: translateY(-2px);
}
.ag-metrica span { display: block; margin-bottom: 9px; color: var(--ag-rotulo); font-size: 11px; font-weight: 700; }
.ag-metrica strong { display: block; font-size: 23px; line-height: 1.05; letter-spacing: -.4px; }
.ag-metrica small { display: block; margin-top: 8px; color: var(--ag-apagado); font-size: var(--texto-pp); }
/* ATRASADAS: só o número em vermelho, sem fundo rosado — a palavra "Atrasadas" já está no cartão. */
.ag-metrica.ag-atencao strong { color: var(--ag-vermelho); }

/* ------------------------------------------------------------------ a casca e a barra */

.ag-casca {
  border: 1px solid var(--ag-linha);
  border-radius: 16px;
  background: var(--ag-cartao);
  box-shadow: 0 5px 22px rgba(26, 59, 48, .05); /* sombra verde-escura */
  overflow: hidden;
}
.ag-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 13px;
  border-bottom: 1px solid var(--ag-linha);
}
.ag-navegar { display: flex; align-items: center; gap: 4px; margin-right: 5px; }
.ag-navegar button {
  /* altura: `.barra-de-controles` (V.1) */
  padding: 0 10px;
  border: 1px solid var(--ag-controle-borda);
  border-radius: 8px;
  background: var(--ag-botao);
  color: var(--ag-botao-texto);
  font: 650 11px Inter, sans-serif;
  cursor: pointer;
}
.ag-navegar button:first-child,
.ag-navegar button:nth-child(3) { width: 34px; padding: 0; font-size: 18px; }
.ag-navegar strong { min-width: 116px; margin-left: 7px; font-size: 11px; white-space: nowrap; }
.ag-barra > select,
.ag-busca {
  border: 1px solid var(--ag-controle-borda);
  border-radius: 9px;
  background: var(--ag-controle);
  color: var(--ag-controle-texto);
  font: 600 11px Inter, sans-serif;
  outline: none;
}
.ag-barra > select { max-width: 168px; padding: 0 27px 0 10px; }
.ag-busca { flex: 1; min-width: 190px; max-width: 290px; padding: 0 10px; }
.ag-busca span { color: var(--ag-lupa); font-size: 16px; }
.ag-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 11px Inter, sans-serif; }
.ag-barra > select:focus,
.ag-busca:focus-within { border-color: var(--ag-foco); box-shadow: 0 0 0 3px rgba(34, 107, 87, .08); } /* anel verde */
.ag-vista { display: flex; margin-left: auto; padding: 3px; border: 1px solid var(--ag-controle-borda); border-radius: 9px; background: var(--ag-fundo); }
.ag-vista button {
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ag-vista-texto);
  font: 650 var(--texto-pp) Inter, sans-serif;
  cursor: pointer;
}
.ag-vista button.ativa { background: var(--ag-cartao); color: var(--sag-green, #15866d); box-shadow: 0 2px 7px rgba(22, 52, 42, .09); } /* sombra verde-escura */

/* ------------------------------------------------------------------ a semana */

.ag-conteudo { display: grid; grid-template-columns: minmax(0, 1fr) 270px; min-height: 570px; }
.ag-principal { min-width: 0; padding: 13px; background: var(--ag-fundo); overflow: hidden; }
/* A SEMANA SEMPRE CABE (22/10/2026): sete colunas que dividem a largura, sem o domingo
 * escondido atrás de rolagem. */
.ag-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding-bottom: 5px; }
.ag-dia {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 530px;
  padding: 8px;
  border: 1px solid var(--ag-dia-borda);
  border-radius: 12px;
  background: var(--ag-dia);
}
.ag-dia.hoje { border-color: var(--ag-hoje-borda); background: var(--ag-hoje); box-shadow: inset 0 0 0 1px var(--ag-hoje-anel); }
.ag-dia > header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 8px;
  padding: 3px 3px 8px;
  border-bottom: 1px solid var(--ag-divisa);
}
.ag-dia > header span { color: var(--ag-dia-nome); font-size: var(--texto-pp); font-weight: 800; text-transform: uppercase; }
.ag-dia > header b { grid-row: 1 / 3; grid-column: 2; font-size: 19px; color: var(--ag-forte); }
.ag-dia > header small { margin-top: 2px; color: var(--ag-apagado); font-size: var(--texto-pp); }
.ag-dia.hoje > header b {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  background: var(--sag-green, #15866d); /* verde */
  color: #fff; /* branco */
  font-size: 14px;
}
.ag-do-dia { display: flex; flex-direction: column; gap: 7px; flex: 1; max-height: 455px; overflow-y: auto; scrollbar-width: thin; }
.ag-livre { margin: 0; padding: 24px 5px; color: var(--ag-apagado); font-size: var(--texto-pp); text-align: center; }
.ag-adicionar {
  width: 100%;
  margin-top: 7px;
  padding: 8px;
  border: 1px dashed var(--ag-tracejado);
  border-radius: 8px;
  background: transparent;
  color: var(--ag-tracejado-texto);
  font: 650 var(--texto-pp) Inter, sans-serif;
  cursor: pointer;
}
.ag-adicionar:hover { border-color: var(--ag-tracejado-realce); color: var(--sag-green, #15866d); background: var(--ag-adicionar-realce); } /* verde */

/* O cartão: barra à esquerda pela cor do tipo, sigla com o nome no title. */
.ag-cartao {
  position: relative;
  padding: 9px;
  border: 1px solid var(--ag-cartao-borda);
  border-radius: 10px;
  background: var(--ag-cartao);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(19, 48, 38, .04); /* sombra verde-escura */
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ag-cartao:hover,
.ag-cartao:focus-visible { border-color: var(--ag-cartao-realce); box-shadow: 0 7px 18px rgba(19, 48, 38, .09); transform: translateY(-1px); outline: none; } /* sombra verde-escura */
.ag-cartao::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #748d84; /* cinza */
}
.ag-cartao.tipo-reuniao::before { background: #4c83bc; } /* azul */
.ag-cartao.tipo-ligacao::before { background: #846cbd; } /* violeta */
.ag-cartao.tipo-retorno::before { background: #d39a39; } /* âmbar */
.ag-cartao.atrasada { border-color: var(--ag-atrasada-borda); background: var(--ag-atrasada); }
/* SÓ A CONCLUÍDA É RISCADA. A cancelada fica apagada, sem risco — e a palavra da situação
 * continua no cartão nas duas. */
.ag-cartao.situacao-concluida,
.ag-cartao.situacao-cancelada { opacity: .66; }
.ag-cartao.situacao-concluida > strong { text-decoration: line-through; }
.ag-hora { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.ag-hora > b {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--ag-sigla);
  color: var(--ag-sigla-texto);
  font-size: var(--texto-selo);
}
.tipo-reuniao .ag-hora > b { background: var(--ag-azul-fundo); color: var(--ag-azul); }
.tipo-ligacao .ag-hora > b { background: var(--ag-violeta-fundo); color: var(--ag-violeta); }
.tipo-retorno .ag-hora > b { background: var(--ag-ambar-fundo); color: var(--ag-ambar); }
.ag-hora > span { display: flex; flex-direction: column; color: var(--ag-hora-texto); font-size: var(--texto-pp); font-weight: 750; }
.ag-hora small { color: var(--ag-apagado); font-size: var(--texto-selo); font-weight: 500; }
.ag-situacao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--ag-pendente-texto);
  font-size: var(--texto-selo);
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
.ag-situacao i { width: 6px; height: 6px; border-radius: 50%; background: var(--ag-pendente-ponto); }
.situacao-concluida .ag-situacao { color: var(--ag-feita-texto); }
.situacao-concluida .ag-situacao i { background: var(--ag-feita-ponto); }
.situacao-cancelada .ag-situacao,
.situacao-nao_compareceu .ag-situacao { color: var(--ag-cancelada-texto); }
.situacao-cancelada .ag-situacao i,
.situacao-nao_compareceu .ag-situacao i { background: var(--ag-cancelada-ponto); }
.atrasada .ag-situacao { color: var(--ag-atrasada-texto); }
.atrasada .ag-situacao i { background: var(--ag-atrasada-ponto); box-shadow: 0 0 0 3px #cd5e5718; } /* halo vermelho translúcido */
.ag-cartao > strong { display: block; margin-bottom: 4px; color: var(--ag-cartao-titulo); font-size: var(--texto-pp); line-height: 1.35; }
.ag-pessoa { display: block; overflow: hidden; color: var(--ag-apagado); font-size: var(--texto-selo); white-space: nowrap; text-overflow: ellipsis; }
.ag-cartao footer { display: flex; align-items: center; gap: 5px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--ag-linha-suave); }
.ag-cartao footer > span { flex: 1; overflow: hidden; color: var(--ag-cartao-dono); font-size: var(--texto-selo); white-space: nowrap; text-overflow: ellipsis; }
.ag-cartao footer button {
  padding: 4px 5px;
  border: 0;
  border-radius: 5px;
  background: var(--ag-concluir);
  color: var(--ag-concluir-texto);
  font: 750 var(--texto-selo) Inter, sans-serif;
  cursor: pointer;
}
.ag-cartao footer button:hover { background: var(--ag-concluir-realce); }

/* ------------------------------------------------------------------ a lista */

.ag-lista { overflow: hidden; border: 1px solid var(--ag-borda); border-radius: 11px; background: var(--ag-cartao); }
.ag-lista > header,
.ag-linha {
  display: grid;
  grid-template-columns: 42px 1.4fr 1.1fr .8fr .75fr;
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
}
.ag-lista > header {
  background: var(--ag-fundo);
  color: var(--ag-cabecalho-texto);
  font-size: var(--texto-pp);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ag-linha {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--ag-linha-suave);
  background: var(--ag-cartao);
  color: var(--ag-linha-texto);
  font: 500 var(--texto-pp) Inter, sans-serif;
  text-align: left;
  cursor: pointer;
}
.ag-linha:hover { background: var(--ag-linha-realce); }
.ag-linha.atrasada { background: var(--ag-atrasada); }
.ag-linha > span:nth-child(2),
.ag-linha > span:nth-child(3) { display: flex; flex-direction: column; gap: 3px; }
.ag-linha strong { color: var(--ag-titulo); font-size: var(--texto-pp); }
.ag-linha small { color: var(--ag-apagado); font-size: var(--texto-pp); }
.ag-tipo {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: var(--ag-tipo-fundo);
  color: var(--ag-verde-texto);
  font-size: var(--texto-selo);
  font-weight: 800;
}
.ag-tipo svg, .ag-hora b svg { width: 15px; height: 15px; }
.ag-tipo.tipo-reuniao { background: var(--ag-azul-fundo); color: var(--ag-azul); }
.ag-tipo.tipo-ligacao { background: var(--ag-violeta-fundo); color: var(--ag-violeta); }
.ag-tipo.tipo-retorno { background: var(--ag-ambar-fundo); color: var(--ag-ambar); }
.ag-selo {
  display: inline-flex;
  width: max-content;
  padding: 5px 7px;
  border-radius: 99px;
  background: var(--ag-selo-pendente);
  color: var(--ag-ambar);
  font-size: var(--texto-pp);
  font-weight: 800;
}
.ag-selo.concluida { background: var(--ag-selo-feita); color: var(--ag-selo-feita-texto); }
.ag-selo.cancelada,
.ag-selo.nao_compareceu,
.ag-selo.atrasada { background: var(--ag-vermelho-fundo); color: var(--ag-selo-vermelho); }
.ag-lista-vazia { margin: 0; padding: 30px; color: var(--ag-apagado); font-size: var(--texto-pp); text-align: center; }

/* ------------------------------------------------------------------ a coluna lateral */

.ag-lado { padding: 14px 13px; border-left: 1px solid var(--ag-linha); background: var(--ag-cartao); }
.ag-lateral { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--ag-borda); border-radius: 13px; background: var(--ag-cartao); }
.ag-lateral > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px;
  border-bottom: 1px solid var(--ag-linha-suave);
}
.ag-lateral > header span {
  display: block;
  margin-bottom: 3px;
  color: var(--ag-apagado);
  font-size: var(--texto-selo);
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.ag-lateral > header h3 { margin: 0; color: var(--ag-titulo); font-size: 11px; }
.ag-lateral > header button {
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border: 0;
  border-radius: 7px;
  background: var(--ag-mais-fundo);
  color: var(--ag-mais-texto);
  font: 700 var(--texto-pp) Inter, sans-serif;
  cursor: pointer;
}
.ag-proximas { padding: 5px 10px 9px; }
.ag-proximas > button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 2px;
  border: 0;
  border-bottom: 1px solid var(--ag-linha-suave);
  background: var(--ag-cartao);
  text-align: left;
  cursor: pointer;
}
.ag-proximas > button:last-child { border-bottom: 0; }
.ag-proximas > button > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ag-proximas strong { overflow: hidden; color: var(--ag-proxima-texto); font-size: var(--texto-pp); white-space: nowrap; text-overflow: ellipsis; }
.ag-proximas small { color: var(--ag-apagado); font-size: var(--texto-selo); }
.ag-palavra-atrasada { color: var(--ag-atrasada-texto); font-style: normal; font-weight: 800; }
.ag-data {
  display: grid;
  place-items: center;
  flex: 0 0 33px;
  height: 37px;
  border-radius: 8px;
  background: var(--ag-data-fundo);
  color: var(--ag-verde-texto);
}
.ag-data b { font-size: 11px; line-height: 1; }
.ag-data small { font-size: var(--texto-selo); text-transform: uppercase; }
.ag-data.atrasada { background: var(--ag-vermelho-fundo); color: var(--ag-atrasada-texto); }
.ag-lado-vazio { margin: 0; padding: 22px 14px; color: var(--ag-apagado); font-size: var(--texto-pp); text-align: center; }

.ag-pagina { background: linear-gradient(160deg, var(--ag-controle), var(--ag-pagina-fim)); }
.ag-pagina > header { background: var(--ag-pagina-topo); }
.ag-dono { display: flex; align-items: center; gap: 8px; padding: 13px 12px 10px; }
.ag-dono > b {
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  height: 31px;
  border-radius: 9px;
  background: var(--ag-avatar);
  color: var(--ag-avatar-texto);
  font-size: var(--texto-pp);
}
.ag-dono > span { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ag-dono strong { overflow: hidden; color: var(--ag-forte); font-size: var(--texto-pp); white-space: nowrap; text-overflow: ellipsis; }
.ag-dono small { color: var(--ag-apagado); font-size: var(--texto-selo); }
.ag-dono > i { padding: 4px 6px; border-radius: 99px; font-size: var(--texto-selo); font-style: normal; font-weight: 700; }
.ag-dono > i.ativa { background: var(--ag-ativa-fundo); color: var(--ag-ativa); }
.ag-dono > i.pausada { background: var(--ag-pausada-fundo); color: var(--ag-pausada); }
.ag-link { display: block; padding: 0 12px 11px; color: var(--ag-link-rotulo); font-size: var(--texto-pp); }
.ag-link > div { margin-top: 6px; gap: 0; flex-wrap: nowrap; }
.ag-link input {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--ag-link-borda);
  border-radius: 7px 0 0 7px;
  background: var(--ag-cartao);
  color: var(--ag-link-texto);
  font: 500 var(--texto-pp) Inter, sans-serif;
}
.ag-link button {
  padding: 0 10px;
  border: 0;
  border-radius: 0 7px 7px 0;
  background: var(--sag-green, #15866d); /* verde */
  color: #fff; /* branco */
  font: 700 var(--texto-pp) Inter, sans-serif;
  cursor: pointer;
}
.ag-pagina-acoes { display: flex; gap: 7px; padding: 0 12px 13px; }
.ag-pagina-acoes a,
.ag-pagina-acoes button {
  flex: 1;
  padding: 7px;
  border: 1px solid var(--ag-acao-borda);
  border-radius: 7px;
  background: var(--ag-cartao);
  color: var(--ag-acao-texto);
  font: 700 var(--texto-selo) Inter, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.ag-nova-agenda {
  display: block;
  width: calc(100% - 24px);
  margin: 0 12px 13px;
  padding: 7px;
  border: 1px dashed var(--ag-tracejado);
  border-radius: 7px;
  background: transparent;
  color: var(--ag-tracejado-texto);
  font: 700 var(--texto-selo) Inter, sans-serif;
  cursor: pointer;
}
.ag-nova-agenda:hover { border-color: var(--ag-tracejado-realce); color: var(--sag-green, #15866d); } /* verde */
/* SEM AGENDA NENHUMA: o convite para criar a do closer, no lugar do link. */
.ag-sem-agenda { padding: 22px 15px; text-align: center; }
.ag-sem-agenda > b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0 auto 9px;
  border-radius: 11px;
  background: var(--ag-avatar);
  color: var(--ag-convite-texto);
  font-size: 14px;
}
.ag-sem-agenda strong { display: block; font-size: var(--texto-pp); }
.ag-sem-agenda p { margin: 6px 0 10px; color: var(--ag-apagado); font-size: var(--texto-selo); }