:root {
  /* Diz ao navegador em que tema pintar scrollbar, caret e controles nativos.
     Sem isso, no escuro a barra de rolagem e o seletor de data continuam claros. */
  color-scheme: light;
  --ground: #F4EDE4;
  --ground-alt: #EBE0D3;
  --surface: #FFFFFF;
  --ink: #221812;
  --ink-2: #5A4638;
  --ink-3: #6E5C4E;
  --accent: #A3450B;
  --accent-suave: rgba(163, 69, 11, 0.1);
  --linha: rgba(34, 24, 18, 0.12);
  --linha-forte: rgba(34, 24, 18, 0.26);
  /* Verde, âmbar e vermelho são sinal semântico: o matiz é o mesmo nos dois
     temas, só a luminosidade muda, senão o verde escuro some no fundo escuro. */
  --ok: #176B48;
  --atencao: #805700;
  --risco: #B23A22;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, sans-serif;
  --raio: 8px;
  /* Escala fechada: 4 / 8 / 12 / 16 / 24 / 32. Valor fora dela é decisão não
     tomada, e é o que fazia o painel parecer montado no olho. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  /* Duas camadas por sombra: uma curta para o recorte, outra larga para o ar. */
  --sombra-1: 0 1px 2px rgba(34, 24, 18, 0.05), 0 1px 3px rgba(34, 24, 18, 0.04);
  --sombra-2: 0 4px 10px rgba(34, 24, 18, 0.07), 0 1px 3px rgba(34, 24, 18, 0.05);
  /* Curva forte de saída: a padrão do CSS é fraca demais para leitura de
     intenção. Só ela é usada aqui, porque o painel quase não anima. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  /* No escuro a sombra some contra o fundo; a elevação vem de superfície mais
     clara, então a sombra fica só como assentamento. */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 6px 16px rgba(0, 0, 0, 0.45);
  --ground: #14100C;
  --ground-alt: #1B1611;
  --surface: #1E1811;
  --ink: #F3E9DD;
  --ink-2: #BEAC9C;
  --ink-3: #9C8A79;
  --accent: #FF9052;
  --accent-suave: rgba(255, 144, 82, 0.14);
  --linha: rgba(243, 233, 221, 0.14);
  --linha-forte: rgba(243, 233, 221, 0.28);
  --ok: #4CBD8A;
  --atencao: #E0AC2B;
  --risco: #F0765C;
}

* { box-sizing: border-box; }

html {
  /* Remove o atraso de 300ms do duplo toque e o flash cinza padrão do iOS. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 18%, transparent);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  /* rem, não px: quem aumenta o corpo de texto no navegador precisa ver
     diferença aqui também. */
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Tracking é específico do tamanho: texto grande pede aperto, texto pequeno
   pede folga. Um letter-spacing único estaria errado em algum lugar. */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; font-optical-sizing: auto; }
h1 {
  font-size: 1.8rem;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variation-settings: "WONK" 1;
  text-wrap: balance;
}
h2 { font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.01em; }
h3 { font-size: 0.95rem; letter-spacing: -0.005em; }
a { color: var(--accent); }
p { margin: 0; }

/* Foco: um anel só, em qualquer elemento, sempre visível nos dois temas. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sem movimento para quem pediu sem movimento. Cor e borda continuam mudando:
   são o que informa o estado, o transform é que some. */
/* Movimento reduzido: cor e fundo continuam mudando, porque é o que informa
   estado; o que sai é deslocamento. */
@media (prefers-reduced-motion: reduce) {
  .botao { transition: border-color 120ms ease, color 120ms ease; }
  .botao:active { transform: none; }
}

/* Casca: menu lateral fixo no desktop, barra rolável no celular */

.lateral {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 216px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 14px;
  background: var(--surface);
  border-right: 1px solid var(--linha);
  z-index: 10;
}
/* Entrada do painel: marca de um lado, formulário do outro */

body.sem-moldura { background: var(--surface); }
body.sem-moldura main { margin: 0; padding: 0; max-width: none; }

.portao {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100dvh;
}

/* O gradiente é o da identidade (01.png da pasta de marca), na diagonal em que
   ele foi desenhado. A marca é branca porque foi feita para fundo escuro. */
.portao-marca {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 64px 56px;
  /* A cor entra primeiro e fica embaixo: se a fotografia demorar ou falhar, a
     tela continua sendo a tela, e não um retângulo branco com texto branco. */
  background-color: #1B1109;
  background-image:
    linear-gradient(96deg, rgba(20, 12, 6, 0.78) 0%, rgba(20, 12, 6, 0.42) 46%, rgba(20, 12, 6, 0.06) 100%),
    url("/marca/entrada.jpg");
  background-size: cover;
  background-position: 62% center;
  color: #FFF6EF;
}
.portao-logo {
  display: block;
  width: min(268px, 62%);
  height: auto;
  margin-bottom: 4px;
}
.portao-sistema {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #FFF6EF;
}
.portao-frase {
  margin: 14px 0 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.6;
  /* Não é branco puro: sobre laranja, o branco cheio vibra e cansa. */
  color: rgba(255, 246, 239, 0.86);
}

.portao-forma {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 40px;
  background: var(--surface);
}
.portao-conteudo { width: 100%; max-width: 360px; }
.portao-conteudo h1 { margin: 0 0 6px; }
.portao-conteudo .subtitulo { margin-bottom: 26px; }
.portao-conteudo .empilhado { max-width: none; }
.portao-conteudo .botao-primario { margin-top: 4px; }
.portao-esqueci {
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-3);
}
.portao-esqueci:hover { color: var(--accent); }
/* Ancorado na página, não na coluna: no celular a coluna do formulário
   começa no meio da tela, e o botão cairia em cima do título. */
.portao-tema { position: absolute; top: 16px; right: 16px; }

/* Duas colunas num celular esmagam as duas: a marca vira faixa no topo. */
@media (max-width: 860px) {
  /* auto 1fr: a marca ocupa o que precisa e o formulário fica com o resto.
     Sem isso as duas faixas dividem a tela ao meio e sobra laranja demais. */
  .portao { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* Sobre fotografia, cor de texto sozinha não garante nada: o ponto de luz da
     imagem passa por baixo do botão e ele some. O fundo próprio garante. */
  .portao-tema {
    color: rgba(255, 246, 239, 0.96);
    background: rgba(18, 11, 6, 0.55);
    border-color: transparent;
    border-radius: 999px;
    padding: 7px 14px;
  }
  .portao-marca {
    padding: 34px 28px 30px;
    gap: 6px;
    /* Na faixa larga e baixa do celular, o ponto de luz da fotografia sai do
       enquadramento: puxar o corte para a direita traz ele de volta. */
    background-position: 78% 42%;
    background-image:
      linear-gradient(104deg, rgba(20, 12, 6, 0.8) 0%, rgba(20, 12, 6, 0.5) 52%, rgba(20, 12, 6, 0.12) 100%),
      url("/marca/entrada.jpg");
  }
  .portao-logo { width: 172px; }
  .portao-sistema { font-size: 17px; }
  .portao-frase { display: none; }
  .portao-forma { padding: 34px 28px 48px; align-items: flex-start; }
  .portao-conteudo { max-width: 420px; margin: 0 auto; }
}

/* Marca: o desenho entregue pelo designer, com o nome do sistema ao lado.
   A troca por tema é feita em CSS, e não em script, senão o tema escuro pisca
   a marca preta no primeiro quadro. */
.marca {
  display: flex;
  /* Empilhado, e não lado a lado: a lateral tem 216px e a marca mais o nome do
     sistema numa linha só passam da borda. Também é como a marca aparece na
     tela de entrada, então o painel inteiro fala do mesmo jeito. */
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-decoration: none;
  padding: 6px 10px 10px;
}
.marca-desenho { display: block; flex: 0 0 auto; }
.marca-desenho img { display: block; width: 100%; height: auto; }
.marca-lateral .marca-desenho { width: 104px; }
.marca-topo .marca-desenho { width: 96px; }
.marca-branca { display: none; }
[data-theme="dark"] .marca-tinta { display: none; }
[data-theme="dark"] .marca-branca { display: block; }
.marca-sistema {
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  /* A marca tem hairlines finíssimas; o nome do sistema não pode competir. */
  position: relative;
  top: -1px;
}
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.menu-grupo { margin: 14px 0 4px; padding: 0 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.menu-grupo:first-child { margin-top: 0; }
.lateral nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--raio);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 120ms ease, color 120ms ease;
}
.lateral nav a svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lateral nav a[aria-current="page"] { background: var(--accent-suave); color: var(--accent); }
/* Item apertado: a marca aparece no toque, antes da página nova chegar. O
   ponto só entra depois de 200ms para que a navegação rápida não pisque. */
.lateral nav a.indo { background: var(--accent-suave); color: var(--accent); }
.lateral nav a.indo::after {
  content: "";
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  animation: ponto-indo 900ms ease-in-out 200ms infinite;
}
@keyframes ponto-indo {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .lateral nav a.indo::after { animation: none; opacity: 0.6; }
}
.lateral .rodape-lateral {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px 0;
  border-top: 1px solid var(--linha);
}
.dica {
  margin: 5px 0 0;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.45;
}
.passos {
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}
.passos code {
  word-break: break-all;
}
.aviso-ok {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: var(--raio);
  background: rgba(23, 107, 72, 0.1);
  color: var(--ok);
  font-size: 13px;
}
/* Rótulo em vez do endereço: o e-mail é longo, quebra em duas linhas e não diz
   para onde o link leva. Quem quiser conferir com qual conta está passa o mouse,
   e a própria tela de destino mostra o endereço inteiro. */
.lateral .usuario {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--raio);
  padding: 9px 10px;
  margin: 0 0 2px;
  transition: background 120ms ease, color 120ms ease;
}
.lateral .usuario svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lateral .usuario:hover,
.lateral .usuario:focus-visible { color: var(--accent); background: var(--accent-suave); }
.lateral .acoes-lateral { display: flex; gap: 6px; flex-wrap: wrap; }

body.com-lateral main { margin-left: 216px; }

.topo-simples {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--linha);
  background: var(--surface);
}

main {
  padding: var(--e5) var(--e6) 60px;
  max-width: 1320px;
  /* Notch e barra de gestos do iPhone quando o painel abre em tela cheia. */
  padding-left: max(30px, env(safe-area-inset-left));
  padding-right: max(30px, env(safe-area-inset-right));
  padding-bottom: max(60px, env(safe-area-inset-bottom));
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--raio);
  padding: 10px 14px;
  color: var(--ink);
  text-decoration: none;
}
.pular-para-conteudo:focus { left: 8px; }

/* Título de página */

.topo-pagina {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: var(--e4);
  margin-bottom: var(--e5);
  border-bottom: 1px solid var(--linha);
}
.topo-pagina .acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.olho {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.subtitulo { color: var(--ink-2); font-size: 14px; margin-top: 6px; max-width: 68ch; }

/* Botões */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--linha-forte);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--raio);
  padding: 7px 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: transform 140ms var(--ease-out), border-color 120ms ease, color 120ms ease;
}
.botao:active { transform: scale(0.975); }
.botao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.botao-primario {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFF6EF;
  font-weight: 600;
}
[data-theme="dark"] .botao-primario { color: #1A120C; }
.botao-discreto { border-color: transparent; background: transparent; color: var(--ink-2); }

/* Minha conta: identidade, senha, duas etapas e sessão */

.cabecalho-secao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.cabecalho-secao h2 { margin: 0; }

.etiqueta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ground-alt);
  color: var(--ink-3);
  white-space: nowrap;
}
.etiqueta-ok { background: rgba(23, 107, 72, 0.12); color: var(--ok); }

.caixa-de-marcar {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.caixa-de-marcar input {
  width: auto;
  margin: 2px 0 0;
  /* 16px é o alvo mínimo confortável de toque para uma caixa isolada. */
  min-width: 16px;
  min-height: 16px;
  accent-color: var(--accent);
}

.lista-dados {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0 0 14px;
  font-size: 13px;
}
.lista-dados dt { color: var(--ink-3); }
.lista-dados dd { margin: 0; color: var(--ink); }

.botao-perigo { border-color: var(--risco); color: var(--risco); background: transparent; }
.botao-perigo:hover { background: rgba(178, 58, 34, 0.08); }

.linha-de-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* O QR precisa de fundo branco mesmo no tema escuro: leitor de câmera espera
   contraste claro-escuro nessa ordem, e invertido muitos aparelhos não leem. */
.ativacao-2fa {
  display: flex;
  gap: var(--e5);
  flex-wrap: wrap;
  align-items: flex-start;
}
.qr-caixa {
  background: #FFFFFF;
  padding: 12px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  flex: 0 0 auto;
}
.qr-caixa .qr { display: block; width: 180px; height: 180px; }

.segredo-totp {
  margin: 0 0 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.campo-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px;
  letter-spacing: 0.34em;
  text-align: center;
  max-width: 200px;
}

@media (max-width: 560px) {
  .ativacao-2fa { gap: var(--e4); }
  .qr-caixa .qr { width: 148px; height: 148px; }
}

/* Cartão */

.cartao {
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: var(--e5);
  margin-bottom: var(--e4);
  box-shadow: var(--sombra-1);
}
.cartao > h2 + .subtitulo { margin-bottom: 14px; }

/* Tabela de listagem */

/* Tabela com muitas colunas rola dentro do próprio contêiner. Sem isso ela
   empurra a página inteira e o painel ganha rolagem horizontal em 1024px. */
.tabela-larga { overflow-x: auto; border-radius: var(--raio); }
.tabela-larga table.densa { min-width: 720px; }
/* Tabela de poucas colunas cabe em meia tela: 720px a forçaria a rolar à toa. */
.tabela-larga table.densa.curta { min-width: 520px; }
@media (max-width: 720px) {
  .tabela-larga table.densa { min-width: 0; }
}

table.densa {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-1);
}
table.densa th, table.densa td {
  text-align: left;
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linha);
  font-size: 13.5px;
  vertical-align: middle;
}
table.densa thead th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
  font-weight: 600;
  background: var(--ground-alt);
  padding-top: 9px;
  padding-bottom: 9px;
  white-space: nowrap;
}
table.densa tbody tr:last-child td { border-bottom: none; }
/* Sem content-visibility aqui: a altura reservada (44px) não bate com a linha
   virada cartão no celular (~250px) e as linhas renderizam sobrepostas até o
   navegador alcançá-las. O ganho não existe em 60 linhas; o defeito, sim. */
table.densa tbody tr { transition: background 120ms ease; }
/* Todo hover mora aqui: no toque o estado fica grudado depois do tap e o
   usuário lê isso como seleção. */
@media (hover: hover) and (pointer: fine) {
  .botao:hover { border-color: var(--accent); color: var(--accent); }
  .botao-primario:hover { color: #FFF6EF; filter: brightness(1.06); }
  table.densa td.principal a:hover { color: var(--accent); }
  table.densa tbody tr:hover { background: var(--accent-suave); }
  .lateral nav a:hover { background: var(--ground-alt); color: var(--ink); }
      }
table.densa td.numero { text-align: right; font-variant-numeric: tabular-nums; }
table.densa td.principal { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
table.densa td { overflow-wrap: anywhere; }
table.densa td.principal a { text-decoration: none; color: var(--ink); }
table.densa td.principal .secundario {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 1px;
}
table.densa tbody th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  font-weight: 600;
  white-space: nowrap;
  width: 190px;
}

/* Células: a mesma unidade conta semana, pergunta e distância */

.celulas { display: flex; gap: 2px; align-items: flex-end; }
.celulas .grupo { display: flex; gap: 2px; }
.celulas .grupo + .grupo { margin-left: 7px; }
.celula {
  width: 4px;
  height: 13px;
  border-radius: 1px;
  background: var(--linha);
}
.celula.cheia { background: var(--accent); }
.celula.ok { background: var(--ok); }
.celula.risco {
  background: var(--risco);
  /* Além da cor, um entalhe: verde e vermelho são idênticos para quem tem
     daltonismo vermelho-verde e em qualquer impressão em preto e branco. */
  background-image: linear-gradient(var(--surface), var(--surface));
  background-size: 100% 2px;
  background-position: center;
  background-repeat: no-repeat;
}
.celula.atencao { background: var(--atencao); }
.celula.atual { box-shadow: inset 0 0 0 1px var(--ink); }
.celulas.larga .celula { width: 9px; height: 20px; border-radius: 2px; }
.celulas.mini { gap: 1px; }
.celulas.mini .celula { width: 3px; height: 11px; }
.celulas.mini .grupo { gap: 1px; }
.celulas.mini .grupo + .grupo { margin-left: 5px; }

/* Chips de estado */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  color: var(--ink-2);
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.chip.respondido, .chip.verde { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.chip.em_andamento, .chip.amarelo { color: var(--atencao); border-color: color-mix(in srgb, var(--atencao) 45%, transparent); }
.chip.vermelho, .chip.expirado { color: var(--risco); border-color: color-mix(in srgb, var(--risco) 45%, transparent); }
.chip.pendente { color: var(--ink-3); }
.chip.neutro::before { display: none; }

.ponto-saude {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
.ponto-saude.verde { background: var(--ok); }
.ponto-saude.amarelo { background: var(--atencao); }
.ponto-saude.vermelho { background: var(--risco); }

/* Formulários */

form.empilhado { display: flex; flex-direction: column; gap: 14px; max-width: 440px; }
form.linha { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
form.linha input { width: auto; }
form.linha select { width: auto; }
label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  margin-bottom: 5px;
  font-weight: 500;
}
input, select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-suave);
}
/* Caixa de marcar não é campo de texto: sem o padding, a borda e a largura de
   cima. Herdando aquilo, ela mudava de tamanho ao ganhar e perder o foco, a
   página dava um salto, e o primeiro clique no botão de salvar caía fora dele. */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  padding: 0;
  border: none;
  flex: none;
  accent-color: var(--accent);
  transition: none;
}
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Gráficos: o SVG do servidor sai de cena quando o interativo assume, e volta
   na impressão (o canvas do ECharts não imprime bem em papel). */

.grafico-area .grafico-interativo { display: none; width: 100%; }
.grafico-area.js-pronto .grafico-interativo { display: block; }
.grafico-area.js-pronto .grafico-estatico { display: none; }
.grafico-interativo.baixo { height: 140px; }
.grafico-interativo.medio { height: 200px; }
.grafico-interativo.alto { height: 300px; min-height: 240px; }

body.imprimindo .grafico-area .grafico-interativo { display: none; }
body.imprimindo .grafico-area .grafico-estatico { display: block; }

/* Gráficos */

.grafico { padding: 4px 0 2px; }
.grafico.rolavel { overflow-x: auto; }
.grafico svg { display: block; }
.g-ok { fill: var(--ok); }
.g-risco { fill: var(--risco); }
.g-atencao { fill: var(--atencao); }
.g-accent { fill: var(--accent); }
.g-neutro { fill: color-mix(in srgb, var(--ink-3) 32%, transparent); }
.g-trilho { fill: color-mix(in srgb, var(--ink-3) 16%, transparent); }
.g-base { stroke: var(--linha); stroke-width: 1; }
.g-eixo { fill: var(--ink-3); font-size: 10px; font-family: var(--sans); }
.g-eixo.futuro { fill: color-mix(in srgb, var(--ink-3) 65%, transparent); }
.g-valor { fill: var(--ink-2); font-size: 10.5px; font-family: var(--sans); font-weight: 600; }
.g-trilho-linha { stroke: color-mix(in srgb, var(--ink-3) 20%, transparent); }
.g-accent-linha { stroke: var(--accent); }

.barras { display: flex; flex-direction: column; gap: 9px; }
.barra-linha { display: grid; grid-template-columns: minmax(90px, 150px) 1fr auto; gap: 12px; align-items: center; }
.barra-rotulo { font-size: 13px; color: var(--ink-2); }
.barra-trilho { width: 100%; height: 10px; }
.barra-valor { font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }

.distribuicao svg { width: 100%; height: 12px; border-radius: 3px; overflow: hidden; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.legenda-item { font-size: 12.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.legenda-item strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.legenda .ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legenda .ponto.g-ok { background: var(--ok); }
.legenda .ponto.g-atencao { background: var(--atencao); }
.legenda .ponto.g-risco { background: var(--risco); }

.medidor { display: flex; align-items: center; gap: 12px; }
.medidor svg { width: 92px; height: 52px; }
.medidor-valor { font-family: var(--serif); font-size: 25px; font-variant-numeric: tabular-nums; }

/* Grade do dashboard */

.painel-grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--e4); align-items: start; }
/* Item de grid tem min-width auto e se recusa a encolher abaixo do conteúdo:
   sem isto, uma tabela larga estoura a coluna e invade o cartão vizinho em vez
   de rolar dentro do próprio contêiner. */
.painel-grade > * { min-width: 0; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }
.painel-grade > .cartao { margin-bottom: 0; height: 100%; display: flex; flex-direction: column; }
/* Só o gráfico marcado com a classe "preenche" estica para ocupar a sobra do
   cartão. Aplicar a todos espremia o donut e esticava as barras do funil. */
.grafico-area.preenche { flex: 1; display: flex; flex-direction: column; }
.grafico-area.preenche .grafico-interativo { flex: 1; }

.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  margin-bottom: var(--e4);
  box-shadow: var(--sombra-1);
}
.indicador { background: var(--surface); padding: var(--e4); text-decoration: none; color: inherit; display: block; }
.indicador .rotulo {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
  font-weight: 600;
}
.indicador .valor {
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.indicador .valor.alerta { color: var(--risco); }
.indicador .apoio { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }

/* Fila de ações */

.fila { display: flex; flex-direction: column; }
.fila-item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--linha);
  align-items: start;
  text-decoration: none;
  color: inherit;
}
.fila-item:first-child { border-top: none; }
.fila-item, .indicador { transition: background 120ms ease; }
.fila-item:active, a.indicador:active { background: var(--ground-alt); }
.fila-item .sinal { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.fila-item.entrega_atrasada .sinal, .fila-item.cliente_em_risco .sinal { background: var(--risco); }
.fila-item.diagnostico_parado .sinal { background: var(--atencao); }
.fila-item.nps_sem_resposta .sinal { background: var(--ink-3); }
.fila-titulo { font-size: 14.5px; font-weight: 600; display: block; }
.fila-detalhe { font-size: 13px; color: var(--ink-2); }
.fila-idade { font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Filtros */

.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtros .grupo { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: var(--raio); overflow: hidden; }
.filtros .grupo a {
  padding: 7px 12px;
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  border-right: 1px solid var(--linha);
  transition: background 120ms ease, color 120ms ease;
}
.filtros .grupo a:last-child { border-right: none; }
.filtros .grupo a[aria-current="true"] { background: var(--accent); color: #FFF6EF; font-weight: 600; }
[data-theme="dark"] .filtros .grupo a[aria-current="true"] { color: #1A120C; }
.filtros .busca { flex: 1 1 200px; max-width: 280px; }
.contagem-busca { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.filtros .busca input { padding: 7px 11px; font-size: 13px; }

/* Duas ações por linha na tabela de equipe: lado a lado quando cabe, empilhadas
   quando não. Sem isso os botões furam a célula e entram no cartão vizinho. */
table.densa td .linha { display: inline-flex; margin-right: var(--e1); }
table.densa td:has(form) { min-width: 190px; }
@media (max-width: 1400px) {
  table.densa td .linha { display: flex; margin-right: 0; margin-bottom: var(--e1); }
}

.paginacao {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}
.paginacao .posicao { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.paginacao [aria-disabled="true"] { opacity: 0.45; }

/* Mensagens e vazios */

.erro {
  border: 1px solid color-mix(in srgb, var(--risco) 40%, transparent);
  border-radius: var(--raio);
  padding: 11px 14px;
  margin-bottom: 16px;
  color: var(--risco);
  background: color-mix(in srgb, var(--risco) 8%, var(--surface));
  font-size: 14px;
}
.vazio {
  color: var(--ink-2);
  padding: 34px 22px;
  background: var(--surface);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  text-align: center;
}
.tela-central { max-width: 380px; margin: 12vh auto; }
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.legenda .ponto.g-neutro-legenda { background: color-mix(in srgb, var(--ink-3) 40%, transparent); }
.titulo-menor { font-size: 15px; margin-top: 18px; }
.tela-central .cartao { padding: 26px 24px; }
.tela-central h1 { font-size: 25px; margin-top: 4px; }
.tela-central .subtitulo { margin-bottom: 20px; }
.tela-central form.empilhado { max-width: none; }
.tela-central .botao-primario { justify-content: center; margin-top: 4px; }

/* A grade de 12 colunas só faz sentido em tela larga: no meio do caminho os
   cartões passam a ocupar meia largura, e no celular a largura inteira. */
@media (max-width: 1180px) {
  .col-4, .col-5 { grid-column: span 6; }
  .col-7, .col-8 { grid-column: span 12; }
}

@media (max-width: 860px) {
  .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
  .barra-linha { grid-template-columns: minmax(80px, 120px) 1fr auto; }
}

@media (max-width: 720px) {
  /* No celular o menu deixa de ser coluna e vira uma barra rolável no topo:
     lateral fixa comeria metade da tela. */
  .lateral {
    padding-top: max(8px, env(safe-area-inset-top));
    position: static;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-right: none;
    border-bottom: 1px solid var(--linha);
    overflow-x: auto;
  }
  .lateral .marca { padding: 0 4px; gap: 7px; }
  .lateral .marca-sistema { font-size: 12px; }
  .lateral nav { flex-direction: row; gap: 2px; }
  .menu-grupo { display: none; }
  .lateral nav a { padding: 8px 10px; white-space: nowrap; min-height: 44px; }
  .lateral nav a span { display: none; }
  .lateral nav a svg { width: 21px; height: 21px; }
  .lateral nav a[aria-current="page"] span { display: inline; }
  .lateral .rodape-lateral {
    margin-top: 0;
    margin-left: auto;
    flex-direction: row;
    align-items: center;
    border-top: none;
    padding: 0;
  }
  .lateral .usuario { display: none; }
  body.com-lateral main { margin-left: 0; }
  /* A régua de 67 células não cabe em 390px: quebra em vez de furar o cartão. */
  .celulas { flex-wrap: wrap; justify-content: flex-end; row-gap: 3px; }
  main { padding: 18px 16px 48px; }
  .topo-pagina .acoes { width: 100%; }
  /* 44px de alvo no toque: no desktop 36px basta, no dedo não. Vale para
     botão, filtro em pílula, marca e o link principal de cada linha. */
  .botao { min-height: 44px; padding: 11px 16px; }
  .filtros .grupo a { display: inline-flex; align-items: center; min-height: 44px; }
  .filtros { gap: 6px; }
  .filtros .grupo { flex-wrap: wrap; }
  table.densa tbody td.principal a { display: inline-flex; align-items: center; min-height: 44px; }
  .lateral .marca { display: inline-flex; align-items: center; min-height: 44px; }
  .fila-item { padding: 14px 0; }

  .topo-pagina .acoes .botao-primario { flex: 1; justify-content: center; }

  /* Cada linha vira um cartão. O rótulo da coluna volta pelo data-rotulo,
     senão a data sozinha no cartão não diz de que data se trata. */
  table.densa { border-radius: var(--raio); }
  table.densa thead { display: none; }
  table.densa tbody tr { display: block; border-bottom: 1px solid var(--linha); padding: 12px 14px; }
  table.densa tbody td {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: none;
    padding: 3px 0;
    text-align: right;
  }
  table.densa tbody td::before {
    content: attr(data-rotulo);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-3);
    font-weight: 600;
    text-align: left;
    flex: 0 0 auto;
  }
  table.densa tbody td { flex-wrap: wrap; min-width: 0; }
  /* Célula que carrega formulário (ações de entrega) empilha: input e botão
     lado a lado furam a largura do celular. */
  table.densa tbody td:has(form) { display: block; text-align: left; }
  table.densa tbody td:has(form)::before { display: block; margin-bottom: 5px; }
  form.linha input { flex: 1 1 150px; min-width: 0; }
  table.densa tbody td.principal { display: block; text-align: left; margin-bottom: 8px; }
  table.densa tbody td.principal::before { display: none; }
  table.densa tbody th { display: block; width: auto; padding: 8px 0 0; }
}

@media (hover: hover) and (pointer: fine) {
  tr[data-linha-clicavel] { cursor: pointer; }
  tr[data-linha-clicavel]:hover { background: var(--ground-alt); }
}

.topo-secao { margin: var(--e5) 0 var(--e3); }
.ficha-cliente dd.alerta { color: var(--risco); font-weight: 600; }

/* Tela larga: o conteúdo acompanha, em vez de ficar numa coluna estreita à esquerda. */
body.com-lateral main { max-width: 1760px; }

.itens-trilha.ordem { list-style: none; margin: 0; padding: 0; }
.reuniao-feita h3.mes { margin-top: var(--e4); }
form.resumo-da-reuniao, form.conferencia, .conferencia { max-width: none; }
.reuniao-feita > .linha-de-acoes { margin-top: var(--e4); }
.resumo-da-reuniao textarea, .conferencia textarea { width: 100%; resize: vertical; font-family: inherit; }
.tarefa-a-conferir { display: flex; align-items: center; gap: var(--e2); }
.tarefa-a-conferir input[type="text"] { flex: 1 1 auto; min-width: 0; }
@media (max-width: 720px) { .novo-item select, .novo-item input[type="date"] { flex: 1 1 130px; } .novo-item .botao { flex: 1 1 100%; justify-content: center; } }

/* Formulário de NPS que o cliente responde: uma fileira de 0 a 10 por pergunta */
.formulario-nps { max-width: none; }
.escala { border: none; margin: 0; padding: 0; min-width: 0; }
.escala legend { font-weight: 600; font-size: 14.5px; padding: 0; margin-bottom: var(--e2); }
.escala .notas { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.escala label { position: relative; display: block; cursor: pointer; }
.escala input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.escala span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
}
.escala input:checked + span { background: var(--accent); border-color: var(--accent); color: #FFF6EF; }
.escala input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Título de coluna que ordena a lista */
table.densa thead th a.ordenar { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
table.densa thead th[aria-sort] a.ordenar { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { table.densa thead th a.ordenar:hover { color: var(--accent); } }
table.densa.carteira .etiqueta-do-crm { white-space: nowrap; }
.dia-do-crm { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
/* Oito colunas em 1280px: o nome cede espaço e os seletores encolhem, para a
   última coluna não sair do cartão. */
body.com-lateral table.densa.carteira td.principal { min-width: 150px; }
body.com-lateral table.densa.carteira .seletor-de-classe select.tag { max-width: 116px; padding-right: 20px; }
table.densa.carteira td[data-rotulo="Entrada"] { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.linha-do-tempo .ir-ao-registro { font-size: 12.5px; width: fit-content; }
.filtros .contagem { margin-right: auto; }

/* Classificações do cliente, cada uma com o nome do que é */
.entrada-do-cliente { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.com-lapis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nome-do-cliente { gap: var(--e2); }
.nome-do-cliente h1 { margin: 0; }
.servico-do-cliente { display: inline-flex; margin: 0; }
.servico-do-cliente button.tag { cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.servico-do-cliente button.tag:hover { filter: brightness(0.96); }
.servico-do-cliente button.tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Serviço que o cliente não contratou: a etiqueta fica vazada, convidando a marcar. */
.tag-desligada { background: transparent; color: var(--ink-3); border: 1px dashed var(--linha); }
.tag-desligada:hover { color: var(--ink); border-color: var(--ink-3); }
.etiqueta-do-crm { text-decoration: none; }
.etiqueta-do-crm:hover { text-decoration: underline; }
.so-impressao { display: none; }
.lapis > summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--raio); color: var(--ink-3); }
.lapis > summary::-webkit-details-marker { display: none; }
.lapis > summary:hover { background: var(--ground); color: var(--accent); }
.lapis > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lapis svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lapis[open] { flex-basis: 100%; }
.lapis[open] > summary { color: var(--accent); }
.lapis input { width: 130px; }
.faixa-do-cliente { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3) var(--e5); margin-top: var(--e3); }
.classificacoes-do-cliente { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); }
/* Passos do onboarding: bolinha vazia a fazer, verde quando a reunião aconteceu. */
.trilha-onboarding { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Onboarding em cima e o plano a iniciar embaixo, alinhados pela mesma margem. */
.cadencias { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
.trilha-onboarding .rotulo { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.trilha-onboarding .nota { font-size: 12px; color: var(--ok); }
/* A cadência ocupa uma linha inteira do topo, abaixo dos seletores. As bolinhas
   são colunas iguais: o traço de meia coluna para cada lado casa exato, e
   quando a fileira quebra, o começo de cada linha não ganha traço. */
.faixa-do-cliente > .trilha-onboarding, .faixa-do-cliente > .cadencias { order: 3; flex: 1 1 100%; }
.trilha-onboarding ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 116px); row-gap: var(--e3); }
.trilha-onboarding ol.muitas { grid-auto-flow: row; grid-template-columns: repeat(8, minmax(0, 116px)); }
.trilha-onboarding ol.muitas li:nth-child(8n + 1)::before { display: none; }
@media (max-width: 1000px) {
  .trilha-onboarding ol, .trilha-onboarding ol.muitas { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .trilha-onboarding ol li::before { display: block; }
  .trilha-onboarding ol li:first-child::before, .trilha-onboarding ol li:nth-child(6n + 1)::before { display: none; }
}
@media (max-width: 640px) {
  .trilha-onboarding ol, .trilha-onboarding ol.muitas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trilha-onboarding ol li:nth-child(6n + 1)::before { display: block; }
  .trilha-onboarding ol li:first-child::before, .trilha-onboarding ol li:nth-child(4n + 1)::before { display: none; }
}
.gerar-reuniao .cabecalho-secao { align-items: center; margin-bottom: 0; }
.gerar-reuniao .subtitulo { margin: 4px 0 0; }
.gerar-reuniao details { margin-top: var(--e3); }
.gerar-reuniao summary { cursor: pointer; font-size: 12.5px; color: var(--accent); width: fit-content; }
.gerar-reuniao details[open] summary { margin-bottom: var(--e2); }
.trilha-onboarding li { position: relative; min-width: 0; }
.trilha-e-acao { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e3); }
.botao-pequeno { padding: 3px 9px; font-size: 12px; min-height: 0; }
.reuniao > summary form { display: inline-flex; }
/* O traço liga a borda de uma bolinha à da seguinte, sem passar por cima de
   nenhuma, e fica verde assim que a de trás é confirmada. */
.trilha-onboarding li + li::before { content: ""; position: absolute; top: 11px; left: calc(-50% + 17px); right: calc(50% + 17px); height: 4px; border-radius: 2px; background: var(--linha); }
.trilha-onboarding li.feita + li::before { background: var(--ok); }
.trilha-onboarding a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 2px; text-decoration: none; color: var(--ink-2); font-size: 11.5px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.trilha-onboarding .bolinha { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linha); background: var(--surface, #fff); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; }
.trilha-onboarding li.feita .bolinha { background: var(--ok); border-color: var(--ok); }
.trilha-onboarding li.feita a { color: var(--ink); }
.trilha-onboarding a:focus-visible .bolinha { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .trilha-onboarding a { font-size: 10.5px; } }
.resumo-unico { max-width: 78ch; font-size: 15px; line-height: 1.65; }
.resumo-unico p { margin: 0 0 var(--e2); }
.resumo-geral { list-style: none; margin: 0; padding: 0; }
.resumo-geral > li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--e3); padding: 10px 0; border-top: 1px solid var(--linha); }
.resumo-geral .quando { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.resumo-geral .titulo { font-weight: 600; color: var(--ink); text-decoration: none; margin-right: 6px; }
.resumo-geral .titulo:hover { text-decoration: underline; }
.resumo-geral p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 640px) { .resumo-geral > li { grid-template-columns: 1fr; gap: 4px; } }
.classificacao { display: flex; flex-direction: column; gap: 4px; }
.classificacao .rotulo, .etiquetas-do-cliente .rotulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.classificacao .nota { font-size: 11.5px; color: var(--ink-3); }
.etiquetas-do-cliente { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); }
.novo-item.sem-divisa { margin-top: var(--e2); padding-top: 0; border-top: none; }
.novo-item input[type="time"], .novo-item input[type="url"] { flex: 0 0 auto; width: auto; }
.item-trilha p.linha-de-acoes { margin: 0; }

/* Resumo da reunião em blocos de pontos */
.pontos-da-reuniao { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e3); }
.bloco-do-resumo { border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px var(--e4); background: var(--ground); min-width: 0; }
.bloco-do-resumo > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.bloco-do-resumo[open] > summary { margin-bottom: var(--e2); }
.bloco-do-resumo p { font-size: 13.5px; color: var(--ink-2); margin: 0 0 var(--e2); overflow-wrap: anywhere; }
.bloco-do-resumo ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; }
.bloco-do-resumo li { overflow-wrap: anywhere; }
.bloco-do-resumo dl { margin: 0; display: grid; gap: 6px; }
.bloco-do-resumo dl div { display: grid; grid-template-columns: minmax(90px, 34%) 1fr; gap: var(--e2); font-size: 13.5px; }
.bloco-do-resumo dt { color: var(--ink-3); }
.bloco-do-resumo dd { margin: 0; overflow-wrap: anywhere; }
.editar-resumo > summary { cursor: pointer; font-size: 12.5px; color: var(--accent); width: fit-content; }
.editar-resumo { margin-top: var(--e3); }
/* Resumo lido como documento: títulos discretos, texto e pontos, sem caixas. */
.resumo-lido { max-width: 78ch; font-size: 14px; line-height: 1.6; color: var(--ink); margin-bottom: var(--e3); }
.resumo-lido h4 { margin: var(--e4) 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.resumo-lido h4:first-child { margin-top: 0; }
.resumo-lido p { margin: 0 0 var(--e2); overflow-wrap: anywhere; }
.resumo-lido ul { margin: 0 0 var(--e2); padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.resumo-lido li { overflow-wrap: anywhere; }
.resumo-lido li.mais { list-style: none; color: var(--ink-3); font-size: 12.5px; }
.resumo-lido dl { margin: 0 0 var(--e2); display: grid; gap: 4px; }
.resumo-lido dl div { display: grid; grid-template-columns: minmax(90px, 26%) 1fr; gap: var(--e2); }
.resumo-lido dt { color: var(--ink-3); }
.resumo-lido dd { margin: 0; overflow-wrap: anywhere; }
.resumo-geral .resumo-lido { margin: 8px 0 0; font-size: 13.5px; }
.criar-reuniao { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e4) var(--e6, 32px); }
.criar-reuniao h2 { margin: 0; }
.criar-reuniao .subtitulo { margin: 4px 0 var(--e3); }
/* Reunião aberta em três colunas: o que foi falado, o que ficou com a equipe e o que ficou com a doutora. */
.colunas-da-reuniao { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--e3); align-items: stretch; margin-bottom: var(--e3); }
/* Cada coluna tem altura padrão e rola por dentro: reunião longa não empurra a página. */
.coluna-da-reuniao { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--linha-forte, var(--linha)); border-radius: var(--raio); background: var(--ground); overflow: hidden; }
.coluna-da-reuniao > h3 { margin: 0; padding: 10px var(--e4); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid var(--linha); background: rgba(0, 0, 0, 0.05); }
.coluna-da-reuniao > h3 { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); min-height: 40px; }
.coluna-da-reuniao > h3 .contagem { font-weight: 600; letter-spacing: 0; }
.coluna-da-reuniao > h3 .botao { text-transform: none; letter-spacing: 0; }
.coluna-da-reuniao .rolagem { flex: 1 1 auto; height: 380px; overflow-y: auto; padding: var(--e3) var(--e4); overscroll-behavior: contain; scrollbar-width: thin; }
.coluna-da-reuniao .rolagem:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.coluna-da-reuniao.da-equipe { background: rgba(234, 88, 12, 0.07); }
.coluna-da-reuniao.da-equipe > h3 { background: rgba(234, 88, 12, 0.14); }
.coluna-da-reuniao.da-doutora { background: rgba(190, 24, 93, 0.06); }
.coluna-da-reuniao.da-doutora > h3 { background: rgba(190, 24, 93, 0.13); }
.coluna-da-reuniao .resumo-lido { max-width: none; margin-bottom: 0; }
.coluna-da-reuniao .vazio { margin: 0; padding: var(--e3); }
.coluna-da-reuniao .observacoes-da-reuniao { margin: 0; padding: var(--e3) var(--e4) 0; }
.coluna-da-reuniao .observar { margin: 0; padding: var(--e3) var(--e4); border-top: 1px solid var(--linha); }
.tarefas-lidas { font-size: 13.5px; line-height: 1.5; }
.tarefas-lidas h4 { margin: var(--e3) 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.tarefas-lidas h4:first-child { margin-top: 0; }
.tarefas-lidas ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.tarefas-lidas li { overflow-wrap: anywhere; }
@media (max-width: 1000px) { .colunas-da-reuniao { grid-template-columns: 1fr; } .coluna-da-reuniao .rolagem { height: auto; max-height: 320px; } }
.observacoes-da-reuniao { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linha); font-size: 13.5px; }
.observacoes-da-reuniao h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.observacoes-da-reuniao ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.observacoes-da-reuniao .autor { font-weight: 600; color: var(--ink-2); margin-right: 4px; }
.observar { margin-top: var(--e3); }
.observar input[type=text] { flex: 1 1 220px; min-width: 0; }
#novo-video .novo-item input[type=number] { flex: 0 0 84px; width: 84px; }
#novo-video .novo-item input[type=url] { flex: 2 1 240px; }
#novo-video .novo-item input[type=text] { flex: 1 1 200px; }
.lapis-do-video { margin-top: var(--e2); }
.lapis-do-video > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); width: fit-content; }
.acoes-do-video > summary { cursor: pointer; font-size: 12.5px; color: var(--accent); width: fit-content; }
.acoes-do-video[open] { min-width: 300px; }
.acoes-do-video[open] > summary { margin-bottom: var(--e2); }
.acoes-do-video form { margin-bottom: var(--e2); }
.editar-video { gap: var(--e2); padding-top: var(--e2); border-top: 1px solid var(--linha); }
.editar-video input[type=number] { width: 80px; }
table.videos td .secundario { display: block; font-size: 12px; color: var(--ink-3); }
/* Convite da reunião recém-gerada, por cima da tela. */
.chave-nova { margin: 0 0 var(--e4); padding: var(--e3) var(--e4); border: 1px solid var(--ok); border-radius: var(--raio); background: rgba(23, 107, 72, 0.07); display: flex; flex-direction: column; gap: 6px; }
.chave-nova p { margin: 0 0 4px; }
.chave-nova label { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 4px; }
.chave-nova input { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.texto-legal { max-width: 74ch; margin: 0 auto; padding: var(--e4) 0 var(--e6, 32px); font-size: 15px; line-height: 1.65; }
.texto-legal h2 { margin: var(--e5, 24px) 0 var(--e2); font-size: 1.05rem; }
.texto-legal p, .texto-legal ul { margin: 0 0 var(--e3); }
.texto-legal ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.texto-legal a { color: var(--accent); overflow-wrap: anywhere; }
.rodape-legal { margin-top: var(--e5, 24px); padding-top: var(--e3); border-top: 1px solid var(--linha); font-size: 13px; color: var(--ink-2); }
.portao-legais { margin: var(--e4) 0 0; font-size: 12px; color: var(--ink-3); text-align: center; }
.portao-legais a { color: inherit; }
.campo-senha { position: relative; display: block; }
.campo-senha input { width: 100%; padding-right: 44px; }
.olho-da-senha { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border: none; background: none; border-radius: var(--raio); color: var(--ink-3); cursor: pointer; }
.olho-da-senha:hover { color: var(--ink); }
.olho-da-senha:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.olho-da-senha[aria-pressed="true"] { color: var(--accent); }
.olho-da-senha svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.convite-fundo { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(15, 12, 9, 0.55); overscroll-behavior: contain; }
.convite { width: min(560px, 100%); max-height: 100%; overflow-y: auto; background: var(--surface); border: 1px solid var(--linha); border-radius: 12px; padding: var(--e5, 24px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); }
.convite h2 { margin: 4px 0 6px; overflow-wrap: anywhere; }
.convite .subtitulo { margin: 0 0 var(--e3); }
.convite-link { margin: 0 0 var(--e3); padding: 10px 12px; border-radius: var(--raio); background: var(--ground); font-size: 14px; overflow-wrap: anywhere; }
.convite .dica { margin-top: var(--e3); }
.convite-gravador { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linha); font-size: 13px; color: var(--ink-2); }
.convite-gravador p { margin: 0 0 var(--e2); }
table.agenda td .secundario { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 400; }
.cabecalho-secao .contagem.alerta { color: var(--erro, #B42318); font-weight: 600; }
.convite-fechar { margin: var(--e4) 0 0; display: flex; justify-content: flex-end; }
.quantidades-do-plano { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3); margin-bottom: 6px; }
.quantidades-do-plano label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.quantidades-do-plano input { width: 96px; }
.area-do-plano { margin-top: var(--e4); }
.area-do-plano h3 { margin: 0 0 4px; font-size: 14px; display: flex; align-items: center; gap: var(--e2); }
/* Tarefa numa linha: círculo para concluir, texto, prazo e lápis. */
ul.tarefas { list-style: none; margin: 0; padding: 0; }
.tarefa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 0; border-top: 1px solid var(--linha); }
.tarefa:first-child { border-top: none; }
.tarefa form { display: inline-flex; margin: 0; }
.tarefa .titulo { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.tarefa .quando { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarefa .quando.alerta { color: var(--erro, #B42318); font-weight: 600; }
.tarefa.encerrada .titulo { color: var(--ink-3); text-decoration: line-through; }
.marcar { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid var(--linha-forte, var(--linha)); background: var(--surface); cursor: pointer; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
button.marcar:hover { border-color: var(--ok); background: rgba(23, 107, 72, 0.12); }
button.marcar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.marcar.feita { background: var(--ok); border-color: var(--ok); cursor: default; }
.marcar.fora { background: var(--ground); color: var(--ink-3); cursor: default; }
.tarefa .lapis[open] { flex-basis: 100%; }
.tarefa .lapis[open] form { margin: 6px 0 0; display: flex; }
.tarefa .lapis input[type=text] { width: auto; flex: 1 1 220px; }
.tarefas-lidas ul.tarefas { padding-left: 0; gap: 0; }
.passo-solto { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: var(--e1) var(--e3); align-items: center; padding: 11px 4px; border-top: 1px solid var(--linha); }
.passo-solto .quando { font-size: 12.5px; color: var(--ink-2); }
.passo-solto .titulo { font-weight: 600; }
.passo-solto .marcas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; font-size: 13px; }
.passo-solto form { display: inline-flex; margin: 0; }
.pauta { margin: 0 0 var(--e3); font-size: 14px; color: var(--ink-2); }
.incluir-no-plano { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: 6px; }
.incluir-no-plano input[type=text] { flex: 1 1 260px; min-width: 0; }
/* A folha do plano que vai para o cliente e vira PDF. Cores fixas, de papel:
   ela tem de sair igual no tema escuro e na impressora. */
.folha-do-plano { max-width: 820px; margin: 0 auto; padding: 24px 16px 48px; }
.plano-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0 0 var(--e3); }
.folha { background: #FFFFFF; color: #1F1A16; border: 1px solid #E7E0D8; border-radius: 14px; padding: 48px 52px 36px; font-size: 14.5px; line-height: 1.62; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); }
.folha-capa { display: flex; flex-direction: column; gap: 28px; padding-bottom: 24px; border-bottom: 2px solid #C2410C; }
.folha-capa img { width: 134px; height: auto; }
.folha-olho { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #C2410C; }
.folha-capa h1 { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; color: #1F1A16; }
.folha-mes { margin: 6px 0 0; font-size: 16px; color: #6B5B4D; }
.folha-numeros { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 4px; }
.folha-numeros div { flex: 1 1 120px; padding: 14px 16px; border-radius: 10px; background: #FAF6F1; border: 1px solid #EFE7DD; }
.folha-numeros strong { display: block; font-size: 24px; line-height: 1.1; color: #1F1A16; font-variant-numeric: tabular-nums; }
.folha-numeros span { font-size: 12px; color: #6B5B4D; }
.folha-secao { margin-top: 32px; break-inside: auto; }
.folha-secao > h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: -0.01em; color: #1F1A16; }
.folha-apoio { margin: 0 0 14px; font-size: 13px; color: #6B5B4D; }
.folha-texto { max-width: none; color: #1F1A16; font-size: 14.5px; }
.folha-texto h4 { margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 1px solid #EFE7DD; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #C2410C; break-after: avoid; }
.folha-texto h4:first-child { margin-top: 0; }
.folha-texto p { margin: 0 0 10px; color: #1F1A16; }
.folha-texto ul { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.folha-texto li { break-inside: avoid; }
.folha-reunioes { list-style: none; margin: 0; padding: 0; }
.folha-reunioes li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 12px 0; border-top: 1px solid #EFE7DD; break-inside: avoid; }
.folha-reunioes li:first-child { border-top: none; }
.folha-numero { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #C2410C; color: #FFFFFF; font-size: 13px; font-weight: 700; }
.folha-reunioes strong { display: block; font-size: 15px; color: #1F1A16; }
.folha-area { font-size: 12.5px; color: #6B5B4D; }
.folha-reunioes p { margin: 6px 0 0; font-size: 13.5px; color: #3D332B; white-space: pre-line; }
.folha-quando { font-size: 13px; color: #6B5B4D; white-space: nowrap; padding-top: 5px; }
.folha-rodape { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 14px; border-top: 1px solid #EFE7DD; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A7B6D; }
@media (max-width: 640px) { .folha { padding: 28px 20px 24px; } .folha-capa h1 { font-size: 24px; } .folha-reunioes li { grid-template-columns: 34px minmax(0, 1fr); } .folha-quando { grid-column: 2; padding-top: 0; white-space: normal; } }
@media (max-width: 640px) { .passo-solto { grid-template-columns: 1fr; } .passo-solto .marcas { justify-content: flex-start; } }
/* Área de reuniões fechada: só o cabeçalho, que é o próprio botão de abrir. */
details.area-de-reunioes > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
details.area-de-reunioes > summary::-webkit-details-marker { display: none; }
details.area-de-reunioes > summary h2::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--ink-3); transition: transform 0.12s ease; }
details.area-de-reunioes[open] > summary h2::before { transform: rotate(90deg); }
details.area-de-reunioes[open] > summary { margin-bottom: var(--e3); }
details.area-de-reunioes > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--raio); }
@media (prefers-reduced-motion: reduce) { details.area-de-reunioes > summary h2::before { transition: none; } }
.paginas { display: flex; align-items: center; justify-content: center; gap: var(--e3); margin-top: var(--e4); }
.paginas [aria-disabled="true"] { opacity: 0.45; cursor: default; }
.tarefa .de-quem { font-weight: 600; color: var(--ink); text-decoration: none; margin-right: 4px; }
.tarefa .de-quem:hover { text-decoration: underline; }
table.carteira tr[hidden] { display: none !important; }
table.carteira td .posicao { display: inline-flex; margin-left: 4px; }
table.carteira td .posicao select { min-width: 0; width: 58px; padding-left: 8px; }
.barra-da-lista { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.barra-da-lista .busca { position: relative; flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; }
.barra-da-lista .busca svg { position: absolute; left: 11px; width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.barra-da-lista .busca input { width: 100%; padding-left: 34px; padding-right: 62px; }
.barra-da-lista .busca kbd { position: absolute; right: 9px; font: 600 10.5px/1 Inter, system-ui, sans-serif; color: var(--ink-3); border: 1px solid var(--linha); border-radius: 5px; padding: 3px 5px; pointer-events: none; }
.barra-da-lista select { width: auto; }
@media (max-width: 640px) { .barra-da-lista .busca { max-width: none; } .barra-da-lista .busca kbd { display: none; } .barra-da-lista select { flex: 1 1 140px; } }
/* Meu dia: o que não é de agora fica recolhido. */
details.recolhido > summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); cursor: pointer; list-style: none; }
details.recolhido > summary::-webkit-details-marker { display: none; }
details.recolhido > summary h2 { margin: 0; }
details.recolhido > summary h2::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--ink-3); }
details.recolhido[open] > summary h2::before { content: "▾"; }
details.recolhido[open] > summary { margin-bottom: var(--e4); }
details.recolhido > .painel-grade > .cartao { box-shadow: none; }
.mais-no-dia { margin: var(--e2) 0 0; font-size: 13px; }
.mais-no-dia > summary { cursor: pointer; color: var(--accent); width: fit-content; margin-bottom: var(--e2); }
.meu-dia .itens-do-dia .quando .botao { margin-left: 6px; }
/* Linha em duas colunas: o que é e de quem à esquerda, a situação à direita. */
.meu-dia .itens-do-dia li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e3); row-gap: 1px; align-items: center; padding: 9px 0; }
.meu-dia .itens-do-dia .titulo { grid-column: 1; overflow-wrap: anywhere; }
.meu-dia .itens-do-dia .quem { grid-column: 1; font-size: 12.5px; color: var(--ink-3); }
.meu-dia .itens-do-dia .marcas { grid-column: 2; grid-row: 1; justify-self: end; }
.meu-dia .itens-do-dia .quando { grid-column: 2; grid-row: 2; justify-self: end; font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 560px) { .meu-dia .itens-do-dia li { grid-template-columns: 1fr; } .meu-dia .itens-do-dia .marcas, .meu-dia .itens-do-dia .quando { grid-column: 1; grid-row: auto; justify-self: start; } }
.itens-da-fila { list-style: none; margin: 0; padding: 0; }
.da-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--e2) var(--e4); align-items: center; padding: 10px 0; border-top: 1px solid var(--linha); }
.da-fila:first-child { border-top: none; }
.da-fila .quem-e { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.da-fila .titulo { font-weight: 600; color: var(--ink); text-decoration: none; }
.da-fila .titulo:hover { text-decoration: underline; }
.da-fila .motivos { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.da-fila .ultima-nota { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.da-fila form { margin: 0; }
.da-fila form input[type=text] { flex: 1 1 160px; min-width: 0; }
@media (max-width: 760px) { .da-fila { grid-template-columns: 1fr; } }
/* Meu dia em três colunas enxutas: reuniões, clientes, mandar e fazer. */
.grade-do-dia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); align-items: start; margin-bottom: var(--e3); }
@media (max-width: 1000px) { .grade-do-dia { grid-template-columns: minmax(0, 1fr); } }
.cabecalho-do-cartao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); margin-bottom: var(--e2); }
.cabecalho-do-cartao h2 { margin: 0; font-size: 1rem; }
.abas-pequenas { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--ground); border: 1px solid var(--linha); }
.abas-pequenas a { padding: 4px 11px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.abas-pequenas a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.abas-pequenas a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.faixa { margin-top: var(--e2); padding-left: 10px; border-left: 3px solid var(--linha); }
.faixa.risco { border-left-color: #B91C1C; }
.faixa.atencao { border-left-color: #D97706; }
.faixa h3 { margin-top: 0; }
ul.curta li > .tag { margin-left: auto; }
ul.curta li > .tag + .botao { margin-left: 6px; }
.tres-colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); align-items: start; margin-bottom: var(--e3); }
.coluna-do-dia { padding: var(--e4); margin: 0; }
.coluna-do-dia > h2 { margin: 0 0 var(--e2); font-size: 1rem; }
.coluna-do-dia h3 { margin: var(--e3) 0 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.coluna-do-dia > h2 + h3 { margin-top: 0; }
.coluna-do-dia .nada { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
ul.curta { list-style: none; margin: 0; padding: 0; }
ul.curta li { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: 6px 0; border-top: 1px solid var(--linha); }
ul.curta li:first-child { border-top: none; }
ul.curta .o-que { display: flex; flex-direction: column; min-width: 0; }
ul.curta .o-que a { font-weight: 600; font-size: 13.5px; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.curta .o-que a:hover { text-decoration: underline; }
ul.curta .o-que small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.curta .quando { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
ul.curta .quando.alerta { color: var(--erro, #B42318); font-weight: 600; }
ul.curta form { margin: 0; flex: 0 0 auto; }
ul.curta .botao, ul.curta .tag { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 1100px) { .tres-colunas { grid-template-columns: minmax(0, 1fr); } }
.coluna-do-dia { min-width: 0; }
/* Aba Tráfego: a evolução do CAC em cima, um ciclo por cartão, planejado contra realizado numa tabela. */
.evolucao-cac { list-style: none; margin: var(--e3) 0 var(--e4); padding: 0; display: flex; gap: var(--e2); overflow-x: auto; scrollbar-width: thin; }
.evolucao-cac li { flex: 0 0 auto; }
.evolucao-cac a { display: flex; flex-direction: column; gap: 2px; min-width: 132px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--ground); text-decoration: none; color: var(--ink); }
.evolucao-cac a:hover { border-color: var(--linha-forte); }
.evolucao-cac a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.evolucao-cac .quando { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.evolucao-cac strong { font-size: 17px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.evolucao-cac .rotulo { font-size: 11.5px; color: var(--ink-3); }
.evolucao-cac li.melhor .rotulo { color: var(--ok); font-weight: 600; }
.evolucao-cac li.pior .rotulo { color: var(--risco); font-weight: 600; }
.novo-ciclo > summary { list-style: none; width: fit-content; }
.novo-ciclo > summary::-webkit-details-marker { display: none; }
.novo-ciclo[open] > summary { margin-bottom: var(--e3); }
.ciclo > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e3); cursor: pointer; list-style: none; }
.ciclo > summary::-webkit-details-marker { display: none; }
.ciclo > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--raio); }
.ciclo > summary .quando { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ciclo > summary .o-que { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; min-width: 0; }
.ciclo > summary .marcas { display: flex; align-items: center; gap: var(--e2); }
.ciclo > summary .sinal { align-self: center; margin: 0; }
.numero-chave { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.corpo-do-ciclo { margin-top: var(--e4); display: flex; flex-direction: column; gap: var(--e3); }
.tabela-rolavel { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--linha) transparent; }
/* No Mac a barra some sem rolar e a tabela parece cortada: aqui ela fica sempre à vista. */
.tabela-rolavel::-webkit-scrollbar { height: 8px; }
.tabela-rolavel::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 4px; }
.kpis-do-ciclo { width: 100%; max-width: 720px; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.kpis-do-ciclo th, .kpis-do-ciclo td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.kpis-do-ciclo th[scope="row"], .kpis-do-ciclo thead th:first-child { text-align: left; font-weight: 600; color: var(--ink-2); }
.kpis-do-ciclo thead th { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.atingimento { font-weight: 600; }
.atingimento.bom { color: var(--ok); }
.atingimento.medio { color: #B45309; }
.atingimento.ruim { color: var(--risco); }
.diagnostico-do-ciclo { margin: 0; padding: 10px 12px; border-radius: var(--raio); background: var(--ground); font-size: 13.5px; max-width: 720px; }
.diagnostico-do-ciclo.ok { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.diagnostico-do-ciclo.atencao { background: color-mix(in srgb, #D97706 12%, var(--surface)); }
.diagnostico-do-ciclo.risco { background: color-mix(in srgb, var(--risco) 10%, var(--surface)); }
.formulario-do-ciclo { display: flex; flex-direction: column; gap: var(--e3); margin-top: var(--e2); }
.bloco-do-ciclo { margin: 0; padding: var(--e3) var(--e4); border: 1px solid var(--linha); border-radius: var(--raio); }
.bloco-do-ciclo > summary, .bloco-do-ciclo > legend { font-size: 13px; font-weight: 700; color: var(--ink); padding: 0 4px; }
.bloco-do-ciclo > summary { cursor: pointer; width: fit-content; }
.bloco-do-ciclo[open] > summary { margin-bottom: var(--e3); }
.campos-do-ciclo { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--e3); margin-bottom: var(--e2); }
.campos-do-ciclo.largos { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo > span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.campo input, .campo select, .campo textarea { width: 100%; min-width: 0; }
.projecao-ao-vivo { margin: 0 0 var(--e2); padding: 8px 10px; border-radius: 8px; background: var(--accent-suave); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.prazo-do-plano { margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--linha); max-width: 420px; }
.prazo-do-plano .dica { margin: 4px 0 0; }
.campo-largo { grid-column: 1 / -1; }
.do-meta { display: flex; flex-direction: column; gap: 4px; padding: var(--e3); border-radius: var(--raio); background: var(--ground); margin-bottom: var(--e3); }
.do-meta p { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.do-meta .botao { width: fit-content; margin-top: var(--e2); }
.perguntas-do-trafego { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e3); }
.plano-de-trafego .do-meta { margin: 0; }
.anotacoes-do-trafego > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); }
.anotacoes-do-trafego .frente { padding: 0; border: none; margin-top: var(--e2); }
.referencia { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.campanhas-do-ciclo { margin: 0; padding: 0; border: none; min-width: 0; }
.campanhas-do-ciclo > legend { padding: 0; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.campanhas-do-ciclo > legend .contagem { font-weight: 400; }
.lista-de-campanhas { display: flex; flex-direction: column; max-height: 13rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--linha); border-radius: 8px; background: var(--surface); }
.lista-de-campanhas > .dica { margin: 0; padding: 8px 10px; }
.campanha-marcavel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e2); padding: 8px 10px; min-height: 40px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--linha); }
.campanha-marcavel:last-child { border-bottom: none; }
.campanha-marcavel:has(input:checked) { background: var(--accent-suave); }
.campanha-marcavel input { width: auto; margin: 0; }
.campanha-marcavel span { overflow-wrap: anywhere; }
.campanha-marcavel small { font-size: 11px; color: var(--ink-3); }
.campanha-marcavel small.ativa { color: var(--ok); font-weight: 600; }
.campanhas-do-ciclo:disabled .campanha-marcavel { cursor: default; }
.comparacao-do-ciclo { display: flex; flex-direction: column; gap: var(--e2); }
.frase-da-comparacao { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); max-width: 720px; }
.diferenca { font-weight: 600; }
.diferenca.bom { color: var(--ok); }
.diferenca.ruim { color: var(--risco); }
.funis-do-plano { display: flex; align-items: flex-end; gap: var(--e3); flex-wrap: wrap; }
.funis-do-plano .campo { width: 96px; }
.funis-do-plano .dica { margin: 0; flex: 1 1 260px; }
.funil { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--surface); }
.funil-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); flex-wrap: wrap; }
.funil-topo h4 { margin: 0; font-size: 14px; }
.funil h5, .todos-os-funis h5 { margin: var(--e2) 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.do-meta-curto { margin: 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tabela-mes-a-mes { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tabela-mes-a-mes th, .tabela-mes-a-mes td { padding: 6px; text-align: right; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela-mes-a-mes th[scope="row"], .tabela-mes-a-mes thead th:first-child { text-align: left; font-weight: 600; color: var(--ink-2); }
.tabela-mes-a-mes thead th { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.tabela-mes-a-mes tfoot th, .tabela-mes-a-mes tfoot td { font-weight: 700; color: var(--ink); border-bottom: none; border-top: 2px solid var(--linha); }
.lucro-positivo { color: var(--ok); font-weight: 600; }
.lucro-negativo { color: var(--risco); font-weight: 600; }
.tabela-mes-a-mes tfoot .lucro-positivo { color: var(--ok); }
.tabela-mes-a-mes tfoot .lucro-negativo { color: var(--risco); }
.tabela-mes-a-mes input { width: 80px; padding: 4px 6px; text-align: right; font-variant-numeric: tabular-nums; }
.todos-os-funis { display: flex; flex-direction: column; gap: var(--e2); padding-top: var(--e3); border-top: 1px solid var(--linha); }
.todos-os-funis h4, .resumo-do-trafego > h4, .funil-no-resumo h4 { margin: 0; font-size: 13.5px; }
.comparativo-dos-funis { max-width: none; }
.comparativo-dos-funis tfoot th, .comparativo-dos-funis tfoot td { font-weight: 700; border-top: 2px solid var(--linha); }
.funil-no-resumo { display: flex; flex-direction: column; gap: var(--e3); }
.funil-no-resumo + .funil-no-resumo { padding-top: var(--e3); border-top: 1px dashed var(--linha); }
.titulo-do-historico { margin: var(--e5) 0 var(--e2); font-size: 15px; }
.resumo-do-trafego { display: flex; flex-direction: column; gap: var(--e3); max-width: 760px; }
.linha-do-trafego { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ink); }
.linha-do-trafego > span, .celula-do-par > span { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); }
.pares-do-trafego { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.par-do-trafego { display: grid; grid-template-columns: 1fr 1fr; }
.pares-do-trafego .par-do-trafego + .par-do-trafego { border-top: 1px solid var(--linha); }
.celula-do-par { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; min-width: 0; }
.celula-do-par + .celula-do-par { border-left: 1px solid var(--linha); }
.celula-do-par strong { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.fecho-do-trafego { border-radius: var(--raio); background: var(--ground); }
.fecho-do-trafego .celula-do-par + .celula-do-par { border-left-color: color-mix(in srgb, var(--linha) 70%, transparent); }
.resumo-do-trafego > .dica { margin: 0; }
.gasto-por-mes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px var(--e3); font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gasto-por-mes strong { color: var(--ink); font-weight: 600; }
.resultado-do-ciclo { display: flex; flex-direction: column; gap: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linha); }
.resultado-do-ciclo h4 { margin: 0; font-size: 13px; }
.resultado-do-ciclo .dica { margin: 0; }
.rodape-do-ciclo .linha-de-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.campo-marcar { flex-direction: row; align-items: center; gap: var(--e2); align-self: end; padding-bottom: 8px; }
.campo-marcar input { width: auto; }
.complementares > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); width: fit-content; margin-bottom: var(--e2); }
.formulario-do-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e3); align-items: end; max-width: 760px; margin: var(--e3) 0; }
.formulario-do-meta .linha-de-acoes { grid-column: 1 / -1; }
.contas-do-meta { list-style: none; margin: var(--e2) 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.rodape-do-ciclo { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); flex-wrap: wrap; }
@media (max-width: 640px) {
  .ciclo > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .ciclo > summary .quando { grid-column: 1 / -1; }
}
/* Resumo geral por frente: o momento da cliente em cima, uma caixa por frente, e o cérebro embaixo. */
.momento-do-cliente { font-size: 15px; line-height: 1.6; color: var(--ink); margin-bottom: var(--e4); max-width: 75ch; }
.momento-do-cliente p { margin: 0 0 var(--e2); }
.frentes-do-resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); margin-bottom: var(--e3); }
@media (max-width: 860px) { .frentes-do-resumo { grid-template-columns: minmax(0, 1fr); } }
.frente-do-resumo { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--ground); min-width: 0; }
.frente-do-resumo > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); }
.frente-do-resumo h3 { margin: 0; font-size: 14px; }
.frente-do-resumo > header .contagem { font-size: 12.5px; color: var(--ink-3); }
.frente-do-resumo p, .secao-do-cerebro p { margin: 0 0 6px; line-height: 1.55; font-size: 13.5px; }
.frente-do-resumo ul, .secao-do-cerebro ul { margin: 0 0 6px; padding-left: 1.1em; font-size: 13.5px; line-height: 1.55; }
.frente-do-resumo li + li, .secao-do-cerebro li + li { margin-top: 3px; }
.rodape-da-frente { margin-top: auto !important; padding-top: var(--e2); border-top: 1px solid var(--linha); font-size: 12px !important; color: var(--ink-3); }
.cerebro .secoes-do-cerebro { columns: 2 340px; column-gap: var(--e5); }
.secao-do-cerebro { break-inside: avoid; margin: 0 0 var(--e4); }
.secao-do-cerebro h3 { margin: 0 0 var(--e1); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: baseline; gap: var(--e2); }
.secao-do-cerebro h3 .contagem { text-transform: none; letter-spacing: 0; font-weight: 500; }
.titulo-da-atencao { margin: var(--e2) 0 var(--e3); padding-top: var(--e4); border-top: 1px solid var(--linha); font-size: 15px; }
.secao-do-cerebro.riscos { padding: var(--e3) var(--e4); border-radius: var(--raio); background: color-mix(in srgb, var(--risco) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--risco) 25%, var(--linha)); }
.planos-lado-a-lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); margin-bottom: var(--e3); }
@media (max-width: 860px) { .planos-lado-a-lado { grid-template-columns: minmax(0, 1fr); } }
.plano-da-frente { min-width: 0; }
.plano-geral-editavel, .plano-geral-no-resumo { margin-bottom: var(--e4); }
.plano-da-frente > h3 { margin: 0 0 var(--e2); font-size: 14px; display: flex; align-items: center; gap: var(--e2); }
/* Plano por frente: duas janelas de texto lado a lado, cada uma com quem está nela e se salvou. */
.janela.janela-larga { width: min(1180px, 100%); }
.dica-da-janela { margin: 0 0 var(--e4); }
.duas-frentes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); margin-bottom: var(--e4); }
@media (max-width: 900px) { .duas-frentes { grid-template-columns: minmax(0, 1fr); } }
/* O tráfego virou funis com tabelas de mês a mês: ocupa a largura inteira, e o posicionamento vem embaixo. */
.duas-frentes > .plano-de-trafego { grid-column: 1 / -1; }
.frente { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; padding: var(--e4); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--surface); transition: border-color 0.2s ease; }
.frente.ocupada { border-color: var(--accent); }
.frente-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.frente-topo h3 { margin: 0 0 2px; font-size: 15px; display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.frente-topo .dica { margin: 0; }
.frente-situacao { font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.frente-aviso[hidden], .frente [hidden], .botao[hidden] { display: none; }
.frente-aviso { display: flex; align-items: center; gap: var(--e2); margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--accent-suave); font-size: 13px; color: var(--ink-2); }
.frente textarea { width: 100%; min-height: 320px; resize: vertical; font: 14px/1.6 var(--sans); }
.frente textarea[readonly] { background: var(--ground); color: var(--ink-2); cursor: default; }
.frente-rodape { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.frente-rodape .linha-de-acoes { margin-left: auto; }
.importar-doc { flex: 1 1 260px; min-width: 0; }
.importar-doc > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); width: fit-content; }
.importar-doc .linha { margin-top: var(--e2); }
.importar-doc input { flex: 1 1 200px; min-width: 0; }
.plano-antigo { margin-bottom: var(--e4); }
.plano-antigo > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.modelo-de-posicionamento { max-width: 860px; display: flex; flex-direction: column; gap: var(--e4); }
.modelo-de-posicionamento .frente { padding: 0; border: none; }
/* Chat com o Claude: uma coluna de leitura, a pessoa à direita e o Claude à esquerda, o campo de escrever no fim. */
.chat { max-width: 760px; }
.aviso-do-chat { margin: 0 0 var(--e4); padding: var(--e3) var(--e4); border-radius: var(--raio); background: var(--accent-suave); color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.aviso-do-chat strong { color: var(--ink); }
.conversa { list-style: none; margin: 0 0 var(--e4); padding: 0; display: flex; flex-direction: column; gap: var(--e5); }
.conversa > li { display: flex; flex-direction: column; gap: var(--e3); scroll-margin-bottom: 200px; }
.fala-pessoa { align-self: flex-end; max-width: min(560px, 88%); padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--surface); border: 1px solid var(--linha); box-shadow: var(--sombra-1); }
.fala-pessoa p { margin: 0; overflow-wrap: anywhere; }
.fala-pessoa time { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.fala-claude { max-width: 100%; padding-left: var(--e4); border-left: 2px solid var(--accent); line-height: 1.6; overflow-wrap: anywhere; }
.fala-claude p { margin: 0 0 var(--e2); }
.fala-claude p:last-child, .fala-claude ul:last-child { margin-bottom: 0; }
.fala-claude ul { margin: 0 0 var(--e2); padding-left: 1.2em; }
.fala-claude.falhou { border-left-color: var(--risco); color: var(--ink-2); }
.fala-claude.trabalhando { display: flex; align-items: center; gap: var(--e2); border-left-color: var(--linha-forte); color: var(--ink-3); font-size: 13.5px; }
.fala-claude.trabalhando p { margin: 0; }
.pulso { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulso 1.4s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }
.chat-vazio { padding: var(--e4) var(--e5); border: 1px dashed var(--linha-forte); border-radius: var(--raio); color: var(--ink-2); }
.chat-vazio p { margin: 0 0 var(--e2); }
.chat-vazio ul { margin: 0; padding-left: 1.2em; }
.escrever-ao-claude { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3) 0 calc(var(--e3) + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, transparent, var(--ground) 18%); }
.escrever-ao-claude textarea { width: 100%; resize: vertical; min-height: 84px; }
.rodape-do-chat { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.dica-do-atalho { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 640px) { .dica-do-atalho { display: none; } .rodape-do-chat { justify-content: flex-end; } .fala-pessoa { max-width: 92%; } }
/* A coluna do "Trazer do TL;DV" é estreita: nome inteiro em cima, área e botão embaixo. */
.achadas-no-tldv { margin: var(--e3) 0; }
.achadas-no-tldv li { grid-template-columns: 8px minmax(0, 1fr); row-gap: var(--e2); }
.achadas-no-tldv .o-que a, .achadas-no-tldv .o-que small { white-space: normal; }
.achadas-no-tldv form { grid-column: 2; margin: 0; flex-wrap: nowrap; }
.achadas-no-tldv select { flex: 1 1 auto; min-width: 0; width: auto; }
.reuniao-corpo .renomear { margin-top: var(--e4); }
.reuniao-corpo .renomear input[type=text] { flex: 1 1 260px; min-width: 0; }
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Meu dia: agenda fixa à esquerda, uma fila só à direita. Coluna única não deixa buraco entre cartões. */
/* Meu dia: a agenda em tela inteira. */
.trocar-pessoa { display: flex; align-items: center; gap: var(--e2); font-size: 13px; color: var(--ink-2); }
.trocar-pessoa select { width: auto; }
.agenda-cheia { display: flex; flex-direction: column; gap: var(--e4); }
.barra-da-agenda { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.seletor-de-periodo { display: inline-flex; padding: 4px; gap: 4px; border-radius: 10px; background: var(--ground); border: 1px solid var(--linha); }
.seletor-de-periodo a { min-width: 84px; padding: 8px 16px; border-radius: 7px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: background-color 120ms ease, color 120ms ease; }
.seletor-de-periodo a:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, transparent); }
/* O período escolhido fica cheio, em contraste: dá para ver de longe qual está valendo. */
.seletor-de-periodo a[aria-current="page"] { background: var(--ink); color: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.seletor-de-periodo a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.recorte-da-agenda { margin: 0; display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; font-size: 15px; }
.recorte-da-agenda span { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.reunioes-da-agenda { list-style: none; margin: 0; padding: 0; }
.reuniao-da-agenda { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--e3); padding: 12px 0; border-top: 1px solid var(--linha); }
.reuniao-da-agenda:first-child { border-top: none; }
.reuniao-da-agenda time { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; line-height: 1.2; }
.reuniao-da-agenda time span { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.reuniao-da-agenda .o-que { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.reuniao-da-agenda .o-que > a { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reuniao-da-agenda .o-que > a:hover { text-decoration: underline; }
.tipo-da-reuniao { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sem-registro-texto { font-size: 12px; font-weight: 600; color: var(--risco); }
.reuniao-da-agenda.feita time, .reuniao-da-agenda.feita .o-que > a { color: var(--ink-3); }
.reuniao-da-agenda .acao .botao { white-space: nowrap; }
.dia-unico { padding: var(--e2) var(--e5); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--surface); }
.agenda-vazia { padding: var(--e5); border: 1px dashed var(--linha); border-radius: var(--raio); text-align: center; }
.agenda-vazia p { margin: 0; font-size: 15px; font-weight: 600; }
.agenda-vazia .dica { margin-top: var(--e2); font-weight: 400; }
.sem-registro { padding: var(--e3) var(--e4); border-radius: var(--raio); border: 1px solid color-mix(in srgb, var(--risco) 35%, transparent); background: color-mix(in srgb, var(--risco) 6%, var(--surface)); }
.sem-registro h2 { margin: 0 0 var(--e1); font-size: 13.5px; color: var(--risco); }
.semana-da-agenda { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e2); align-items: start; }
.dia-da-agenda, .dia-do-mes { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--surface); padding: var(--e2) var(--e3); min-width: 0; min-height: 120px; }
.dia-da-agenda h2, .dia-do-mes h2 { margin: 0 0 var(--e1); display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.dia-da-agenda h2 strong, .dia-do-mes h2 strong { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.dia-da-agenda.hoje, .dia-do-mes.hoje { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dia-da-agenda.passado h2 strong, .dia-do-mes.passado h2 strong { color: var(--ink-3); }
.dia-da-agenda .nada, .dia-do-mes .nada { margin: 0; font-size: 12.5px; color: var(--ink-3); }
/* Na coluna estreita da semana, a reunião empilha: hora, cliente, tipo e o botão. */
.compacta .reuniao-da-agenda { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 0; }
.compacta .reuniao-da-agenda time { font-size: 13px; }
.compacta .reuniao-da-agenda .o-que > a { font-size: 13.5px; white-space: normal; }
.compacta .reuniao-da-agenda .acao { justify-self: start; }
.mes-da-agenda { display: flex; flex-direction: column; gap: var(--e2); }
.dia-do-mes { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--e3); min-height: 0; padding: var(--e2) var(--e4); }
.dia-do-mes h2 { flex-direction: column; gap: 0; padding-top: 10px; }
@media (max-width: 1100px) {
  .semana-da-agenda { grid-template-columns: minmax(0, 1fr); }
  .dia-da-agenda { min-height: 0; }
  .dia-da-agenda.vazio:not(.hoje) { display: none; }
  .compacta .reuniao-da-agenda { grid-template-columns: 4rem minmax(0, 1fr) auto; gap: var(--e3); }
  .compacta .reuniao-da-agenda .acao { justify-self: end; }
}
@media (max-width: 560px) {
  .seletor-de-periodo { width: 100%; }
  .seletor-de-periodo a { flex: 1; min-width: 0; }
  .dia-do-mes { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dia-do-mes h2 { flex-direction: row; gap: 6px; padding-top: 0; }
  .reuniao-da-agenda { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .reuniao-da-agenda .acao { grid-column: 2; }
  .dia-unico { padding: var(--e1) var(--e3); }
}
.dia-em-duas { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: var(--e4); align-items: start; margin-bottom: var(--e4); }
.dia-em-duas.so-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fila-do-dia { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
.agenda-do-dia, .bloco-do-dia { margin: 0; padding: var(--e4) var(--e5); min-width: 0; }
.agenda-do-dia { position: sticky; top: var(--e4); }
.agenda-do-dia > header, .bloco-do-dia > header { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: 32px; margin-bottom: var(--e2); }
.agenda-do-dia h2, .bloco-do-dia h2 { margin: 0; font-size: 15px; }
.bloco-do-dia > header .contagem, .agenda-do-dia h3 .contagem { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 500; }
.agenda-do-dia h3 { margin: var(--e4) 0 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.agenda-do-dia > header + h3 { margin-top: var(--e2); }
.agenda-do-dia h3.alerta { color: var(--risco); }
.agenda-do-dia .nada, .bloco-do-dia .nada { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); }
ul.fila, ul.horarios { list-style: none; margin: 0; padding: 0; }
ul.fila li, ul.horarios li { display: grid; align-items: center; column-gap: var(--e3); padding: 10px 0; border-top: 1px solid var(--linha); }
ul.fila li { grid-template-columns: 8px minmax(0, 1fr) auto; }
ul.horarios li { grid-template-columns: 3rem minmax(0, 1fr) auto; }
ul.fila li:first-child, ul.horarios li:first-child { border-top: none; }
ul.fila .o-que, ul.horarios .o-que { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
ul.fila .o-que a, ul.horarios .o-que a { font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.fila .o-que a:hover, ul.horarios .o-que a:hover { text-decoration: underline; }
ul.fila .o-que a:focus-visible, ul.horarios .o-que a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
ul.fila .o-que small, ul.horarios .o-que small { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.fila form { margin: 0; }
ul.fila .botao, ul.horarios .botao { white-space: nowrap; }
ul.horarios time { font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
ul.horarios time.alerta { color: var(--risco); }
.sinal { width: 8px; height: 8px; border-radius: 50%; background: var(--linha-forte); align-self: start; margin-top: 7px; }
.sinal-risco { background: var(--risco); }
.sinal-atencao { background: #D97706; }
[data-theme="dark"] .sinal-atencao { background: var(--atencao); }
.fila-do-dia .mais-no-dia > summary, .bloco-do-dia .mais-no-dia > summary { margin-top: var(--e1); }
.bloco-do-dia.vazio > header { margin-bottom: 0; flex-wrap: wrap; }
.bloco-do-dia.vazio > header .nada { margin: 0; }
/* O que vem depois de hoje fica na mesma escala dos cartões de cima. */
details.recolhido { padding: var(--e4) var(--e5); }
details.recolhido > summary h2 { font-size: 15px; }
details.recolhido > summary .contagem { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
details.recolhido > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--raio); }
@media (max-width: 960px) {
  .dia-em-duas, .dia-em-duas.so-fila { grid-template-columns: minmax(0, 1fr); }
  .agenda-do-dia { position: static; }
}
@media (max-width: 560px) {
  .agenda-do-dia, .bloco-do-dia { padding: var(--e4); }
  ul.fila .o-que small, ul.horarios .o-que small { white-space: normal; }
  ul.fila .botao, ul.horarios .botao { min-height: 36px; }
  .topo-pagina .acoes { margin-left: 0; max-width: 100%; overflow-x: auto; }
}
.atalhos-do-cliente { display: flex; flex-direction: column; gap: 6px; }
.atalhos-do-cliente .botao { justify-content: center; }
@media (max-width: 640px) { .atalhos-do-cliente { flex-direction: row; flex-wrap: wrap; } }
.quantas-reunioes { align-items: center; margin-bottom: var(--e3); }
.quantas-reunioes label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.quantas-reunioes input { width: 84px; }
.bolinhas-do-plano { list-style: none; margin: 0 0 var(--e4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--e4) 0; }
.bolinhas-do-plano li { position: relative; width: 148px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.bolinhas-do-plano li + li::before { content: ""; position: absolute; top: 17px; left: calc(-50% + 24px); right: calc(50% + 24px); height: 4px; border-radius: 2px; background: var(--linha); }
.bolinhas-do-plano li.feita + li::before { background: var(--ok); }
.bolinhas-do-plano .bolinha { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--linha-forte, var(--linha)); background: var(--surface); display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.bolinhas-do-plano li.marcada .bolinha { border-color: #B45309; color: #B45309; }
.bolinhas-do-plano li.feita .bolinha { background: var(--ok); border-color: var(--ok); color: #fff; }
.bolinhas-do-plano .bolinha:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bolinhas-do-plano .situacao { font-size: 12px; color: var(--ink-3); }
.bolinhas-do-plano select { min-width: 0; }
.resumo-e-plano { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); align-items: start; margin-bottom: var(--e3); }
.resumo-e-plano > .cartao { margin: 0; }
.plano-ao-lado { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 6px; }
.plano-texto { max-width: none; margin-bottom: var(--e5, 24px); }
.plano-secao { font-size: 1.05rem; margin: 0 0 var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linha); }
@media (max-width: 900px) { .resumo-e-plano { grid-template-columns: minmax(0, 1fr); } .bolinhas-do-plano li { width: 50%; } .bolinhas-do-plano li + li::before { display: none; } }
/* Janela de montar o plano: grande, mas não a tela inteira; topo e rodapé fixos, o meio rola. */
.janela-fundo { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: clamp(12px, 3vw, 32px); background: rgba(15, 12, 9, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); overscroll-behavior: contain; }
.janela { width: min(860px, 100%); max-height: min(880px, 100%); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--linha); border-radius: 16px; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.3); overflow: hidden; animation: janela-entra 0.18s ease-out; }
@keyframes janela-entra { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .janela { animation: none; } }
.janela-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); padding: 20px 24px 16px; border-bottom: 1px solid var(--linha); }
.janela-topo h2 { margin: 2px 0 0; font-size: 1.25rem; letter-spacing: -0.01em; }
.janela-fechar { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--ink-2); text-decoration: none; }
.janela-fechar:hover { background: var(--ground); color: var(--ink); }
.janela-fechar:focus-visible, .tirar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.janela-corpo { flex: 1 1 auto; overflow-y: auto; padding: 8px 24px 20px; overscroll-behavior: contain; }
.janela-corpo > .erro, .janela-corpo > .aviso-ok { margin: 12px 0 0; }
.passo { padding: 20px 0; border-top: 1px solid var(--linha); }
.passo:first-of-type { border-top: none; }
.passo h3 { margin: 0 0 4px; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.passo .numero { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--accent-suave, rgba(194, 65, 12, 0.12)); color: var(--accent); }
.passo .dica { margin: 0 0 12px 34px; }
.passo textarea, .passo .campo-de-link, .passo .reunioes-do-rascunho, .passo .acrescentar, .passo > .vazio { margin-left: 34px; width: calc(100% - 34px); }
.passo textarea { min-height: 220px; line-height: 1.55; resize: vertical; }
.campo-de-link { position: relative; display: flex; gap: var(--e2); align-items: center; }
.campo-de-link svg { position: absolute; left: 12px; width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.campo-de-link input { flex: 1 1 auto; min-width: 0; padding-left: 38px; }
.campo-de-link .botao { flex: 0 0 auto; white-space: nowrap; }
.reunioes-do-rascunho { list-style: none; counter-reset: reuniao; padding: 0; margin-top: 0; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.reuniao-do-rascunho { counter-increment: reuniao; display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border: 1px solid var(--linha); border-radius: 999px; background: var(--ground); }
.reuniao-do-rascunho::before { content: counter(reuniao) "ª"; font-size: 12px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tirar { width: 22px; height: 22px; display: grid; place-items: center; border: none; border-radius: 50%; background: none; color: var(--ink-3); font-size: 16px; line-height: 1; cursor: pointer; }
.tirar:hover { background: rgba(185, 28, 28, 0.12); color: #B91C1C; }
.acrescentar { display: flex; flex-wrap: wrap; gap: 8px; }
.passo > .vazio { padding: 14px; margin-bottom: 12px; }
.janela-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e3); padding: 14px 24px; border-top: 1px solid var(--linha); background: var(--ground); }
.janela-rodape .linha-de-acoes { margin: 0; }
.janela-curta { width: min(460px, 100%); }
.sem-plano { padding: 28px 28px 24px; text-align: center; }
.sem-plano h2 { margin: 6px 0 8px; font-size: 1.2rem; }
.sem-plano .subtitulo { margin: 0 0 var(--e4); }
.sem-plano .linha-de-acoes { justify-content: center; }
.andamento-do-plano { margin: 16px 0 8px; padding: 16px 18px; border-radius: 12px; background: var(--ground); border: 1px solid var(--linha); }
.andamento-numeros { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.andamento-numeros strong { font-size: 18px; color: var(--ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
/* Barra de andamento sem estilo embutido: o CSP do painel não aceita style na tag. */
progress.barra { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border: none; border-radius: 999px; background: var(--linha); overflow: hidden; margin-bottom: 14px; }
progress.barra::-webkit-progress-bar { background: var(--linha); border-radius: 999px; }
progress.barra::-webkit-progress-value { background: var(--ok); border-radius: 999px; }
progress.barra::-moz-progress-bar { background: var(--ok); border-radius: 999px; }
.passos-do-plano { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.passos-do-plano li { display: flex; align-items: center; gap: 8px; }
.passos-do-plano .bolinha { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linha-forte, var(--linha)); background: var(--surface); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.passos-do-plano li.marcada .bolinha { border-color: #B45309; color: #B45309; }
.passos-do-plano li.feita .bolinha { background: var(--ok); border-color: var(--ok); color: #fff; }
.passos-do-plano small { font-size: 12px; color: var(--ink-3); }
.texto-do-plano { max-width: none; margin: 18px 0 4px; font-size: 14.5px; }
.linha-do-plano { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 4px; border-top: 1px solid var(--linha); }
.linha-do-plano .nome { font-weight: 600; color: var(--ink); text-decoration: none; margin-right: 2px; }
.linha-do-plano .nome:hover { text-decoration: underline; }
.acoes-do-plano { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.acoes-do-plano .botao { margin-left: 8px; }
.icone-de-acao { width: 34px; height: 34px; display: inline-grid; place-items: center; border: none; border-radius: var(--raio); background: none; color: var(--ink-2); cursor: pointer; text-decoration: none; }
.icone-de-acao:hover { background: var(--ground); color: var(--accent); }
.icone-de-acao.perigo:hover { background: rgba(185, 28, 28, 0.1); color: #B91C1C; }
.icone-de-acao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Dica própria, em cima do ícone e sem a espera da dica do navegador. */
.icone-de-acao { position: relative; }
.icone-de-acao[data-dica]::after { content: attr(data-dica); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 5px 9px; border-radius: 6px; background: var(--ink); color: var(--surface); font: 500 12px/1.2 Inter, system-ui, sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; z-index: 5; }
.icone-de-acao[data-dica]:hover::after, .icone-de-acao[data-dica]:focus-visible::after { opacity: 1; visibility: visible; }
.icone-de-acao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.plano-vazio { padding: 28px 20px; border: 1px dashed var(--linha-forte, var(--linha)); border-radius: var(--raio); text-align: center; margin-bottom: var(--e3); }
.plano-vazio-titulo { margin: 0 0 4px; font-weight: 600; }
.plano-vazio .subtitulo { margin: 0 auto; }
.plano-vazio p.nao-imprime { margin: var(--e3) 0 0; }
.subtitulo-do-plano { margin: var(--e5, 24px) 0 var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linha); font-size: 14px; display: flex; align-items: baseline; gap: var(--e2); }
#plano-do-mes > .linha-de-acoes { margin-top: var(--e3); }
@media (max-width: 640px) {
  .janela-fundo { padding: 0; place-items: stretch; }
  .janela { max-height: none; height: 100%; border-radius: 0; border: none; }
  .passo .dica { margin-left: 0; }
  .passo textarea, .passo .campo-de-link, .passo .reunioes-do-rascunho, .passo .acrescentar, .passo > .vazio { margin-left: 0; width: 100%; }
  .campo-de-link { flex-wrap: wrap; }
  .campo-de-link .botao { flex: 1 1 100%; justify-content: center; }
}
/* Reunião fechada é uma linha só; o conteúdo aparece ao clicar. */
.reuniao { border-top: 1px solid var(--linha); }
.reuniao > summary {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) auto;
  gap: var(--e1) var(--e3);
  align-items: baseline;
  padding: 11px 4px;
  cursor: pointer;
  border-radius: var(--raio);
}
.reuniao > summary:hover { background: var(--ground); }
.reuniao > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reuniao > summary .quando { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.reuniao > summary .titulo { font-weight: 600; overflow-wrap: anywhere; }
.reuniao > summary .marcas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.reuniao > summary .contagem { font-size: 12.5px; color: var(--ink-3); }
.reuniao[open] > summary { background: var(--ground); }
.reuniao-corpo { padding: var(--e3) 4px var(--e4); }
.reuniao-corpo .linha-de-acoes { margin-top: var(--e3); }
.acoes-da-reuniao { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e3); }
.tarefas-da-reuniao { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.area-de-reunioes .cabecalho-secao .alerta { color: var(--erro, #B42318); }
@media (max-width: 640px) {
  .reuniao > summary { grid-template-columns: 1fr; }
  .reuniao > summary .marcas { justify-content: flex-start; }
}
.editar-resumo[open] > summary { margin-bottom: var(--e2); }

.pendencias.compacta { margin: 0; gap: 3px; font-size: 13px; }
table.densa td .alerta { color: var(--risco); }

/* Submenus do cliente */
.abas { display: flex; gap: var(--e1); border-bottom: 1px solid var(--linha); margin: var(--e4) 0; overflow-x: auto; scrollbar-width: none; }
.abas a {
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.abas a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .abas a:hover { color: var(--ink); } }

.pendencias { margin: var(--e2) 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pendencias li::marker { color: var(--risco); }

.linha-do-tempo { list-style: none; margin: var(--e3) 0 0; padding: 0 0 0 var(--e4); border-left: 2px solid var(--linha); }
.linha-do-tempo li { position: relative; display: grid; gap: 2px; padding: 0 0 var(--e4) var(--e2); }
.linha-do-tempo li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--e4) - 5px);
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.linha-do-tempo .quando { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.linha-do-tempo .titulo { font-weight: 600; overflow-wrap: anywhere; }
.linha-do-tempo .resumo { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.linha-do-tempo .quem { font-size: 12px; color: var(--ink-3); }
form.registro-da-jornada { max-width: none; margin-bottom: var(--e4); }
.registro-da-jornada .novo-item { margin-top: 0; padding-top: 0; border-top: none; }

/* Meu dia: listas curtas de item e de cliente */
.col-12 { grid-column: 1 / -1; }
.itens-do-dia { list-style: none; margin: var(--e3) 0 0; padding: 0; }
.itens-do-dia li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--e3);
  padding: 10px 0;
  border-top: 1px solid var(--linha);
}
.itens-do-dia .titulo { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.itens-do-dia .quem { grid-column: 1; font-size: 13px; color: var(--ink-2); }
.itens-do-dia .marcas { grid-column: 1; display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e1); }
.itens-do-dia .quando { grid-column: 2; grid-row: 1; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .itens-do-dia .titulo:hover { color: var(--accent); } }

.seletor-de-classe select.cargo { width: auto; padding: 5px 26px 5px 10px; font-size: 13px; }
.dono-da-area { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; justify-content: flex-end; }
table.densa.carteira td[data-rotulo="Papel"] { white-space: nowrap; }

/* Etiquetas coloridas. Cada cor define um único matiz (--c) e o resto sai
   dele: fundo a 12%, borda a 28%, texto cheio. No escuro só o matiz muda. */
.tag {
  --c: #52525B;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  background-color: color-mix(in srgb, var(--c) 12%, var(--surface));
  color: var(--c);
  white-space: nowrap;
}
.tag-cinza { --c: #52525B; }
.tag-vermelho { --c: #B91C1C; }
.tag-laranja { --c: #C2410C; }
.tag-ambar { --c: #A16207; }
.tag-verde { --c: #15803D; }
.tag-turquesa { --c: #0F766E; }
.tag-azul { --c: #1D4ED8; }
.tag-indigo { --c: #4338CA; }
.tag-violeta { --c: #7E22CE; }
.tag-rosa { --c: #BE185D; }
[data-theme="dark"] .tag-cinza { --c: #A1A1AA; }
[data-theme="dark"] .tag-vermelho { --c: #F87171; }
[data-theme="dark"] .tag-laranja { --c: #FB923C; }
[data-theme="dark"] .tag-ambar { --c: #FACC15; }
[data-theme="dark"] .tag-verde { --c: #4ADE80; }
[data-theme="dark"] .tag-turquesa { --c: #2DD4BF; }
[data-theme="dark"] .tag-azul { --c: #60A5FA; }
[data-theme="dark"] .tag-indigo { --c: #818CF8; }
[data-theme="dark"] .tag-violeta { --c: #C084FC; }
[data-theme="dark"] .tag-rosa { --c: #F472B6; }

/* Etiqueta que é um seletor: troca a classificação sem sair da tela */
.seletor-de-classe { display: inline-flex; align-items: center; gap: var(--e1); margin: 0; }
.seletor-de-classe select.tag {
  width: auto;
  max-width: 100%;
  padding: 3px 24px 3px 10px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .seletor-de-classe select.tag:hover { border-color: var(--c); }
}

table.densa.carteira td.principal { min-width: 170px; }
/* A célula aqui carrega só um seletor, não o formulário largo das ações de entrega. */
table.densa.carteira td:has(.seletor-de-classe) { min-width: 0; }
table.densa.carteira .seletor-de-classe select.tag { max-width: 118px; text-overflow: ellipsis; }
table.densa.carteira td.principal .secundario { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e1); }
.opcao-de-classe .amostra { flex: 0 0 150px; justify-content: center; overflow: hidden; text-overflow: ellipsis; }
table.densa.carteira td, table.densa.carteira th { padding-left: 6px; padding-right: 6px; }

.lista-de-opcoes { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e3); }
.opcao-de-classe { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.opcao-de-classe input[type="text"] { flex: 2 1 160px; width: auto; }
.opcao-de-classe select { flex: 2 1 180px; width: auto; }
.opcao-de-classe input[type="number"] { flex: 0 1 120px; width: auto; }
.opcao-de-classe .em-uso { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.opcao-de-classe .em-uso input { width: auto; }
.opcao-de-classe.nova { padding-top: var(--e3); border-top: 1px solid var(--linha-forte); }

.ficha-cliente {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e3) var(--e4);
  margin: var(--e4) 0;
}
.ficha-cliente dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.ficha-cliente dd { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }

/* Cronograma do cliente: uma trilha por área, itens agrupados por mês */

.cronograma-area .mes {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: var(--e4) 0 var(--e1);
}
.itens-trilha { list-style: none; margin: 0; padding: 0; }
.item-trilha {
  display: grid;
  grid-template-columns: 108px 1fr auto;
  gap: var(--e1) var(--e3);
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--linha);
}
.item-trilha .quando { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.item-trilha .titulo { font-weight: 600; overflow-wrap: anywhere; }
.item-trilha .resumo { grid-column: 2 / -1; font-size: 13px; color: var(--ink-2); margin: 0; }
.item-trilha details { grid-column: 2 / -1; }
.item-trilha summary { cursor: pointer; font-size: 12.5px; color: var(--accent); width: fit-content; }
.item-trilha details[open] summary { margin-bottom: var(--e2); }
.item-trilha details form.linha { margin-bottom: var(--e2); }
.item-trilha.cancelada .titulo { text-decoration: line-through; color: var(--ink-3); font-weight: 500; }
/* Formulários de lançar item têm de três a cinco campos: em linha que quebra,
   nenhum botão fica espremido nem para fora do cartão. */
.novo-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--linha-forte);
}
.novo-item input[type="text"] { flex: 1 1 200px; min-width: 0; width: auto; }
.novo-item select, .novo-item input[type="date"] { flex: 0 0 auto; width: auto; }
.novo-item .botao { flex: 0 0 auto; }
.novo-item .com-reuniao { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.novo-item .com-reuniao input { width: auto; }
@media (max-width: 720px) {
  .item-trilha { grid-template-columns: 1fr auto; }
  .item-trilha .quando, .item-trilha .resumo, .item-trilha details { grid-column: 1 / -1; }
  .item-trilha .quando { order: -1; }
}

/* Painel logado no desenho do shadcn/ui: neutros zinc, laranja como primária,
   uma fonte só. Preso ao corpo logado de propósito: a tela de entrada e o
   formulário 360, que o cliente vê, continuam com a identidade da marca. */
body.com-lateral {
  --ground: #FAFAFA;
  --ground-alt: #F4F4F5;
  --surface: #FFFFFF;
  --ink: #09090B;
  --ink-2: #52525B;
  --ink-3: #71717A;
  --accent: #C2410C;
  --accent-suave: rgba(234, 88, 12, 0.1);
  --linha: #E4E4E7;
  --linha-forte: #D4D4D8;
  --ok: #15803D;
  --atencao: #A16207;
  --risco: #DC2626;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--sans);
  --raio: 10px;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --sombra-2: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] body.com-lateral {
  --ground: #09090B;
  --ground-alt: #18181B;
  --surface: #111113;
  --ink: #FAFAFA;
  --ink-2: #A1A1AA;
  --ink-3: #8E8E99;
  --accent: #FB923C;
  --accent-suave: rgba(251, 146, 60, 0.14);
  --linha: rgba(255, 255, 255, 0.1);
  --linha-forte: rgba(255, 255, 255, 0.18);
  --ok: #4ADE80;
  --atencao: #FACC15;
  --risco: #F87171;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sombra-2: 0 6px 16px rgba(0, 0, 0, 0.55);
}
body.com-lateral h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.025em; font-variation-settings: normal; }
body.com-lateral h2 { font-weight: 600; letter-spacing: -0.015em; }
/* Controle nativo com cor explícita: no Windows escuro o select herda branco. */
body.com-lateral select { background-color: var(--surface); color: var(--ink); }
body.com-lateral select.tag { background-color: color-mix(in srgb, var(--c) 12%, var(--surface)); color: var(--c); }

@page { margin: 16mm 15mm; }
@media print {
  .so-impressao { display: inline; }
  .folha-do-plano { max-width: none; padding: 0; }
  .folha { border: none; border-radius: 0; box-shadow: none; padding: 0; font-size: 11pt; }
  .folha, .folha * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .grafico-area .grafico-interativo { display: none !important; }
  .grafico-area .grafico-estatico { display: block !important; }
  .lateral, .nao-imprime { display: none !important; }
  body.com-lateral main { margin-left: 0; }
  body { background: #FFF; color: #000; font-size: 11.5pt; }
  main { max-width: none; padding: 0; }
  .cartao { border: none; border-top: 1px solid #CCC; border-radius: 0; padding: 12px 0; margin: 0; break-inside: avoid; }
  .celula { background: #DDD; }
  .celula.cheia, .celula.ok { background: #555; }
}

/* Retrato de entrada: onde a clínica está, onde quer chegar, e a distância */

.retrato {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  margin-bottom: 16px;
}
.retrato .campo-numero { background: var(--surface); padding: 16px 18px; }
.retrato .rotulo {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
  font-weight: 600;
}
.retrato .valor {
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.retrato .valor.destaque { color: var(--accent); }
.retrato .apoio { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }

.regua-gap { margin-top: 9px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.regua-gap .celulas { flex-wrap: wrap; row-gap: 3px; }
.regua-gap .celulas .celula { width: 6px; height: 8px; }
.regua-gap .apoio { font-size: 12px; color: var(--ink-3); }

/* Fase da clínica */

.fases { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.fase {
  flex: 1 1 190px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 11px 13px;
  background: var(--surface);
}
.fase .indice {
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.fase .nome { font-family: var(--serif); font-size: 15.5px; margin-top: 2px; }
.fase .foco { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.fase.atual { border-color: var(--accent); background: var(--accent-suave); }
.fase.atual .indice { color: var(--accent); }
.fase:not(.atual) { opacity: 0.62; }

/* Achados */

.achados { display: flex; flex-direction: column; }
.achado {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--linha);
  align-items: start;
}
.achado:first-child { border-top: none; }
.achado .marca {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
}
.achado.critico .marca { background: var(--risco); }
.achado.atencao .marca { background: var(--atencao); }
.achado.oportunidade .marca { background: var(--ok); }
.achado strong { display: block; font-size: 14.5px; font-weight: 600; }
.achado span { font-size: 13px; color: var(--ink-2); }

/* Respostas */

.cabecalho-secao {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cabecalho-secao .contagem {
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cabecalho-secao .celulas { margin-left: auto; }

.respostas { display: flex; flex-direction: column; }
.resposta {
  display: grid;
  grid-template-columns: minmax(180px, 300px) 1fr;
  gap: 20px;
  padding: 9px 0;
  border-top: 1px solid var(--linha);
}
.resposta .pergunta { color: var(--ink-2); font-size: 13px; }
.resposta .valor { font-size: 14.5px; white-space: pre-wrap; max-width: 75ch; }
/* Classe própria, não a .vazio do CSS base: aquela é o bloco de estado vazio
   da página inteira (caixa tracejada) e vazava para dentro da linha. */
.resposta .valor.sem-resposta { color: var(--ink-3); font-style: italic; }

/* Entrega do link */

.caixa-link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 4px; }
.caixa-link input {
  flex: 1 1 320px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--ground-alt);
}

@media (hover: hover) and (pointer: fine) {
  .opcoes label.opcao:hover { border-color: var(--accent); }
  .acoes-etapa .secundaria:hover { color: var(--accent); }
}

/* Campo que só robô preenche: fora da tela, fora da ordem de tabulação e
   escondido do leitor de tela. */
.campo-armadilha {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Formulário do cliente */

.faixa-360 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--linha);
  background: var(--surface);
}
.faixa-360 .marca { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.faixa-360 .marca span { color: var(--accent); }
.faixa-360 .direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.formulario-360 { max-width: 640px; margin: 0 auto; padding: 26px 18px 72px; }
.formulario-360 h1 { font-size: 1.6rem; }
.formulario-360 .intro { color: var(--ink-2); margin: 8px 0 22px; }
.formulario-360 form + .intro { margin-top: 18px; font-size: 13px; }
.formulario-360 ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink-2); }
.formulario-360 li { margin-bottom: 6px; }

.linha-progresso {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.linha-progresso .rotulo { white-space: nowrap; }
progress.progresso {
  appearance: none;
  width: 100%;
  height: 5px;
  border: none;
  border-radius: 999px;
  background: var(--linha);
}
progress.progresso::-webkit-progress-bar { background: var(--linha); border-radius: 999px; }
progress.progresso::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress.progresso::-moz-progress-bar { background: var(--accent); border-radius: 999px; }

.trilha { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 20px; }
.trilha span {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  color: var(--ink-3);
}
.trilha span.atual { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.trilha span.pronta { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }

.campo { margin-bottom: 22px; border: none; padding: 0; }
.campo > label.pergunta, .campo > legend.pergunta {
  display: block;
  font-size: 15.5px;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 2px;
  padding: 0;
  letter-spacing: 0;
}
.campo .ajuda { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.campo .obrigatorio { color: var(--accent); margin-left: 3px; }
.campo textarea { min-height: 96px; resize: vertical; }
.campo.com-erro input, .campo.com-erro select, .campo.com-erro textarea { border-color: var(--risco); }
.campo.com-erro .opcao { border-color: color-mix(in srgb, var(--risco) 40%, transparent); }
.campo .mensagem-erro { display: block; font-size: 12.5px; color: var(--risco); margin-top: 6px; }

.opcoes { display: flex; flex-direction: column; gap: 7px; }
.opcoes label.opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.opcoes label.opcao:has(input:checked) { border-color: var(--accent); background: var(--accent-suave); }
.opcoes input[type="radio"], .opcoes input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); }
.opcoes .entrada-outro { margin-top: 1px; }

.acoes-etapa {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
}
.acoes-etapa .secundaria {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-2);
  border-color: transparent;
  background: transparent;
}

@media (max-width: 700px) {
  .resposta { grid-template-columns: 1fr; gap: 3px; }
  .cabecalho-secao .celulas { margin-left: 0; }
  .acoes-etapa .secundaria { margin-left: 0; width: 100%; justify-content: center; }
  .acoes-etapa .botao-primario { width: 100%; justify-content: center; }
}

@media print {
  .faixa-360 { display: none !important; }
  .retrato { border-color: #CCC; background: #CCC; }
  .retrato .campo-numero { background: #FFF; }
  .fase:not(.atual) { display: none; }
}