@import url("css/casca.css");
@import url("css/hoje.css");
@import url("css/ficha.css");
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Paleta e tipografia alinhadas ao site principal (drbrunosoares.med.br) */
  --color-bg: oklch(98.5% 0.012 95);
  --color-cream: oklch(96.5% 0.018 90);
  --color-panel: oklch(100% 0 0);
  --color-border: oklch(90% 0.025 130);
  --color-primary: oklch(42% 0.055 165);
  --color-primary-dark: oklch(24% 0.028 155);
  --color-accent: oklch(66% 0.13 45);
  --color-text: oklch(25% 0.025 160);
  --color-muted: oklch(50% 0.025 160);
  --color-secondary: oklch(94% 0.025 160);
  --color-low: oklch(42% 0.055 165);
  --color-medium: oklch(66% 0.13 45);
  --color-high: #b0281c;
  --color-gold: oklch(74% 0.085 80);
  --color-gold-deep: oklch(56% 0.075 72);
  --radius: 1rem;
  --radius-pill: 9999px;
  /*
   * A TIPOGRAFIA, TROCADA (2026-08-24), e a descoberta que veio junto.
   *
   * Estas duas variáveis pediam Fraunces e Inter, e NENHUMA TELA DO SPI CARREGAVA as duas. Não
   * havia um único link de webfont em nenhuma das 74 páginas. Ou seja: o que aparecia na tela era
   * a segunda opção de cada lista, Georgia nos títulos e Arial no corpo, que é exatamente a
   * combinação que faz qualquer sistema parecer um rascunho de sistema.
   *
   * O dono descreveu isso como "fonte de vibe coding" sem saber que estava vendo o fallback. Ele
   * estava certo pelo motivo certo: aquilo não era uma escolha tipográfica, era a ausência dela.
   *
   * Agora é MONTSERRAT, a mesma família do módulo do mentor, e agora ela é de fato carregada nas
   * 74 telas. Uma família só nos títulos e no corpo: com uma geométrica bem desenhada, a
   * hierarquia se faz por peso e tamanho, e a segunda família vira ruído.
   *
   * A Comfortaa, que o módulo do mentor também usa, NÃO veio junto de propósito: lá ela é a fonte
   * da MARCA dele, e trazê-la para cá seria vestir o SPI com a identidade de outra pessoa.
   */
  --font-display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-sans: "Montserrat", "Segoe UI", Arial, sans-serif;
}

/* =====================================================================================
   O TEMA DA OCULOPLASTIC MENTORING, TRAZIDO PARA O SPI (2026-09-20)

   Pedido do dono, textual: "eu quero que você traga para o SPI as exatas cores da
   Oculoplastic Mentoring... Eu quero que você traga exatamente isso, esse layout visual,
   para dentro do meu SPI, do prontuário completo, todas as páginas."

   -------------------------------------------------------------------------------------
   O QUE FOI TRAZIDO, E O QUE NÃO FOI.

   TRAZIDO: as seis cores do manual e o tratamento de superfície (chão escuro, dourado em
   fio fino, seção separada por fio e por ar em vez de caixa com sombra, número com presença
   tipográfica). Os valores abaixo são copiados de oculoplastica/css/marca.css, um a um, e
   não aproximados.

   NÃO TRAZIDO, e é de propósito: o LOGOTIPO e o nome da marca. Aquele olho formado pelo O e
   pelo M é a identidade de outro negócio; cor de chapa e tratamento de superfície são
   linguagem visual, marca registrada é outra coisa. O SPI continua com a marca dele.

   A TIPOGRAFIA já era a mesma antes deste bloco: as duas casas usam Montserrat (a escolha
   da Oculoplástica foi feita comparando espécimes da Gotham do manual). A Comfortaa, que lá
   assina o letreiro, NÃO entra aqui pelo mesmo motivo do logotipo.

   -------------------------------------------------------------------------------------
   POR QUE ESTE BLOCO VEM DEPOIS DO :root ORIGINAL, e não no lugar dele.

   Porque o de cima continua sendo a definição de TODO token (raio, fonte, espaço) e porque
   ler os dois lado a lado mostra o que mudou. Este vence por vir depois com a mesma
   especificidade, que é o mesmo mecanismo que a Oculoplástica usa para o tema escuro dela.

   E porque a reversão é uma linha: apagar este bloco devolve o SPI claro, inteiro.
   ===================================================================================== */

:root {
  color-scheme: dark;

  /* ---- AS SEIS CORES DO MANUAL, copiadas de oculoplastica/css/marca.css ---- */
  --oc-azul: #1a1a1a; /* referência do manual; o fundo do SPI não usa mais */
  --oc-marrom: #9a7d55;
  --oc-offwhite: #fcf4e8;
  --oc-dourado-claro: #fcdf80;
  --oc-dourado: #f1cf6b;
  --oc-dourado-fechado: #b48d47;

  /* ---- DIREÇÃO A v2, "CHAPA E RÉGUA DE OURO" (2026-10-19) ----
     Os nomes com prefixo --a- são o vocabulário do redesign, e as outras frentes (casca, hoje,
     ficha, loja) usam exatamente estes nomes. Valores de diag-visual/direcao-a/chapa-v2.css.
     Chapa: fundo e três degraus de grafite, PLANOS (sem brilho, sem degradê). Fio: a linha fina
     que separa no lugar da caixa. Ouro: só a ação principal, onde a pessoa está e o agora. */
  --a-fundo: #0a0a0a;
  --a-chapa-1: #121212;
  --a-chapa-2: #181818;
  --a-chapa-3: #202020;
  --a-fio: rgba(252, 244, 232, .12);
  --a-fio-forte: rgba(252, 244, 232, .22);
  --a-texto: #fcf4e8;
  --a-texto-2: #b5aea4;
  --a-texto-3: #8f8a83;
  --a-ouro: #f1cf6b;
  --a-ouro-claro: #fcdf80;
  --a-ouro-fechado: #b48d47;
  /* risco clínico (alergia, atraso, alerta) e perigo (excluir) */
  --a-risco: #ff7a6b;
  --a-risco-fundo: rgba(255, 122, 107, .1);
  --a-risco-fio: rgba(255, 122, 107, .5);
  /* código de área: só marcador pequeno, na ordem amarelo, vermelho, roxo, verde, cinza */
  --a-area-consultorio: #f3df3c;
  --a-area-urgencia: #e5484d;
  --a-area-conteudo: #a184f4;
  --a-area-gestao: #3fbf7f;
  --a-area-conta: #8f8a83;
  --a-raio-1: 4px;
  --a-raio-2: 6px;
  --a-raio-3: 8px;

  /* ---- os tokens antigos do SPI, remapeados para a Direção A ----
     Histórico: em 2026-10-01 o petróleo saiu do fundo ("Gostei mais desse preto do q do azul").
     Em 2026-10-19 os tokens antigos passaram a apontar para os --a-: quem ainda escreve
     var(--color-panel) ou var(--color-border) recebe a chapa e o fio da Direção A, sem precisar
     reescrever as quase mil regras que usam esses nomes. */
  --color-bg: var(--a-fundo);
  /* O DEGRADÊ DO FUNDO SAIU (2026-10-19): a Direção A é chapa lisa. O nome continua existindo
     (o body e a impressão leem ele) e vale "none". */
  --color-bg-degrade: none;
  --color-cream: var(--a-chapa-2);
  --color-panel: var(--a-chapa-1);
  --color-border: var(--a-fio);
  /*
   * O DOURADO É O PRIMÁRIO. É por isso que o botão primário fica dourado com texto escuro:
   * --color-cream (que o botão usa como cor de texto) é uma superfície escura.
   */
  --color-primary: var(--a-ouro);
  /*
   * --color-primary-dark é COR DE TEXTO (117 usos como texto contra 14 como fundo; os fundos
   * ganharam token próprio mais abaixo). A hierarquia vem do peso e do tamanho, não da cor.
   */
  --color-primary-dark: var(--a-texto);
  /* A CHAPA FUNDA: o fundo do cabeçalho, do menu e a tinta escura sobre o ouro. */
  --color-chapa: var(--a-fundo);
  --color-accent: var(--a-ouro-claro);
  --color-text: var(--a-texto);
  --color-muted: var(--a-texto-2);
  --color-secondary: var(--a-chapa-2);
  --color-low: var(--a-ouro);
  --color-medium: var(--a-ouro-claro);
  /* O vermelho é a única cor fora do manual: aviso que não é vermelho falha em ser aviso. */
  --color-high: var(--a-risco);
  --color-gold: var(--a-ouro-claro);
  --color-gold-deep: var(--a-ouro-fechado);

  /* O fio é o elemento estrutural deste desenho: ele separa seção no lugar da caixa. */
  --color-fio: var(--a-fio);
  --color-fio-forte: var(--a-fio-forte);
  --color-superficie: var(--a-chapa-2);
}

body {
  /*
   * EM PROPRIEDADES SEPARADAS, e não no atalho `background`. No atalho, um var() que falhe na
   * substituição invalida a declaração INTEIRA e o fundo vira transparente. Separadas, se o
   * degradê não existir a cor continua de pé. Um fundo é a última coisa que deve depender de
   * tudo dar certo.
   */
  background-color: var(--color-bg);
  background-image: var(--color-bg-degrade, none);
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  /* Número alinha por tabular. Vale para a página inteira, como lá. */
  font-variant-numeric: tabular-nums;
}

/*
 * FIO NO LUGAR DE CAIXA. O painel do SPI era cartão branco com sombra, que é a forma que o
 * escuro não comporta: sombra sobre fundo escuro não aparece, e a caixa vira um retângulo
 * mais claro flutuando sem motivo. Aqui ele passa a ser superfície discreta com fio, que é
 * como a Oculoplástica separa seção.
 */
.panel {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

/*
 * A IMPRESSÃO CONTINUA CLARA, e isto não é detalhe: receituário, atestado, laudo e relatório
 * saem desta folha para o papel. Tema escuro impresso gasta tinta, fica ilegível na fotocópia
 * e é o tipo de regressão que só aparece depois que o paciente já saiu com o papel na mão.
 */
@media print {
  :root {
    --color-bg: #ffffff;
    --color-bg-degrade: none;
    --color-cream: #ffffff;
    --color-panel: #ffffff;
    --color-border: #cccccc;
    --color-text: #111111;
    --color-muted: #444444;
    --color-primary: #1f4a3c;
    --color-primary-dark: #14342a;
    --color-accent: #8a6a1f;
    --color-secondary: #f2f2f2;
    --color-gold: #8a6a1f;
    --color-gold-deep: #6d5418;
    --color-high: #b0281c;
  }
  /*
   * O min-height: 100vh DO TEMA TEM DE SAIR NO PAPEL, e esta linha foi paga com uma regressão.
   *
   * Ele existe para o degradê do fundo cobrir a janela numa página curta. Na impressão, 100vh é
   * a altura da JANELA, não a da folha: o corpo nasce mais alto que o documento e empurra tudo
   * para uma segunda página. Atestado e pedido de exames, que cabiam em uma folha, passaram a
   * sair com DUAS.
   *
   * Quem pegou foi tests/documento-impressao.test.js, que imprime num PDF pelo Chromium e CONTA
   * as páginas. É o tipo de coisa que não dá para ver lendo o código, e que o médico descobriria
   * na impressora, com o paciente esperando.
   */
  body {
    background: #ffffff !important; background-image: none !important; color: #111111 !important;
    min-height: 0 !important;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  /*
   * 600, e não os 500 de antes. O peso foi calibrado para uma SERIFADA: Georgia em 500 já chega
   * com o contraste do desenho dela. Uma geométrica sem serifa no mesmo peso fica lavada ao lado
   * do corpo do texto, e a hierarquia da página se perde.
   */
  font-weight: 600;
  letter-spacing: -0.018em;
}

a {
  color: var(--color-primary);
}

header.app-header {
  background: var(--color-primary-dark);
  color: var(--color-cream);
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--color-gold) 42%, transparent);
}

header.app-header h1 {
  font-size: 1.25rem;
  margin: 0;
  margin-right: auto; /* título junto do hambúrguer, à esquerda */
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
header.app-header .nav-toggle { margin-right: 0.75rem; }

.header-logo {
  height: 2.1rem;
  width: 2.1rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-cream);
}

header.app-header button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--color-cream);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-size: 0.85rem;
}

header.app-header button:hover {
  background: rgba(255, 255, 255, 0.12);
}

main {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.5rem;
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--color-muted);
}

/* Hub central */
.hub-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 6rem);
}
/* Cartões e grade do hub: ver bloco "Hub editorial" mais abaixo. */

/* Home */
#scale-list {
  margin-top: 1rem;
}

.scale-category {
  margin-bottom: 2rem;
}

.scale-category-heading {
  font-size: 1.05rem;
  color: var(--color-primary-dark);
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Quantas escalas a categoria tem: o olho encontra a seção certa sem contar cartão. */
.scale-category-count {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-muted);
  white-space: nowrap;
}

/* Para que a categoria serve, em uma linha: com 54 escalas, o nome da categoria já não basta. */
.scale-category-about {
  font-size: 0.88rem;
  margin: -0.35rem 0 0.85rem;
  line-height: 1.4;
}

.scale-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.scale-card {
  text-align: left;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.scale-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.scale-card-name {
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.scale-card-age,
.scale-card-count {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.privacy-note {
  margin-top: 2rem;
  padding: 1rem;
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.privacy-note button {
  margin-top: 0.6rem;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}

.privacy-note button:hover {
  border-color: var(--color-high);
  color: var(--color-high);
}

/* Form */
.panel {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 1px 2px rgba(20, 40, 30, 0.04), 0 12px 28px -20px rgba(20, 40, 30, 0.35);
}
/*
 * O PAINEL DO VISUAL NOVO (2026-09-25): caixa "flutuante", no degradê azul-petróleo que esquenta
 * para um brilho dourado no canto, com borda dourada translúcida e sombra. Os tokens estão no
 * bloco "O VISUAL NOVO NO SITE INTEIRO", no fim da folha.
 *
 * FICA AQUI, logo depois da regra de base, e não no fim, DE PROPÓSITO: as variações que vêm
 * depois (a faixa colorida à esquerda da reanimação, do desenvolvimento, da gasometria, que
 * são código de cor clínico) continuam vencendo por virem depois. No fim da folha esta regra
 * apagaria essas faixas. Fora da loja, que tem desenho próprio de caixa, e só na TELA: o papel
 * continua branco (a impressão é a de sempre).
 */
@media screen {
  :where(body:not(.loja-body)) .panel {
    background-color: var(--spi-card-cor);
    background-image: var(--spi-card-brilho);
    border-color: var(--spi-card-borda);
    border-radius: var(--spi-card-raio);
    box-shadow: var(--spi-card-sombra);
  }
}

#form-instructions {
  white-space: pre-line;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.item-fieldset {
  border: none;
  border-bottom: 1px solid var(--color-border);
  padding: 0.9rem 0;
  margin: 0;
}

.item-fieldset legend {
  padding: 0;
  font-weight: 600;
  margin-bottom: 0.5rem;
  width: 100%;
}

.options-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.option-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.form-toolbar {
  position: sticky;
  bottom: 0;
  background: var(--color-panel);
  border-top: 1px solid var(--color-border);
  padding: 0.9rem 1.5rem;
  margin: 1rem -1.5rem -1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

button.primary,
a.primary {
  background: var(--color-primary);
  color: var(--color-chapa);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.65rem 1.35rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s;
}

button.primary:hover,
a.primary:hover {
  opacity: 0.9;
}

button.secondary,
a.secondary {
  background: var(--color-panel);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
}

button.secondary:hover,
a.secondary:hover {
  background: var(--color-secondary);
  border-color: var(--color-primary);
}

/* Result */
.result-actions {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

#result-datetime {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.result-total-box {
  text-align: center;
  padding: 1rem;
  background: var(--color-secondary);
  border-radius: var(--radius);
  margin-bottom: 0.8rem;
}

.result-total-value {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.result-total-label {
  color: var(--color-muted);
}

.result-note {
  text-align: center;
  margin-bottom: 0.8rem;
  color: var(--color-muted);
}

.result-range,
.subscore-range {
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-top: 0.5rem;
}

.result-range-baixo-risco,
.result-range-abaixo-do-ponto-de-corte {
  background: var(--color-ok-fundo);
  border: 1px solid var(--color-low);
}

.result-range-risco-medio,
.result-range-risco-médio {
  background: var(--color-atencao-fundo);
  border: 1px solid var(--color-medium);
}

.result-range-alto-risco,
.result-range-acima-do-ponto-de-corte {
  background: var(--color-alerta-fundo);
  border: 1px solid var(--color-high);
}

.result-range-label {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

#result-subscores {
  margin-top: 1.2rem;
}

.subscore-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 0.8rem;
}

.subscore-label {
  font-weight: 600;
}

.subscore-value {
  font-size: 1.4rem;
  color: var(--color-primary-dark);
}

.subscore-unit {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.subscore-cutoff {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 0.3rem;
}

#result-details {
  margin-top: 1.5rem;
}

.details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.details-table th,
.details-table td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

/*
 * ITEM A ITEM: vermelho forte e nomeado, verde fraco e mudo.
 *
 * O dono pediu "verdinho ou vermelhinho" (2026-09-04) para não ter de ler as vinte linhas atrás
 * dos positivos. O vermelho carrega a palavra "risco" junto, porque cor sozinha não é acessível
 * e some na impressão em preto e branco. O verde é só um tom de fundo, sem selo e sem palavra:
 * num M-CHAT-R de risco alto, dezoito linhas verdes ao lado de oito vermelhas não abrandam nada,
 * e um selo "ok" em cada uma daria a impressão errada. O verde serve para o olho pular, não para
 * tranquilizar.
 */
.row-flagged {
  background: var(--color-alerta-fundo);
}
.row-ok {
  background: var(--color-ok-fundo);
}
.row-flag-marca {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .35rem;
  border-radius: .55rem;
  background: var(--color-high, #a4322a);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
}
/* A linha que responde "quais foram positivas" sem varrer a tabela. */
.details-resumo {
  margin: .2rem 0 .5rem;
  font-size: .88rem;
}
/*
 * NA IMPRESSÃO o fundo colorido some em muitas impressoras, e é justamente na folha impressa
 * que a tabela vira documento. O selo "risco" continua legível em preto e branco, e a borda
 * esquerda marca a linha mesmo sem cor de fundo.
 */
@media print {
  .row-flagged { border-left: 3px solid #000; }
  .row-ok { background: none; }
}

footer.app-footer {
  text-align: center;
  color: var(--color-muted);
  font-size: 0.8rem;
  padding: 1rem;
}

/* Header: conta / navegação */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.header-link {
  color: var(--color-cream);
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
}

.header-link:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Login / cadastro */
.auth-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 6rem);
}

.auth-panel {
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

.auth-panel h2 {
  text-align: center;
}

.auth-field {
  display: block;
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.auth-field input,
.auth-field select {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: normal;
}

/*
 * AS CAIXAS DE ESCRITA (2026-10-09). Só input e select ganhavam a largura toda; a textarea ficava
 * ao lado do rótulo, cada uma de um tamanho, e a consulta parecia montada às pressas ("vem tudo
 * esquisito"). Agora toda caixa de escrita de um .auth-field tem o rótulo em cima, a largura toda e
 * uma altura mínima confortável, e continua dando para puxar a altura pelo canto.
 */
.auth-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.35rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  min-height: 5.5em;
  resize: vertical;
}
/* Na consulta, maiores: os campos de relato e de conduta com espaço para escrever sem rolar. Onde o
   navegador sabe (field-sizing), a caixa ainda cresce com o texto; nos outros, puxa-se pelo canto. */
#pr-consulta-form textarea { min-height: 7em; field-sizing: content; }
#pr-consulta-form #pr-c-hda,
#pr-consulta-form #pr-c-exame,
#pr-consulta-form #pr-c-conduta { min-height: 11em; }

.auth-terms-label {
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--color-muted);
  font-weight: normal;
  margin-bottom: 1rem;
}

.auth-terms-label input {
  margin-top: 0.2rem;
}

.auth-terms-text {
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.5;
  max-height: 40vh;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
  border-radius: 8px;
}

.auth-terms-text p {
  margin: 0 0 0.75rem;
}

.auth-terms-text p:last-child {
  margin-bottom: 0;
}

/* Documentos legais (termos.html, privacidade.html) */
.legal-doc {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.6;
}

.legal-doc h1 {
  margin-top: 0.5rem;
}

.legal-doc h2 {
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  scroll-margin-top: 5rem;
}
.legal-doc h2:target { border-top-color: var(--color-primary); }

.legal-doc p { margin: 0 0 0.8rem; }
.legal-doc h1 + .legal-meta { margin-bottom: 0; }

.legal-doc ul {
  padding-left: 1.2rem;
}

.legal-doc li {
  margin-bottom: 0.4rem;
}

/* O aviso de RASCUNHO saiu quando os documentos ficaram prontos; no lugar dele entrou o
   resumo em linguagem direta, que é o que a pessoa realmente lê antes de aceitar. */
.legal-resumo {
  background: var(--color-secondary);
  border-left: 4px solid var(--color-primary);
  border-radius: 0.8rem;
  padding: 1rem 1.15rem;
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 1.2rem 0 1.6rem;
}
.legal-resumo strong { color: var(--color-primary-dark); }

.legal-meta {
  color: var(--color-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0.35rem 0 0;
}

/* Sumário clicável: o documento é longo e ninguém rola procurando a seção de direitos. */
.legal-sumario {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  padding: 0 0 0.4rem;
  margin-bottom: 0.5rem;
}
.legal-sumario a {
  font-size: 0.8rem;
  color: var(--color-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.28rem 0.65rem;
  background: var(--color-panel);
}
.legal-sumario a:hover { color: var(--color-primary-dark); border-color: var(--color-primary); }

.legal-assinatura {
  margin-top: 2.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.legal-see-also {
  margin-top: 2rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}

.auth-terms-links {
  font-size: 0.82rem;
  text-align: center;
  margin-bottom: 1rem;
}

.footer-legal-link {
  color: inherit;
}

.auth-message {
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

.auth-error {
  background: var(--color-alerta-fundo);
  border: 1px solid var(--color-high);
  color: var(--color-high);
}

.auth-info {
  background: var(--color-ok-fundo);
  border: 1px solid var(--color-low);
  color: var(--color-low);
}

/* Paywall */
.paywall-plans {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.paywall-plan-btn {
  text-decoration: none;
  text-align: center;
}

.paywall-recheck {
  margin-top: 0.5rem;
}

/* Timbre personalizado no resultado (plano Premium) */
.result-letterhead {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--color-border);
}

.result-letterhead img {
  max-height: 60px;
  max-width: 160px;
  object-fit: contain;
}

.result-letterhead-text {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.result-letterhead-text strong {
  display: block;
  color: var(--color-text);
  font-size: 1rem;
}

.demo-link-wrap {
  text-align: center;
  margin-top: 0.6rem;
  font-size: 0.85rem;
}

.demo-banner {
  background: var(--color-atencao-fundo);
  border: 1px solid var(--color-medium);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  text-align: center;
}

.demo-banner code {
  background: rgba(0, 0, 0, 0.06);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

/* Calculadora de doses */
.calc-result {
  margin-top: 1.2rem;
  padding: 1.25rem;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.calc-placeholder {
  color: var(--color-muted);
  text-align: center;
  padding: 1rem 0;
}

.calc-result-header h3 {
  margin: 0 0 0.15rem;
}

.calc-dose-hero {
  text-align: center;
  padding: 1.1rem 1rem;
  margin: 0.8rem 0 1rem;
  background: linear-gradient(180deg, var(--color-secondary), var(--color-cream));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.calc-dose-hero-value {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.15;
}

.calc-dose-hero-sub {
  margin-top: 0.25rem;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.calc-details {
  margin-bottom: 0.8rem;
}

.calc-line {
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

.calc-note {
  color: var(--color-muted);
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
}

.calc-section {
  margin-bottom: 0.9rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.calc-section h4 {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

.calc-section p {
  margin: 0.2rem 0;
  font-size: 0.92rem;
}

.calc-section ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.92rem;
}

.calc-section li {
  margin-bottom: 0.2rem;
}

.calc-section-admin {
  background: var(--color-cream);
}

.calc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

.calc-section-ae {
  background: var(--color-alerta-fundo);
  border-color: #f0c9c2;
}

.calc-section-ci {
  background: var(--color-atencao-fundo);
  border-color: #f0dca0;
}

@media (max-width: 640px) {
  .calc-grid-2 {
    grid-template-columns: 1fr;
  }
}

.calc-alerts {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: var(--color-atencao-fundo);
  border: 1px solid var(--color-medium);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.calc-alerts p {
  margin: 0.2rem 0;
}

.calc-source {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.calc-ref-content {
  margin-top: 0.8rem;
  padding: 0.8rem 1rem;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Painel do médico */
.header-home-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.new-case-form {
  display: flex;
  gap: 0.6rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.new-case-form input {
  flex: 1;
  min-width: 200px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
}

.cases-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.case-item {
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.case-item:hover {
  border-color: var(--color-primary);
}

.generate-link-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.generate-link-row select {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  min-width: 240px;
}

.generated-link-box {
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 1.2rem;
}

.generated-link-box input {
  width: min(420px, 100%);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-right: 0.5rem;
}

.settings-logo-preview {
  display: block;
  max-height: 60px;
  max-width: 160px;
  object-fit: contain;
  margin: 0.5rem 0;
}

/*
 * Impressão / Salvar PDF.
 * Regra geral e robusta: some com TUDO e mostra só o que estiver marcado com
 * .print-area (e sua subárvore). Assim a folha sai limpa, como um PDF do
 * documento, sem cabeçalho do site, menu, botões de "Voltar" nem rodapé.
 * Botões que ficam DENTRO de uma print-area devem receber a classe .no-print.
 */
@media print {
  /*
   * MARGEM ZERO NA FOLHA, MARGEM DENTRO DO DOCUMENTO.
   *
   * O dono (2026-09-24), com o PDF de uma solicitação escolar na mão: "como que faz para tirar
   * esse negócio de baixo ali... aquele linkzinho de prontuário". Era o rodapé que o PRÓPRIO
   * NAVEGADOR escreve (endereço da página, data, "Página 1 de 2"). Ele só o desenha dentro da
   * margem da folha; no iPhone não existe opção para desligar. Com a margem da folha em zero não
   * há onde desenhar, e o documento leva a margem dele como preenchimento. O `clone` repete esse
   * preenchimento em CADA folha, senão a segunda página começaria colada na borda.
   */
  @page {
    margin: 0;
  }
  body:not(:has(.print-area)) {
    padding: 14mm !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  /* O app é escuro (color-scheme: dark): no papel, o navegador pintaria a borda da folha com o
     fundo escuro dele quando "gráficos de fundo" está ligado. */
  :root { color-scheme: light !important; }
  html,
  body {
    background: #fff !important;
  }
  /* esconde tudo mantendo o fluxo, e reexibe só a área imprimível */
  body * {
    visibility: hidden !important;
  }
  .print-area,
  .print-area * {
    visibility: visible !important;
  }
  .print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0 !important;
    padding: 14mm !important;
    box-sizing: border-box;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    border: none !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  /*
   * AS FOLHAS EM BRANCO, e por que a regra acima sozinha não bastava.
   *
   * `visibility: hidden` apaga o desenho mas NÃO tira o elemento do fluxo: a tela inteira do app
   * continua ocupando altura no papel. Como o documento é posicionado por cima (absolute), quem
   * decide quantas folhas saem passa a ser o tamanho da TELA, e não o do documento.
   *
   * Isso foi MEDIDO, não deduzido: em atestados.html o PDF saiu com 2 páginas mesmo com o
   * documento ainda não montado. Duas folhas de nada. Era o relato do dono, com as três caras
   * que ele descreveu: cabeçalho empurrado para a segunda página, documento pequeno saindo em
   * duas, e sobra de papel em branco.
   *
   * A regra abaixo tira do fluxo tudo que não é o documento nem caminho até ele: o `:has` pega
   * os ancestrais, o `:not(.print-area *)` protege o conteúdo de dentro (sem ele, os filhos do
   * próprio documento sumiriam, porque nenhum deles CONTÉM a área de impressão).
   *
   * Fica DEPOIS da regra de visibilidade de propósito: em navegador sem `:has`, esta é ignorada
   * e o comportamento antigo continua valendo, que é feio mas imprime.
   *
   * O `body:has(.print-area)` na frente NÃO é enfeite: sem ele, numa página que imprime e não tem
   * área de impressão (a lista de escalas, por exemplo, imprime a tela toda), a regra casaria com
   * TODOS os elementos e o papel sairia em branco. Consertar a impressão de um jeito que apaga a
   * de outro seria trocar um defeito por um pior.
   */
  body:has(.print-area) *:not(:has(.print-area)):not(.print-area):not(.print-area *) {
    display: none !important;
  }
  /* Sem os elementos vizinhos ocupando espaço, o documento não precisa mais ser sobreposto:
     posicionar no fluxo evita a folha extra que o `absolute` deixava para trás. */
  body:has(.print-area) .print-area {
    position: static;
  }
  /*
   * O CAMINHO ATÉ O DOCUMENTO NÃO OCUPA PAPEL (2026-10-07).
   *
   * A regra acima tira os VIZINHOS do documento; os ANCESTRAIS ficavam com o espaçamento de
   * tela. Na receita da caixa da loja, o <main> levava 8,5 mm em cima e 14 mm embaixo: a folha
   * de 269 mm da receita não cabia e o papel saía com TRÊS folhas, a primeira e a última em
   * branco (medido). Moldura, fundo e espaço de tela não têm lugar no papel: o documento leva a
   * margem dele.
   */
  body:has(.print-area) *:has(.print-area):not(.print-area):not(.print-area *) {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    max-width: none !important;
    background: transparent !important;
  }

  /*
   * A PRÉVIA E O PAPEL PASSAM A TER A MESMA ESCALA.
   *
   * O defeito, relatado pelo dono e depois MEDIDO: "ao gerar, o layout de cima fica certo; daí
   * quando vai pro imprimir ele fica grande", e uma orientação que cabia em duas folhas saía em
   * três, com só o rodapé na terceira.
   *
   * A CONTA QUE EXPLICA. A prévia desenha a folha com 820px de largura. A área imprimível de um
   * A4 com as margens de 14mm daqui tem 182mm, que são 688px. O papel é, portanto, 84% da
   * prévia. Só que o texto continuava a 16px nos dois: a coluna passava de 44,8 para 37 letras
   * por linha, cada parágrafo ganhava um quinto de altura, e o documento estourava a folha.
   * Ninguém tinha escrito "aumente a fonte ao imprimir"; a fonte ficou parada enquanto a folha
   * encolheu, que dá no mesmo.
   *
   * A CORREÇÃO É UMA LINHA, e é a raiz. Reduzindo a raiz a 84%, TODA medida em rem encolhe
   * junto: a fonte, as margens de 2.4rem das laterais, os títulos, o recuo das listas e o teto
   * do timbre. O papel vira a prévia reduzida, com a mesma quantidade de palavras por linha, e
   * a prévia deixa de mentir. Medido depois da troca: 44,8 letras por linha na prévia contra
   * 45,2 no papel.
   *
   * Por que porcentagem, e não "11pt": a porcentagem é relativa ao tamanho de fonte que o
   * navegador do médico usa. Quem aumentou a fonte do navegador vê a prévia maior E imprime
   * maior, na mesma proporção. Um valor absoluto ignoraria essa escolha dele.
   *
   * O `:has(.print-area)` mantém isto restrito às telas que imprimem um DOCUMENTO. Tela que
   * imprime a si mesma (a lista de escalas, por exemplo) não tem área imprimível e não encolhe.
   */
  html:has(.print-area) {
    font-size: 84%;
  }

  /* A assinatura não se parte no meio, e não vai sozinha para uma folha nova. */
  .doc-signature { break-inside: avoid; }
  /*
   * O MESMO PARA O BLOCO DE ASSINATURA DOS DOCUMENTOS (2026-10-07): data, linha, nome, CRM e RQE
   * andam juntos. Medido num pedido de exame longo do prontuário: a data ficava no pé da folha 1
   * e a linha com o nome e o CRM iam sozinhos para a folha 2. Quando não cabe, o bloco inteiro
   * passa, e leva junto a última linha do texto (break-before: avoid), para a folha 2 nunca ser
   * só a assinatura.
   */
  .laudo-assinatura { break-inside: avoid; page-break-inside: avoid; break-before: avoid; page-break-before: avoid; }
  /* O aviso de assinatura digital é para o PDF que vai por WhatsApp. No papel ("imprima e
     assine", escrito num papel já impresso) ele não diz nada; o dono já tinha pedido para tirar
     da receita. A tela e o PDF continuam com ele. */
  .aviso-assinatura-doc { display: none !important; }
  /* Título de seção nunca fica sozinho no pé da folha: vai junto com o texto que ele abre
     ("Exames de imagem" sobrava no fim da folha 1 e a lista começava na 2). */
  .exam-doc-sec, .laudo-h2, .laudo-doc h2, .laudo-doc h3 { break-after: avoid; page-break-after: avoid; }

  /*
   * AS LINHAS PULADAS QUE O MÉDICO DIGITA.
   *
   * Os geradores montam o corpo do documento com escape de HTML e um <p> em volta, e em HTML uma
   * quebra de linha vira espaço: o texto que ele escreveu em três parágrafos sai empilhado num
   * bloco só, e ele tem de reformatar tudo depois de gerar. `pre-wrap` preserva as quebras e as
   * linhas em branco, e continua quebrando linha comprida normalmente.
   *
   * Vale na tela e no papel (a regra está fora do @media, logo abaixo): a prévia tem de mostrar
   * o que vai sair, senão ela mente.
   */
  .laudo-doc p,
  .laudo-doc .laudo-corpo {
    white-space: pre-wrap;
  }
  /* elementos de interface que nunca devem ir para o papel */
  .no-print,
  .no-print *,
  .nav-toggle,
  .nav-drawer,
  .nav-overlay,
  header.app-header,
  footer.app-footer,
  .result-actions {
    display: none !important;
  }
}

/*
 * As linhas puladas também na TELA, e não só no papel: a prévia do documento precisa mostrar
 * exatamente o que vai sair. Se ela empilhasse o texto e a impressão respeitasse as quebras, o
 * médico ajustaria o texto olhando uma prévia que mente.
 */
.laudo-doc p,
.laudo-doc .laudo-corpo {
  white-space: pre-wrap;
}

/* Fluxos de manejo */
.fluxo-timer-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-primary-dark);
  color: var(--color-cream);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin: 1rem 0;
}

.fluxo-timer-display {
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.fluxo-timer-controls {
  display: flex;
  gap: 0.6rem;
}

.fluxo-timer-controls button {
  padding: 0.4rem 1rem;
}

.fluxo-marco-atual {
  min-height: 1.2rem;
  font-weight: 600;
  color: var(--color-accent, #e8c27a);
}

.fluxo-marcos-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.fluxo-marco {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
}

.fluxo-marco.fluxo-marco-atingido {
  background: var(--color-primary);
  color: var(--color-chapa);
  border-color: var(--color-primary);
}

.fluxo-passo {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 0.7rem;
  transition: opacity 0.15s;
}

.fluxo-passo.fluxo-passo-feito {
  opacity: 0.55;
}

.fluxo-passo-titulo label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

.fluxo-passo-texto {
  margin-top: 0.4rem;
  margin-left: 1.6rem;
  font-size: 0.92rem;
  color: var(--color-text);
}

/* =====================================================================
   LANDING / HERO  (tela de entrada redesenhada)
   ===================================================================== */
.landing {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  padding: 0.5rem 0 1rem;
}

.landing-hero {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  align-items: center;
  gap: 1.5rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-cream);
  border-radius: 1.5rem;
  padding: 2.5rem;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(20, 40, 30, 0.6);
}

.landing-badge {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(246, 241, 231, 0.16);
  color: var(--color-cream);
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
}

.landing-title {
  font-family: var(--font-display);
  font-size: 2.3rem;
  line-height: 1.1;
  margin: 0 0 0.9rem;
  color: #fff;
}

.landing-sub {
  font-size: 1.02rem;
  color: rgba(246, 241, 231, 0.9);
  margin: 0 0 1.5rem;
  max-width: 34ch;
}

.landing-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.landing-note {
  font-size: 0.82rem;
  color: rgba(246, 241, 231, 0.72);
  margin: 1rem 0 0;
  line-height: 1.55;
}

/* O herói é escuro: a cor de link do app (verde) fica ilegível aqui. */
.landing-note a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.landing-note a:hover { color: var(--color-accent, #e8c27a); }

.landing-hero-art {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-hero-art img {
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 1.1rem;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.55);
}

/* brilho sutil no hero (profundidade premium) */
.landing-hero { position: relative; isolation: isolate; }
.landing-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -10%;
  width: 55%;
  height: 140%;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.28), rgba(201, 162, 39, 0) 70%);
  pointer-events: none;
}

/* linha de confiança abaixo do CTA */
.landing-trust {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
}
.landing-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: rgba(246, 241, 231, 0.9);
}
.landing-trust svg {
  width: 15px;
  height: 15px;
  color: var(--color-accent, #c9a227);
  flex: none;
}

/* Botões CTA */
.btn-cta-primary {
  display: inline-block;
  background: var(--color-accent);
  color: #3a1d0b;
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  box-shadow: 0 10px 24px -12px rgba(224, 138, 79, 0.9);
}

.btn-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(224, 138, 79, 0.95);
}

.btn-cta-ghost {
  display: inline-block;
  background: transparent;
  color: var(--color-cream);
  border: 1px solid rgba(246, 241, 231, 0.6);
  border-radius: var(--radius-pill);
  padding: 0.8rem 1.4rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-cta-ghost:hover {
  background: rgba(246, 241, 231, 0.14);
}

/* Grade de recursos (IOT grátis + resto com cadeado) */
.landing-section-title {
  font-family: var(--font-display);
  color: var(--color-primary-dark);
  font-size: 1.55rem;
  text-align: center;
  margin: 0.5rem 0 0.5rem;
}
.landing-section-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 0.5rem auto 0;
  border-radius: 3px;
  background: var(--color-accent, #c9a227);
}
.landing-section-sub {
  text-align: center;
  color: var(--color-muted);
  margin: 0 auto 0.4rem;
  max-width: 620px;
}
.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.1rem;
  padding: 1.35rem 1.25rem;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px -22px rgba(20, 40, 30, 0.5);
  border-color: color-mix(in oklch, var(--color-primary) 45%, var(--color-border));
}

.feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.feature-icon {
  font-size: 1.6rem;
}
/* chip de ícone SVG (visual premium) */
.feature-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, var(--color-primary) 14%, var(--color-chapa));
  color: var(--color-primary-dark);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.feature-ico svg {
  width: 24px;
  height: 24px;
}
.feature-card:hover .feature-ico {
  transform: translateY(-1px) scale(1.05);
  background: color-mix(in oklch, var(--color-primary) 22%, var(--color-chapa));
}
.feature-free .feature-ico {
  background: var(--color-primary);
  color: var(--color-chapa);
}

.feature-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--color-primary-dark);
}

.feature-desc {
  font-size: 0.88rem;
  color: var(--color-muted);
  line-height: 1.45;
}

.feature-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
}

.feature-tag-free {
  background: color-mix(in oklch, var(--color-primary) 16%, var(--color-chapa));
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.feature-tag-lock {
  background: var(--color-secondary);
}

.feature-free {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.feature-locked {
  background: color-mix(in oklch, var(--color-cream) 70%, var(--color-chapa));
}

.feature-locked .feature-name,
.feature-locked .feature-icon {
  opacity: 0.75;
}

/* Planos */
.landing-plans {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  padding: 1.75rem;
  text-align: center;
}

.landing-plans h2 {
  margin-top: 0;
}

.landing-plans-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
  text-align: left;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.4rem 1.3rem;
}
.plan-card-highlight {
  border-color: var(--color-accent, #1d3124);
  box-shadow: 0 0 0 1px var(--color-accent, #1d3124);
}
.plan-badge {
  position: absolute;
  top: -0.7rem;
  right: 1rem;
  background: var(--color-accent, #1d3124);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.plan-name {
  font-size: 1.15rem;
  font-weight: 700;
}
.plan-price {
  margin-top: 0.35rem;
  font-size: 1.05rem;
}
.plan-price strong { font-size: 1.9rem; }
.plan-per { color: var(--color-muted, #6b7280); font-size: 0.95rem; }
.plan-price-year {
  color: var(--color-muted, #6b7280);
  font-size: 0.85rem;
  margin-top: 0.1rem;
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.plan-features li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.4;
  font-size: 0.92rem;
}
.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent, #1d3124);
  font-weight: 700;
}
.plan-card .btn-cta-primary { width: 100%; text-align: center; }

.landing-login {
  display: flex;
  justify-content: center;
}

/* ===== Página de venda: banda de números, seções detalhadas, confiança, FAQ ===== */
.lp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.lp-stat {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.1rem;
  padding: 1.25rem 1.1rem;
  text-align: center;
}
.lp-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  line-height: 1;
  color: var(--color-primary-dark);
}
.lp-stat-lbl {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.84rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.lp-deep {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.lp-block {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  padding: 1.6rem 1.5rem;
}
.lp-block-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.lp-block-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: color-mix(in oklch, var(--color-primary) 12%, var(--color-chapa));
  flex: none;
}
.lp-block-head h3 {
  font-family: var(--font-display);
  color: var(--color-primary-dark);
  font-size: 1.28rem;
  margin: 0;
}
.lp-block-lead {
  color: var(--color-muted);
  margin: 0.7rem 0 1rem;
}
.lp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1.6rem;
}
.lp-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text, #253026);
}
.lp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent, #c9a227);
}
.lp-list li strong { color: var(--color-primary-dark); }

/* Faixa "entrou agora": o que foi acrescentado por último, sem virar changelog na página. */
.lp-novo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent, var(--color-primary));
  border-radius: 1.1rem;
  padding: 1.1rem 1.25rem;
}
.lp-novo-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}
.lp-novo p {
  flex: 1;
  min-width: 240px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-muted);
}
.lp-novo p strong { color: var(--color-primary-dark); }

.lp-why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.lp-why-card {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: 1.1rem;
  padding: 1.3rem;
}
.lp-why-card h4 {
  font-family: var(--font-display);
  color: var(--color-primary-dark);
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}
.lp-why-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-muted);
  line-height: 1.5;
}

.lp-faq-wrap { display: flex; flex-direction: column; gap: 0.6rem; }
.lp-faq {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}
.lp-faq details {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 0.9rem;
  padding: 0 1.1rem;
}
.lp-faq summary {
  cursor: pointer;
  padding: 0.95rem 0;
  font-weight: 600;
  color: var(--color-primary-dark);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "+";
  font-size: 1.35rem;
  line-height: 1;
  color: var(--color-accent, #c9a227);
  flex: none;
}
.lp-faq details[open] summary::after { content: "–"; }
.lp-faq details p {
  margin: 0 0 0.95rem;
  color: var(--color-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.lp-cta-final {
  text-align: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-cream);
  border-radius: 1.5rem;
  padding: 2.3rem 1.5rem;
  box-shadow: 0 24px 60px -30px rgba(20, 40, 30, 0.6);
}
.lp-cta-final h2 {
  font-family: var(--font-display);
  color: #fff;
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
}
.lp-cta-final p {
  margin: 0 0 1.3rem;
  color: rgba(246, 241, 231, 0.9);
}
.lp-cta-center { justify-content: center; }

@media (max-width: 640px) {
  .lp-list { grid-template-columns: 1fr; }
  .lp-block { padding: 1.35rem 1.2rem; }
}

/* =====================================================================
   MODO TRIAL (calculadora) - banner + cadeados
   ===================================================================== */
.trial-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-cream);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.trial-banner strong { color: #fff; }

.trial-banner .trial-banner-text {
  flex: 1;
  min-width: 220px;
  font-size: 0.92rem;
}

/* Link dentro do banner: o fundo é escuro, então herdar a cor de link do app o apagaria. */
.trial-banner .trial-banner-text a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

.trial-locked-card {
  position: relative;
  border: 1px dashed var(--color-border);
  border-radius: 1.1rem;
  padding: 1.5rem;
  text-align: center;
  background: color-mix(in oklch, var(--color-cream) 60%, var(--color-chapa));
}

.trial-locked-card .lock-emoji { font-size: 1.8rem; }

.trial-locked-card h3 {
  margin: 0.5rem 0 0.35rem;
  color: var(--color-primary-dark);
}

.trial-locked-card p {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

.calc-locked-option { color: var(--color-muted); }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 720px) {
  .landing-hero {
    grid-template-columns: 1fr;
    padding: 1.75rem;
    text-align: center;
  }
  .landing-title { font-size: 1.85rem; }
  .landing-sub { max-width: none; }
  .landing-cta { justify-content: center; }
  .landing-hero-art { order: -1; }
  .landing-hero-art img { max-width: 240px; }
}

/* Card de login (landing): o form-toolbar sticky é do formulário de escalas - aqui fica estático */
.auth-panel .form-toolbar {
  position: static;
  background: transparent;
  border-top: none;
  padding: 0;
  margin: 1.2rem 0 0;
  border-radius: 0;
}

/* "Continha" (math) dentro do resultado de dose, estilo conferência */
.calc-math {
  font-size: 0.9rem;
  color: var(--color-primary-dark);
  background: color-mix(in oklch, var(--color-primary) 8%, var(--color-chapa));
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  margin-top: 0.3rem;
  font-variant-numeric: tabular-nums;
}

/* Cadeado nos cards de escala (modo teste) */
.scale-lock { float: right; opacity: 0.7; }

/* Botão "Voltar" no cabeçalho das páginas internas */
.header-link.header-back {
  font-weight: 600;
}

/* Busca de droga na calculadora */
.calc-search-field {
  margin-bottom: 0.4rem;
}
.calc-search-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: -0.2rem 0 1rem;
  border: 1px solid var(--color-border, #d7ddd6);
  border-radius: 10px;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-panel);
}
.calc-search-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  border-bottom: 1px solid color-mix(in oklch, var(--color-primary) 6%, var(--color-chapa));
}
.calc-search-item:last-child { border-bottom: none; }
.calc-search-item:hover,
.calc-search-item:focus-visible {
  background: color-mix(in oklch, var(--color-primary) 10%, var(--color-chapa));
  outline: none;
}
.calc-search-item-name {
  font-weight: 600;
  color: var(--color-primary-dark);
}
.calc-search-item-cat {
  font-size: 0.8rem;
  color: var(--color-muted, #6b7669);
}
.calc-search-empty {
  padding: 0.7rem 0.8rem;
  font-size: 0.9rem;
  color: var(--color-muted, #6b7669);
}

/* ===== Condutas e temas ===== */
.temas-intro { margin-bottom: 1.1rem; }
.temas-search-field { margin-top: 0.4rem; }

.alta-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.alta-detail-actions .primary { margin: 0; }

/* Assistente (IA) */
.assistente-intro { margin-bottom: 1rem; }
.assistente-messages {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 40vh;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.4rem;
}
.assistente-empty { padding: 1.2rem 0.4rem; }
.chat-msg { display: flex; }
.chat-user { justify-content: flex-end; }
.chat-assistant { justify-content: flex-start; }
.chat-bubble {
  max-width: 88%;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  line-height: 1.5;
}
.chat-user .chat-bubble {
  background: var(--color-accent, #1d3124);
  color: #fff;
  border-color: transparent;
  border-bottom-right-radius: 4px;
}
.chat-assistant .chat-bubble {
  background: var(--color-panel);
  border-bottom-left-radius: 4px;
}
.chat-bubble p { margin: 0 0 0.5rem; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble ul { margin: 0.2rem 0 0.5rem; padding-left: 1.2rem; }
.chat-sources {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--color-border);
  font-size: 0.85rem;
}
.chat-sources-title { font-weight: 600; }
.chat-sources ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.chat-sources li { margin-bottom: 0.3rem; }
.assistente-typing { padding: 0.4rem 0.6rem; }
.assistente-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  margin-top: 0.8rem;
}
.assistente-form textarea {
  flex: 1;
  resize: vertical;
  min-height: 2.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font: inherit;
  background: var(--color-panel);
  color: inherit;
}
.assistente-form .primary { margin: 0; white-space: nowrap; }

.temas-area-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.temas-pill {
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  color: var(--color-primary-dark);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.temas-pill:hover { border-color: var(--color-primary); }
.temas-pill.is-active {
  background: var(--color-primary);
  color: var(--color-chapa);
  border-color: var(--color-primary);
}

.temas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.9rem;
}
.tema-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  text-align: left;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1rem 1.05rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 40, 30, 0.04);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.tema-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 40, 30, 0.10);
  border-color: color-mix(in oklch, var(--color-primary) 40%, var(--color-border));
}
.tema-card-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tema-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
}
.tema-badge-emergencia { background: color-mix(in oklch, var(--color-high) 16%, var(--color-chapa)); color: var(--color-high); }
.tema-badge-ambulatorio { background: color-mix(in oklch, var(--color-primary) 15%, var(--color-chapa)); color: var(--color-primary-dark); }
.tema-badge-puericultura { background: color-mix(in oklch, var(--color-accent) 18%, var(--color-chapa)); color: color-mix(in oklch, var(--color-accent) 70%, var(--color-text)); }
.tema-badge-adolescente { background: color-mix(in oklch, oklch(55% 0.12 260) 18%, var(--color-chapa)); color: oklch(45% 0.12 260); }
.tema-badge-cat { background: transparent; border: 1px solid var(--color-border); color: var(--color-muted); font-weight: 600; }
.tema-badge-rev { background: color-mix(in oklch, var(--color-medium) 20%, var(--color-chapa)); color: color-mix(in oklch, var(--color-medium) 65%, var(--color-text)); }
.tema-card-title { font-size: 1.02rem; font-weight: 700; color: var(--color-primary-dark); line-height: 1.25; }
.tema-card-summary { font-size: 0.88rem; color: var(--color-muted); line-height: 1.4; }

.temas-empty { margin-top: 1rem; }

/* Detalhe do tema */
#temas-back-to-list { margin-bottom: 0.8rem; }
.tema-detail-head h2 { margin: 0.5rem 0 0.2rem; }
.tema-detail-summary { margin-top: 0.2rem; }
.tema-section { margin-top: 1.3rem; }
.tema-section h3, .tema-redflags h3, .tema-doses h3 {
  font-size: 1.02rem;
  color: var(--color-primary-dark);
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid color-mix(in oklch, var(--color-primary) 20%, var(--color-chapa));
}
.tema-subheading { font-size: 0.95rem; color: var(--color-primary); margin: 0.8rem 0 0.2rem; }
.tema-section p, .tema-doses p { line-height: 1.55; }
.tema-list { margin: 0.2rem 0 0 1.1rem; line-height: 1.55; }
.tema-list li { margin-bottom: 0.25rem; }

.tema-redflags {
  margin-top: 1.3rem;
  background: color-mix(in oklch, var(--color-high) 8%, var(--color-chapa));
  border: 1px solid color-mix(in oklch, var(--color-high) 30%, var(--color-chapa));
  border-left: 4px solid var(--color-high);
  border-radius: 12px;
  padding: 0.9rem 1.05rem;
}
.tema-redflags h3 { border-bottom: none; color: var(--color-high); margin-bottom: 0.3rem; }
.tema-redflags ul { margin: 0 0 0 1.1rem; line-height: 1.5; }
.tema-redflags li { margin-bottom: 0.25rem; }

.tema-doses {
  margin-top: 1.3rem;
  background: color-mix(in oklch, var(--color-primary) 6%, var(--color-chapa));
  border-radius: 12px;
  padding: 0.9rem 1.05rem;
}
.tema-doses h3 { border-bottom: none; margin-bottom: 0.3rem; }
.tema-doses ul { margin: 0 0 0 1.1rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.tema-doses li { margin-bottom: 0.25rem; }
.tema-doses-note { font-size: 0.85rem; color: var(--color-muted); margin-top: 0.5rem; }

@media (max-width: 560px) {
  .temas-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Prontuário eletrônico pediátrico
   ========================================================================= */
.pr-list-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pr-list-head h2 { margin-top: 0; }
.pr-search-field { margin-top: 1rem; margin-bottom: 0; }

.pr-patients { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; margin-top: 1rem; }
.pr-patient-card {
  text-align: left; background: var(--color-panel); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 1rem 1.15rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.25rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pr-patient-card:hover { border-color: var(--color-primary); box-shadow: 0 8px 20px -16px rgba(20,40,30,0.5); }
.pr-patient-name { font-weight: 600; font-size: 1.05rem; }
.pr-patient-meta { color: var(--color-muted); font-size: 0.85rem; }

.pr-back { margin-bottom: 0.9rem; }
.pr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.pr-subhead { margin: 1.2rem 0 0.2rem; }
.pr-hint { font-size: 0.85rem; margin: 0.1rem 0 0.8rem; }
.pr-form-actions { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.2rem; flex-wrap: wrap; }
.pr-msg { font-size: 0.9rem; }
.pr-msg-ok { color: var(--color-primary); }
.pr-msg-err { color: var(--color-high); }

.pr-responsavel-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }
.pr-responsavel-row input { padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.95rem; }
.pr-r-remove { padding: 0.45rem 0.7rem; line-height: 1; }

.pr-patient-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pr-patient-header h2 { margin: 0; }
.pr-patient-header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Resumo por IA (abaixo do nome do paciente) */
.pr-ai-resumo {
  border-left: 3px solid var(--color-accent, #c9a227);
  background: color-mix(in oklch, var(--color-primary) 5%, var(--color-panel));
}
.pr-ai-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pr-ai-head h3 { margin: 0; font-size: 1.05rem; }
.pr-ai-hint { margin: 0.5rem 0 0; font-size: 0.85rem; }
.pr-ai-out { margin-top: 0.85rem; font-size: 0.94rem; line-height: 1.55; }
.pr-ai-out p { margin: 0 0 0.5rem; }
.pr-ai-out ul { margin: 0.2rem 0 0.6rem; padding-left: 1.2rem; }
.pr-ai-out li { margin-bottom: 0.3rem; }
.pr-ai-out strong { color: var(--color-primary-dark); }
.pr-ai-sec { margin: 1rem 0 0.35rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); border-bottom: 1px solid var(--color-border); padding-bottom: 0.2rem; }
.pr-ai-sec:first-child { margin-top: 0.2rem; }
.pr-ai-disc { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px dashed var(--color-border); font-size: 0.78rem; }

/* Laudo por IA (aba do paciente) */
.lia-setup .auth-field { max-width: 460px; }
.lia-gaps { margin: 1rem 0; }
.lia-gaps-ok {
  background: color-mix(in oklch, var(--color-primary) 10%, var(--color-chapa));
  border-left: 3px solid var(--color-primary); border-radius: 0.7rem; padding: 0.9rem 1.1rem;
}
.lia-gaps-warn {
  background: color-mix(in oklch, var(--color-accent, #c9a227) 14%, var(--color-chapa));
  border-left: 3px solid var(--color-accent, #c9a227); border-radius: 0.7rem; padding: 0.9rem 1.1rem;
}
.lia-gaps-warn ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.lia-gaps-warn li { margin-bottom: 0.25rem; }
.lia-todo {
  background: var(--color-atencao-fundo); color: var(--color-atencao); padding: 0 0.25rem; border-radius: 3px; font-weight: 600;
}
@media print { .lia-todo { background: none; color: inherit; } }
.lia-sugestoes { margin: 0.75rem 0; display: flex; flex-direction: column; gap: 0.55rem; }
.lia-sug-titulo { margin: 0; }
.lia-sug-card { background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 0.8rem; padding: 0.8rem 1rem; }
.lia-sug-top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.lia-sug-nome { font-weight: 600; color: var(--color-primary-dark); }
.lia-sug-card p { margin: 0.35rem 0 0; }
.lia-sug-card .lia-sug-use { margin-top: 0.55rem; }
.lia-badge { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); }
.lia-badge-forte { background: var(--color-ok-fundo); color: var(--color-ok); }
.lia-badge-parcial { background: var(--color-atencao-fundo); color: var(--color-atencao); }
.lia-badge-fraco { background: var(--color-superficie); color: var(--color-muted); }
/* formulário do laudo (motor pré-preenchido) */
.lia-escalas-box { background: color-mix(in oklch, var(--color-primary) 8%, var(--color-chapa)); border: 1px solid var(--color-border); border-radius: 0.7rem; padding: 0.8rem 1rem; margin: 0.7rem 0; }
.lia-escalas-box ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.lia-grupo { border: 1px solid var(--color-border); border-radius: 0.8rem; padding: 0.9rem 1rem; margin: 0.7rem 0; }
.lia-grupo-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.lia-grupo-head h4 { margin: 0; font-size: 1rem; }
.lia-grupo-regra { font-size: 0.76rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); white-space: nowrap; }
.lia-regra-ok { background: var(--color-ok-fundo); color: var(--color-ok); }
.lia-regra-falta { background: var(--color-atencao-fundo); color: var(--color-atencao); }
.lia-crit { margin: 0.6rem 0; }
.lia-crit-check { display: flex; gap: 0.5rem; align-items: flex-start; cursor: pointer; }
.lia-crit-check input { margin-top: 0.3rem; flex: none; }
.lia-crit-desc { font-weight: 400; }
.lia-crit-ex { width: 100%; margin-top: 0.35rem; }
.lia-esps { margin: 0.7rem 0; }
.lia-esps h4 { margin: 0 0 0.4rem; font-size: 1rem; }
.lia-form-actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin: 0.7rem 0; }
.lia-regra-resumo { font-size: 0.85rem; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); }

.pr-tabs { display: flex; gap: 0.4rem; margin: 1rem 0; flex-wrap: wrap; }
.pr-tab {
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 0.5rem 1.1rem; cursor: pointer; font-size: 0.95rem; color: var(--color-text);
}
.pr-tab-active { background: var(--color-primary); color: var(--color-chapa); border-color: var(--color-primary); }

.pr-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }
.pr-panel-head h3 { margin: 0; }

.pr-consulta-item { padding: 1rem 1.2rem; margin-bottom: 0.7rem; cursor: pointer; }
.pr-consulta-item:hover { border-color: var(--color-primary); }
.pr-consulta-item-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.pr-consulta-item-q { margin: 0.35rem 0 0; }

.pr-status-chip { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); white-space: nowrap; }
.pr-status-final { background: var(--color-ok-fundo); color: var(--color-primary-dark); }
.pr-status-draft { background: var(--color-atencao-fundo); color: var(--color-atencao); }

.pr-chart-controls { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.pr-inline-field { margin: 0; }
.pr-inline-field select { min-width: 220px; }
.pr-chart-wrap { width: 100%; overflow-x: auto; }
.pr-chart { width: 100%; height: auto; display: block; }
.pr-chart-note { font-size: 0.82rem; margin-top: 0.4rem; }

.pr-grid { stroke: var(--color-border); stroke-width: 0.5; }
.pr-axis-lab { fill: var(--color-muted); font-size: 11px; font-family: var(--font-sans); }
.pr-axis-title { fill: var(--color-muted); font-size: 12px; font-family: var(--font-sans); }
.pr-zline { stroke-width: 1.2; }
.pr-z0 { stroke: var(--color-primary); stroke-width: 1.6; }
.pr-z2 { stroke: var(--color-accent); }
.pr-z3 { stroke: var(--color-high); stroke-dasharray: 4 3; }
.pr-zlab { fill: var(--color-muted); font-size: 10px; font-family: var(--font-sans); }
.pr-ptline { stroke: var(--color-primary-dark); stroke-width: 2; }
.pr-pt { fill: var(--color-primary-dark); stroke: #fff; stroke-width: 1.5; }

.pr-medicao-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.pr-medicao-del { border: none; background: none; color: var(--color-muted); font-size: 1rem; line-height: 1; padding: 0 0.3rem; cursor: pointer; border-radius: 0.3rem; }
.pr-medicao-del:hover { color: var(--color-high); background: color-mix(in oklch, var(--color-high) 10%, var(--color-chapa)); }
.pr-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pr-lote-head, .pr-lote-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 0.4rem; align-items: center; }
.pr-lote-head { font-size: 0.78rem; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.3rem; }
.pr-lote-row { margin-bottom: 0.4rem; }
.pr-lote-row input { width: 100%; min-width: 0; padding: 0.42rem 0.5rem; border: 1px solid var(--color-border); border-radius: 0.45rem; font: inherit; }
#pr-lote-mais { margin: 0.3rem 0 0.6rem; }
.pr-medicao-date { font-weight: 600; font-size: 0.9rem; }
.pr-medicao-vals { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pr-val { font-size: 0.85rem; padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); background: var(--color-secondary); }
.pr-val em { font-style: normal; opacity: 0.75; }
.pr-val-ok { background: var(--color-ok-fundo); color: var(--color-primary-dark); }
.pr-val-alerta { background: var(--color-atencao-fundo); color: var(--color-atencao); }
.pr-val-grave { background: var(--color-alerta-fundo); color: var(--color-high); }

.pr-table-scroll { overflow-x: auto; }
.pr-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pr-table th, .pr-table td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.pr-table th { color: var(--color-muted); font-weight: 600; }
.pr-delta { color: var(--color-muted); font-size: 0.8rem; }

/* modal */
.pr-modal-backdrop { position: fixed; inset: 0; background: rgba(20,30,25,0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; }
.pr-modal { max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; }
.pr-modal h3 { margin-top: 0; }

/* Assinatura / pagamentos */
.as-plan-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.as-plan-name { font-size: 1.3rem; font-weight: 700; font-family: var(--font-display); }
.as-methods { display: grid; gap: 0.6rem; margin: 0.8rem 0; }
.as-method { display: flex; align-items: center; gap: 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.8rem 1rem; cursor: pointer; }
.as-method:has(input:checked) { border-color: var(--color-primary); background: var(--color-ok-fundo); }
.as-method-body { display: flex; flex-direction: column; }
.as-method-body small { color: var(--color-muted); }
.as-pg-status { font-size: 0.78rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); }
.as-pg-pago { background: var(--color-ok-fundo); color: var(--color-primary-dark); }
.as-pg-pendente { background: var(--color-atencao-fundo); color: var(--color-atencao); }
.as-pg-falhou, .as-pg-estornado { background: var(--color-alerta-fundo); color: var(--color-high); }

@media (max-width: 560px) {
  .pr-grid-2 { grid-template-columns: 1fr; }
  /* minmax(0, 1fr): com 1fr o campo não encolhia abaixo da largura natural e a linha do responsável
     empurrava a página para 501px no celular (rolagem para o lado no cadastro do paciente). */
  .pr-responsavel-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pr-responsavel-row input { min-width: 0; }
  .pr-list-head { flex-direction: column; }
  .pr-inline-field select { min-width: 0; width: 100%; }
}

/* =========================================================================
   Menu de navegação (hambúrguer + gaveta) — js/nav.js
   ========================================================================= */
.nav-toggle {
  width: 46px; height: 40px; padding: 0; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.nav-toggle:hover, .nav-toggle:focus-visible { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.9); }
.nav-toggle span {
  display: block; width: 24px; height: 2.5px; background: var(--color-cream); border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/*
 * VOLTAR PARA A TELA INICIAL, no topo do conteúdo de toda ferramenta (v. js/nav.js).
 *
 * Ficou AQUI e não no cabeçalho, e a escolha foi MEDIDA, não preferida: com o hambúrguer, a
 * logo e "SPI · Sistema Pediátrico Integrado", um botão a mais no cabeçalho quebrava o nome
 * do app em duas linhas a 390px (o aparelho do dono), e encolher a fonte até caber cortava a
 * palavra "Integrado". No corpo o botão fica maior, cai debaixo do polegar e repete um padrão
 * que o produto já usa: o "voltar" das telas da loja.
 */
.nav-voltar {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .9rem;
  padding: .5rem .95rem .5rem .75rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill, 999px);
  background: var(--color-panel); color: var(--color-primary-dark);
  text-decoration: none; font-size: .92rem; font-weight: 500; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20, 40, 30, .06);
  transition: border-color .18s ease, box-shadow .2s ease, transform .12s ease, background .18s ease;
}
.nav-voltar svg { width: 18px; height: 18px; flex: none; }
.nav-voltar:hover {
  border-color: color-mix(in oklch, var(--color-primary) 45%, var(--color-border));
  box-shadow: 0 10px 20px -16px rgba(20, 40, 30, .6);
  transform: translateY(-1px);
}
.nav-voltar:active {
  transform: translateY(1px) scale(.98);
  background: color-mix(in oklch, var(--color-primary) 8%, var(--color-panel));
  border-color: color-mix(in oklch, var(--color-primary) 60%, var(--color-border));
  box-shadow: none;
}
.nav-voltar:focus-visible {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px color-mix(in oklch, var(--color-primary) 55%, transparent);
}
/* No papel o botão não existe. */
@media print { .nav-voltar { display: none !important; } }

.nav-overlay {
  position: fixed; inset: 0; background: rgba(15, 28, 22, 0.5); opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease; z-index: 90;
}
.nav-overlay.open { opacity: 1; visibility: visible; }

.nav-drawer {
  position: fixed; top: 0; left: 0; height: 100%; width: min(330px, 86vw);
  background: var(--color-primary-dark); color: var(--color-cream);
  box-shadow: 18px 0 40px -24px rgba(15, 28, 22, 0.7);
  transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100; display: flex; flex-direction: column; overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(246, 241, 231, 0.14);
  position: sticky; top: 0; background: var(--color-primary-dark); z-index: 1;
}
.nav-drawer-title { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: #fff; }
.nav-drawer-logo { width: 26px; height: 26px; border-radius: 50%; }
.nav-close { background: transparent; border: none; font-size: 1.9rem; line-height: 1; color: rgba(246, 241, 231, 0.7); cursor: pointer; padding: 0 0.3rem; }
.nav-close:hover { color: #fff; }

.nav-list { padding: 0.6rem 0.75rem 1.2rem; }
.nav-group {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 700;
  color: rgba(246, 241, 231, 0.52); padding: 1.05rem 0.75rem 0.4rem;
}
.nav-list > .nav-group:first-child { padding-top: 0.4rem; }
.nav-link {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; box-sizing: border-box;
  padding: 0.7rem 0.75rem; border-radius: 0.6rem; border: none; background: transparent;
  color: rgba(246, 241, 231, 0.9); font-size: 1rem; text-decoration: none; cursor: pointer;
  border-left: 3px solid transparent; transition: background 0.15s, color 0.15s;
}
.nav-ico { flex: 0 0 auto; display: inline-flex; color: rgba(246, 241, 231, 0.6); }
.nav-ico svg { width: 20px; height: 20px; display: block; }
.nav-link-active .nav-ico { color: var(--color-accent); }
.nav-logout .nav-ico { color: #f0b4a8; }
.nav-link:hover { background: rgba(246, 241, 231, 0.1); color: #fff; }
.nav-link:hover .nav-ico { color: rgba(246, 241, 231, 0.9); }
.nav-link-active { background: rgba(246, 241, 231, 0.14); border-left-color: var(--color-accent); font-weight: 600; color: #fff; }
/* "Trocar de módulo" abre o bloco final da gaveta, junto do Sair. A borda de cima é dele: se
   ficasse no Sair, apareceria uma linha entre os dois e eles pareceriam grupos diferentes. */
.nav-trocar-modulo { margin-top: 0.7rem; border-top: 1px solid rgba(246, 241, 231, 0.14); border-radius: 0; padding-top: 0.9rem; }
.nav-logout { border-radius: 0; color: #f2c0b6; font-weight: 600; }
.nav-logout:hover { background: rgba(240, 120, 100, 0.16); color: #ffd9d1; }

/* Tela inicial (hub) — boas-vindas; a navegação é pelo menu hambúrguer */
.hub-welcome { text-align: left; max-width: none; margin: 1.75rem 0 0; padding: 0; }
.hub-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-gold-deep);
}
.hub-eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--color-gold); }
.hub-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 5.2vw, 2.9rem); line-height: 1.04; letter-spacing: -0.018em;
  margin: 0.55rem 0 0.6rem; color: var(--color-primary-dark);
}
.hub-lead { max-width: 48ch; font-size: 1.03rem; line-height: 1.55; margin: 0; }
.hub-welcome-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7em; height: 1.7em; border-radius: 0.4rem; background: var(--color-primary);
  color: var(--color-chapa); font-size: 0.85em; vertical-align: middle; cursor: pointer; margin: 0 0.15em;
}
.hub-welcome-burger svg { width: 1em; height: 1em; }

/* Marca do sistema no cabeçalho (logo) + nome do sistema */
.header-mark { display: inline-flex; flex: 0 0 auto; }
.header-mark svg { height: 2rem; width: 2rem; display: block; }
.header-mark-img { height: 2rem; width: 2rem; display: block; border-radius: 7px; object-fit: cover; }
header.app-header h1 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.005em; line-height: 1.15; }
@media (max-width: 560px) {
  header.app-header { padding: 0.75rem 1rem; }
  header.app-header h1 { font-size: 1rem; }
  .header-mark svg { height: 1.75rem; width: 1.75rem; }
  .header-mark-img { height: 1.75rem; width: 1.75rem; border-radius: 6px; }
}

/* Marca dentro da gaveta do menu (fundo claro) */
.nav-drawer-title { font-size: 1rem; }
.nav-drawer-title .header-mark svg { height: 1.6rem; width: 1.6rem; }
.nav-drawer-title .header-mark-img { height: 1.6rem; width: 1.6rem; border-radius: 6px; }

/* Prontuário — escalas de autopreenchimento */
.pr-escala-list { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.pr-escala-pick {
  display: flex; flex-direction: column; gap: 0.15rem; text-align: left; cursor: pointer;
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 0.7rem 0.9rem; transition: border-color 0.15s, background 0.15s;
}
.pr-escala-pick:hover { border-color: var(--color-primary); background: var(--color-secondary); }
.pr-escala-pick-name { font-weight: 600; }
.pr-escala-pick-cat { font-size: 0.8rem; color: var(--color-muted); }

.pr-consulta-head-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Atalhos rápidos na tela inicial */
.hub-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.85rem; margin-top: 1.5rem; }
.hub-shortcut {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-decoration: none;
  padding: 1.25rem 0.9rem; border: 1px solid var(--color-border); border-radius: 1.1rem;
  background: var(--color-panel); color: var(--color-text); font-weight: 600; font-size: 0.95rem; text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.hub-shortcut:hover {
  border-color: color-mix(in oklch, var(--color-primary) 45%, var(--color-border));
  box-shadow: 0 20px 38px -22px rgba(20, 40, 30, 0.5);
  transform: translateY(-3px);
}
.hub-shortcut-ico {
  display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center;
  border-radius: 14px; background: color-mix(in oklch, var(--color-primary) 14%, var(--color-chapa)); color: var(--color-primary-dark);
  transition: background 0.2s ease, transform 0.2s ease;
}
.hub-shortcut-ico svg { width: 24px; height: 24px; }
.hub-shortcut:hover .hub-shortcut-ico { transform: translateY(-1px) scale(1.05); background: color-mix(in oklch, var(--color-primary) 22%, var(--color-chapa)); }

/* Antropometria dentro da consulta */
.pr-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
@media (max-width: 560px) { .pr-grid-3 { grid-template-columns: 1fr; } }
.pr-grid-vitais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
@media (max-width: 560px) { .pr-grid-vitais { grid-template-columns: repeat(2, 1fr); } }
.pr-vital-ref { display: block; font-size: 0.72rem; color: var(--color-muted); margin-top: -0.35rem; }
input.pr-vital-alt { border-color: var(--color-accent); background: color-mix(in oklch, var(--color-accent) 8%, transparent); }
input.pr-vital-alt + .pr-vital-ref { color: var(--color-accent); font-weight: 600; }
/* O alerta de peso (2026-10-16, js/peso-alerta.js): aviso embaixo do campo, nunca bloqueia. */
.pr-peso-alerta { margin: 0.35rem 0 0; padding: 0.45rem 0.6rem; border-radius: 0.6rem; font-size: 0.82rem; line-height: 1.45; border: 1px solid var(--color-accent); color: var(--color-text); }
.pr-peso-alerta.pr-peso-nivel-alerta { border-color: var(--color-high); }
.pr-peso-alerta button { margin-left: 0.4rem; font-size: 0.8rem; padding: 0.2rem 0.6rem; }
.pr-peso-calc { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0.2rem 0 0.8rem; font-size: 0.88rem; }
.pr-peso-calc a { padding: 0.25rem 0.65rem; border: 1px solid var(--color-border); border-radius: 999px; text-decoration: none; }
.pr-peso-calc a:hover { border-color: var(--color-gold, var(--color-accent)); }
/* Venda da Hotmart com problema (2026-10-16): só nas contas do dono, js/nav.js alertaDeVendas. */
.home-venda-aviso { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; margin: 0.8rem 0; padding: 0.75rem 1rem; border: 2px solid var(--color-high); border-radius: var(--radius); color: var(--color-text); text-decoration: none; background: var(--color-panel); }
.home-venda-aviso strong { color: var(--color-high); }

/* Resultados de exames + tendência */
.pr-res-form { display: grid; grid-template-columns: auto 1.4fr 1fr 0.8fr auto; gap: 0.5rem 0.7rem; align-items: end; }
.pr-res-form .primary { height: 2.6rem; }
@media (max-width: 620px) { .pr-res-form { grid-template-columns: 1fr 1fr; } .pr-res-form .pr-res-nome { grid-column: 1 / -1; } .pr-res-form .primary { grid-column: 1 / -1; } }
.pr-res-group { padding-top: 0.8rem; }
.pr-res-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.pr-res-group-head h3 { margin: 0; font-size: 1rem; }
.pr-res-last { font-weight: 700; color: var(--color-primary-dark, var(--color-primary)); }
.pr-spark { width: 100%; height: 60px; margin: 0.4rem 0; display: block; }
.pr-spark path { fill: none; stroke: var(--color-primary); stroke-width: 2; }
.pr-spark circle { fill: var(--color-primary); }
.pr-res-pts { display: flex; flex-direction: column; gap: 0.1rem; }
.pr-res-pt { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; border-top: 1px solid var(--color-border); font-size: 0.9rem; }
.pr-res-pt-data { color: var(--color-muted); min-width: 5.5rem; }
.pr-res-pt-val { flex: 1; font-weight: 600; }
.pr-res-del { background: transparent; border: none; color: var(--color-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 0.3rem; }
.pr-res-del:hover { color: var(--color-danger, #c0392b); }

.pr-ig-row { display: flex; gap: 0.5rem; }
.pr-ig-row input { flex: 1; min-width: 0; }

/* =========================================================================
   Meu dia (recall / pendências)
   ========================================================================= */
.dia-hero { margin: 0.4rem 0 1.1rem; }
.dia-saud { margin: 0; font-size: 1.5rem; }
.dia-data { margin: 0.15rem 0 0; }
.dia-panel { margin-bottom: 1rem; }
.dia-sec-head { display: flex; align-items: center; gap: 0.6rem; }
.dia-sec-head h3 { margin: 0; font-size: 1.08rem; }
.dia-count { background: var(--color-primary); color: var(--color-chapa); border-radius: 999px; min-width: 1.5rem; height: 1.5rem; padding: 0 0.5rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; }
.dia-sec-hint { margin: 0.25rem 0 0; font-size: 0.85rem; }
.dia-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.8rem; }
.dia-row {
  display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: inherit;
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 0.7rem 0.9rem; transition: border-color .15s, box-shadow .15s;
}
.dia-row:hover { border-color: var(--color-primary); box-shadow: 0 8px 20px -16px rgba(20,40,30,0.5); }
.dia-row-left { display: flex; flex-direction: column; align-items: center; min-width: 3.4rem; }
.dia-hora { font-weight: 700; color: var(--color-primary-dark, var(--color-primary)); font-size: 0.95rem; white-space: nowrap; }
.dia-hora-2 { font-size: 0.78rem; color: var(--color-muted); }
.dia-row-main { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 auto; min-width: 0; }
.dia-row-title { font-weight: 600; }
.dia-row-sub { font-size: 0.82rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia-row-tag { flex: 0 0 auto; }
.dia-tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted); background: var(--color-bg, #f2f2ee); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.15rem 0.55rem; white-space: nowrap; }
.dia-tag-ok { color: var(--color-ok); border-color: var(--color-ok); }
.dia-tag-warn { color: #9a6b00; border-color: #d9b25a; }
.dia-wpp { font-size: 0.78rem; font-weight: 700; color: #128c4b; border: 1px solid #128c4b; border-radius: 999px; padding: 0.2rem 0.6rem; text-decoration: none; white-space: nowrap; }
.dia-wpp:hover { background: #128c4b; color: #fff; }
.dia-vazio { color: var(--color-muted); font-size: 0.9rem; margin: 0.3rem 0; }
.dia-erro { color: var(--color-danger, #c0392b); }

/* =========================================================================
   Portal do responsável — painel no prontuário (médico) + página do portal
   ========================================================================= */
.pr-portal-panel { }
.pr-wa-panel summary { cursor: pointer; }
.pr-wa-box { display: flex; flex-direction: column; gap: .4rem; max-height: 22rem; overflow-y: auto; margin-top: .5rem; }
/* As bolhas usavam var(--surface-2) e var(--primary-soft), que nao existem no SPI: valia o fundo
   claro de reserva, com o texto claro do tema escuro por cima, e a conversa ficava invisivel
   (print do dono, 2026-10-06: "N ta aparecendo"). Agora cor solida escura, nas cores do tema. */
.pr-wa-msg { padding: .45rem .6rem; border-radius: .6rem; max-width: 85%; background: #1f1f1f; border: 1px solid rgba(252, 244, 232, .12); color: var(--color-text); }
.pr-wa-saida { align-self: flex-end; background: #0e3b39; border-color: rgba(70, 150, 142, .35); }
.pr-wa-meta { font-size: .75rem; color: var(--color-muted); }
.pr-wa-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.pr-wa-falhou { color: var(--color-high, #f0a199); font-weight: 600; }
@media print { .pr-wa-msg, .pr-wa-saida { background: #fff; color: #111; border-color: #ccc; } .pr-wa-meta { color: #444; } }
.pr-portal-panel summary { cursor: pointer; }
.pr-portal-hint { font-size: 0.86rem; margin: 0.5rem 0; }
.pr-portal-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.pr-portal-form input { flex: 1 1 12rem; min-width: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
.pr-portal-list { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.pr-portal-item { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0.6rem; border: 1px solid var(--color-border); border-radius: 0.5rem; }
.pr-portal-item.pr-portal-off { opacity: 0.6; }
/* pendente é diferente de revogado: pede ação, então chama atenção em vez de apagar */
.pr-portal-item.pr-portal-pend { border-color: var(--color-accent, #b8860b); background: rgba(184, 134, 11, 0.07); }
.pr-portal-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* aviso de sexo presumido pelo nome (ficha criada pela Carla) */
.pr-sexo-presumido {
  grid-column: 1 / -1; margin: -0.2rem 0 0.4rem; padding: 0.5rem 0.7rem;
  font-size: 0.84rem; line-height: 1.4; border-radius: 0.5rem;
  border: 1px solid var(--color-accent, #b8860b); background: rgba(184, 134, 11, 0.09);
}

/* portal dentro do detalhe do agendamento (Agenda) */
.ag-portal-box { margin: 0.6rem 0; }
.ag-portal-box p { margin: 0.3rem 0; font-size: 0.88rem; }
.ag-pago-info { margin: 0.6rem 0; color: var(--a-area-gestao, #2e8b57); font-weight: 600; }
.ag-portal-item { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.ag-portal-tag { font-size: 0.78rem; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--color-border); }
.ag-portal-tag.ag-portal-pend { border-color: var(--color-accent, #b8860b); background: rgba(184, 134, 11, 0.12); }
.ag-c-portal { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.6rem 0 0.2rem; font-size: 0.9rem; }
.ag-c-portal input { margin-top: 0.2rem; flex: 0 0 auto; }
.ag-c-portal-hint { font-size: 0.8rem; margin: 0 0 0.4rem; }
.doc-share-on { color: var(--color-ok); border-color: var(--color-ok); }

/* portal (página do responsável) */
.pt-login-card { max-width: 26rem; margin: 1.5rem auto; }
.pt-login-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.pt-login-help { font-size: 0.82rem; margin-top: 0.8rem; }
.pt-topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 0.4rem 0 1rem; }
.pt-saud { margin: 0; font-size: 1.4rem; }
.pt-filho-sel { font-size: 0.85rem; color: var(--color-muted); display: flex; flex-direction: column; gap: 0.2rem; }
.pt-filho-sel select { padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; }
.pt-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.pt-tab { padding: 0.5rem 0.9rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-panel); cursor: pointer; font: inherit; }
.pt-tab-active { background: var(--color-primary); color: var(--color-chapa); border-color: var(--color-primary); }
.pt-h3 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.pt-doc-hint { font-size: 0.85rem; margin: 0.6rem 0; }
.pt-nota { font-size: 0.8rem; margin-top: 0.8rem; }
.pt-cresc-ind { max-width: 20rem; margin-bottom: 0.6rem; }
.pr-lote-ia { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 0.7rem; flex-wrap: wrap; }
.pr-lote-ia select { flex: 1; min-width: 12rem; padding: 0.45rem 0.5rem; border: 1px solid var(--color-border); border-radius: 0.45rem; font: inherit; }
.doc-cat { padding: 0.35rem 0.5rem; border: 1px solid var(--color-border); border-radius: 999px; font: inherit; font-size: 0.82rem; background: var(--color-secondary, #f4f1ea); max-width: 11rem; }
.pt-rem-pick { display: flex; gap: 0.5rem; align-items: center; margin: 0.6rem 0; flex-wrap: wrap; }
.pt-rem-pick select { flex: 1; min-width: 12rem; padding: 0.45rem 0.5rem; border: 1px solid var(--color-border); border-radius: 0.45rem; font: inherit; }
.pt-rem-card { margin-top: 0.7rem; }
.pt-rem-card .auth-field { max-width: 18rem; margin: 0.4rem 0; }
.pt-rem-horas { list-style: none; margin: 0.4rem 0; padding: 0; columns: 2; column-gap: 1rem; }
.pt-rem-horas li { font-size: 0.88rem; margin-bottom: 0.25rem; break-inside: avoid; }
.pt-rem-horas input[type="checkbox"]:checked + * , .pt-rem-horas label:has(input:checked) { color: var(--color-muted); text-decoration: line-through; }
.pt-rem-remover { border: none; background: none; color: var(--color-high); font-size: 0.82rem; cursor: pointer; padding: 0.2rem 0; }
@media (max-width: 560px) { .pt-rem-horas { columns: 1; } }
.pt-vac-prox { margin-top: 0.7rem; border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent, #a5804a); border-radius: 0.6rem; padding: 0.6rem 0.8rem; }
.pt-vac-prox ul { margin: 0.3rem 0 0 1.1rem; line-height: 1.55; font-size: 0.88rem; }
.pt-vac-prox-data { font-variant-numeric: tabular-nums; font-weight: 600; }
.pt-vac-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.7rem; margin-top: 0.8rem; }
.pt-vac-card { border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.6rem 0.8rem; }
.pt-vac-card ul { margin: 0.4rem 0 0; padding-left: 1rem; }
.pt-vac-dose { font-size: 0.86rem; margin-bottom: 0.15rem; }
.pt-vac-aplicada { color: var(--color-ok); }
.pt-vac-atrasada { color: var(--color-high, #b3261e); font-weight: 600; }
.pt-vac-futura { color: var(--color-muted); }
.pt-vac-perdida { color: var(--color-medium, #9a6b00); }
.pt-table-wrap { overflow-x: auto; }
.pt-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pt-table th, .pt-table td { border: 1px solid var(--color-border); padding: 0.4rem 0.6rem; text-align: left; white-space: nowrap; }
.pt-table th { background: var(--color-secondary, #f4efe2); }
.pt-pct { display: inline-block; margin-left: 0.35rem; font-size: 0.75rem; color: var(--color-muted); }

/* =========================================================================
   Agenda + Financeiro
   ========================================================================= */
.ag-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ag-nav { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ag-nav input[type="date"], .ag-nav input[type="month"] { padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; }
.ag-nav button { padding: 0.45rem 0.8rem; }
.ag-day-title { margin: 0.8rem 0 0; font-size: 1.15rem; }

.ag-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.ag-item {
  display: flex; align-items: center; gap: 0.9rem; text-align: left; cursor: pointer;
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 0.9rem 1.1rem; transition: border-color 0.15s, box-shadow 0.15s;
}
.ag-item:hover { border-color: var(--color-primary); box-shadow: 0 8px 20px -16px rgba(20,40,30,0.5); }
.ag-time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-primary-dark); white-space: nowrap; }
.ag-item-main { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; min-width: 0; }
.ag-item-name { font-weight: 600; }
.ag-item-obs { font-size: 0.82rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-tag-carla { align-self: flex-start; font-size: 0.7rem; font-weight: 700; background: var(--color-ok-fundo); color: var(--color-primary-dark); padding: 0.1rem 0.45rem; border-radius: var(--radius-pill); }
.ag-status { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); white-space: nowrap; }
.ag-st-agendado { background: var(--color-secondary); color: var(--color-text); }
.ag-st-confirmado { background: #e0edff; color: #1b4b8a; }
.ag-st-atendido { background: var(--color-ok-fundo); color: var(--color-primary-dark); }
.ag-st-faltou { background: var(--color-atencao-fundo); color: var(--color-atencao); }
.ag-st-cancelado { background: var(--color-alerta-fundo); color: var(--color-high); }
.ag-status-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0; }
.ag-status-btn { padding: 0.4rem 0.8rem; font-size: 0.9rem; }

.fin-add-actions { display: flex; gap: 0.5rem; }
.fin-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 1rem; }
.fin-sum-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.9rem 1rem; text-align: center; }
.fin-sum-label { display: block; font-size: 0.8rem; color: var(--color-muted); }
.fin-sum-val { display: block; font-size: 1.35rem; font-weight: 700; margin-top: 0.2rem; }
.fin-sum-in .fin-sum-val { color: var(--color-primary); }
.fin-sum-out .fin-sum-val { color: var(--color-high); }
.fin-sum-bal { background: var(--color-secondary); }
.fin-bar-in { fill: var(--color-primary); }
.fin-bar-out { fill: var(--color-high); }
.fin-legend { display: flex; gap: 1.2rem; justify-content: center; font-size: 0.85rem; color: var(--color-muted); margin-top: 0.3rem; }
.fin-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 0.3rem; }
.fin-dot-in { background: var(--color-primary); }
.fin-dot-out { background: var(--color-high); }
.fin-val-in { color: var(--color-primary); font-weight: 600; white-space: nowrap; }
.fin-val-out { color: var(--color-high); font-weight: 600; white-space: nowrap; }
.fin-del { background: transparent; border: none; color: var(--color-muted); cursor: pointer; font-size: 0.9rem; }
.fin-del:hover { color: var(--color-high); }

/* o resumo e um gráfico pequeno lado a lado no computador; a lista inteira logo abaixo (2026-10-15) */
.fin-topo { display: grid; gap: 1rem; align-items: start; }
.fin-grafico h3 { margin: 1rem 0 .4rem; font-size: 1rem; }
.fin-grafico .pr-chart { max-height: 220px; }
.fin-grafico .pr-axis-lab { font-size: 15px; }
.fin-summary .fin-sum-card { padding: 0.7rem 0.8rem; }
.fin-sum-pend { display: block; font-size: 0.8rem; font-weight: 600; color: var(--color-muted); margin-top: 0.15rem; }
@media (min-width: 1100px) {
  .fin-topo { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); }
  .fin-grafico h3 { margin-top: 0.4rem; }
  .fin-sum-label { font-size: 0.88rem; }
}
@media (max-width: 560px) {
  /* no celular, dois por linha (o total do mês na linha toda): a lista sobe */
  .fin-summary { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .fin-summary .fin-sum-card:nth-child(3) { grid-column: 1 / -1; }
  .fin-summary .fin-sum-val { font-size: 1.1rem; }
  .fin-grafico .pr-chart { max-height: 150px; }
  .ag-bar { flex-direction: column; align-items: stretch; }
}

/* o período (atalhos e De/Até) e a busca do Financeiro (2026-10-16, fila #110) */
.fin-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.8rem; }
.fin-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
button.secondary.fin-chip { padding: 0.4rem 0.9rem; font-size: 0.9rem; } /* button.secondary vem antes e traria o preenchimento grande */
button.secondary.fin-chip[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-chapa); font-weight: 600; }
.fin-datas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.fin-datas label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-muted); }
.fin-datas input { padding: 0.4rem 0.55rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.95rem; }
.fin-periodo-texto { margin: 0; font-size: 0.85rem; }
.fin-lista-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.fin-lista-topo h3 { margin: 0; }
.fin-busca { flex: 1 1 220px; max-width: 360px; min-width: 0; padding: 0.5rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; }
@media (max-width: 560px) {
  /* no celular os quatro atalhos em 2 por linha (em fila ocupariam a tela inteira) */
  .fin-chips { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  button.secondary.fin-chip { padding: 0.4rem 0.4rem; }
  .fin-datas { width: 100%; }
  .fin-datas label { flex: 1 1 9.5rem; min-width: 0; }
  .fin-datas input { flex: 1; min-width: 0; }
  .fin-busca { max-width: none; }
}

/* Agenda — calendário do mês */
.ag-cal-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; }
.ag-cal-title { margin: 0; flex: 1; text-align: center; font-size: 1.1rem; }
.ag-cal-arrow { padding: 0.35rem 0.8rem; }
.ag-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.ag-cal-wd { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--color-muted); padding: 0.2rem 0; }
.ag-cal-empty { aspect-ratio: 1 / 1; }
.ag-cal-day {
  position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--color-border); border-radius: 0.6rem;
  background: var(--color-panel); color: var(--color-text); cursor: pointer; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center; transition: border-color 0.12s, background 0.12s;
}
.ag-cal-day:hover { border-color: var(--color-primary); }
.ag-cal-today { font-weight: 700; border-color: var(--color-muted); }
.ag-cal-sel { background: var(--color-primary); color: var(--color-chapa); border-color: var(--color-primary); }
.ag-dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }
.ag-cal-sel .ag-dot { background: var(--color-cream); }
.ag-cal-legend { display: flex; justify-content: center; font-size: 0.8rem; color: var(--color-muted); margin-top: 0.7rem; }
.ag-cal-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); vertical-align: middle; margin-right: 0.35rem; }
/* Agenda única (2026-10-08): grade de horários, bloqueios, extras e feriados dentro do SPI. */
.ag-cal-legend { gap: 1rem; flex-wrap: wrap; }
.ag-cal-legend i.ag-dot-bloq, .ag-dot-bloq { background: #8a8a8a; }
/* Cada dia escrito por dentro (2026-10-13): "8h Consulta", "19h Plantão", com a bolinha da cor do
   tipo (amarela consulta, azul plantão, vermelha outros compromissos), como no Google Agenda. */
.ag-cal-day {
  aspect-ratio: auto; min-height: 5.6rem; padding: .3rem .3rem .35rem; overflow: hidden;
  flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .2rem; text-align: left;
}
.ag-cal-empty { aspect-ratio: auto; min-height: 5.6rem; }
.ag-cal-num { font-size: .9rem; line-height: 1.1; padding-left: .1rem; }
.ag-itens { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.ag-it { display: flex; align-items: center; gap: .25rem; min-width: 0; font-size: .72rem; line-height: 1.2; font-weight: 600; white-space: nowrap; overflow: hidden; }
.ag-it-h { font-weight: 700; }
.ag-cal-ver { display: flex; justify-content: center; gap: .3rem; margin: -.2rem 0 .8rem; }
.ag-cal-ver button { margin: 0; padding: .35rem .85rem; min-height: 0; border-radius: 999px; font-size: .82rem; font-weight: 600;
  border: 1px solid var(--color-border); background: transparent; color: var(--color-muted); box-shadow: none; cursor: pointer; }
.ag-cal-ver button[aria-pressed="true"] { border-color: var(--spi-ouro, #e6bb5a); color: var(--color-text); background: rgba(230, 187, 90, .14); }
.ag-it-t { overflow: hidden; text-overflow: ellipsis; }
.ag-it .ag-dot, .ag-cal-legend .ag-dot { position: static; transform: none; flex: 0 0 auto; width: 7px; height: 7px; margin: 0; }
.ag-dot-consulta, .ag-cal-legend i.ag-dot-consulta { background: #f2c94c; }
.ag-dot-plantao, .ag-cal-legend i.ag-dot-plantao { background: #4f8ff7; }
.ag-dot-outro, .ag-cal-legend i.ag-dot-outro { background: #e5534b; }
.ag-it-mais { font-weight: 500; color: var(--color-muted); padding-left: .1rem; }
/* no dia escolhido (dourado) a bolinha ganha um contorno escuro, senão a amarela some */
.ag-cal-sel .ag-it .ag-dot { box-shadow: 0 0 0 1.5px rgba(20, 20, 20, .75); }
.ag-cal-sel .ag-it .ag-dot-consulta { background: #f2c94c; }
.ag-cal-sel .ag-it .ag-dot-plantao { background: #4f8ff7; }
.ag-cal-sel .ag-it .ag-dot-outro { background: #e5534b; }
.ag-cal-sel .ag-it-mais { color: inherit; opacity: .75; }
@media (max-width: 599px) {
  .ag-cal { gap: 3px; }
  .ag-cal-day, .ag-cal-empty { min-height: 4.4rem; }
  .ag-cal-day { padding: .2rem .15rem .25rem; border-radius: .45rem; gap: .12rem; }
  .ag-cal-num { font-size: .78rem; }
  /* no celular a caixinha é estreita: a hora em cima, o que é embaixo ("19h" / "Plantão") */
  #ag-app > .panel:first-child { padding-left: 8px; padding-right: 8px; }
  .ag-cal-day { padding-left: .18rem; padding-right: .1rem; }
  /* Letra de 12px no mínimo (a de 9,5 a 10px não se lia). Na caixinha estreita fica a bolinha da cor
     (a legenda diz o que é cada cor) e a hora; o "Consulta" escrito some quando há hora, e o "+6 mais"
     vira "+6". O botão do dia continua dizendo tudo ao leitor de tela (aria-label). */
  .ag-it { display: grid; grid-template-columns: 5px minmax(0, 1fr); column-gap: .16rem; row-gap: 0; align-items: center; font-size: 12px; line-height: 1.2; letter-spacing: 0; }
  .ag-it .ag-dot { width: 5px; height: 5px; }
  .ag-it-h { grid-column: 2; }
  /* o que é (sem hora) ocupa a linha de baixo inteira, sem o recuo da bolinha */
  .ag-it-t { grid-column: 1 / -1; font-weight: 500; font-size: 12px; letter-spacing: 0; text-overflow: clip; }
  .ag-it .ag-dot + .ag-it-t { grid-column: 2; }
  .ag-it .ag-it-h + .ag-it-t, .ag-it-mais-txt { display: none; }
  .ag-it-mais { display: block; font-size: 12px; }
}
.ag-cal-bloq { background: repeating-linear-gradient(135deg, var(--color-panel) 0 6px, rgba(138,138,138,.18) 6px 12px); color: var(--color-muted); }
.ag-acoes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
/* Remarcar (2026-10-13): os horários livres do dia escolhido, em botões */
.ag-r-livres { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .8rem; }
.ag-r-livres .ag-r-chip { padding: .35rem .8rem; min-height: 0; margin: 0; }
.ag-r-livres .ag-r-chip-on { border-color: var(--spi-ouro, #e6bb5a); background: rgba(230, 187, 90, .18); }
.ag-acoes button { padding: 0.4rem 0.75rem; font-size: 0.88rem; }
.ag-grade-aviso { margin: 0.6rem 0 0; font-size: 0.88rem; }
.ag-slot { display: flex; align-items: center; gap: 0.9rem; border: 1px dashed var(--color-border); border-radius: var(--radius); padding: 0.55rem 1.1rem; background: transparent; }
.ag-slot .ag-time { color: var(--color-muted); font-weight: 600; }
.ag-slot-rot { flex: 1 1 auto; font-size: 0.9rem; color: var(--color-muted); }
.ag-slot-acoes { display: flex; gap: 0.35rem; flex-wrap: nowrap; flex-shrink: 0; }
.ag-list .ag-slot .ag-slot-acoes button { padding: 0.3rem 0.65rem; font-size: 0.82rem; min-height: 0; width: auto; }
@media (max-width: 480px) {
  .ag-slot { gap: 0.5rem; padding: 0.45rem 0.6rem; }
  .ag-list .ag-slot .ag-slot-acoes button { padding: 0.28rem 0.5rem; font-size: 0.78rem; }
}
.ag-slot-livre .ag-slot-rot { color: var(--color-primary-dark); }
.ag-slot-bloq { border-style: solid; background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(138,138,138,.12) 8px 16px); }
/* Google Agenda do médico (2026-10-13): o cartão embaixo do calendário e o compromisso que veio de lá */
.ag-google { margin-top: 1rem; padding: .85rem 1rem; border: 1px solid var(--color-border); border-left: 3px solid #4285f4; border-radius: .8rem; }
.ag-google-cab { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.ag-google-ok { font-size: .75rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; background: rgba(66,133,244,.16); color: #8ab4f8; }
.ag-google p { margin: .25rem 0; font-size: .88rem; }
.ag-google-aviso { color: var(--color-primary); }
.ag-google-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.ag-google-acoes button { margin: 0; }
.ag-slot-google { border-left: 3px solid #4285f4; }
/* Agenda de Plantão -> Google Agenda (2026-10-13) */
.pl-google { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0 .8rem; padding: .6rem .9rem; border: 1px solid var(--color-border); border-left: 3px solid #4285f4; border-radius: .7rem; font-size: .9rem; }
.pl-google button { margin: 0; }
.pl-google-txt { flex: 1 1 16rem; }
.ag-tag-extra { font-size: 0.7rem; font-weight: 700; background: #e0edff; color: #1b4b8a; padding: 0.1rem 0.45rem; border-radius: var(--radius-pill); margin-left: 0.35rem; }
.ag-tag-secretaria { align-self: flex-start; font-size: 0.7rem; font-weight: 700; background: #efe6ff; color: #4b2a8a; padding: 0.1rem 0.45rem; border-radius: var(--radius-pill); }
.ag-fer-lista { max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 0.3rem; margin: 0.6rem 0; }
.ag-fer-lista label { display: flex; gap: 0.5rem; align-items: center; font-size: 0.92rem; }
.ag-fer-lista small { color: var(--color-muted); }
.ag-dias { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin: 0.4rem 0 0.8rem; }
.ag-dias label { display: flex; align-items: center; gap: 0.3rem; }

.ag-tag-plano { align-self: flex-start; font-size: 0.7rem; font-weight: 700; background: var(--color-ok-fundo); color: var(--color-primary-dark); padding: 0.1rem 0.45rem; border-radius: var(--radius-pill); }

/* Consultas do plano no prontuário (js/plano-agenda.js) */
.pr-plano-ag summary { cursor: pointer; }
.pa-lista { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pa-item { display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem 0.7rem; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.55rem 0.8rem; }
.pa-n { font-weight: 700; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.pa-corpo { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center; min-width: 0; }
.pa-rot { flex: 1 1 14rem; min-width: 0; }
.pa-campos { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.pa-campos input { width: auto; }
.pa-quando { font-weight: 600; font-variant-numeric: tabular-nums; }
.pa-st { font-size: 0.75rem; font-weight: 700; padding: 0.12rem 0.5rem; border-radius: var(--radius-pill); background: var(--color-secondary); color: var(--color-text); white-space: nowrap; }
.pa-st-na_agenda { background: #e0edff; color: #1b4b8a; }
.pa-st-realizada { background: var(--color-ok-fundo); color: var(--color-primary-dark); }
.pa-st-atrasada, .pa-st-faltou { background: var(--color-atencao-fundo); color: var(--color-atencao); }
.pa-acoes { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.pa-item .pa-acoes button, .pa-pe button, .pa-picker button { padding: 0.3rem 0.65rem; font-size: 0.82rem; min-height: 0; width: auto; }
.pa-picker { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: flex-end; border-top: 1px dashed var(--color-border); padding-top: 0.5rem; }
.pa-picker .pk-horas { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
.pa-picker .pk-acoes { display: flex; gap: 0.35rem; }
.pa-realizada .pa-rot, .pa-na_agenda .pa-rot { background: transparent; border-color: transparent; }
.pa-pe { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.pa-prever { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: flex-end; }
.pa-aviso { background: var(--color-atencao-fundo); color: var(--color-atencao); border-radius: var(--radius); padding: 0.5rem 0.7rem; font-size: 0.9rem; }
.pa-dica { font-size: 0.85rem; margin-top: 0.5rem; }
@media (max-width: 560px) {
  .pa-item { grid-template-columns: auto 1fr; }
  .pa-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}

.ag-pordia { margin: 0.6rem 0; }
.ag-pordia summary { cursor: pointer; font-weight: 600; }
.ag-pordia .auth-field { display: inline-flex; flex-direction: column; margin-right: 0.6rem; min-width: 9rem; }

/* IA de gestão: o aviso flutuante "IA: N para confirmar" (js/gestor-ia.js) */
/* As cores vêm de a.primary (o mesmo botão dourado do resto do SPI); aqui só a posição. */
.gestor-ia-aviso { position: fixed; right: 16px; bottom: 16px; z-index: 900; font-weight: 700; font-size: 0.9rem;
  padding: 0.55rem 0.95rem; border-radius: var(--radius-pill); box-shadow: 0 6px 20px rgba(0,0,0,0.25); text-decoration: none; width: auto; }
@media (max-width: 760px) { .gestor-ia-aviso { bottom: 84px; } }
@media print { .gestor-ia-aviso { display: none !important; } }

/* ============================ Laudos ============================ */
.laudo-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.laudo-tipo-card {
  display: flex; flex-direction: column; gap: 0.35rem; text-align: left;
  background: var(--color-panel); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; font: inherit; color: inherit;
}
.laudo-tipo-card:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.laudo-tipo-nome { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-primary-dark); font-weight: 600; }
.laudo-tipo-desc { font-size: 0.9rem; }
.laudo-tipo-cid { font-size: 0.78rem; color: var(--color-muted); letter-spacing: 0.03em; }
.laudo-tipo-soon { cursor: default; opacity: 0.6; }
.laudo-tipo-soon:hover { transform: none; box-shadow: none; border-color: var(--color-border); }

.laudo-wizard-head { padding-bottom: 1rem; }
.laudo-step-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.laudo-step-head h2 { margin: 0; }
.laudo-progress { height: 6px; background: var(--color-secondary); border-radius: var(--radius-pill); margin-top: 0.8rem; overflow: hidden; }
.laudo-progress-bar { height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); transition: width 0.25s; width: 14%; }

.laudo-wizard-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }

.laudo-grupo { margin: 1.2rem 0; }
.laudo-grupo h3 { font-family: var(--font-display); font-size: 1.02rem; color: var(--color-primary-dark); margin: 0 0 0.3rem; }
.laudo-grupo-regra { font-size: 0.82rem; margin: 0 0 0.6rem; }
.laudo-grupo-regra.laudo-ok { color: var(--color-primary); }
.laudo-grupo-regra.laudo-pending { color: var(--color-muted); }

.laudo-criterio, .laudo-terapia { border: 1px solid var(--color-border); border-radius: 0.7rem; padding: 0.7rem 0.85rem; margin-bottom: 0.6rem; }
.laudo-crit-check { display: flex; gap: 0.55rem; align-items: flex-start; cursor: pointer; }
.laudo-crit-check input { margin-top: 0.25rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.laudo-crit-check > span { display: flex; flex-direction: column; gap: 0.15rem; }
.laudo-crit-desc { font-size: 0.82rem; line-height: 1.35; }
.laudo-crit-ex { margin-top: 0.6rem; }
.laudo-crit-ex textarea, .laudo-step-body textarea { width: 100%; }
.laudo-terapia-freq { margin-top: 0.6rem; display: flex; align-items: center; gap: 0.5rem; }
.laudo-terapia-freq input { width: 6.5rem; }
.laudo-opcional { border: 1px solid var(--color-border); border-radius: 0.7rem; padding: 0.7rem 0.85rem; margin-bottom: 0.5rem; }

/* ---- documento gerado (papel timbrado dourado) ---- */
.laudo-doc-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1rem 0; }
.laudo-doc {
  background: #fff; color: #1c1c1c; border: none; border-radius: 0;
  box-shadow: 0 1px 2px rgba(20, 40, 30, 0.06), 0 12px 30px -20px rgba(20, 40, 30, 0.4);
  padding: 0; margin-top: 0.5rem; max-width: 820px; line-height: 1.6;
  font-family: Georgia, "Times New Roman", serif;
}
.laudo-doc:focus { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.laudo-doc > *:not(.laudo-timbre):not(.laudo-timbre-banner) { margin-left: 2.4rem; margin-right: 2.4rem; }
.laudo-doc p { margin: 0.7rem 2.4rem; text-align: justify; }
/* Encaminhamentos: cada bloco (uma folha por especialidade) ocupa a largura toda,
   para a faixa/logo sangrar de ponta a ponta; só o texto do bloco fica recuado. */
.laudo-doc > .enc-doc-corte { margin-left: 0; margin-right: 0; }
.enc-doc-corte > *:not(.laudo-timbre):not(.laudo-timbre-banner) { margin-left: 2.4rem; margin-right: 2.4rem; }
.enc-doc-corte > p { margin-left: 2.4rem; margin-right: 2.4rem; }
.laudo-timbre {
  display: flex; align-items: center; gap: 1rem; background: var(--color-atencao-fundo);
  border-bottom: 2px solid #c9a227; padding: 1.1rem 2.4rem; margin: 0 0 1.2rem;
}
.laudo-timbre img { max-height: 54px; width: auto; }
.laudo-timbre-txt { display: flex; flex-direction: column; }
.laudo-timbre-txt strong { font-family: var(--font-display); color: #34614e; font-size: 1.15rem; }
.laudo-timbre-txt span { color: #6b6b6b; font-size: 0.85rem; }
.laudo-timbre-default { justify-content: center; }
.laudo-timbre-nome { font-family: var(--font-display); color: #34614e; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.01em; }
/* cabeçalho como banner de imagem (logo do médico) ocupando o topo da folha */
.laudo-timbre-banner { display: block; padding: 0; margin: 0 0 1.2rem; background: none; border-bottom: none; }
.laudo-timbre-banner img { display: block; width: 100%; height: auto; max-height: 10.6rem; object-fit: contain; }
/* 10.6rem é o antigo 170px escrito em rem, e a troca NÃO é cosmética: na impressão a raiz
   encolhe (ver o @media print da área imprimível), então o teto encolhe junto e o timbre
   ocupa no papel a mesma fatia da folha que ocupava na prévia. Em px ele ficava do mesmo
   tamanho numa folha menor, e era metade do defeito das três páginas. */
/* quando o médico opta por NÃO incluir o cabeçalho na impressão */
.laudo-doc.sem-cabecalho .laudo-timbre { display: none !important; }
/* controle "Incluir cabeçalho no topo" (fica na barra de ações, nunca imprime) */
.timbre-control { display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.timbre-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--color-muted); cursor: pointer; }
.timbre-toggle input { width: auto; margin: 0; }
.timbre-logo-btn { font-size: 0.85rem; padding: 0.28rem 0.65rem; border: 1px solid var(--color-border, #ccc); border-radius: 0.4rem; background: #fff; color: #333; cursor: pointer; }
.timbre-logo-btn:hover { border-color: #34614e; color: #34614e; }
/* identificação do paciente no documento de consulta */
.pr-doc-ident { margin: 0.7rem 2.4rem 1.2rem; }
/* documento que só existe para impressão (registro de consulta): invisível na tela */
.print-only { display: none; }
.laudo-titulo { font-family: var(--font-display); font-size: 1.35rem; text-align: center; color: #1c1c1c; margin: 0.4rem 2.4rem 1.2rem; }
.laudo-h2 { font-family: var(--font-display); font-size: 1.05rem; color: #34614e; margin: 1.3rem 2.4rem 0.4rem; border-bottom: 1px solid #e6dfce; padding-bottom: 0.2rem; }
.laudo-ul { margin: 0.5rem 2.4rem; padding-left: 1.2rem; }
.laudo-ul li { margin-bottom: 0.45rem; text-align: justify; }
.laudo-assinatura { margin: 2.4rem; text-align: center; }
.laudo-assinatura p { text-align: center; margin: 0.15rem 0; }
.laudo-assinatura-linha { margin: 2rem auto 0.3rem; color: #444; }

/* Prontuário completo (PDF) */
.pr-doc-ident { margin: 0.3rem 2.4rem; line-height: 1.5; }
.pr-print-consulta { margin: 0.6rem 2.4rem 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px solid #eee; page-break-inside: avoid; }
.pr-print-consulta p { margin: 0.25rem 0; text-align: justify; }
.pr-print-ch { font-size: 0.98rem; color: #34614e; margin: 0.2rem 0 0.4rem; }
.pr-print-table { width: calc(100% - 4.8rem); margin: 0.4rem 2.4rem; border-collapse: collapse; font-size: 0.9rem; }
.pr-print-table th, .pr-print-table td { border: 1px solid #ddd; padding: 0.3rem 0.5rem; text-align: left; }
.pr-print-table th { background: #f4efe2; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pr-print-list { margin: 0.4rem 2.4rem; padding-left: 1.2rem; }
.pr-print-list li { margin-bottom: 0.3rem; }
.pr-print-foot { margin: 1.6rem 2.4rem 0; font-size: 0.8rem; color: #666; }

/* impressão do laudo: cabeçalho dourado em página limpa */
@media print {
  /*
   * A FICHA DO PACIENTE E A CONSULTA SÓ SAEM QUANDO SÃO ELAS O PEDIDO (2026-10-07).
   *
   * As duas moram escondidas no prontuário e eram SEMPRE mostradas no papel. Vazias, cada uma
   * ainda levava os 14 mm de margem de cima e de baixo: a receita impressa do prontuário descia
   * 28 mm e o nome, o CRM e o RQE caíam sozinhos numa segunda folha (medido). Cheias (depois de
   * imprimir a ficha uma vez), iam junto com qualquer receita ou atestado impresso depois.
   * Agora só a que o botão marcou (.imprimindo-este, js/prontuario.js) aparece.
   */
  .print-only.imprimindo-este { display: block; }
  .laudo-doc, .enc-doc-corte { border: none; max-width: none; }
  .laudo-timbre { background: var(--color-atencao-fundo) !important; border-bottom: 2px solid #c9a227 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /*
   * Faixa/logo ocupa toda a LARGURA da área imprimível. Para tirar a borda branca em volta no
   * PDF, escolha "Margens: Nenhuma" no diálogo de impressão.
   *
   * O QUE SAIU DAQUI, E POR QUÊ (2026-09-21). Esta regra tinha `max-height: none !important`, e
   * isso não era um detalhe: na prévia o timbre é limitado a 10.6rem, e no papel ele crescia até
   * a altura natural da imagem na largura da folha. MEDIDO, com o timbre do dono: 170px na
   * prévia contra 401px no papel. Um terço da primeira folha ia embora antes da primeira frase,
   * e a orientação de asma, que cabe em duas folhas, saía em três com só o rodapé na última.
   *
   * Tirando o destravamento, o teto de 10.6rem volta a valer e, como a raiz encolhe na
   * impressão, ele vale PROPORCIONALMENTE: o timbre ocupa no papel a mesma fatia que ocupa na
   * prévia. `object-fit: contain` continua centralizando a imagem dentro da faixa, então um
   * banner realmente largo (mais de 4,8:1) segue ocupando a largura inteira e nada muda para ele.
   */
  .laudo-timbre-banner { background: none !important; border-bottom: none !important; padding: 0 !important; margin: 0 0 6mm !important; }
  .laudo-timbre-banner img { display: block; width: 100% !important; height: auto !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .laudo-doc.sem-cabecalho .laudo-timbre { display: none !important; }
  .laudo-h2 { break-after: avoid; }
  .laudo-doc p, .laudo-ul li { orphans: 3; widows: 3; }
}

@media (max-width: 640px) {
  .laudo-doc > *:not(.laudo-timbre), .laudo-doc p, .laudo-h2, .laudo-ul, .laudo-titulo, .laudo-assinatura { margin-left: 1.1rem; margin-right: 1.1rem; }
  .laudo-timbre { padding-left: 1.1rem; padding-right: 1.1rem; }
}
/* Na hora de virar PDF (js/doc-pdf.js marca doc-pdf-captura), o documento volta às margens
   da folha mesmo no celular: a regra de cima é para caber na tela, não para o papel. */
.laudo-doc.doc-pdf-captura > *:not(.laudo-timbre):not(.laudo-timbre-banner),
.laudo-doc.doc-pdf-captura p, .laudo-doc.doc-pdf-captura .laudo-h2, .laudo-doc.doc-pdf-captura .laudo-ul,
.laudo-doc.doc-pdf-captura .laudo-titulo, .laudo-doc.doc-pdf-captura .laudo-assinatura { margin-left: 2.4rem; margin-right: 2.4rem; }
.laudo-doc.doc-pdf-captura .laudo-timbre:not(.laudo-timbre-banner) { padding-left: 2.4rem; padding-right: 2.4rem; }
.laudo-doc.doc-pdf-captura .laudo-timbre-banner { margin-left: 0; margin-right: 0; }

/* ============================ Receituário ============================ */
.rx-banner { background: #fbe7c6; border: 1px solid #e6c565; color: #6b4e12; border-radius: var(--radius); padding: 0.8rem 1rem; margin-bottom: 1rem; font-size: 0.9rem; }
/* Peso e alergias na mesma linha, como dados do paciente (2026-10-19): a busca do medicamento vem
   no painel de baixo e o campo de alergia não fica mais no lugar onde se procura o remédio. A
   alergia fica sempre na coluna da direita, também no adulto (sem o peso): se ocupasse a linha
   toda, voltaria a ficar logo em cima da busca. No celular um vai embaixo do outro. */
.rx-paciente-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.5rem; align-items: start; }
.rx-paciente-linha > .rx-alergias-campo { grid-column: 2; grid-row: 1; }
.rx-paciente-linha .auth-field { margin-bottom: 0; }
.rx-paciente-linha .rx-peso .auth-field.rx-peso-edit { margin-top: 0.6rem; }
@media (max-width: 640px) {
  .rx-paciente-linha { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .rx-paciente-linha > .rx-alergias-campo { grid-column: auto; grid-row: auto; }
}
.rx-peso strong { color: var(--color-primary-dark); }
.rx-peso-edit { max-width: 12rem; margin-top: 0.6rem; }
.rx-peso-alerta { display: block; margin-top: 0.5rem; color: #b0281c; font-weight: 600; font-size: 0.9rem; }
.rx-peso-bloqueio { color: #b0281c; font-weight: 600; }
.rx-resultados { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
/* As três vias em destaque no alto (pedido do dono, 2026-10-07): uso interno/oral, inalatório e
   tópico, em negrito e maiores, antes das outras categorias. */
.rx-vias { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 0.8rem; }
.rx-via-btn { flex: 1 1 10rem; padding: 0.7rem 0.9rem; border-radius: 0.6rem; border: 2px solid var(--color-border); background: var(--color-panel); color: inherit; font: inherit; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; }
.rx-via-btn:hover { border-color: var(--spi-dourado, #c9a227); }
.rx-via-btn.rx-via-btn-on { border-color: var(--spi-dourado, #c9a227); background: rgba(201, 162, 39, 0.16); }
#rx-cat option.rx-cat-via { font-weight: 800; }
/* No celular uma regra geral do SPI esticava estes botões até virarem caixas vazias de tela
   inteira (iPhone, 2026-10-07). Aqui eles têm tamanho próprio, sem herdar nada. */
#rx-root .rx-vias, .rx-vias { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; align-items: stretch; }
.rx-vias .rx-via-btn { flex: none !important; width: auto !important; height: auto !important; min-height: 2.75rem !important; max-height: 4.5rem; aspect-ratio: auto !important; display: flex !important; align-items: center; justify-content: center; text-align: center; padding: 0.5rem 0.45rem !important; font-size: 0.95rem !important; line-height: 1.2; white-space: normal; }
.rx-modo .rx-modo-btn { height: auto !important; min-height: 3.2rem !important; max-height: 5rem; aspect-ratio: auto !important; padding: 0.55rem 0.6rem !important; }
@media (max-width: 420px) { .rx-vias .rx-via-btn { font-size: 0.86rem !important; } .rx-modo .rx-modo-btn { font-size: 1.02rem; } }
/* Pediátrico ou adulto, no alto do receituário (2026-10-07). */
.rx-modo { display: flex; gap: 0.6rem; margin: 0 0 1rem; }
.rx-modo-btn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.8rem 1rem; border-radius: 0.8rem; border: 2px solid var(--color-border); background: var(--color-panel); color: inherit; font: inherit; font-size: 1.15rem; font-weight: 800; cursor: pointer; }
.rx-modo-btn small { font-size: 0.78rem; font-weight: 500; opacity: 0.75; }
.rx-modo-btn.rx-modo-on { border-color: var(--spi-dourado, #c9a227); background: rgba(201, 162, 39, 0.16); }
.rx-result { text-align: left; background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.6rem 0.8rem; cursor: pointer; font: inherit; color: inherit; }
.rx-result:hover { border-color: var(--color-primary); }
.rx-calc { background: var(--color-cream); border-radius: 0.7rem; padding: 0.7rem 0.9rem; margin: 0.7rem 0; }
.rx-calc p { margin: 0.2rem 0; }
.rx-bloqueio { color: #b0281c; font-weight: 600; }
.rx-aviso { color: #8a6d3b; font-size: 0.88rem; }
.rx-manual { font-style: italic; }
.rx-med-alertas { font-size: 0.85rem; }
.rx-itens { display: flex; flex-direction: column; gap: 0.5rem; }
.rx-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.6rem 0.8rem; }
.rx-item .muted { font-size: 0.85rem; }

/* ---- Barra de formatação dos documentos editáveis (js/doc-editor.js) ----
   Some na impressão (.no-print): é ferramenta de edição, não conteúdo do documento. */
.doc-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  margin: 0.5rem 0 0.6rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border); border-radius: 0.6rem;
  background: color-mix(in oklch, var(--color-cream) 70%, var(--color-chapa)); }
.doc-editor-grupo { display: flex; align-items: center; gap: 0.3rem; }
.doc-editor-rotulo { font-size: 0.8rem; color: var(--color-muted); margin-right: 0.15rem; }
.doc-editor-btn { min-width: 2.1rem; padding: 0.28rem 0.55rem; font-size: 0.88rem;
  line-height: 1.2; border: 1px solid var(--color-border); border-radius: 0.4rem;
  background: var(--color-panel); color: var(--color-text); cursor: pointer; }
.doc-editor-btn:hover { border-color: var(--color-primary); }
.doc-editor-btn.on { background: color-mix(in oklch, var(--color-primary) 16%, var(--color-chapa));
  border-color: var(--color-primary); color: var(--color-primary-dark); font-weight: 600; }
.doc-editor-padronizar { font-size: 0.84rem; }
/* Desfazer é o botão mais procurado da barra quando algo dá errado: fica primeiro, com o
   texto escrito, e não só a setinha — no meio do atendimento ninguém para para decifrar
   ícone. O refazer, que é o oposto e raro, fica ao lado só com a seta. */
.doc-editor-desfazer { font-weight: 600; }
/* Botões de alinhar: o ícone é um SVG de quatro linhas, então o botão é quadrado e o
   conteúdo fica centrado — sem isso o desenho encosta na borda de baixo. */
.doc-editor-alinhar { display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; padding: 0.25rem 0.4rem; }
.doc-editor-alinhar svg { display: block; }

/* Título VAZIO não desenha o fio. Cinto e suspensório do conserto em js/doc-editor.js:
   aquele troca o bloco herdado por parágrafo na hora do Enter, e isto cobre o que já
   ficou salvo em documentos gerados antes — e também o caso de o médico apagar o texto
   de um subtítulo e deixar o fio órfão no meio da página.
   O :has(> br:only-child) existe porque o navegador põe um <br> dentro do bloco vazio,
   e com ele o :empty deixa de casar. */
.laudo-h2:empty, .plano-h2:empty,
.laudo-h2:has(> br:only-child), .plano-h2:has(> br:only-child) {
  border-bottom: none; padding-bottom: 0; margin-top: 0;
}
.doc-editor-dica { flex: 1 1 100%; margin: 0; font-size: 0.78rem; }

/* Tamanho do documento inteiro. Serve para caber na folha: receita que passa para a
   segunda página por três linhas é problema real de impressão. */
/* Valem em .laudo-doc E em .plano-doc: a proposta do plano é um documento como os
   outros e usa a mesma barra. Amarrar só a .laudo-doc deixaria o botão de tamanho
   inerte na tela dos planos — botão que não faz nada é pior que botão ausente. */
.laudo-doc.doc-fonte-menor, .plano-doc.doc-fonte-menor { font-size: 0.88em; }
.laudo-doc.doc-fonte-maior, .plano-doc.doc-fonte-maior { font-size: 1.12em; }
/* Duração na PRÓPRIA linha da receita: sem isso, a única forma de mudar os dias era
   remover o item e adicionar de novo (o painel do medicamento fecha ao adicionar). */
.rx-item-dur { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-size: 0.85rem; color: var(--color-text-muted, #5b5b5b); }
.rx-item-dur input { width: 5.5rem; padding: 0.25rem 0.4rem; font-size: 0.9rem; border: 1px solid var(--color-border); border-radius: 0.4rem; }
.rx-dur-falta { font-size: 0.85rem; margin-top: 0.2rem; }
.rx-alertas { margin-top: 1rem; }
.rx-alerta { border-radius: 0.5rem; padding: 0.45rem 0.7rem; margin: 0.35rem 0; font-size: 0.9rem; }
.rx-alerta-grave { background: var(--color-alerta-fundo); color: #7d1a12; }
.rx-alerta-moderada { background: #fbeacf; color: #6b4e12; }
.rx-alerta-leve { background: var(--color-cream); color: var(--color-text); }
.rx-ok { color: var(--color-primary); }
.rx-confirm { margin-top: 0.6rem; }
.rx-doc-itens li, .rx-doc .rx-doc-itens li { margin-bottom: 0.6rem; }
/* O item com número ESCRITO (o <ol> saiu para o número ser apagável): o recuo deslocado
   imita a lista, com a segunda linha alinhada sob o texto, não sob o número. */
.rx-doc-item { margin: 0 0 0.6rem; padding-left: 1.5em; text-indent: -1.5em; }
/* Cabeçalho da via (USO INTERNO, USO INALATÓRIO...) acima de cada grupo de itens. */
.rx-doc-via { margin: 0.9rem 0 0.5rem; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; }
.rx-doc-itens > .rx-doc-via:first-child { margin-top: 0.2rem; }

/* O exame que JÁ está marcado em outro painel aberto: deixa de ser opção (sem caixa) e
   diz onde mora, em vez de sumir e deixar o médico procurando. */
.exam-item-repetido { opacity: 0.55; cursor: default; }
/* Cada via é uma FOLHA, e a assinatura mora no RODAPÉ dela.
 *
 * Antes a assinatura só vinha no fluxo, logo depois do último item: uma receita de um item
 * deixava o nome, o CRM e a linha de assinatura parados no meio do papel, com meia folha em
 * branco embaixo. Dando à via a altura útil da página e empurrando a assinatura para o fim
 * (margin-top: auto), ela desce para o rodapé em qualquer receita curta.
 *
 * É min-height, não height: receita longa cresce e passa de folha, como antes.
 *
 * A altura útil difere por mídia, e por isso o valor não é o mesmo nos dois lugares:
 *  - tela (e o PDF, que o html2canvas rasteriza como tela): js/doc-pdf.js desenha o documento
 *    com 820px de largura para 190mm úteis (A4 menos 2 margens de 10mm), logo 1px = 190/820 mm
 *    e os 277mm de altura útil dão 277 x (820/190) = 1195px. Mexer na margem do doc-pdf.js
 *    pede recalcular aqui.
 *  - impressão: a altura útil NÃO é um número fixo (papel A4 ou Carta, margem que o navegador
 *    ou o médico impõe, cabeçalho e rodapé do navegador). Ver o @media print logo abaixo, e por
 *    que os 269mm fixos de antes jogavam a assinatura para a segunda folha. Usar os 1195px aqui
 *    daria 316mm e jogaria cada via para duas folhas. */
.rx-via { margin-bottom: 1rem; display: flex; flex-direction: column; min-height: 1195px; }
.rx-via .laudo-assinatura { margin-top: auto; }
.rx-corte { text-align: center; color: #999; margin: 1.5rem 0; letter-spacing: 2px; }
@media print {
  /* Cada via ocupa a folha, então a linha de "corte aqui" entre elas saía SOZINHA numa folha do
     meio: a receita de controle especial imprimia 3 folhas (medido, 2026-10-07). No papel ela
     some, como já sumia no PDF, e a 2ª via começa em folha nova. Sem margem embaixo da via pelo
     mesmo motivo: a via já vai até perto do pé da folha. */
  .rx-corte { display: none !important; }
  .rx-corte + .rx-via { break-before: page; page-break-before: always; }
  /*
   * O RODAPÉ DA RECEITA NA SEGUNDA FOLHA (2026-10-16), e por que a conta fechada falhava.
   *
   * O dono: "tá dando um erro na receita, na impressão de receita. O rodapé lá embaixo tá saindo
   * em outra folha [...] E mesmo no Windows agora, ele está saindo em duas folhas." A via tinha
   * min-height de 269mm: 14 + 269 + 14 = 297mm, o A4 INTEIRO, sem um milímetro de folga. Só cabia
   * se a margem da folha fosse mesmo zero. Qualquer margem que não fosse a nossa (a que o Safari
   * do Mac impõe por conta própria, ~12,7mm em cima e embaixo; "Margens: mínimas" ou
   * "personalizadas" no Chrome/Edge do Windows, que o diálogo de impressão guarda de uma vez para
   * a outra; o cabeçalho e rodapé do navegador, que o Safari soma à margem) deixava a folha mais
   * curta que a via, e o pé da via (data, linha, nome, CRM, RQE: justamente o rodapé) caía na
   * folha 2. MEDIDO no Chromium impondo a margem do navegador: receita de 1 remédio em 2 folhas
   * em todos os casos, a de controle especial em 4. O teste de antes só imprimia A4 com margem
   * zero, o único caso em que a conta fechava.
   *
   * PRIMEIRA PARTE: a via mede menos que a folha, com folga para a margem dos outros.
   *  - Chrome, Edge, Firefox: a folha é A4 (o @page { size: A4 } deste arquivo; na folha Carta o
   *    Chrome encolhe o A4 inteiro para caber). 240mm + os 28mm da área de impressão = 268mm,
   *    e o A4 com 12,7mm de margem em cima e embaixo ainda tem 271mm. Cabe com a margem zero,
   *    com as mínimas, com as personalizadas de 1cm e com o cabeçalho e rodapé do navegador.
   *  - Safari (WebKit): ele pode ignorar o @page (margem e tamanho) e ainda soma à margem a
   *    altura do cabeçalho e rodapé dele. Pior caso razoável: folha Carta, margem dele, cabeçalho
   *    e rodapé ligados, ~238mm úteis. 205mm + 28mm = 233mm. O @supports separa os dois:
   *    `font: -apple-system-body` só existe no WebKit; quem não o reconhece fica com os 240mm.
   * A assinatura sobe um pouco em relação ao pé de antes (que só existia com margem zero), e
   * continua no rodapé da folha.
   *
   * Por que não "100vh - margens", que daria o pé exato de cada folha: no Chromium, no papel,
   * 100vh É a altura útil da folha (MEDIDO: 297mm no A4 sem margem, 267mm com 15mm), mas a conta
   * fica velha de uma impressão para a outra. MEDIDO: a mesma receita sai em 1 folha com
   * margem de 1cm e, impressa de novo com margem de 1cm depois de uma impressão sem margem, em 2.
   * É exatamente o que o médico faz quando troca a margem no diálogo. No Safari, vh no papel é a
   * janela, e não a folha (bug 126591 do WebKit). Valor fixo com folga não envelhece.
   *
   * SEGUNDA PARTE: no papel a via é BLOCO, e não flex. Também MEDIDO no Chromium: com a via em
   * flex, a quebra de folha entre o corpo e a assinatura ignora o break-before: avoid (a
   * assinatura ia SOZINHA para a folha 2 quando o último remédio fechava a folha 1), e a margem
   * de baixo da assinatura, que dentro do flex não se descarta no fim da folha, abria uma folha 2
   * EM BRANCO numa receita de 10 remédios em A4. Em bloco as duas coisas se resolvem como em
   * qualquer documento: a margem do pé da folha some, e a assinatura leva junto o último remédio.
   * Sem o flex, quem empurra a assinatura para o pé é a altura mínima do CORPO: a da via menos o
   * lugar da assinatura. MEDIDO no papel: o bloco de assinatura (data, linha, nome, CRM e RQE,
   * especialidade) tem 10,9em, mais os 2,4rem de margem embaixo; 13,5em reserva isso com sobra.
   * Em em, e não em mm, porque a assinatura acompanha a letra do documento (doc-fonte-maior).
   * Receita longa continua crescendo (é min-height) e passa de folha como antes.
   *
   * Nada de fonte mudou aqui: só altura mínima, disposição da via e quebra de folha.
   */
  .rx-via { display: block; min-height: 0; margin-bottom: 0; }
  .rx-via-corpo { min-height: calc(205mm - 13.5em); }
  @supports not (font: -apple-system-body) {
    .rx-via-corpo { min-height: calc(240mm - 13.5em); }
  }
  /* O rótulo da via de uso (USO INTERNO, USO INALATÓRIO...) não fica sozinho no pé da folha,
     separado do remédio que ele abre (medido na receita longa que passa de folha). */
  .rx-doc-via { break-after: avoid; page-break-after: avoid; }
}

/* ============================ Puericultura (guia na consulta) ============================ */
.pu-panel { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-cream); margin: 0.4rem 0 1.2rem; padding: 0.4rem 0.9rem; }
.pu-panel > summary { cursor: pointer; font-family: var(--font-display); font-size: 1.02rem; color: var(--color-primary-dark); padding: 0.5rem 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pu-sum-title { font-weight: 600; }
.pu-faixa-badge { font-family: var(--font-body, inherit); font-size: 0.8rem; color: var(--color-primary); background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.1rem 0.6rem; }
.pu-panel-body { padding-bottom: 0.6rem; }
.pu-fonte { font-size: 0.8rem; margin: 0.2rem 0 0.6rem; }
.pu-content { max-height: 60vh; overflow-y: auto; background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.8rem 1rem; line-height: 1.5; }
.pu-content h4.pu-sec { font-family: var(--font-display); font-size: 0.98rem; color: var(--color-primary-dark); margin: 1rem 0 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border); }
.pu-content h4.pu-sec:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.pu-content .pu-sub { margin: 0.5rem 0 0.2rem; color: var(--color-text); }
.pu-content .pu-say { background: var(--color-cream); border-left: 3px solid var(--color-accent); border-radius: 0.4rem; padding: 0.4rem 0.7rem; margin: 0.5rem 0; font-size: 0.92rem; }
.pu-content ul { margin: 0.2rem 0 0.5rem; padding-left: 1.2rem; }
.pu-content li { margin-bottom: 0.2rem; }
.pu-content p { margin: 0.3rem 0; }
@media print { .pu-panel { display: none !important; } }

/* ============================ Escriba (gravar consulta) ============================ */
.escriba-panel { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-cream); padding: 0.4rem 1rem; margin: 0.4rem 0 1.2rem; }
.escriba-panel > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; padding: 0.5rem 0; font-family: var(--font-display); color: var(--color-primary-dark); }
.escriba-body { padding-bottom: 0.4rem; }
.escriba-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }
.escriba-head strong { font-family: var(--font-display); color: var(--color-primary-dark); }
.escriba-status { font-size: 0.8rem; color: var(--color-muted); background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.1rem 0.6rem; }
.escriba-controls { display: flex; align-items: center; gap: 0.7rem; margin: 0.6rem 0; }
/* No celular os três botões (Gravar, Enviar áudio, Colar transcrição) não cabem numa linha e
   empurravam a consulta para o lado: descem para a linha de baixo. */
@media (max-width: 560px) { .escriba-controls { flex-wrap: wrap; } }
.escriba-timer { font-variant-numeric: tabular-nums; font-size: 1.1rem; color: var(--color-primary-dark); }
#pr-esc-rec { background: #b0281c; }
.escriba-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.5rem 0; }
.escriba-preview { background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.7rem 0.9rem; margin-top: 0.5rem; }
.escriba-field { margin: 0.3rem 0; line-height: 1.45; }
/* O rascunho da IA ainda fora da consulta (consulta em branco de 02/10/2026): tem de saltar aos olhos. */
.escriba-pendente { margin: 0 0 0.5rem; padding: 0.45rem 0.6rem; border-left: 3px solid var(--color-high); color: var(--color-high); line-height: 1.4; }
/* Texto da consulta recuperado do rascunho local deste aparelho. */
.pr-rasc-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.4rem 0 0.8rem; }
@media print { .escriba-panel { display: none !important; } }

/* Botão de ação destrutiva (ex.: excluir consulta na janela de 24h) */
.pr-danger { color: #b0281c; border-color: #e0b4ae; }
.pr-danger:hover { background: var(--color-alerta-fundo); border-color: #b0281c; }

/* =========================== GERADOR DE PLANOS =========================== */
/* Resumo editável */
.pl-inline { max-width: 340px; }
.pl-tab { width: 100%; border-collapse: collapse; margin: 0.6rem 0; }
.pl-tab th, .pl-tab td { border: 1px solid var(--color-border); padding: 0.5rem 0.6rem; text-align: left; }
.pl-tab th { background: #f3ecdd; color: #5C4A32; font-family: var(--font-display); }
.pl-tab tr.pl-rec td { background: var(--color-atencao-fundo); }
.pl-tab .pl-parc { width: 8rem; }
.pl-marcos-fixos { margin: 0.4rem 0 0.6rem 1.2rem; }
.pl-hint { font-size: 0.85rem; }

/* Documento do plano (identidade visual: creme, dourado, marrom) */
.plano-doc {
  background: #fff; color: #3A3631; font-family: Georgia, "Times New Roman", serif;
  max-width: 820px; margin: 0.6rem auto; line-height: 1.55;
  border: none; border-radius: 0;
  box-shadow: 0 1px 2px rgba(20, 40, 30, 0.06), 0 12px 30px -20px rgba(20, 40, 30, 0.4);
  padding: 1.8rem 2.2rem;
}
/* faixa/logo ocupando toda a largura do topo (sai da margem interna do documento) */
.plano-doc > .laudo-timbre-banner { margin: -1.8rem -2.2rem 1.4rem; }
.plano-doc.sem-cabecalho .laudo-timbre { display: none !important; }
.plano-titulo { font-family: var(--font-display); text-align: center; color: #5C4A32; font-size: 1.5rem; letter-spacing: 0.03em; text-transform: uppercase; margin: 0.2rem 0 0.3rem; }
.plano-sub { text-align: center; color: #B0894A; font-style: italic; margin: 0 0 1.2rem; }
.plano-h1 { font-family: var(--font-display); color: #5C4A32; font-size: 1.3rem; margin: 0.4rem 0 0.2rem; }
.plano-h2 { font-family: var(--font-display); color: #B0894A; font-size: 1.12rem; border-bottom: 1px solid #E7DDCB; padding-bottom: 0.2rem; margin: 1.3rem 0 0.5rem; }
.plano-h3 { font-family: var(--font-display); color: #5C4A32; font-size: 1.02rem; margin: 1rem 0 0.3rem; }
.plano-nome { color: #5C4A32; font-size: 1.15rem; margin: 0.1rem 0; }
.plano-programa { color: #B0894A; font-weight: 600; margin: 0.1rem 0 0.8rem; }
/* ALINHADO A ESQUERDA NA TELA (2026-10-06). Justificado numa coluna estreita de celular abre
   buracos entre as palavras ("Programa        Desenvolver        —"): print do dono, "a formatacao
   ta toda esquisita, tudo os espacos". O justificado fica so no papel A4, com hifenizacao. */
.plano-doc p { margin: 0.5rem 0; text-align: left; hyphens: manual; }
.plano-ul { margin: 0.4rem 0 0.4rem 1.3rem; }
.plano-ul li { margin: 0.2rem 0; }
.plano-nivel { border: 1px solid #E7DDCB; border-radius: 0.5rem; padding: 0.8rem 1rem; margin: 0.7rem 0; background: #FCFAF5; break-inside: avoid; page-break-inside: avoid; }
.plano-nivel-tit { font-family: var(--font-display); color: #5C4A32; font-weight: 600; font-size: 1.05rem; margin-bottom: 0.3rem; }
.plano-rec { color: #B0894A; font-size: 0.82rem; }
.plano-preco { margin: 0.15rem 0; }
.plano-desconto { margin: 0.2rem 0 0.15rem; font-size: 0.95em; }
.plano-inclui { color: #6b6257; font-size: 0.9rem; }
.plano-regra { text-align: left; }
.plano-check, .plano-linha { margin: 0.5rem 0; }
.plano-assina { text-align: center; margin: 1.5rem 0 0.3rem; }
.plano-cidade { margin: 1.1rem 0; }
.plano-dados { text-align: center; font-size: 0.85rem; margin-top: 0.4rem; }
.plano-runhead, .plano-runfoot { display: none; }

@media print {
  @page { size: A4; margin: 0; }
  .plano-doc { border: none; border-radius: 0; box-shadow: none; max-width: none; padding: 14mm 14mm 16mm !important; -webkit-box-decoration-break: clone; box-decoration-break: clone; margin: 0; overflow: visible !important; }
  .plano-break { break-before: page; page-break-before: always; }
  .plano-nivel { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* título nunca fica órfão no fim da página: anda junto com o texto que vem
     depois (evita o "título colado no rodapé" com o conteúdo na página seguinte). */
  .plano-h1, .plano-h2, .plano-h3, .plano-nome, .plano-nivel-tit {
    break-after: avoid; page-break-after: avoid; break-inside: avoid; page-break-inside: avoid;
  }
  .plano-doc p, .plano-check, .plano-linha { orphans: 2; widows: 2; }
  .plano-doc p:not(.plano-programa):not(.plano-preco):not(.plano-desconto):not(.plano-check):not(.plano-linha):not(.plano-cidade):not(.plano-dados), .plano-regra { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
  /* a faixa/logo ocupa toda a largura; o TEXTO mantém uma margem própria mesmo
     imprimindo com "Sem margens" (igual às orientações), para não encostar/cortar. */
  .plano-doc > *:not(.laudo-timbre-banner):not(.laudo-timbre):not(.plano-runfoot) { margin-left: 12mm !important; margin-right: 12mm !important; }
  .plano-doc.sem-cabecalho .laudo-timbre { display: none !important; }
  /* rodapé com identidade em todas as páginas; folga extra embaixo p/ o texto
     nunca cair em cima dele. */
  .plano-runfoot { display: block; position: fixed; bottom: 4mm; left: 0; right: 0; text-align: center; color: #5C4A32; font-size: 8.5pt; }
  /*
   * O PLANO NO PAPEL, TAMANHO DE GENTE (2026-10-06). O dono, com a previa de impressao do iPhone
   * na mao: "olha como e que fica na hora que manda salvar em PDF ou imprimir. O tamanho [...] o
   * layout, a logo." MEDIDO num PDF A4 gerado aqui: texto a 13,4 px (~10 pt, a raiz encolhida a
   * 84% que serve aos laudos de 820 px), recuo de 26 mm de cada lado (14 mm da area de impressao
   * MAIS 12 mm dos filhos) e cada secao comecando em folha nova, o que deixava meia folha em
   * branco. Agora: raiz a 100%, texto a 11 pt, 18 mm de margem lateral, e so a Adesao (a folha
   * que se assina) comeca em folha nova.
   */
  html:has(.plano-doc:not(.hidden)) { font-size: 100%; }
  .plano-doc { font-size: 11pt !important; line-height: 1.5; padding: 12mm 0 16mm !important; }
  .plano-doc > *:not(.laudo-timbre-banner):not(.laudo-timbre):not(.plano-runfoot) { margin-left: 18mm !important; margin-right: 18mm !important; }
  .plano-doc > .laudo-timbre-banner { margin: -12mm 0 6mm !important; }
  .plano-titulo { font-size: 17pt; }
  .plano-h1 { font-size: 15pt; margin-top: 8mm; }
  .plano-h2 { font-size: 13pt; }
  .plano-h3, .plano-nivel-tit { font-size: 12pt; }
  .plano-nome { font-size: 13pt; }
  .plano-inclui { font-size: 10pt; }
}

/* Tipo de cobrança do paciente: filtros + destaque do cartão */
.pr-filtros { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.7rem; }
.pr-filtro { font-size: 0.85rem; padding: 0.32rem 0.75rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-panel); color: var(--color-muted); cursor: pointer; }
.pr-filtro:hover { border-color: #34614e; }
.pr-filtro-ativo { background: #34614e; color: #fff; border-color: #34614e; }
.pr-patient-card.pr-cob-plano { border-left: 4px solid #B0894A; background: var(--color-atencao-fundo); }
.pr-patient-card.pr-cob-nao_cobrado { border-left: 4px solid #9aa0a6; }
.pr-cob-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; margin-left: 0.5rem; vertical-align: middle; }
.pr-cob-badge-plano { background: #B0894A; color: #fff; }
.pr-cob-badge-nao_cobrado { background: #e6e8ea; color: var(--color-muted); }

/* Acessibilidade / polimento (skill UI-UX): foco visível e respeito a reduced-motion */
a:focus-visible,
button:focus-visible,
.feature-card:focus-visible,
.btn-cta-primary:focus-visible,
.btn-cta-ghost:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent, #c9a227);
  outline-offset: 2px;
}
.feature-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px -22px rgba(20, 40, 30, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .feature-card:hover,
  .feature-card:hover .feature-ico,
  .btn-cta-primary:hover { transform: none !important; }
}

/* cadeado SVG dentro do selo de recurso bloqueado */
.feature-tag-lock { display: inline-flex; align-items: center; gap: 0.25rem; }
.tag-lock-ico { width: 12px; height: 12px; }

/* Cabeçalho de seção padronizado (chip de ícone + título), igual ao hub/landing */
.section-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.section-head-ico {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--color-primary) 14%, var(--color-chapa));
  color: var(--color-primary-dark);
}
.section-head-ico svg { width: 22px; height: 22px; }
.section-head h2 { margin: 0; }

/* ---------- Meu Consultório ---------- */
.co-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.co-sec { margin: 4px 0 10px; font-size: 0.95rem; color: var(--verde-escuro, #34614e); }
.co-form .co-sec:not(:first-child) { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.08); }
.co-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-row3 { display: grid; grid-template-columns: 1.4fr 0.6fr 1fr; gap: 12px; }
.co-actions { margin-top: 16px; }
/*
 * A MOLDURA DA PRÉVIA DO LOGO. Ela era um retângulo BRANCO A 50% com borda preta tracejada e a
 * palavra "Sem logo" em cinza médio: sobras do tema claro. No tema escuro o branco a 50% virou
 * um cinza-azulado e o cinza do texto ficou com 1,08 de contraste em cima dele. Foi o medidor
 * novo (que compõe camada por camada) que achou; o antigo pulava fundo semitransparente.
 *
 * O branco a 50% continua fazendo sentido como ideia: a prévia precisa de um fundo NEUTRO, para
 * o médico ver o logo dele como vai sair no papel. Então o fundo fica claro de verdade, e a
 * palavra ganha tinta escura, em vez de as duas ficarem no meio do caminho.
 */
.co-logo-preview { margin: 8px 0 12px; min-height: 96px; border: 1px dashed var(--color-fio-forte, rgba(0,0,0,0.22)); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 10px; background: #f4f1ea; }
.co-logo-preview img { max-width: 100%; max-height: 160px; }
.co-logo-vazio { color: #5c5c5c; font-size: 0.9rem; }
.co-logo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-row2, .co-row3 { grid-template-columns: 1fr; }
}
.co-planos { margin-top: 16px; }
.co-planos-preview { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(52,97,78,0.07); }

/* ============================ Nutrição e Suplementação ============================ */
.nutri-intro { margin-bottom: 1.1rem; }
.nutri-search-field { margin-top: 0.4rem; }
.nutri-group-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 1.4rem 0 0.7rem;
}
.nutri-group-title:first-child { margin-top: 0.3rem; }

.nutri-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  text-align: left;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1rem 1.05rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 40, 30, 0.04);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.nutri-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 40, 30, 0.10);
  border-color: color-mix(in oklch, var(--color-primary) 40%, var(--color-border));
}
.nutri-card-title { font-size: 1.02rem; font-weight: 700; color: var(--color-primary-dark); line-height: 1.25; }
.nutri-card-tag {
  font-size: 0.72rem; font-weight: 600; color: var(--color-muted);
  background: var(--color-secondary); border-radius: 999px; padding: 0.12rem 0.55rem;
}
.nutri-card-tag-tabela { background: color-mix(in oklch, var(--color-accent) 18%, var(--color-chapa)); color: color-mix(in oklch, var(--color-accent) 70%, var(--color-text)); }
.nutri-card-desc { font-size: 0.88rem; color: var(--color-muted); line-height: 1.4; }

/* Detalhe */
#nutri-back { margin-bottom: 0.8rem; }
.nutri-detail-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.nutri-detail-head h2 { margin: 0.3rem 0; }
.nutri-conf-tag {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  background: color-mix(in oklch, var(--color-medium) 20%, var(--color-chapa));
  color: color-mix(in oklch, var(--color-medium) 65%, var(--color-text));
}
.nutri-tambem { color: var(--color-muted); font-size: 0.9rem; margin: 0.1rem 0 0.6rem; }

.nutri-sec { margin-top: 1.3rem; }
.nutri-sec h4 {
  font-size: 1rem; color: var(--color-primary-dark); margin: 0 0 0.4rem;
  padding-bottom: 0.3rem; border-bottom: 2px solid color-mix(in oklch, var(--color-primary) 20%, var(--color-chapa));
}
.nutri-ul { margin: 0.2rem 0 0 1.1rem; line-height: 1.55; font-variant-numeric: tabular-nums; }
.nutri-ul li { margin-bottom: 0.28rem; }
.nutri-esquema {
  margin-bottom: 0.7rem; background: color-mix(in oklch, var(--color-primary) 5%, var(--color-chapa));
  border-radius: 10px; padding: 0.6rem 0.8rem;
}
.nutri-esquema strong { color: var(--color-primary-dark); }
.nutri-esquema p { margin: 0.25rem 0 0; line-height: 1.5; }
.nutri-fonte { margin-top: 1.4rem; font-size: 0.82rem; color: var(--color-muted); line-height: 1.5; }

/* Calculadora dentro do detalhe */
.nutri-calc {
  margin-top: 1rem; background: color-mix(in oklch, var(--color-primary) 6%, var(--color-chapa));
  border: 1px solid color-mix(in oklch, var(--color-primary) 18%, var(--color-chapa));
  border-radius: 14px; padding: 1rem 1.05rem;
}
.nutri-calc h4 { margin: 0 0 0.6rem; color: var(--color-primary-dark); }
.nutri-calc-inputs { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; }
.nutri-calc-inputs .auth-field { flex: 1 1 150px; margin: 0; }
.nutri-calc-inputs .nc-small { flex: 0 1 90px; }
.nutri-banda { margin: 0 0 0.3rem; font-size: 0.88rem; }
.nutri-dose-main { font-size: 1.15rem; font-weight: 700; color: var(--color-primary-dark); margin: 0.2rem 0; font-variant-numeric: tabular-nums; }
.nutri-dose-manual { line-height: 1.55; }
.nutri-bloqueio {
  background: color-mix(in oklch, var(--color-high) 8%, var(--color-chapa));
  border-left: 4px solid var(--color-high); border-radius: 8px;
  padding: 0.5rem 0.7rem; margin: 0.3rem 0; color: color-mix(in oklch, var(--color-high) 70%, var(--color-text));
}
.nutri-aviso {
  background: color-mix(in oklch, var(--color-medium) 14%, var(--color-chapa));
  border-left: 4px solid var(--color-medium); border-radius: 8px;
  padding: 0.5rem 0.7rem; margin: 0.3rem 0; font-size: 0.9rem;
}
.nutri-conv { margin-top: 0.6rem; }
.nutri-conv-titulo { font-weight: 600; color: var(--color-primary-dark); font-size: 0.9rem; }

/* Tabela de referência */
.nutri-table-wrap { overflow-x: auto; margin: 0.6rem 0; }
.nutri-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.nutri-table th, .nutri-table td { border: 1px solid var(--color-border); padding: 0.45rem 0.6rem; text-align: left; }
.nutri-table thead th { background: color-mix(in oklch, var(--color-primary) 12%, var(--color-chapa)); color: var(--color-primary-dark); }
.nutri-table tbody th { background: color-mix(in oklch, var(--color-primary) 5%, var(--color-chapa)); font-weight: 600; }
.nutri-table tbody tr:nth-child(even) td { background: color-mix(in oklch, var(--color-primary) 3%, var(--color-chapa)); }

@media (max-width: 560px) {
  .nutri-calc-inputs .auth-field { flex-basis: 100%; }
  .nutri-calc-inputs .nc-small { flex-basis: calc(50% - 0.35rem); }
}

/* ===================== Checklist de puericultura (dentro da consulta) ===================== */
.chk-content { max-height: 62vh; overflow-y: auto; background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.6rem 0.9rem; }
.chk-group { border: none; border-top: 1px solid var(--color-border); margin: 0; padding: 0.5rem 0 0.3rem; }
.chk-group:first-child { border-top: none; }
.chk-group legend { font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; color: var(--color-primary-dark); padding: 0; margin-bottom: 0.2rem; }
.chk-item { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.28rem 0.2rem; line-height: 1.4; cursor: pointer; border-radius: 0.4rem; }
.chk-item:hover { background: color-mix(in oklch, var(--color-primary) 5%, transparent); }
.chk-item input[type="checkbox"] { margin-top: 0.15rem; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: var(--color-primary); cursor: pointer; }
.chk-item input[type="checkbox"]:checked + span { color: var(--color-muted); text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--color-primary) 45%, transparent); }
.chk-item span { font-size: 0.92rem; }
.chk-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.7rem; }
.chk-actions-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chk-count { font-size: 0.85rem; }

/* Avaliação estruturada de TEA/TDAH dentro do roteiro da consulta. */
.tg-avaliacao { display: grid; gap: 0.75rem; }
.tg-aviso {
  margin: 0.2rem 0 0.1rem; padding: 0.75rem 0.85rem; border-radius: 0.65rem;
  border: 1px solid color-mix(in oklch, var(--color-gold) 45%, var(--color-border));
  background: color-mix(in oklch, var(--color-gold) 9%, var(--color-panel)); line-height: 1.45;
}
.tg-grupo {
  margin: 0.8rem 0 0; padding: 0.6rem 0.75rem; border-left: 4px solid var(--color-gold);
  background: color-mix(in oklch, var(--color-primary) 8%, var(--color-panel));
  color: var(--color-primary-dark); border-radius: 0 0.55rem 0.55rem 0;
}
.tg-criterio {
  border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 0.75rem;
  background: color-mix(in oklch, var(--color-panel) 96%, var(--color-primary));
}
.tg-criterio:has(input[data-crit]:checked), .tg-criterio:has(input[data-geral]:checked) {
  border-color: color-mix(in oklch, var(--color-primary) 65%, var(--color-border));
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.tg-criterio .chk-item input[type="checkbox"]:checked + span {
  color: var(--color-text); text-decoration: none;
}
.tg-crit-check { padding: 0; }
.tg-crit-check span, .tg-crit-check strong { font-size: 0.98rem; }
.tg-descritor { margin: 0.45rem 0 0.55rem 1.6rem; line-height: 1.5; }
.tg-exemplos {
  margin: 0.45rem 0 0.65rem 1.6rem; padding: 0.45rem 0.65rem; border-radius: 0.55rem;
  background: color-mix(in oklch, var(--color-primary) 5%, transparent);
}
.tg-exemplos summary { cursor: pointer; font-weight: 600; color: var(--color-gold); }
.tg-exemplos ul { margin: 0.55rem 0 0.25rem; padding-left: 1.15rem; }
.tg-exemplos li { margin: 0.32rem 0; line-height: 1.45; }
.tg-ex-titulo { margin: 0.7rem 0 0.2rem; font-weight: 600; }
.tg-ex-fonte { margin: 0.6rem 0 0.1rem; font-size: 0.82rem; line-height: 1.45; }
.tg-diferenciais { margin-left: 0; }
.tg-diferenciais p { margin: 0.5rem 0 0.2rem; line-height: 1.45; }
.tg-paciente-exemplo { margin: 0.6rem 0 0 1.6rem; }
.tg-paciente-exemplo textarea, .tg-masking textarea { width: 100%; resize: vertical; }
.tg-geral { border-left: 3px solid var(--color-gold); }
.tg-masking {
  border: 1px solid color-mix(in oklch, var(--color-gold) 50%, var(--color-border));
  border-radius: 0.75rem; padding: 0.85rem;
  background: color-mix(in oklch, var(--color-gold) 7%, var(--color-panel));
}
.tg-masking h4 { margin: 0 0 0.4rem; color: var(--color-gold); }
.tg-masking p { margin: 0 0 0.65rem; line-height: 1.5; }
@media (max-width: 560px) {
  .tg-descritor, .tg-exemplos, .tg-paciente-exemplo { margin-left: 0; }
  .tg-criterio { padding: 0.65rem; }
}

/*
 * OS PAINÉIS DA CONSULTA EM TELA CHEIA (2026-09-28). Primeiro o roteiro do transtorno; depois,
 * a pedido do dono ("Deixa todos da mesma forma"), o guia de puericultura, o checklist de
 * puericultura e os roteiros de neurodivergência, com o mesmo visual e o mesmo comportamento.
 * Ao abrir, js/prontuario.js (abrirTelaCheia) leva o <details> para filho do <body> e põe
 * html.tg-tc-aberto; o cabeçalho, a consulta e o rodapé saem de cena e o painel ocupa a página.
 * A rolagem é a do documento (nada de caixa fixa com rolagem própria, nada de trava no body, que
 * no iOS quebra), e o espaço da barra inferior do app vem do padding que body.has-tabbar já dá.
 *
 * A CAUSA DO CORTE NO CELULAR: o <fieldset> da avaliação tem, por padrão do navegador,
 * min-width: min-content, e ficava mais largo que a caixa .chk-content (overflow-y: auto, que
 * torna o eixo x rolável também). Somadas as três margens internas do painel dentro da
 * consulta, sobravam uns 250px de largura no iPhone, e a caixa rolava para os lados. As caixas
 * .pu-content e .chk-content dos outros três painéis tinham a mesma rolagem própria.
 */
.tg-tc-topo { display: none; }
html.tg-tc-aberto body > .app-header,
html.tg-tc-aberto body > main,
html.tg-tc-aberto body > .app-footer { display: none !important; }
:is(#pr-puericultura, #pr-checklist, #pr-neuro, #pr-tnd-guia).tg-tela-cheia {
  display: block; margin: 0; padding: 0; min-height: 100vh; min-height: 100dvh;
  border: 0; border-radius: 0; box-shadow: none; background: transparent; background-image: none;
}
:is(#pr-puericultura, #pr-checklist, #pr-neuro, #pr-tnd-guia).tg-tela-cheia > summary { display: none; }
:is(#pr-puericultura, #pr-checklist, #pr-neuro, #pr-tnd-guia).tg-tela-cheia > .tg-tc-topo {
  display: flex; align-items: center; gap: 0.5rem 0.9rem; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 60;
  padding: calc(0.6rem + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 0.6rem max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, rgba(24, 24, 24, .97) 0%, rgba(20, 20, 20, .97) 100%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 -1px 0 var(--spi-dourado-fio, var(--color-border));
}
.tg-tc-voltar {
  display: inline-flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; min-height: 44px;
  padding: 0.45rem 0.9rem 0.45rem 0.6rem; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--spi-card-borda, var(--color-border)); background: rgba(24, 24, 24, .9);
  color: var(--spi-dourado, var(--color-primary)); font: inherit; font-weight: 600; cursor: pointer;
}
.tg-tc-voltar:hover { border-color: var(--spi-dourado, var(--color-primary)); }
.tg-tc-voltar:focus-visible { outline: 2px solid var(--spi-dourado, var(--color-primary)); outline-offset: 2px; }
.tg-tc-titulos { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 14rem; min-width: 0; }
.tg-tc-nome { font-family: var(--font-display); font-size: 1.02rem; color: #fff; line-height: 1.3; overflow-wrap: break-word; }
.tg-tc-faixa { font-size: 0.85rem; color: var(--spi-dourado, var(--color-primary)); overflow-wrap: break-word; }
.tg-tc-count { font-size: 0.82rem; color: var(--color-muted); line-height: 1.35; overflow-wrap: break-word; }
/* Painel sem contagem (o guia de puericultura) ou sem faixa: só o título, sem linha vazia. */
.tg-tc-faixa:empty, .tg-tc-count:empty { display: none; }
:is(#pr-puericultura, #pr-checklist, #pr-neuro, #pr-tnd-guia).tg-tela-cheia > .pu-panel-body {
  max-width: 880px; margin: 0 auto;
  padding: 1rem max(16px, env(safe-area-inset-right, 0px)) calc(1.5rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
/* Um só rolamento: as caixas de dentro deixam de ter altura máxima e rolagem própria. */
:is(#pr-puericultura, #pr-checklist, #pr-neuro, #pr-tnd-guia) :is(.pu-content, .chk-content) { max-height: none; overflow: visible; }
/* Quebra de linha em 320-390px: nada no painel pode ser mais largo que a tela. */
:is(#pr-puericultura, #pr-checklist, #pr-neuro, #pr-tnd-guia) :is(fieldset, .tg-avaliacao > *, .chk-item > span) { min-width: 0; }
:is(#pr-puericultura, #pr-checklist, #pr-neuro, #pr-tnd-guia) :is(p, li, h4, legend, summary, strong, span, label) { overflow-wrap: break-word; hyphens: auto; }
:is(#pr-puericultura, #pr-checklist, #pr-neuro, #pr-tnd-guia) :is(textarea, select, img, table) { max-width: 100%; box-sizing: border-box; }
/* A caixa de texto cresce com o que se escreve (onde o navegador sabe), em vez de rolar por dentro. */
:is(#pr-puericultura, #pr-checklist, #pr-neuro, #pr-tnd-guia) textarea { width: 100%; field-sizing: content; min-height: 4.6em; }
:is(#pr-puericultura, #pr-checklist, #pr-neuro, #pr-tnd-guia) .pr-inline-field select { min-width: 0; width: 100%; }
@media (max-width: 560px) {
  :is(#pr-puericultura, #pr-checklist, #pr-neuro, #pr-tnd-guia).tg-tela-cheia :is(.pu-content, .chk-content) { padding: 0.7rem 0.75rem; }
}
@media print { html.tg-tc-aberto body > main { display: block !important; } }
/*
 * A NOTA DE RODAPÉ DE UM BLOCO DO ROTEIRO. Os roteiros de neurodivergência têm seções em que a
 * fonte diz algo que não é item para marcar — o divisor entre TEA e transtorno de linguagem, por
 * exemplo. Fica abaixo dos itens, recuada na mesma coluna do texto deles (0.2rem da caixa mais
 * 1.05rem do quadradinho mais 0.55rem do vão), para não parecer um item sem quadradinho.
 */
.chk-nota { font-size: 0.82rem; margin: 0.3rem 0 0.1rem 1.8rem; line-height: 1.45; font-style: italic; }
@media (max-width: 560px) {
  .chk-actions { flex-direction: column; align-items: stretch; }
  .chk-actions-btns { justify-content: stretch; }
  .chk-actions-btns button { flex: 1; }
}

/* Guia "Como assinar" no receituário */
.rx-assinar-guia {
  margin: 0.6rem 0 0.2rem; padding: 0.9rem 1.05rem;
  background: color-mix(in oklch, var(--color-primary) 6%, var(--color-chapa));
  border: 1px solid color-mix(in oklch, var(--color-primary) 20%, var(--color-chapa));
  border-radius: 12px;
}
.rx-assinar-guia h4 { margin: 0 0 0.5rem; color: var(--color-primary-dark); font-size: 1rem; }
.rx-assinar-guia ol { margin: 0 0 0.5rem 1.1rem; line-height: 1.55; }
.rx-assinar-guia ol li { margin-bottom: 0.3rem; }
.rx-assinar-guia .muted { font-size: 0.86rem; margin: 0; }

/* ============================ Calendário vacinal (PNI) ============================ */
.vac-controls { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; margin-top: 0.5rem; }
.vac-controls .auth-field { margin: 0; flex: 1 1 220px; }
.vac-controls-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; flex: 1 1 auto; }
.vac-controls-btns button { flex: 0 1 auto; }
#vac-idade { margin: 0.6rem 0 0; font-weight: 600; }
.vac-fonte { margin-top: 1.2rem; font-size: 0.82rem; }

.vac-resumo-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vac-badge { font-size: 0.85rem; font-weight: 700; padding: 0.2rem 0.7rem; border-radius: 999px; }
.vac-b-aplicada { background: color-mix(in oklch, var(--color-primary) 16%, var(--color-chapa)); color: var(--color-primary-dark); }
.vac-b-atrasada { background: color-mix(in oklch, var(--color-high) 15%, var(--color-chapa)); color: var(--color-high); }
.vac-b-futura { background: var(--color-secondary); color: var(--color-muted); }
.vac-b-perdida { background: color-mix(in oklch, var(--color-medium) 20%, var(--color-chapa)); color: color-mix(in oklch, var(--color-medium) 65%, var(--color-text)); }
.vac-b-opcional { background: color-mix(in oklch, #6b5ca5 14%, var(--color-chapa)); color: #55488a; }
.vac-rede { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 999px; vertical-align: middle; }
.vac-rede-pni { background: color-mix(in oklch, var(--color-primary) 14%, var(--color-chapa)); color: var(--color-primary-dark); }
.vac-rede-part { background: color-mix(in oklch, #6b5ca5 16%, var(--color-chapa)); color: #55488a; }
.vac-atrasadas { margin-top: 0.7rem; }
.vac-atrasadas ul { margin: 0.3rem 0 0 1.1rem; line-height: 1.5; }

.vac-card { margin-bottom: 0.9rem; }
.vac-card-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.vac-card-head h3 { margin: 0; font-size: 1.05rem; color: var(--color-primary-dark); }
.vac-protege { font-size: 0.86rem; }
.vac-obs { margin: 0.5rem 0 0; font-size: 0.85rem; }
.vac-doses { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.6rem; }
.vac-dose-wrap { display: flex; flex-direction: column; gap: 0.3rem; }
.vac-dose-meta { display: grid; grid-template-columns: auto 1.4fr 1fr; gap: 0.4rem; padding: 0 0.6rem 0.1rem 1.9rem; }
.vac-meta-in { padding: 0.35rem 0.5rem; border: 1px solid var(--color-border); border-radius: 0.5rem; font-size: 0.85rem; background: var(--color-panel); }
.vac-meta-in.vac-meta-data { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .vac-dose-meta { grid-template-columns: 1fr 1fr; padding-left: 0.6rem; } .vac-meta-in.vac-meta-data { grid-column: 1 / -1; } }
.vac-dose {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.6rem; border: 1px solid var(--color-border); border-radius: 0.6rem; cursor: pointer;
  border-left-width: 4px;
}
.vac-dose input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--color-primary); cursor: pointer; }
.vac-dose-rot { font-weight: 600; }
.vac-dose-data { font-variant-numeric: tabular-nums; color: var(--color-muted); font-size: 0.88rem; }
.vac-dose-badge { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.12rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.vac-status-aplicada { border-left-color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 5%, var(--color-chapa)); }
.vac-status-aplicada .vac-dose-badge { background: color-mix(in oklch, var(--color-primary) 16%, var(--color-chapa)); color: var(--color-primary-dark); }
.vac-status-aplicada .vac-dose-rot { text-decoration: line-through; color: var(--color-muted); }
.vac-status-atrasada { border-left-color: var(--color-high); }
.vac-status-atrasada .vac-dose-badge { background: color-mix(in oklch, var(--color-high) 15%, var(--color-chapa)); color: var(--color-high); }
.vac-status-futura { border-left-color: var(--color-border); }
.vac-status-futura .vac-dose-badge { background: var(--color-secondary); color: var(--color-muted); }
.vac-status-perdida { border-left-color: var(--color-medium); }
.vac-status-perdida .vac-dose-badge { background: color-mix(in oklch, var(--color-medium) 20%, var(--color-chapa)); color: color-mix(in oklch, var(--color-medium) 65%, var(--color-text)); }
.vac-status-opcional { border-left-color: #6b5ca5; }
.vac-status-opcional .vac-dose-badge { background: color-mix(in oklch, #6b5ca5 14%, var(--color-chapa)); color: #55488a; }
.pt-vac-opcional { color: #55488a; }
@media (max-width: 560px) {
  .vac-dose { grid-template-columns: auto 1fr; grid-auto-rows: auto; }
  .vac-dose-data, .vac-dose-badge { grid-column: 2; justify-self: start; }
}

/* ---- Ficha de reanimação por peso (cartão de parada) ---- */
.rea-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-top: .5rem; }
.rea-controls .auth-field { flex: 1 1 140px; margin: 0; }
.rea-controls-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.rea-fonte { font-size: .78rem; margin-top: 1rem; line-height: 1.5; }

.rea-head-card { text-align: center; }
.rea-head-line { display: flex; gap: 1rem; justify-content: center; align-items: baseline; flex-wrap: wrap; }
.rea-head-peso { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--color-primary-dark); }
.rea-head-idade { font-size: 1.1rem; color: var(--color-muted); }

.rea-sec { margin-top: .9rem; border-left: 5px solid var(--color-border); }
.rea-sec h3 { margin: 0 0 .5rem; font-size: 1.02rem; }
.rea-sec-vermelho { border-left-color: var(--color-high); }
.rea-sec-roxo { border-left-color: oklch(52% 0.14 300); }
.rea-sec-azul { border-left-color: oklch(55% 0.11 245); }
.rea-sec-laranja { border-left-color: var(--color-accent); }
.rea-sec-verde { border-left-color: var(--color-primary); }
.rea-sec-cinza { border-left-color: var(--color-muted); }

.rea-rows { display: flex; flex-direction: column; gap: .3rem; }
.rea-row { padding: .4rem 0; border-bottom: 1px dashed var(--color-border); }
.rea-row:last-child { border-bottom: none; }
.rea-row-head { display: grid; grid-template-columns: minmax(9rem, 42%) 1fr; gap: .6rem; align-items: baseline; }
.rea-row-name { font-weight: 600; color: var(--color-text); font-size: .92rem; }
.rea-row-dose { color: var(--color-primary-dark); font-weight: 600; font-size: .95rem; }
.rea-row-sub { display: block; font-weight: 400; color: var(--color-muted); font-size: .8rem; }
/* detalhes didáticos: como dar, diluição/bomba, cuidados e macetes */
.rea-row-detail { margin-top: .28rem; padding-left: .1rem; }
.rea-det { margin: .12rem 0; font-size: .82rem; line-height: 1.4; color: var(--color-text); }
.rea-det-rot { font-weight: 600; color: var(--color-primary-dark); }
.rea-det-alerta .rea-det-rot { color: var(--color-high); }
/*
 * LER A GASOMETRIA DE UMA FOTO. O bloco fica ACIMA dos campos porque é o atalho: quem vai
 * fotografar não deve precisar rolar por cima do formulário que veio justamente para não
 * preencher. O retorno da leitura fica logo abaixo, no mesmo bloco, porque conferir o que foi
 * lido é parte do ato de ler, e não uma tela seguinte.
 */
.gaso-foto { border: 1px dashed var(--color-border, #d8d8d2); border-radius: .5rem; padding: .6rem .7rem; margin: .2rem 0 .9rem; }
.gaso-foto-topo { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.gaso-foto-rot { font-weight: 600; color: var(--color-primary-dark); }
.gaso-foto-btn { cursor: pointer; }
.gaso-foto-ajuda { font-size: .82rem; margin: .35rem 0 0; }
.gaso-foto-estado { font-size: .84rem; line-height: 1.45; }
.gaso-foto-estado:empty { display: none; }
.gaso-foto-estado p { margin: .3rem 0 0; }
.gaso-foto-lendo { color: var(--color-muted); }
.gaso-foto-ok { color: var(--color-text); }
.gaso-foto-erro, .gaso-foto-erro-linha { color: var(--color-high, #a4322a); }
.gaso-foto-nada { color: var(--color-high, #a4322a); }

.rea-det-notas { margin: .2rem 0 .1rem; padding-left: 1.1rem; }
.rea-det-notas li { font-size: .8rem; line-height: 1.4; color: var(--color-muted); margin-bottom: .12rem; }
/*
 * Escada de titulação da bomba: cada degrau é "dose → mL/h". Vai em tabular-nums e um pouco
 * destacada porque é a linha que se lê com a bomba na mão, conferindo número com número; sem a
 * numeração tabular os degraus não alinham e a conferência fica mais lenta do que precisa.
 */
.rea-det-escada { font-variant-numeric: tabular-nums; background: var(--color-surface-alt, #f6f6f4); border-radius: .3rem; padding: .18rem .35rem; }

@media (max-width: 560px) {
  .rea-row-head { grid-template-columns: 1fr; gap: .1rem; }
}

@media print {
  .app-header, .app-footer, .rea-controls-panel, #rea-vazio, #btn-logout, .app-nav, .nav-toggle { display: none !important; }
  main { margin: 0; padding: 0; }
  /*
   * A FOLHA PELA METADE (2026-09-08). O dono, com o cartão impresso na mão: "Ele imprime assim.
   * Sobra espaço na folha. Fica ruim." Na foto, as duas colunas ocupavam uns 60% da largura, à
   * esquerda, e o resto era papel em branco.
   *
   * Medido: o `main` da tela tem max-width de 860px, e essa trava valia no papel também. No
   * Chrome a folha A4 tem 688px úteis, então nem aparecia. O Safari (iPhone e Mac) monta a
   * página na largura da janela e depois encolhe para caber no papel: com 1440px de janela, o
   * cartão ficava com 860/1440 da folha, encostado à esquerda. Era exatamente a foto.
   *
   * Só nesta página, e por isso o `:has(#rea-card)`: os documentos (receita, atestado, laudo)
   * têm largura própria em mm e não foram medidos com o main solto.
   */
  body:has(#rea-card) main { max-width: none; width: 100%; }
  #rea-card { column-count: 2; column-gap: .8rem; }
  /* Cabeçalho e fonte ocupam a largura toda (fora das colunas). */
  .rea-head-card { column-span: all; break-inside: avoid; box-shadow: none; border: 1px solid #ccc; margin: 0 0 .5rem; padding: .5rem .7rem; }
  .rea-fonte { column-span: all; font-size: .68rem; }
  /* As SEÇÕES fluem entre as colunas (sem buracos); só a droga inteira não racha. */
  .rea-sec { break-inside: auto; margin: .35rem 0; padding: 0 0 0 .55rem; box-shadow: none; }
  .rea-sec h3 { break-after: avoid; }
  .rea-rows { display: block; }
  .rea-row { break-inside: avoid; padding: .14rem 0; }
  .rea-row-detail { break-inside: avoid; }
  .rea-row-name, .rea-row-dose { font-size: .8rem; }
}

/* ---- Fototerapia neonatal (AAP 2022) ---- */
.foto-form { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.foto-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.foto-row .auth-field { flex: 1 1 160px; margin: 0; }
.foto-fatores { border: 1px solid var(--color-border); border-radius: var(--radius); padding: .7rem 1rem 1rem; margin: .3rem 0 0; }
.foto-fatores legend { font-weight: 600; font-size: .92rem; padding: 0 .4rem; }
.foto-check { display: flex; align-items: flex-start; gap: .5rem; padding: .28rem 0; font-size: .92rem; cursor: pointer; }
.foto-check input { margin-top: .15rem; }
.foto-fonte { font-size: .78rem; margin-top: 1rem; line-height: 1.5; }

.foto-res { margin-top: 1rem; border-left: 6px solid var(--color-border); }
.foto-res-head { margin-bottom: .6rem; }
.foto-res-status { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.foto-r-abaixo { border-left-color: var(--color-primary); }
.foto-r-foto { border-left-color: var(--color-accent); }
.foto-r-escalonar { border-left-color: #d98324; }
.foto-r-exchange { border-left-color: var(--color-high); }
.foto-r-neutro { border-left-color: var(--color-muted); }

.foto-res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .55rem; }
.foto-res-cell { background: var(--color-cream); border-radius: .6rem; padding: .5rem .7rem; }
.foto-cell-rot { display: block; font-size: .75rem; color: var(--color-muted); }
.foto-cell-val { display: block; font-weight: 600; color: var(--color-primary-dark); font-size: 1.02rem; }
.foto-res-fatores { margin: .7rem 0 0; font-size: .82rem; }
.foto-res-alerta { margin: .7rem 0 0; padding: .6rem .8rem; border-radius: .6rem; background: color-mix(in oklch, var(--color-high) 12%, var(--color-chapa)); color: color-mix(in oklch, var(--color-high) 72%, var(--color-text)); font-weight: 500; font-size: .9rem; }
.foto-res-nota { margin: .7rem 0 0; font-size: .85rem; }
.foto-erro { color: color-mix(in oklch, var(--color-high) 70%, var(--color-text)); font-weight: 500; }

/* ---- Guia de antibioticoterapia empírica por foco ---- */
.atb-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-top: .5rem; }
.atb-peso-field { flex: 0 1 180px; margin: 0; }
.atb-busca-field { flex: 1 1 240px; margin: 0; }
.atb-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.atb-chip { border: 1px solid var(--color-border); background: var(--color-panel); color: var(--color-text); border-radius: var(--radius-pill); padding: .3rem .8rem; font-size: .84rem; cursor: pointer; }
.atb-chip-on { background: var(--color-primary); color: var(--color-chapa); border-color: var(--color-primary); }
.atb-fonte { font-size: .78rem; margin-top: 1rem; line-height: 1.5; }

.atb-card { margin-top: .9rem; }
.atb-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.atb-card-head h3 { margin: 0; font-size: 1.08rem; }
.atb-cat-tag { font-size: .76rem; background: var(--color-secondary); border-radius: var(--radius-pill); padding: .12rem .6rem; }
.atb-resumo { margin: .3rem 0 .6rem; font-size: .88rem; }

.atb-regimes { display: flex; flex-direction: column; gap: .55rem; }
.atb-regime { border-left: 4px solid var(--color-border); padding: .5rem .8rem; background: var(--color-cream); border-radius: .5rem; }
.atb-linha-primeira { border-left-color: var(--color-primary); }
.atb-linha-alt { border-left-color: var(--color-muted); }
.atb-regime-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.atb-linha { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--color-muted); }
.atb-via { font-size: .78rem; background: var(--color-secondary); border-radius: var(--radius-pill); padding: .1rem .55rem; }
.atb-droga { font-weight: 600; color: var(--color-primary-dark); font-size: 1rem; margin-top: .15rem; }
.atb-dose { margin-top: .2rem; display: flex; flex-direction: column; gap: .1rem; }
.atb-dose-base { font-size: .9rem; }
.atb-dose-calc { font-size: .95rem; font-weight: 600; color: var(--color-accent); }
.atb-dose-txt { font-size: .88rem; }
.atb-meta { margin-top: .25rem; font-size: .82rem; color: var(--color-muted); }
.atb-obs { margin: .35rem 0 0; font-size: .82rem; }
.atb-notas { margin-top: .7rem; font-size: .84rem; }
.atb-notas ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.atb-notas li { margin: .15rem 0; }

/* ---- Toxíndromes e antídotos ---- */
.tox-tabs { display: flex; gap: .5rem; margin: .5rem 0; flex-wrap: wrap; }
.tox-tab { border: 1px solid var(--color-border); background: var(--color-panel); color: var(--color-text); border-radius: var(--radius-pill); padding: .4rem 1rem; font-size: .9rem; cursor: pointer; font-weight: 600; }
.tox-tab-active { background: var(--color-primary); color: var(--color-chapa); border-color: var(--color-primary); }
.tox-busca-field { margin: .3rem 0 0; }
.tox-fonte { font-size: .78rem; margin-top: 1rem; line-height: 1.5; }

.tox-card { margin-top: .8rem; }
.tox-card-head h3 { margin: 0 0 .3rem; font-size: 1.06rem; }
.tox-agentes { font-size: .88rem; margin: .2rem 0 .5rem; }
.tox-sinais { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .4rem; }
.tox-sinal { background: var(--color-cream); border-radius: .5rem; padding: .35rem .6rem; }
.tox-sinal-k { display: block; font-size: .72rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .02em; }
.tox-sinal-v { display: block; font-weight: 600; font-size: .9rem; }
.tox-manejo { margin-top: .6rem; font-size: .88rem; }
.tox-manejo ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.tox-manejo li { margin: .15rem 0; }
.tox-notas { margin-top: .5rem; }
.tox-notas p { font-size: .82rem; margin: .2rem 0; }

.tox-anti-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.tox-toxico { font-weight: 600; color: var(--color-text); }
.tox-arrow { color: var(--color-accent); font-weight: 700; }
.tox-antidoto { font-weight: 700; color: var(--color-primary-dark); font-size: 1.05rem; }
.tox-dose { font-size: .92rem; }
.tox-obs { font-size: .82rem; margin: .35rem 0 0; }
.tox-calc-link { margin: .4rem 0 0; font-size: .84rem; }
.tox-calc-link a { color: var(--color-primary); }
/* peso digitado na aba de antídotos → valor calculado ao lado de cada dose por kg */
.tox-peso-field { margin-top: .6rem; }
.tox-calc-val { color: var(--color-primary-dark); font-weight: 700; white-space: nowrap; background: color-mix(in oklch, var(--color-primary) 12%, var(--color-chapa)); padding: 0 .3rem; border-radius: .35rem; }
/* conta limitada pelo máximo do antídoto: o texto é mais longo e pode quebrar linha no celular */
.tox-calc-val.tox-calc-teto { white-space: normal; }
.tox-calc-alerta { color: var(--color-high); font-weight: 700; }

/* ---- Valores laboratoriais por idade ---- */
.lab-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-top: .5rem; }
.lab-idade-field { flex: 0 1 130px; margin: 0; }
.lab-unidade-field { flex: 0 1 130px; margin: 0; }
.lab-busca-field { flex: 1 1 220px; margin: 0; }
.lab-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.lab-chip { border: 1px solid var(--color-border); background: var(--color-panel); color: var(--color-text); border-radius: var(--radius-pill); padding: .3rem .8rem; font-size: .84rem; cursor: pointer; }
.lab-chip-on { background: var(--color-primary); color: var(--color-chapa); border-color: var(--color-primary); }
.lab-fonte { font-size: .78rem; margin-top: 1rem; line-height: 1.5; }

.lab-card { margin-top: .8rem; }
.lab-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.lab-card-head h3 { margin: 0; font-size: 1.02rem; }
.lab-unidade { font-size: .8rem; color: var(--color-muted); }
.lab-faixas { display: flex; flex-direction: column; gap: .15rem; margin-top: .4rem; }
.lab-faixa { display: grid; grid-template-columns: minmax(8rem, 44%) 1fr; gap: .6rem; padding: .28rem .5rem; border-radius: .4rem; align-items: baseline; }
.lab-faixa-rot { font-size: .85rem; color: var(--color-muted); }
.lab-faixa-val { font-weight: 600; font-size: .9rem; color: var(--color-text); }
.lab-faixa-hit { background: color-mix(in oklch, var(--color-primary) 15%, var(--color-chapa)); }
.lab-faixa-hit .lab-faixa-rot { color: var(--color-primary-dark); font-weight: 600; }
.lab-faixa-hit .lab-faixa-val { color: var(--color-primary-dark); }
.lab-notas { margin-top: .5rem; }
.lab-notas p { font-size: .8rem; margin: .2rem 0; }

@media (max-width: 560px) { .lab-faixa { grid-template-columns: 1fr; gap: 0; } }

/* ---- Kit de calculadoras ---- */
.kit-card { margin-top: .8rem; }
.kit-card h3 { margin: 0 0 .5rem; font-size: 1.04rem; }
.kit-inputs { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.kit-inputs .auth-field { flex: 1 1 140px; margin: 0; }
.kit-result { margin-top: .7rem; min-height: 1.2rem; }
.kit-value { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--color-primary-dark); }
.kit-sub { display: block; font-size: .84rem; color: var(--color-muted); margin-top: .2rem; }
.kit-nota { font-size: .8rem; margin: .5rem 0 0; }
.kit-fonte { font-size: .78rem; margin-top: 1rem; }

/* ---- Desidratação: escore e planos OMS ---- */
.des-topinputs { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem; }
.des-topinputs .auth-field { flex: 1 1 140px; margin: 0; }
.des-item { border: none; padding: 0; margin: 0 0 .8rem; }
.des-item legend { font-weight: 600; font-size: .92rem; margin-bottom: .3rem; padding: 0; }
.des-opts { display: flex; flex-direction: column; gap: .3rem; }
.des-opt { display: block; padding: .4rem .6rem; border: 1px solid var(--color-border); border-radius: .5rem; cursor: pointer; font-size: .9rem; }
.des-opt-on { background: color-mix(in oklch, var(--color-primary) 12%, var(--color-chapa)); border-color: var(--color-primary); }
.des-opt-pt { color: var(--color-muted); font-size: .8rem; }
.des-escore-result { margin-top: .5rem; }
.des-score-box { display: inline-flex; align-items: baseline; gap: .6rem; padding: .5rem .9rem; border-radius: .6rem; background: var(--color-cream); }
.des-score-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.des-score-cat { font-weight: 600; }
.des-grau-nenhuma { background: color-mix(in oklch, var(--color-primary) 14%, var(--color-chapa)); }
.des-grau-alguma { background: color-mix(in oklch, var(--color-accent) 16%, var(--color-chapa)); }
.des-grau-moderada_grave { background: color-mix(in oklch, var(--color-high) 14%, var(--color-chapa)); }
.des-sugestao { margin: 1rem 0 .3rem; font-size: 1rem; }
.des-plano-card { border-left: 6px solid var(--color-border); }
.des-plano-a { border-left-color: var(--color-primary); }
.des-plano-b { border-left-color: var(--color-accent); }
.des-plano-c { border-left-color: var(--color-high); }
.des-plano-card h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.des-plano-list { margin: .5rem 0 0; padding-left: 1.1rem; }
.des-plano-list li { margin: .3rem 0; font-size: .9rem; }
.des-vol, .des-fase { background: var(--color-cream); border-radius: .6rem; padding: .5rem .8rem; margin-bottom: .5rem; }
.des-vol-num, .des-fase-num { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--color-primary-dark); }
.des-vol-sub, .des-fase-sub { display: block; font-size: .84rem; color: var(--color-muted); }
.des-fases { display: flex; flex-wrap: wrap; gap: .5rem; }
.des-fases .des-fase { flex: 1 1 180px; margin-bottom: 0; }
.des-liquido { font-size: .9rem; }
.des-ref-grid p { font-size: .86rem; margin: .5rem 0; }
.des-fonte { font-size: .78rem; margin-top: 1rem; }

/* ---- Crescimento do prematuro e síndromes ---- */
.cre-form { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.cre-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.cre-row .auth-field { flex: 1 1 140px; margin: 0; }
.cre-check { display: flex; align-items: center; gap: .4rem; font-size: .9rem; flex: 1 1 160px; }
.cre-idades { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .8rem; font-size: .88rem; }
.cre-res-box { display: inline-flex; align-items: baseline; gap: .8rem; padding: .5rem .9rem; border-radius: .6rem; margin-top: .6rem; background: var(--color-cream); flex-wrap: wrap; }
.cre-res-num { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--color-primary-dark); }
.cre-res-pct { font-weight: 600; }
.cre-res-cls { font-size: .9rem; }
.cre-lvl-alerta { background: color-mix(in oklch, var(--color-accent) 16%, var(--color-chapa)); }
.cre-lvl-grave { background: color-mix(in oklch, var(--color-high) 14%, var(--color-chapa)); }
.cre-erro { color: color-mix(in oklch, var(--color-high) 70%, var(--color-text)); }
.cre-graf-card { margin-top: .8rem; }
.cre-graf-card h3 { margin: 0 0 .5rem; font-size: 1rem; }
.cre-chart { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
.cre-axis { stroke: var(--color-muted); stroke-width: 1; }
.cre-zline { stroke-width: 1.3; }
.cre-z0 { stroke: var(--color-primary); }
.cre-z2 { stroke: var(--color-accent); stroke-dasharray: 4 3; }
.cre-z3 { stroke: var(--color-high); stroke-dasharray: 2 3; }
.cre-zlab { font-size: 8px; fill: var(--color-muted); }
.cre-axlab { font-size: 9px; fill: var(--color-muted); }
.cre-pt { fill: var(--color-primary-dark); stroke: #fff; stroke-width: 1.5; }
.cre-ref p { font-size: .86rem; margin: .5rem 0; }
.cre-sind-tab { width: 100%; border-collapse: collapse; font-size: .85rem; }
.cre-sind-tab th { text-align: left; vertical-align: top; padding: .35rem .5rem .35rem 0; width: 34%; color: var(--color-primary-dark); }
.cre-sind-tab td { padding: .35rem 0; border-bottom: 1px solid var(--color-border); }
.cre-fonte { font-size: .78rem; margin-top: 1rem; line-height: 1.5; }

/* ---- Marcos do desenvolvimento ---- */
.dev-idade-field { max-width: 200px; margin: .5rem 0 0; }
.dev-alerta-geral { border-left: 5px solid var(--color-accent); }
.dev-alerta-geral h3 { margin: 0 0 .4rem; font-size: 1rem; }
.dev-alerta-geral ul { margin: 0; padding-left: 1.1rem; }
.dev-alerta-geral li { margin: .2rem 0; font-size: .88rem; }
.dev-faixa { margin-top: .8rem; }
.dev-faixa-hit { outline: 2px solid var(--color-primary); }
.dev-faixa-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.dev-faixa-head h3 { margin: 0; font-size: 1.06rem; }
.dev-hit-tag { font-size: .74rem; background: var(--color-primary); color: var(--color-chapa); border-radius: var(--radius-pill); padding: .15rem .6rem; }
.dev-doms { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; margin-top: .5rem; }
.dev-dom { background: var(--color-cream); border-radius: .6rem; padding: .5rem .7rem; }
.dev-dom h4 { margin: 0 0 .3rem; font-size: .84rem; color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: .02em; }
.dev-dom ul { margin: 0; padding-left: 1.05rem; }
.dev-dom li { margin: .18rem 0; font-size: .86rem; }
.dev-alertas { margin-top: .6rem; padding: .6rem .8rem; border-radius: .6rem; background: color-mix(in oklch, var(--color-high) 10%, var(--color-chapa)); }
.dev-alertas strong { color: color-mix(in oklch, var(--color-high) 72%, var(--color-text)); }
.dev-alertas ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.dev-alertas li { margin: .2rem 0; font-size: .86rem; }
.dev-fonte { font-size: .78rem; margin-top: 1rem; line-height: 1.5; }

/* ---- Gerador de encaminhamentos ---- */
.enc-esp-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.enc-grupo { margin-top: .6rem; }
.enc-grupo h4 { margin: 0 0 .3rem; font-size: .82rem; color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: .02em; }
.enc-esp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .25rem .8rem; }
.enc-esp { display: flex; align-items: flex-start; gap: .45rem; font-size: .9rem; padding: .2rem 0; cursor: pointer; }
.enc-msg { color: color-mix(in oklch, var(--color-high) 70%, var(--color-text)); font-weight: 500; margin: .5rem 0 0; }
.enc-doc-dest { font-size: .95rem; }
@media screen { .enc-quebra { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px dashed var(--color-border); } }
@media print { .enc-quebra { break-before: page; } }

/* ---- Pedido de exames ---- */
.exam-wrap { display: flex; flex-direction: column; gap: .5rem; }
.exam-ident { display: flex; gap: .7rem; flex-wrap: wrap; }
.exam-field { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 220px; font-size: .8rem; color: var(--color-muted); }
.exam-field-sm { flex: 0 1 140px; }
.exam-field input { font: inherit; color: var(--color-text); padding: .55rem .7rem; border: 1px solid var(--color-border); border-radius: .6rem; background: var(--color-panel); }
.exam-sec-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .6rem; }
.exam-sec-head h3 { margin: 0; font-size: 1rem; }
.exam-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.exam-chip { border: 1px solid var(--color-border); background: var(--color-panel); color: var(--color-text); border-radius: 999px; padding: .45rem .8rem; font: inherit; font-size: .85rem; cursor: pointer; transition: background .12s, border-color .12s; }
.exam-chip:hover { border-color: var(--color-primary); }
.exam-chip.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.exam-painel-card { border: 1px solid var(--color-border); border-radius: .8rem; margin-top: .7rem; overflow: hidden; }
.exam-painel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .8rem; background: var(--color-secondary); }
.exam-painel-tools { display: flex; gap: .4rem; }
.exam-mini { border: 1px solid var(--color-border); background: var(--color-panel); border-radius: .5rem; padding: .2rem .5rem; font: inherit; font-size: .74rem; color: var(--color-muted); cursor: pointer; }
.exam-mini:hover { color: var(--color-primary); border-color: var(--color-primary); }
.exam-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .1rem .8rem; padding: .5rem .8rem .7rem; }
.exam-item { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .1rem .5rem; padding: .35rem .2rem; border-radius: .5rem; cursor: pointer; }
.exam-item:hover { background: var(--color-secondary); }
.exam-item input { grid-row: 1 / span 2; align-self: center; width: 1.05rem; height: 1.05rem; accent-color: var(--color-primary); }
.exam-item-nome { font-size: .9rem; line-height: 1.25; }
.exam-item.on .exam-item-nome { font-weight: 600; }
.exam-item-obs { grid-column: 2; font-size: .72rem; color: var(--color-muted); }
.exam-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.exam-preview { margin-top: 1.2rem; }

/* documento gerado */
.exam-doc-ident { margin: .2rem 0; }
.exam-doc-hip { margin: .2rem 0 .6rem; }
.exam-doc-sec { font-size: 1rem; margin: 1rem 0 .3rem; border-bottom: 1px solid var(--color-border); padding-bottom: .2rem; }
.exam-doc-lista { margin: .2rem 0 .4rem 1.2rem; padding: 0; }
.exam-doc-lista li { margin: .15rem 0; }
.exam-doc-obs { color: var(--color-muted); font-size: .85em; }
@media print { .exam-doc-obs { color: #444; } }

/* ---- Hub editorial: grupos direcionados + cartões-índice ---- */
.hub-grid { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 2.1rem; }
.hub-group-title {
  margin: 0 0 .95rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-primary); display: flex; align-items: center; gap: .8rem;
}
.hub-group-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, color-mix(in oklch, var(--color-gold) 55%, var(--color-border)), transparent); }

/* Categorias recolhíveis (accordion) do "Explorar tudo" */
.hub-grid { gap: .6rem; }
.hub-acc { border: 1px solid var(--color-border); border-radius: .8rem; background: var(--color-panel); overflow: hidden; }
.hub-acc-head { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .95rem 1.05rem; background: transparent; border: none; font: inherit; color: var(--color-text); cursor: pointer; text-align: left; }
.hub-acc-title { font-size: .95rem; font-weight: 600; }
.hub-acc-count { font-size: .72rem; font-weight: 600; color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 12%, transparent); border-radius: 999px; padding: .12rem .5rem; }
.hub-acc-chev { width: 18px; height: 18px; margin-left: auto; color: var(--color-muted); transition: transform .18s ease; flex: 0 0 auto; }
.hub-acc:not(.closed) .hub-acc-chev { transform: rotate(90deg); }
.hub-acc-head:hover .hub-acc-title { color: var(--color-primary); }
.hub-acc-body { padding: .1rem 1.05rem 1.1rem; }
.hub-acc.closed .hub-acc-body { display: none; }
.hub-acc.hub-group-urg { border-left: 3px solid var(--color-accent); }
.hub-acc.hub-group-urg .hub-acc-count { color: var(--color-accent); background: color-mix(in oklch, var(--color-accent) 14%, transparent); }

.hub-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: .8rem; }
.hub-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .95rem; text-decoration: none;
  padding: 1.15rem 1.05rem 1.25rem; border: 1px solid var(--color-border); border-radius: .8rem;
  background: var(--color-panel); color: var(--color-text);
  transition: border-color .18s ease, box-shadow .2s ease, transform .18s ease;
}
.hub-card::after {
  content: ""; position: absolute; left: 1.05rem; right: 1.05rem; bottom: .75rem; height: 1.5px;
  background: var(--color-gold); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .24s ease;
}
.hub-card:hover {
  border-color: color-mix(in oklch, var(--color-primary) 45%, var(--color-border));
  box-shadow: 0 18px 34px -24px rgba(20, 40, 30, 0.55);
  transform: translateY(-2px);
}
.hub-card:hover::after { transform: scaleX(1); }
/*
 * O CARTÃO PRECISA RESPONDER AO TOQUE, e até 2026-08-30 ele não respondia: só existia
 * :hover, que no celular não acontece. O dono pediu "com clique diferente, com fica
 * diferente quando clica", e a falta valia para as duas telas, a inicial do SPI e o índice
 * da caixa na loja. Afunda, escurece a borda e apaga a sombra: o dedo vê que pegou.
 */
.hub-card:active {
  transform: translateY(1px) scale(.985);
  border-color: color-mix(in oklch, var(--color-primary) 60%, var(--color-border));
  background: color-mix(in oklch, var(--color-primary) 6%, var(--color-panel));
  box-shadow: 0 4px 10px -8px rgba(20, 40, 30, 0.5);
}
.hub-card:active::after { transform: scaleX(1); }
/* Teclado: o mesmo destaque do toque, sem depender de mouse. */
.hub-card:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px color-mix(in oklch, var(--color-primary) 55%, transparent);
}
/* A linha pequena de um cartão que conta o que tem dentro (ex.: "28 escalas desta
   ferramenta" no índice da caixa da loja). */
.hub-card-nota { display: block; margin-top: -.55rem; font-size: .78rem; line-height: 1.3; color: var(--color-muted); }
.hub-card-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); }
.hub-card-ico svg { width: 27px; height: 27px; }
.hub-card:hover .hub-card-ico { color: var(--color-primary-dark); }
.hub-card-label {
  display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.02rem;
  line-height: 1.2; letter-spacing: -.006em; color: var(--color-primary-dark);
}
/* Urgência e emergência: ícones em terracota para leitura de alerta */
.hub-group-urg .hub-card-ico { color: var(--color-accent); }
.hub-group-urg .hub-card:hover .hub-card-ico { color: color-mix(in oklch, var(--color-accent) 80%, var(--color-text)); }
.hub-group-urg .hub-card::after { background: var(--color-accent); }

/* ===== Tela inicial estilo app (saudação + hero + acesso rápido + favoritos) ===== */
.hub-card-wrap { position: relative; display: block; }
.hub-card-wrap .hub-card { height: 100%; box-sizing: border-box; }
.fav-star {
  position: absolute; top: .45rem; right: .45rem; width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: none; border-radius: 50%; color: color-mix(in oklch, var(--color-muted) 70%, transparent);
  transition: color .15s, background .15s; z-index: 2;
}
.fav-star svg { width: 18px; height: 18px; }
.fav-star:hover { background: color-mix(in oklch, var(--color-primary) 10%, var(--color-chapa)); color: var(--color-accent); }
.fav-star.on { color: var(--color-accent); }
.fav-star.on svg { fill: var(--color-accent); }

.home-top { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.4rem; }
.home-hero {
  margin: .6rem 0 .4rem; border-radius: 1.25rem; padding: 1.6rem 1.5rem; overflow: hidden; position: relative; isolation: isolate;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-cream);
  box-shadow: 0 22px 50px -30px rgba(20, 40, 30, .65);
}
.home-hero::before { content: ""; position: absolute; z-index: -1; top: -30%; right: -12%; width: 55%; height: 150%;
  background: radial-gradient(closest-side, rgba(201,162,39,.28), rgba(201,162,39,0) 70%); }
.home-hero h2 { font-family: var(--font-display); color: #fff; font-size: 1.5rem; line-height: 1.12; margin: 0 0 .5rem; max-width: 20ch; }
.home-hero p { margin: 0; color: rgba(246,241,231,.9); font-size: .95rem; }
.home-quick { margin-top: .55rem; }

/* ---- Acesso rápido: os quatro boxes verdes ----
   Mesma família da faixa superior do app (--color-primary), em tinta clara sobre a qual o
   verde escuro do topo continua legível. Verde CHEIO foi descartado: quatro blocos escuros
   logo abaixo do cabeçalho competiriam com ele e a tela perderia o eixo.

   O contraste importa mais aqui que estética: isso é usado no plantão, muitas vezes com a
   tela no claro. Texto escuro sobre fundo claro sobrevive ao sol; o contrário, não.

   color-mix em vez de um hex novo: assim os quatro seguem a paleta se ela mudar, em vez de
   virar uma cor órfã que ninguém sabe de onde veio. */
.home-quick .hub-card {
  background: color-mix(in oklch, var(--color-primary) 10%, var(--color-chapa));
  border-color: color-mix(in oklch, var(--color-primary) 26%, var(--color-chapa));
}
.home-quick .hub-card-ico { color: var(--color-primary-dark); }
.home-quick .hub-card-label { color: var(--color-primary-dark); }
/* O filete dourado do hover viraria quase invisível sobre o verde: passa ao verde escuro. */
.home-quick .hub-card::after { background: var(--color-primary-dark); }
.home-quick .hub-card:hover {
  background: color-mix(in oklch, var(--color-primary) 15%, var(--color-chapa));
  border-color: color-mix(in oklch, var(--color-primary) 45%, var(--color-chapa));
}
/* A estrela precisa aparecer sobre o verde — é ela que comanda quais quatro ficam aqui. */
.home-quick .fav-star { color: var(--color-primary-dark); }

.home-continue {
  display: flex; align-items: center; gap: .9rem; margin-top: .55rem; text-decoration: none;
  border: 1px solid var(--color-border); border-radius: .9rem; padding: .95rem 1.05rem; background: var(--color-panel); color: var(--color-text);
  transition: border-color .15s, box-shadow .2s, transform .15s;
}
.home-continue:hover { border-color: color-mix(in oklch, var(--color-primary) 45%, var(--color-border)); box-shadow: 0 16px 30px -22px rgba(20,40,30,.5); transform: translateY(-1px); }
.home-cont-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--color-primary) 12%, var(--color-chapa)); color: var(--color-primary-dark); }
.home-cont-ico svg { width: 22px; height: 22px; }
.home-cont-txt { display: flex; flex-direction: column; flex: 1; }
.home-cont-txt strong { font-family: var(--font-display); color: var(--color-primary-dark); font-weight: 600; }
.home-cont-txt span { color: var(--color-muted); font-size: .82rem; }
.home-cont-arrow { color: var(--color-muted); font-size: 1.5rem; line-height: 1; }

/* barra inferior (só na home) */
.home-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; justify-content: space-around;
  background: var(--color-panel); border-top: 1px solid var(--color-border); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px -18px rgba(20,40,30,.5);
}
.home-tabbar button {
  flex: 1; background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .35rem .2rem; color: var(--color-muted); font-size: .72rem; font-family: inherit;
}
.home-tabbar .tab-ico svg { width: 23px; height: 23px; }
.home-tabbar button:first-child { color: var(--color-primary); }
.home-tabbar button:hover { color: var(--color-primary-dark); }
#view-hub { padding-bottom: 4.5rem; }

/* busca (overlay) */

/* Campo de busca fixo na tela inicial */
.home-q-results { position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 40; display: none;
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: .85rem; padding: .4rem;
  max-height: min(64vh, 460px); overflow: auto; box-shadow: 0 22px 55px -24px rgba(0,0,0,.5); }
.home-q-results.open { display: block; }

/* Itens de resultado (compartilhado entre a barra da home e o overlay) */
.srch-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .55rem; border-radius: .6rem; text-decoration: none; color: var(--color-text); }
.srch-item:hover { background: var(--color-secondary); }
.srch-ico { flex: 0 0 auto; display: inline-flex; color: var(--color-primary); }
.srch-ico svg { width: 22px; height: 22px; }
.srch-chip { flex: 0 0 auto; font-size: .64rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--color-primary-dark, var(--color-primary)); background: color-mix(in oklch, var(--color-primary) 12%, transparent);
  border-radius: .4rem; padding: .22rem .45rem; min-width: 4.4rem; text-align: center; }
.srch-txt { display: flex; flex-direction: column; min-width: 0; }
.srch-txt strong { font-weight: 600; font-size: .95rem; line-height: 1.2; }
.srch-txt span { font-size: .78rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-hint { padding: .7rem .5rem; color: var(--color-muted); font-size: .85rem; margin: 0; }

@media (min-width: 900px) { .home-tabbar { display: none; } #view-hub { padding-bottom: 0; } }
@media (max-width: 560px) {
  .hub-cards { grid-template-columns: repeat(auto-fill, minmax(134px, 1fr)); gap: .6rem; }
  .hub-card { padding: .95rem .85rem 1.05rem; gap: .75rem; }
  .hub-card-label { font-size: .95rem; }
}

/* ---- Documentos do paciente (aba no prontuário) ---- */
.doc-drop {
  border: 1.5px dashed color-mix(in oklch, var(--color-primary) 40%, var(--color-border));
  border-radius: 1rem; background: var(--color-cream); text-align: center;
  padding: 1.8rem 1.25rem; cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.doc-drop:hover, .doc-drop:focus-visible { border-color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 6%, var(--color-cream)); outline: none; }
.doc-drop-over { border-color: var(--color-primary); border-style: solid; background: color-mix(in oklch, var(--color-primary) 10%, var(--color-cream)); }
.doc-drop-ico { width: 34px; height: 34px; color: var(--color-primary); margin-bottom: .35rem; }
.doc-drop-txt { margin: .2rem 0 .15rem; font-size: 1rem; }
.doc-drop-sub { font-size: .85rem; margin: 0 auto; max-width: 44ch; }

.doc-msg { margin: .8rem 0 0; padding: .6rem .8rem; border-radius: .6rem; font-size: .9rem; font-weight: 500; }
.doc-msg-info { background: color-mix(in oklch, var(--color-primary) 8%, var(--color-chapa)); color: var(--color-primary-dark); border: 1px solid color-mix(in oklch, var(--color-primary) 22%, var(--color-border)); }

.doc-list { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .65rem; }
.doc-empty { text-align: center; padding: 1.4rem 1rem; }
.doc-empty code { background: var(--color-secondary); padding: .1rem .35rem; border-radius: .3rem; font-size: .85em; }
/* O NOME DO ARQUIVO OCUPA A LINHA INTEIRA, como um título, e os botões vêm embaixo.
   Era grid de duas colunas (1fr auto). A coluna dos botões cresceu para cinco botões
   ("Organizar com IA", "Lançar resultados", "Compartilhar", "Baixar", "Excluir"), esmagou a
   coluna do nome para largura de poucos pixels, e o overflow-wrap: anywhere fez o resto:
   nome de arquivo longo saía QUEBRADO LETRA POR LETRA, uma por linha, empurrando o card
   para meia tela de altura.
   Empilhar resolve na raiz. Lado a lado só voltaria a apertar assim que entrasse o sexto
   botão — e a régua "cabe em duas colunas?" depende de quantos botões o documento tem, o
   que muda por categoria de arquivo. */
.doc-item {
  border: 1px solid var(--color-border); border-radius: .8rem; background: var(--color-panel);
  padding: .8rem .9rem; display: grid; grid-template-columns: 1fr; gap: .55rem; align-items: start;
}
.doc-item-main { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.doc-item-ico { flex: 0 0 auto; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 9px; background: color-mix(in oklch, var(--color-primary) 10%, var(--color-chapa)); color: var(--color-primary); }
.doc-item-ico svg { width: 20px; height: 20px; }
/* flex: 1 — o bloco do texto CRESCE e ocupa a linha branca inteira, como um título.
   Sem isso ele fica do tamanho do próprio conteúdo e o nome sobra encolhido no canto
   esquerdo, mesmo já estando na horizontal. */
.doc-item-txt { min-width: 0; flex: 1 1 auto; }
.doc-item-nome { margin: 0; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; line-height: 1.35; }
.doc-item-meta { margin: .1rem 0 0; font-size: .82rem; }
/* wrap: cinco botões não cabem numa linha no celular, e sem o wrap eles vazam do card. */
.doc-item-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.doc-item-actions .secondary { padding: .38rem .8rem; font-size: .85rem; }
.doc-excluir { background: none; border: 1px solid var(--color-border); color: var(--color-muted); border-radius: var(--radius-pill); padding: .38rem .8rem; font-size: .85rem; cursor: pointer; transition: color .15s, border-color .15s; }
.doc-excluir:hover { color: var(--color-high); border-color: var(--color-high); }

.doc-badge { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: .12rem .45rem; border-radius: var(--radius-pill); vertical-align: middle; margin-left: .35rem; }
.doc-badge-ok { background: color-mix(in oklch, var(--color-primary) 15%, var(--color-chapa)); color: var(--color-primary-dark); }
.doc-badge-wait { background: color-mix(in oklch, var(--color-accent) 16%, var(--color-chapa)); color: color-mix(in oklch, var(--color-accent) 75%, var(--color-text)); }

.doc-resumo { grid-column: 1 / -1; margin-top: .2rem; border-top: 1px solid var(--color-border); padding-top: .5rem; }
.doc-toggle { background: none; border: none; color: var(--color-primary); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; padding: 0; }
.doc-resumo-txt { margin-top: .5rem; white-space: pre-wrap; font-size: .9rem; line-height: 1.55; color: var(--color-text); background: var(--color-cream); border-radius: .6rem; padding: .7rem .85rem; }
/* leitura organizada do exame: seções, listas e destaque dos alterados */
.doc-resumo-txt p, .doc-resumo-txt ul { white-space: normal; }
.doc-res-sec { margin: .7rem 0 .25rem; }
.doc-res-sec:first-child { margin-top: 0; }
.doc-res-sec-alt strong { color: #9b2c2c; }
.doc-res-sec-aten strong { color: #8a6100; }
.doc-res-lista { margin: 0 0 .2rem; padding-left: 1.1rem; }
.doc-res-lista li { margin: .15rem 0; }
.doc-res-lista-alt { border-left: 3px solid #e0b4b4; padding-left: .9rem; margin-left: .1rem; list-style: none; }
.doc-res-lista-alt li::before { content: "▲ "; color: #9b2c2c; }
.doc-res-lista-aten { border-left: 3px solid #e6cf9a; padding-left: .9rem; margin-left: .1rem; list-style: none; }
.doc-res-lista-aten li::before { content: "• "; color: #8a6100; }
@media (max-width: 560px) {
  /* O empilhamento já é o padrão (ver .doc-item). Aqui fica só o alinhamento dos botões. */
  .doc-item-actions { justify-content: flex-start; }
}

/* ---- Anotações à mão (prancheta / Apple Pencil) na consulta ---- */
.anot-panel { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-cream); padding: 0.4rem 1rem; margin: 0.4rem 0 1.2rem; }
.anot-panel > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; padding: 0.5rem 0; font-family: var(--font-display); color: var(--color-primary-dark); }
.anot-panel > summary .pu-sum-title { font-weight: 600; }
.anot-body { padding-bottom: 0.7rem; }
.anot-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0.6rem; }
.anot-tool { background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.4rem 0.85rem; font-size: 0.9rem; cursor: pointer; color: var(--color-text); }
.anot-tool:hover { border-color: var(--color-primary); }
.anot-tool-active { background: var(--color-primary); color: var(--color-chapa); border-color: var(--color-primary); }
.anot-toolbar .secondary { padding: 0.4rem 0.85rem; font-size: 0.9rem; }
.anot-toolbar-sep { flex: 1 1 0.5rem; min-width: 0; }
.anot-color { display: inline-flex; align-items: center; }
.anot-color input[type="color"] { width: 34px; height: 30px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-panel); padding: 2px; cursor: pointer; }
.anot-canvas-wrap { height: 62vh; max-height: 720px; min-height: 320px; border: 1px solid var(--color-border); border-radius: 0.7rem; background: #fff; overflow: hidden; box-shadow: inset 0 1px 2px rgba(20, 40, 30, 0.06); }
.anot-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; background: #fff;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media print { .anot-panel { display: none !important; } }

/* ---- Orientações de alta: documento para impressão (timbre/logo) ---- */
#alta-print-wrap { margin-top: 1.2rem; }
.alta-print-tema { text-align: center; font-family: var(--font-display); font-size: 1.1rem; color: #34614e; margin: 0 2.4rem 1rem; }
.laudo-alarme { margin: 1.1rem 2.4rem; border: 1.5px solid #b0281c; border-radius: 0.5rem; background: #fbecea; padding: 0.6rem 1rem 0.7rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.laudo-alarme-h { color: #b0281c !important; border: none !important; margin: 0.2rem 0 0.4rem !important; padding: 0 !important; font-size: 1.02rem; }
.laudo-alarme ul { margin: 0; padding-left: 1.2rem; }
.laudo-alarme li { margin-bottom: 0.35rem; text-align: left; }
.alta-print-foot { margin: 1.4rem 2.4rem 1.6rem !important; font-size: 0.82rem; color: #666; text-align: left !important; font-style: italic; }
/* Assinatura/identificação do médico no rodapé de todo documento (sem depender do logo) */
.doc-signature { text-align: center; margin: 2.4rem 2.4rem 1rem; }
.doc-signature p { margin: 0.12rem 0; text-align: center; }
.doc-sign-line { margin: 0 auto 0.3rem; color: #444; max-width: 20rem; }
.doc-sign-nome { font-size: 1.02rem; }
@media print {
  .alta-print-tema, .alta-print-foot { margin-left: 1.1rem; margin-right: 1.1rem; }
  .laudo-alarme { margin-left: 1.1rem; margin-right: 1.1rem; break-inside: avoid; }
}

/* Área do administrador (Meu Consultório): convidar médico */
.co-admin-row { display: grid; grid-template-columns: 1fr 12rem; gap: .8rem; align-items: end; margin-bottom: .6rem; }
@media (max-width: 560px) { .co-admin-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Central de Conteúdo IA (namespace .ct-)
   Reaproveita os tokens da plataforma (--color-*, --font-*, --radius) e as
   estruturas .panel / .pr-grid-2 / .auth-field / .pr-msg. Nada de paleta nova.
   ========================================================================== */
.ct-hero { background: linear-gradient(180deg, var(--color-cream), var(--color-panel)); }
.ct-eyebrow {
  display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-gold-deep, var(--color-accent)); margin-bottom: 0.35rem;
}
.ct-hero h2 { margin: 0 0 0.4rem; font-size: 1.6rem; }

.ct-portas { display: grid; gap: 0.9rem; grid-template-columns: 1fr; margin-top: 1.1rem; }
@media (min-width: 720px) { .ct-portas { grid-template-columns: 1fr 1fr; } }
/* Três portas (com os Prompts prontos, 2026-10-16): três colunas onde cabem; no meio, a terceira ocupa a linha. */
@media (min-width: 720px) { .ct-portas-3 > .ct-porta:nth-child(3) { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .ct-portas-3 { grid-template-columns: repeat(3, 1fr); } .ct-portas-3 > .ct-porta:nth-child(3) { grid-column: auto; } }
a.ct-porta { display: block; color: inherit; text-decoration: none; }
.ct-porta {
  border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.1rem;
  background: var(--color-panel); cursor: pointer; text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ct-porta:hover, .ct-porta:focus-visible {
  border-color: var(--color-gold); transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in oklch, var(--color-primary) 10%, transparent);
  outline: none;
}
.ct-porta h3 { margin: 0.4rem 0 0.3rem; font-size: 1.1rem; }
.ct-porta p { margin: 0 0 0.6rem; color: var(--color-muted); font-size: 0.92rem; }
.ct-porta-ico { font-size: 1.3rem; color: var(--color-gold-deep, var(--color-accent)); }
.ct-porta-off { opacity: 0.72; cursor: default; background: var(--color-cream); }
.ct-porta-off:hover { transform: none; border-color: var(--color-border); box-shadow: none; }

.ct-cat { margin-top: 1.2rem; }
.ct-cat-head { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 0.55rem; }
.ct-cat-head h4 { margin: 0; font-family: var(--font-display); font-size: 1.02rem; color: var(--color-primary); }
.ct-cat-head span { font-size: 0.82rem; }
.ct-cards { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ct-card {
  border: 1px solid var(--color-border); border-radius: 0.8rem; padding: 0.7rem 0.8rem;
  background: var(--color-panel); cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ct-card:hover, .ct-card:focus-visible { border-color: var(--color-gold); transform: translateY(-1px); outline: none; }
.ct-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.ct-card-nome { font-weight: 600; font-size: 0.94rem; color: var(--color-primary-dark); }
.ct-card-lock { font-size: 0.82rem; opacity: 0.6; }
.ct-card-resumo { margin: 0.3rem 0 0.45rem; font-size: 0.82rem; color: var(--color-muted); line-height: 1.45; }
.ct-card-pe { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-gold-deep, var(--color-accent)); }
.ct-card-off { cursor: default; background: var(--color-cream); opacity: 0.8; }
.ct-card-off:hover { transform: none; border-color: var(--color-border); }

/* ------------------------------- marca ---------------------------------- */
.ct-ident { font-weight: 600; color: var(--color-primary-dark); margin: 0.2rem 0 0.5rem; }
.ct-slider { margin: 0.7rem 0 0.9rem; }
.ct-slider label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 0.2rem; }
.ct-slider input[type="range"] { width: 100%; accent-color: var(--color-primary); }
.ct-slider-legenda { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--color-muted); }
.ct-paleta { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.ct-cor { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font-size: 0.72rem; color: var(--color-muted); }
.ct-cor input[type="color"] { width: 3rem; height: 2.2rem; border: 1px solid var(--color-border); border-radius: 0.4rem; background: none; }
/* A analise do Instagram: a amostra de cor lida do perfil (span, nao input: e leitura, nao
   escolha) e a lista de ideias com o botao de gerar ao lado. */
.ct-cor-amostra { display: inline-block; width: 3rem; height: 2.2rem; border: 1px solid var(--color-border); border-radius: 0.4rem; }
.ct-insta-ok ul { margin: 0.2rem 0 0.6rem 1.2rem; }
.ct-ideias { display: grid; gap: 0.5rem; margin: 0.4rem 0 0.8rem; }
.ct-ideia { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.6rem 0.8rem; flex-wrap: wrap; }

/* O seletor de alinhamento fica logo abaixo da paleta, com respiro para não colar nos
   quadradinhos de cor. Largura limitada: são duas palavras de opção, um campo largo
   atravessando o painel só faria a tela parecer um formulário. */
.ct-alinha { margin-top: 1rem; max-width: 20rem; }
/* A previa da fonte de preferencia: a frase na propria letra, porque fonte nao se escolhe pelo nome. */
.ct-fonte-previa { font-size: 1.35rem; margin: 0.4rem 0 0.8rem; color: var(--color-text, inherit); }
.ct-proposta { border: 1px solid var(--color-gold); border-radius: var(--radius); padding: 0.9rem 1rem; background: var(--color-cream); margin-top: 0.8rem; }
.ct-proposta h4 { margin: 0 0 0.5rem; }
.ct-voz-ok { border-left: 3px solid var(--color-primary); padding-left: 0.8rem; }

/* ------------------------------ peça / render --------------------------- */
.ct-aviso { background: var(--color-cream); border-left: 3px solid var(--color-medium); padding: 0.6rem 0.8rem; border-radius: 0.4rem; font-size: 0.88rem; }
.ct-itens { display: grid; gap: 0.7rem; }
/* Coluna dupla só onde cabe: no celular a largura não dá e continua empilhado. */
@media (min-width: 900px) { .ct-itens-duplo { grid-template-columns: 1fr 1fr; } }
.ct-item { border: 1px solid var(--color-border); border-radius: 0.8rem; padding: 0.75rem 0.85rem; background: var(--color-panel); }
.ct-item-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.ct-item-n {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--color-primary); color: var(--color-chapa); font-size: 0.78rem; font-weight: 600;
}
.ct-item-tipo { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.ct-campo { margin: 0.35rem 0; }
.ct-campo-rot { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.ct-campo-val { font-size: 0.95rem; line-height: 1.5; }
.ct-forte { font-weight: 600; color: var(--color-primary-dark); }
.ct-extras { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--color-border); }
.ct-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
.ct-tag { background: var(--color-secondary); border-radius: var(--radius-pill); padding: 0.12rem 0.55rem; font-size: 0.78rem; }

/* ------------------------------ selo CFM -------------------------------- */
.ct-cfm { border-radius: var(--radius); padding: 0.8rem 0.95rem; margin: 0.8rem 0; border-left: 4px solid; background: var(--color-cream); }
.ct-cfm ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.ct-cfm li { margin: 0.5rem 0; font-size: 0.9rem; }
.ct-cfm-verde { border-color: var(--color-low); }
.ct-cfm-amarelo { border-color: var(--color-medium); }
.ct-cfm-vermelho { border-color: var(--color-high); }
.ct-cfm-trecho { font-style: italic; color: var(--color-high); }
.ct-cfm-fonte { font-size: 0.72rem; margin: 0.6rem 0 0; }

/* ------------------------------ biblioteca ------------------------------ */
.ct-lista { list-style: none; margin: 0; padding: 0; }
.ct-linha { border-bottom: 1px solid var(--color-border); }
.ct-linha:last-child { border-bottom: 0; }
.ct-linha-btn {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 0.7rem 0.2rem; cursor: pointer; color: inherit; text-decoration: none;
}
.ct-linha-btn:hover { background: var(--color-cream); }
.ct-linha-tit { display: block; font-weight: 600; color: var(--color-primary-dark); }
.ct-linha-meta { display: block; font-size: 0.78rem; color: var(--color-muted); margin-top: 0.15rem; }
/* Título e meta de uma linha quebram mesmo sem espaço. Título é texto livre (do médico ou da
   IA): 80 letras seguidas vazavam da lista e alargavam a página inteira no celular (medido na
   mentoria em 390px: scrollWidth 615 na biblioteca e 651 no calendário, onde o botão é grid e a
   coluna 1fr aceitava o mínimo do conteúdo). A marcação é a mesma nos dois produtos. */
.ct-linha-btn { min-width: 0; }
.ct-linha-tit, .ct-linha-meta { overflow-wrap: anywhere; min-width: 0; }
.ct-flag { color: var(--color-high); font-weight: 600; }
.ct-vazio { border: 1px dashed var(--color-border); border-radius: var(--radius); padding: 1.1rem; text-align: center; }
.ct-versoes { list-style: none; margin: 0.4rem 0 0; padding: 0; font-size: 0.84rem; color: var(--color-muted); }
.ct-versoes li { padding: 0.2rem 0; }
.ct-inline-sel { border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.4rem 0.8rem; background: var(--color-panel); }
.ct-peca { margin-top: 0.6rem; }

/* ------------------------------ calendário ------------------------------ */
.ct-cal-topo { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.ct-cal-topo strong { font-family: var(--font-display); font-size: 1.1rem; min-width: 11rem; text-align: center; }
.ct-cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; margin-bottom: 0.25rem; }
.ct-cal-dow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); text-align: center; }
.ct-cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.ct-cal-cel { min-height: 4.6rem; border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.2rem; background: var(--color-panel); }
.ct-cal-vazia { background: transparent; border-color: transparent; }
.ct-cal-hoje { border-color: var(--color-gold); box-shadow: inset 0 0 0 1px var(--color-gold); }
/*
 * O DIA DO CALENDÁRIO É UM BOTÃO, E BOTÃO PRECISA CABER NO DEDO.
 *
 * Medido no celular (430px): 17,2px de altura. A recomendação de alvo de toque é 44px (Apple) /
 * 48px (Material), e abaixo de ~24px a taxa de erro do polegar sobe rápido: quem tentava abrir a
 * pauta do dia 12 abria a do 13. Não dava erro, não avisava nada, e o médico só descobria depois
 * de a tela trocar de assunto.
 *
 * 36px é o meio-termo honesto para uma célula de calendário mensal: cabe seis linhas numa tela
 * de celular sem rolagem e já é dedo. O alinhamento vertical entra junto porque, com altura
 * mínima, o texto encostado no topo fica pior do que estava.
 */
.ct-cal-dia { background: none; border: 0; font-size: 0.78rem; color: var(--color-muted); cursor: pointer; padding: 0.1rem 0.25rem; width: 100%; text-align: left; min-height: 36px; display: flex; align-items: center; }
.ct-cal-dia:hover { color: var(--color-primary); }
.ct-cal-pauta {
  display: block; width: 100%; text-align: left; font-size: 0.7rem; line-height: 1.25;
  border: 0; border-left: 3px solid var(--color-primary); border-radius: 0.25rem;
  background: var(--color-secondary); color: var(--color-text); margin: 0.12rem 0;
  padding: 0.16rem 0.28rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-cal-st-publicado { border-left-color: var(--color-low); }
.ct-cal-st-pronto { border-left-color: var(--color-gold-deep, var(--color-accent)); }
.ct-cal-st-descartado { opacity: 0.5; text-decoration: line-through; }
.ct-cal-legenda { margin-top: 0.6rem; font-size: 0.8rem; }
@media (max-width: 620px) {
  .ct-cal-cel { min-height: 3.4rem; }
  .ct-cal-pauta { font-size: 0.62rem; }
}

/* ---------------------- tela de ferramenta e copiloto -------------------- */
.ct-migalha { font-size: 0.8rem; margin: 0.3rem 0 0; }
.ct-fonte { margin: 0.6rem 0 0.2rem; }
.ct-fonte summary { cursor: pointer; font-size: 0.88rem; color: var(--color-primary); }
.ct-fonte textarea { width: 100%; margin-top: 0.4rem; }
.ct-barra {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem;
  padding-top: 0.8rem; border-top: 1px solid var(--color-border);
}

/* Gerar prompt (2026-10-14): o texto pronto para colar em outra IA. */
.ct-prompt-ext { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--color-border); }
.ct-prompt-ext textarea { width: 100%; box-sizing: border-box; font-size: 0.82rem; line-height: 1.45; min-height: 14rem; }
.ct-prompt-ext .pr-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }

.ct-barra-resumo { font-size: 0.84rem; color: var(--color-muted); flex: 1 1 12rem; }
.ct-barra-custo {
  font-size: 0.76rem; letter-spacing: 0.03em; color: var(--color-gold-deep, var(--color-accent));
  border: 1px solid var(--color-gold); border-radius: var(--radius-pill); padding: 0.16rem 0.6rem;
}
.ct-editando {
  background: color-mix(in oklch, var(--color-gold) 12%, transparent);
  outline: 1px dashed var(--color-gold); border-radius: 0.3rem; padding: 0.15rem 0.3rem;
}
.ct-reap { margin-top: 0.9rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.86rem; }
.ct-reap-btn {
  border: 1px solid var(--color-border); background: var(--color-panel); border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem; font-size: 0.82rem; cursor: pointer; color: var(--color-primary);
}
.ct-reap-btn:hover { border-color: var(--color-gold); }

.ct-cop-fab {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 60;
  background: var(--color-primary-dark); color: var(--color-cream); border: 0;
  border-radius: var(--radius-pill); padding: 0.7rem 1.1rem; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; box-shadow: 0 6px 20px color-mix(in oklch, var(--color-primary) 35%, transparent);
}
.ct-cop-fab span { color: var(--color-gold); margin-right: 0.3rem; }
.ct-cop-fab-ativo { background: var(--color-primary); }
.ct-cop-painel {
  position: fixed; right: 1rem; bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); z-index: 61;
  width: min(24rem, calc(100vw - 2rem)); max-height: 72vh; overflow-y: auto;
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 0.9rem 1rem; box-shadow: 0 14px 40px color-mix(in oklch, var(--color-primary) 22%, transparent);
}
.ct-cop-topo { display: flex; align-items: center; justify-content: space-between; }
.ct-cop-fechar { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--color-muted); }
.ct-cop-dica { font-size: 0.78rem; margin: 0.2rem 0 0.6rem; }
.ct-cop-acoes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; }
.ct-cop-acao {
  border: 1px solid var(--color-border); background: var(--color-cream); border-radius: var(--radius-pill);
  padding: 0.28rem 0.7rem; font-size: 0.78rem; cursor: pointer; color: var(--color-text);
}
.ct-cop-acao:hover { border-color: var(--color-gold); }
.ct-cop-hist { margin-top: 0.6rem; }
.ct-cop-hist-item { font-size: 0.78rem; border-left: 2px solid var(--color-gold); padding-left: 0.5rem; margin: 0.4rem 0; }
@media print { .ct-cop-fab, .ct-cop-painel { display: none !important; } }

/* ------------------------------ modo conversa --------------------------- */
.ct-conv { display: flex; flex-direction: column; gap: 0.8rem; }
.ct-conv-fluxo { display: flex; flex-direction: column; gap: 0.6rem; max-height: 26rem; overflow-y: auto; }
.ct-conv-fala { display: flex; gap: 0.5rem; align-items: flex-start; }
.ct-conv-fala p { margin: 0; padding: 0.6rem 0.85rem; border-radius: 1rem; font-size: 0.95rem; line-height: 1.5; }
.ct-conv-ia p { background: var(--color-cream); border: 1px solid var(--color-border); border-top-left-radius: 0.3rem; }
.ct-conv-medico { justify-content: flex-end; }
.ct-conv-medico p { background: var(--color-primary); color: var(--color-chapa); border-top-right-radius: 0.3rem; }
.ct-conv-ico { color: var(--color-gold-deep, var(--color-accent)); font-size: 1rem; padding-top: 0.5rem; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ct-chip {
  border: 1px solid var(--color-border); background: var(--color-panel); border-radius: var(--radius-pill);
  padding: 0.4rem 0.85rem; font-size: 0.86rem; cursor: pointer; color: var(--color-text); text-align: left;
}
.ct-chip:hover { border-color: var(--color-gold); background: var(--color-cream); }
.ct-conv-input { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.ct-conv-input input { flex: 1; }
.ct-conv-nota { font-size: 0.8rem; margin: 0.5rem 0 0; }
.ct-conv-barra {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  border-top: 1px solid var(--color-border); padding-top: 0.7rem;
}

/* --------------------- calendário: meta, arraste, sazonais --------------- */
.ct-cal-prog { margin: 0.7rem 0 0.2rem; font-size: 0.8rem; }
.ct-cal-barra {
  height: 0.5rem; background: var(--color-secondary); border-radius: var(--radius-pill);
  overflow: hidden; margin-bottom: 0.35rem;
}
.ct-cal-barra span { display: block; height: 100%; background: var(--color-primary); }
.ct-cal-acoes { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.8rem; font-size: 0.84rem; }
.ct-cal-ia { border-left-style: dashed; }
.ct-cal-arrastando { opacity: 0.35; }
.ct-cal-alvo { background: color-mix(in oklch, var(--color-gold) 20%, transparent); border-color: var(--color-gold); }
.ct-cal-ghost {
  position: fixed; z-index: 90; pointer-events: none; transform: translate(-50%, -50%);
  max-width: 9rem; font-size: 0.7rem; padding: 0.2rem 0.4rem; border-radius: 0.25rem;
  background: var(--color-primary); color: var(--color-chapa); box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ct-saz {
  display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem;
}
.ct-saz:last-of-type { border-bottom: 0; }
.ct-saz-nota { font-size: 0.76rem; font-style: italic; }
.ct-botao-link {
  display: inline-block; text-decoration: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 0.5rem 1rem; background: var(--color-panel);
  color: var(--color-primary); font-size: 0.9rem;
}

/* Grade do calendário não pode esticar com título longo: em grid, o item tem
   min-width:auto (min-content) por padrão, e o texto sem quebra empurrava a
   largura da coluna até estourar a tela no celular. */
.ct-cal-grade { overflow: hidden; }
.ct-cal-cel { min-width: 0; }
.ct-cal-pauta { max-width: 100%; }

/* Lista cronológica do mês: no celular é a leitura principal do calendário. */
.ct-cal-lista { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--color-border); }
.ct-cal-lista h4 { margin: 0 0 0.3rem; }
.ct-cal-item { display: grid; grid-template-columns: 1.7rem 1fr; gap: 0 0.55rem; align-items: baseline; }
.ct-cal-item-dia {
  grid-row: span 2; font-family: var(--font-display); font-size: 1.05rem;
  color: var(--color-primary); text-align: right;
}
@media (max-width: 620px) {
  /* 7 colunas num telefone não cabem texto: a pauta vira marcador e o título
     é lido na lista abaixo. Mantém o aria-label para leitor de tela. */
  .ct-cal-pauta { height: 0.42rem; padding: 0; margin: 0.12rem 0 0; border-radius: var(--radius-pill); border-left-width: 0; background: var(--color-primary); }
  .ct-cal-pauta-tit { display: none; }
  .ct-cal-st-publicado { background: var(--color-low); }
  .ct-cal-st-pronto { background: var(--color-gold-deep, var(--color-accent)); }
  .ct-cal-st-descartado { background: var(--color-muted); text-decoration: none; }
  .ct-cal-ia { outline: 1px dashed var(--color-gold); outline-offset: 1px; }
  .ct-cal-cel { min-height: 3rem; }
}

/* ------------------------- imagens (modelos visuais) -------------------- */
/* ------------------------- modelo de referência (Minha marca) ------------------ */
/* O print que ensinou o layout e a prévia do que ele produz, lado a lado: é a comparação
   que diz se a IA acertou, e é o que o médico olha antes de aceitar. */
.ct-ref-box { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin: 0.6rem 0; }
.ct-ref-print { width: 130px; border-radius: 0.5rem; border: 1px solid var(--color-border); }
.ct-ref-previa { overflow: hidden; border: 1px solid var(--color-border); border-radius: 0.5rem; }
.ct-ref-tela { transform-origin: top left; }
.ct-ref-campos { display: grid; gap: 0.6rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .ct-ref-campos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .ct-ref-campos { grid-template-columns: 1fr 1fr 1fr; } }

.ct-vis-ctrl { display: grid; gap: 0.6rem; grid-template-columns: 1fr; margin-bottom: 0.8rem; }
@media (min-width: 620px) { .ct-vis-ctrl { grid-template-columns: 1fr 1fr; } }
.ct-vis-palco {
  position: relative; overflow: hidden; border: 1px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-cream);
}
/* A tela é desenhada em tamanho REAL (1080 px) e reduzida por transform: o que
   o html2canvas captura é o tamanho de verdade, não o da prévia. */
.ct-vis-tela { transform-origin: top left; }
.ct-vis-nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.7rem 0; }

/* Tira de miniaturas: uma faixa de números que rola na horizontal, para não empurrar
   os botões de baixar para fora da tela quando o carrossel tem 10 ou 12 slides. */
.ct-vis-tira {
  display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.5rem 0 0.2rem;
  scrollbar-width: thin;
}
.ct-vis-tira-btn {
  flex: 0 0 auto; min-width: 2rem; height: 2rem; padding: 0 0.4rem;
  border: 1px solid var(--color-border); border-radius: 0.45rem;
  background: var(--color-panel); color: var(--color-muted);
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ct-vis-tira-btn:hover { border-color: var(--color-gold); color: var(--color-text); }
.ct-vis-tira-atual {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}

/* ----------------------------- editor por camadas ----------------------- */
.ed-palco { position: relative; overflow: hidden; border: 1px solid var(--color-gold); border-radius: var(--radius); background: var(--color-cream); touch-action: none; }
.ed-tela { transform-origin: top left; }
.ed-cam { outline: 1px dashed transparent; cursor: move; }
.ed-cam:hover { outline-color: color-mix(in oklch, var(--color-primary) 45%, transparent); }
.ed-sel { outline: 2px solid var(--color-accent) !important; }
.ed-editando { outline: 2px solid var(--color-gold) !important; cursor: text; }
.ed-alca {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-accent); border: 2px solid #fff; cursor: nwse-resize; z-index: 5;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3); touch-action: none;
}
.ed-ctrl { margin: 0.8rem 0 0.2rem; }
.ed-linha { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.ed-on { border-color: var(--color-accent); color: var(--color-accent); font-weight: 600; }
.ed-arquivo {
  display: inline-block; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 0.5rem 1rem; background: var(--color-panel); color: var(--color-primary);
  font-size: 0.9rem; cursor: pointer;
}

/* ------------------------------ CID na consulta ------------------------- */
.pr-cid-sel { display: block; font-size: 0.78rem; margin-top: 0.2rem; min-height: 1rem; }
.pr-cid-lista { display: none; }
.pr-cid-lista.aberta {
  display: block; border: 1px solid var(--color-border); border-radius: 0.6rem;
  background: var(--color-panel); margin-top: 0.25rem; overflow: hidden;
  box-shadow: 0 6px 18px color-mix(in oklch, var(--color-primary) 10%, transparent);
}
.pr-cid-op {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 0.5rem 0.7rem; font-size: 0.85rem; cursor: pointer; color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.pr-cid-op:last-child { border-bottom: 0; }
.pr-cid-op:hover { background: var(--color-cream); }
.pr-cid-vazio { display: block; padding: 0.5rem 0.7rem; font-size: 0.8rem; color: var(--color-muted); }

/* ------------------------- insights da clínica -------------------------- */
.ct-insight { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; padding: 0.6rem 0; }
.ct-insight strong { color: var(--color-primary-dark); }
.ct-privacidade { font-size: 0.8rem; border-left: 3px solid var(--color-gold); padding-left: 0.7rem; }

/* ------------------------------ artigos --------------------------------- */
.ct-artigo { padding: 0.8rem 0; border-bottom: 1px solid var(--color-border); }
.ct-artigo:last-child { border-bottom: 0; }
.ct-artigo-cab { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; font-size: 0.78rem; }
.ct-artigo p { margin: 0.2rem 0 0.5rem; font-size: 0.84rem; }
.ct-artigo-acoes { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ct-artigo-acoes a.ct-reap-btn { text-decoration: none; }
.ct-a-texto { font-size: 0.95rem; line-height: 1.55; }

/* ----------------------------- publicação ------------------------------- */
.ct-pub-canais { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.7rem 0 0.5rem; }
.ct-pub-canal-on {
  background: var(--color-primary); color: var(--color-chapa); border-color: var(--color-primary);
}
.ct-pub-canal-on:hover { border-color: var(--color-gold); }
.ct-pub-nota { font-size: 0.82rem; border-left: 3px solid var(--color-gold); padding-left: 0.7rem; }

.ct-pub-check { list-style: none; margin: 0.8rem 0; padding: 0; font-size: 0.85rem; }
.ct-pub-check li {
  position: relative; padding: 0.3rem 0 0.3rem 1.5rem; line-height: 1.4;
  border-bottom: 1px solid var(--color-border);
}
.ct-pub-check li:last-child { border-bottom: 0; }
.ct-pub-check li::before { position: absolute; left: 0; font-weight: 700; }
.ct-pub-ok::before { content: "✓"; color: var(--color-primary); }
.ct-pub-aviso::before { content: "!"; color: var(--color-gold); }
.ct-pub-erro::before { content: "✗"; color: var(--color-danger, #c0392b); }
.ct-pub-erro { color: var(--color-danger, #c0392b); }

.ct-pub-passos { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0.2rem; }
.ct-pub-det { margin: 0.8rem 0; font-size: 0.85rem; }
.ct-pub-det summary { cursor: pointer; color: var(--color-primary); }
.ct-pub-pre {
  white-space: pre-wrap; word-break: break-word; margin: 0.5rem 0 0;
  padding: 0.7rem; background: var(--color-cream); border-radius: var(--radius);
  font-family: inherit; font-size: 0.84rem; line-height: 1.5; max-height: 40vh; overflow: auto;
}
.ct-pub-registro { margin-top: 0.6rem; }
.ct-pub-item { display: block; }
.ct-pub-item .ct-artigo-acoes { margin-top: 0.4rem; }
.ct-pub-form:not(:empty) {
  margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px dashed var(--color-border);
}
.ct-pub-resumo { font-size: 0.88rem; line-height: 1.5; }
.ct-pub-resumo p { margin: 0.2rem 0; }
.ct-pub-alto { color: var(--color-primary); font-weight: 600; }
.ct-pub-baixo { color: var(--color-gold); }
.ct-pub-alerta { color: var(--color-gold); }

/* fármaco cuja dose ainda não passou pela revisão do app */
.rx-conferir { border-left: 3px solid var(--color-gold); }
.rx-conferir-tag {
  display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.35rem;
  font-size: 0.7rem; border-radius: 999px; background: var(--color-gold); color: #fff;
  vertical-align: middle;
}

/* --------------------------------- Carla -------------------------------- */
.carla-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem;
}
.carla-endereco {
  font-size: 0.78rem; color: var(--color-muted); word-break: break-all;
  font-variant-numeric: tabular-nums;
}
.carla-acoes { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.carla-acoes a.ct-reap-btn { text-decoration: none; }
.carla-palco {
  position: relative; width: 100%; height: min(78vh, 900px);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  overflow: hidden; background: var(--color-cream);
}
.carla-frame { width: 100%; height: 100%; border: 0; display: block; }
.carla-aviso {
  border-left: 3px solid var(--color-gold); padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem; font-size: 0.86rem; line-height: 1.5;
  background: var(--color-cream); border-radius: var(--radius);
}
.carla-aviso p { margin: 0.2rem 0; }
.carla-aviso code {
  font-size: 0.8rem; padding: 0.05rem 0.25rem; border-radius: 4px;
  background: rgba(0, 0, 0, 0.06); word-break: break-all;
}
.carla-contexto p { margin: 0 0 0.5rem; }
/* botão de atalho para a Carla dentro da agenda e do prontuário */
.carla-atalho { display: inline-flex; align-items: center; gap: 0.25rem; }
.carla-atalho[disabled] { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 720px) {
  .carla-palco { height: 70vh; }
}

/* ------------------------- Growth OS · Estratégia ----------------------- */
.ct-gr-metas { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ct-gr-meta {
  text-align: left; cursor: pointer; background: var(--color-surface, #fff);
  border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.8rem;
  min-width: 0;
}
.ct-gr-meta:hover { border-color: var(--color-gold); }
.ct-gr-meta-atual p { margin: 0.2rem 0; }

.ct-gr-funil { display: grid; gap: 0.9rem; margin: 0.8rem 0; }
.ct-gr-etapa {
  padding: 0.6rem 0.7rem; border-left: 3px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-cream); min-width: 0;
}
.ct-gr-etapa-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5rem; flex-wrap: wrap; font-size: 0.9rem;
}
.ct-gr-pergunta { font-size: 0.82rem; margin: 0.15rem 0 0.45rem; }
/* falta = abaixo da meta; sobra = concentrado demais numa etapa */
.ct-gr-falta { border-left-color: var(--color-gold); }
.ct-gr-sobra { border-left-color: var(--color-muted); }
.ct-gr-ok { border-left-color: var(--color-primary); }

.ct-gr-barra {
  position: relative; height: 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.08); overflow: visible;
}
.ct-gr-barra-real {
  height: 100%; border-radius: 999px; background: var(--color-primary);
  transition: width 0.3s ease;
}
/* marca da meta: linha vertical em cima da barra */
.ct-gr-barra-alvo {
  position: absolute; top: -3px; width: 2px; height: 16px;
  background: var(--color-gold);
}
.ct-gr-barra-alvo::after {
  content: ""; position: absolute; top: -4px; left: -2px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold);
}

.ct-gr-passos { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.ct-gr-passos li { margin-bottom: 0.9rem; }
.ct-gr-passos p { margin: 0.15rem 0 0.4rem; font-size: 0.86rem; }

.ct-gr-missoes { list-style: none; margin: 0.7rem 0 0; padding: 0; font-size: 0.9rem; }
.ct-gr-missoes li {
  padding: 0.4rem 0 0.4rem 1.5rem; position: relative;
  border-bottom: 1px solid var(--color-border);
}
.ct-gr-missoes li:last-child { border-bottom: 0; }
.ct-gr-missoes li::before { content: "○"; position: absolute; left: 0; color: var(--color-muted); }
.ct-gr-missao-ok::before { content: "✓"; color: var(--color-primary); font-weight: 700; }
.ct-gr-missao-ok strong { text-decoration: line-through; opacity: 0.7; }

/* Agenda: a Carla mandou tudo, mas a ficha não nasceu (nome não decide o sexo).
   Precisa chamar atenção: sem isso a tela ficava vazia e parecia defeito. */
.ag-portal-pendente {
  padding: 0.6rem 0.7rem; border-radius: 0.5rem; font-size: 0.88rem; line-height: 1.45;
  border: 1px solid var(--color-accent, #b8860b); background: rgba(184, 134, 11, 0.1);
}

/* Confirmação de exclusão de paciente: a caixa que libera o botão. Fica em bloco e com
   área de toque generosa porque é lida e marcada no celular, e porque marcar sem querer
   uma caixa que habilita uma exclusão irreversível é o pior acidente possível aqui. */
.pr-confirm-del {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 1rem 0; padding: .75rem .9rem;
  border: 1px solid #e0b4ae; border-radius: 8px; background: #fdf6f5;
  font-size: .95rem; line-height: 1.4; cursor: pointer;
}
.pr-confirm-del input { margin-top: .15rem; width: 1.15rem; height: 1.15rem; flex: none; }

/* Lista dos agendamentos que serão apagados junto com o paciente. Compacta e discreta:
   é informação de reconhecimento ("ah, é aquele que eu já cancelei"), não um alerta a mais. */
.pr-del-ags { margin: .35rem 0 .75rem 1.2rem; padding: 0; font-size: .92rem; color: #4a5750; }
.pr-del-ags li { margin: .15rem 0; }

/* Guia de cortesia no prontuário. Verde para "está feito", âmbar para "o e-mail mudou" —
   o segundo é o caso que passa desapercebido, e sem destaque a tela diria só "liberado"
   com o guia parado num endereço que a família não usa mais. */
.pr-guia-ok { color: #1f5132; background: #eef7f1; border: 1px solid #bcdcc8;
  border-radius: 8px; padding: .7rem .9rem; }
.pr-guia-mudou { color: #7a4b00; background: #fdf5e6; border: 1px solid #e8cf9a;
  border-radius: 8px; padding: .7rem .9rem; }
.pr-guia-panel summary { cursor: pointer; }

/* ============================================================================
   ENTRADA EM DOIS BLOCOS: MÉDICOS / NUTRICIONISTAS
   Primeira tela do domínio. Uma conta, dois consultórios — a escolha decide o
   destino depois do login e a cara do sistema, não permissão de dados.
   ========================================================================= */
.entrada {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 4rem) 1rem;
}
.entrada-topo { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.entrada-selo {
  display: inline-block;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .35rem .85rem;
  background: var(--color-panel);
}
.entrada-titulo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.1rem);
  line-height: 1.08;
  margin: 1rem 0 .5rem;
  color: var(--color-primary-dark);
}
.entrada-sub { color: var(--color-muted); font-size: 1.05rem; margin: 0 auto; max-width: 34rem; }

/* Duas colunas no desktop, empilhado no celular. minmax(0,1fr) e não 1fr: sem o
   minmax o texto longo do bloco força a coluna a crescer e a grade estoura. */
.entrada-blocos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
}
.entrada-bloco {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  text-align: left;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.35);
  background: var(--color-panel);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04);
  /* O bloco é um <button>: sem isto ele herda a fonte do agente do usuário. */
  font: inherit;
  color: inherit;
}
.entrada-bloco:hover, .entrada-bloco:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgb(0 0 0 / .09);
  outline: none;
}
.entrada-bloco-arte {
  width: 3.6rem; height: 3.6rem;
  display: grid; place-items: center;
  border-radius: 1rem;
  flex: 0 0 auto;
}
.entrada-bloco-arte svg { width: 2rem; height: 2rem; }
.entrada-bloco-txt { display: grid; gap: .3rem; min-width: 0; }
.entrada-bloco-txt strong {
  font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1.1;
  color: var(--color-primary-dark);
}
.entrada-bloco-txt em {
  font-style: normal; font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-muted);
}
.entrada-bloco-txt small { font-size: .88rem; line-height: 1.5; color: var(--color-muted); }
.entrada-bloco-seta { color: var(--color-muted); display: grid; place-items: center; flex: 0 0 auto; }
.entrada-bloco-seta svg { width: 1.4rem; height: 1.4rem; }
.entrada-bloco:hover .entrada-bloco-seta { color: var(--color-primary); }

/* Cada bloco leva a cor do seu módulo — é o primeiro sinal de que são dois
   sistemas com a mesma conta, e não um só. */
.entrada-bloco-medico .entrada-bloco-arte {
  background: var(--color-secondary); color: var(--color-primary);
}
.entrada-bloco-medico:hover { border-color: var(--color-primary); }
.entrada-bloco-nutri .entrada-bloco-arte {
  background: oklch(94% 0.03 20); color: oklch(48% 0.09 18);
}
.entrada-bloco-nutri:hover { border-color: oklch(48% 0.09 18); }
.entrada-bloco-nutri .entrada-bloco-txt strong { color: oklch(34% 0.07 18); }

/* Psicanálise: azul-ardósia. Distinto dos outros dois sem sair da mesma família sóbria. */
.entrada-bloco-psi .entrada-bloco-arte {
  background: oklch(93% 0.03 255); color: oklch(46% 0.09 258);
}
.entrada-bloco-psi:hover { border-color: oklch(46% 0.09 258); }
.entrada-bloco-psi .entrada-bloco-txt strong { color: oklch(33% 0.07 258); }

.entrada-nota {
  text-align: center; margin-top: 1.75rem;
  font-size: .84rem; color: var(--color-muted);
}

/* =====================================================================
   PÁGINA DE VENDA v2, estrutura em seções (herói, faixa de números,
   problema, módulos alternados, ÁREA DO PACIENTE, IA, fluxo, diferença,
   privacidade, planos, dúvidas, chamada final).
   Sem fonte externa de propósito: a CSP fecha host de fora, e a página usa
   as duas famílias que o app já carrega.
   ===================================================================== */

/* barra de âncoras da própria página (o cabeçalho do app fica acima) */

/* herói: ponto no selo, destaque no título e a arte emoldurada */


/* faixa de números, em linha com divisórias */

/* cabeçalho de seção centralizado */

/* o problema + a citação */

/* módulos alternados */

/* "tela" ilustrativa dos módulos: moldura + linhas com o nome real das coisas */


/* ÁREA DO PACIENTE */


/* IA */

/* fluxo em 5 passos */

/* a diferença, em fundo escuro */

/* privacidade */

/* dúvidas, com + / − */

/* chamada final */

/* ---------------- telas estreitas ---------------- */



/* Título e subtítulo de seção nascem centralizados (uso antigo). Nas seções de
   duas colunas da v2 eles ficam à ESQUERDA, junto da coluna a que pertencem. */

/* O cartão da área do paciente acompanha o topo do texto, em vez de flutuar
   no meio de uma coluna muito mais alta. */


/* Quadrinho do roteiro de puericultura: mostra que a faixa vem da IDADE do paciente,
   sem o médico procurar. Os grupos e itens são os do js/puericultura-checklist.js. */
/* a caixinha marcada é desenhada no ::before, para não usar input de mentira na página */

/* =====================================================================================
 * SUGESTÃO PELA CONSULTA (exames e encaminhamentos)
 *
 * A lista existe para a sugestão ser CONFERÍVEL: cada item traz o motivo citando a consulta.
 * Antes, o botão marcava caixas por palavra-chave e não dizia nada, então não havia como saber
 * se "Neurologia" foi marcada porque a mãe relatou regressão ou porque ela NEGOU convulsão.
 * ===================================================================================== */
.sug-msg { margin: .35rem 0 .6rem; }
.sug-msg .pr-msg { margin: .2rem 0 .4rem; }
.sug-lista {
  margin: .2rem 0 .4rem;
  padding-left: 1.1rem;
  font-size: .88rem;
  line-height: 1.5;
}
.sug-lista li { margin: .15rem 0; }
.sug-lista strong { font-weight: 600; }

/* ============================================================================
   OBSERVAÇÃO DE ATENÇÃO VISUAL (atencao-visual.html)

   A atividade e a calibração acontecem num canvas escuro de borda a borda da
   coluna: fundo claro em volta do estímulo roubaria o olhar da criança, que é
   exatamente o que a ferramenta mede. O restante veste a roupa do app.
   ============================================================================ */
.av-tela { max-width: 46rem; margin: 0 auto; }
.av-tela .panel { display: grid; gap: .8rem; }
/*
 * FUNDO CLARO FIXO E A ARMADILHA DESTA TELA, e ela mordeu de verdade: o dono mandou o print com
 * a caixa creme e o texto invisivel dentro dela.
 *
 * Estas caixas tinham background em oklch(96%) e oklch(97%) escrito a mao, e NENHUMA cor de
 * texto. No tema claro passava, porque o texto herdado ja era escuro. No tema ESCURO o texto
 * herdado e claro, e claro sobre creme nao se le.
 *
 * --color-cream EXISTE e JA VIRA com o tema (claro: creme; escuro: #1a1a1a). O defeito foi
 * escrever o valor claro em vez de usar o token.
 *
 * A .av-selo-ok era a pior: ela DEFINIA color, entao parecia tratada. So que definia
 * var(--color-primary-dark), que no tema escuro vale quase branco. Fundo claro fixo mais texto
 * quase branco: invisivel do mesmo jeito.
 *
 * A REGRA, para quem vier: fundo escrito a mao exige cor de texto escrita a mao. Ou, melhor,
 * nao escreva o fundo a mao: use o token, que vira sozinho.
 */
.av-honestidade {
  margin: 0; padding: .8rem .95rem;
  background: var(--color-cream); border-left: 4px solid oklch(70% 0.11 85);
  border-radius: .5rem; font-size: .92rem; line-height: 1.55;
}
.av-lista { display: grid; gap: .45rem; margin-top: .6rem; max-height: 21rem; overflow-y: auto; }
.av-paciente {
  text-align: left; padding: .7rem .9rem; font: inherit; cursor: pointer;
  background: var(--color-panel); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: .7rem;
}
.av-paciente:hover { border-color: var(--color-primary); }
.av-consentimento-itens { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; line-height: 1.5; }
.av-consentimento-caixa {
  display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  padding: .8rem .9rem; background: var(--color-cream);
  border: 1px solid var(--color-border); border-radius: .7rem;
}
.av-consentimento-caixa input { margin-top: .2rem; width: 1.1rem; height: 1.1rem; flex: none; }
.av-preview-caixa { position: relative; border-radius: var(--radius); overflow: hidden; background: #0d2019; }
.av-preview-caixa video { display: block; width: 100%; max-height: 340px; object-fit: cover; transform: scaleX(-1); }
.av-rosto-selo {
  position: absolute; left: .8rem; bottom: .8rem;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff; font-size: .8rem;
}
.av-rosto-selo.av-rosto-ok { background: oklch(45% 0.09 155); }
.av-canvas { display: block; width: 100%; border-radius: var(--radius); background: #10241c; }
.av-instrucao { max-width: 46rem; margin: 0 auto .6rem; text-align: center; }
#av-tela-calibracao, #av-tela-atividade { max-width: 60rem; }
.av-estimulos { display: grid; gap: .55rem; margin: .2rem 0; padding: 0; border: 0; min-width: 0; }
.av-estimulos legend { margin-bottom: .55rem; padding: 0; font-weight: 700; }
.av-estimulo-opcao {
  position: relative; display: grid; grid-template-columns: 1.15rem 4.5rem 1fr;
  gap: .75rem; align-items: center; padding: .65rem .8rem; cursor: pointer;
  background: var(--color-cream); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: .8rem;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.av-estimulo-opcao:hover, .av-estimulo-opcao:focus-within { border-color: var(--color-primary); transform: translateY(-1px); }
.av-estimulo-opcao:has(input:checked) { border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.av-estimulo-opcao input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--color-accent); }
.av-estimulo-opcao img { width: 4.5rem; height: 5.8rem; object-fit: cover; border-radius: .5rem; background: #777; }
.av-estimulo-opcao span { display: grid; gap: .22rem; line-height: 1.35; }
.av-estimulo-opcao small { color: var(--color-muted); font-size: .8rem; }
.av-video-estimulo {
  display: block; width: auto; max-width: 100%; height: min(76vh, 800px); margin: 0 auto;
  aspect-ratio: 9 / 16; object-fit: contain; background: #777; border-radius: .35rem;
}
body.av-em-atividade { background: #777; }
body.av-em-atividade .app-header, body.av-em-atividade .app-footer { display: none; }
body.av-em-atividade .app-main { max-width: none; margin: 0; padding: .5rem; background: #777; }
body.av-em-atividade #av-content { width: 100%; }
body.av-em-atividade #av-tela-atividade {
  min-height: calc(100vh - 1rem); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center; max-width: 100%; padding: 0; background: #777;
}
body.av-em-atividade #av-tela-atividade.hidden { display: none; }
body.av-em-atividade .av-instrucao, body.av-em-atividade .av-atividade-rodape,
body.av-em-atividade .av-atividade-rodape .muted { color: #fff; }
.av-atividade-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; }
.av-placar { display: grid; gap: .35rem; margin: .4rem 0; }
/* O título de cada bloco do placar carrega a BASE da porcentagem (tempo total × tempo em
   estímulo): sem ele o dono somou 49+51+35 e cobrou, com razão. */
.av-placar-titulo {
  margin: .9rem 0 .15rem; font-size: .82rem; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; color: var(--color-muted, #5a6b63);
}

/* ---- O relatório da observação (leitura + evolução + campos do médico) ---- */
.av-rel-doc { margin-top: 1rem; padding: 1.4rem 1.6rem; }
.av-rel-titulo { margin: 0 0 .2rem; font-size: 1.25rem; }
.av-rel-sub { margin: 0 0 .9rem; font-size: .85rem; color: var(--color-muted); }
.av-rel-ident { display: grid; gap: .3rem; margin: .5rem 0 1rem; }
.av-rel-ident-linha {
  display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem;
  border-bottom: 1px dashed var(--color-border); padding-bottom: .25rem;
}
.av-rel-doc h3 { margin: 1.1rem 0 .35rem; font-size: 1.02rem; }
.av-rel-base { margin: .5rem 0 .15rem; font-size: .82rem; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; color: var(--color-muted, #5a6b63); }
.av-rel-lista { margin: .3rem 0; padding-left: 1.2rem; }
.av-rel-lista li { margin-bottom: .45rem; line-height: 1.5; }
/* O ponto de atenção tem moldura própria: é a parte que pede correlação clínica. */
.av-rel-atencao {
  border: 1.5px solid #8a6400; border-radius: .6rem; background: var(--color-atencao-fundo);
  padding: .6rem 1rem .8rem; margin: .8rem 0;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.av-rel-atencao h3 { margin: .2rem 0 .4rem; color: var(--color-atencao); }
.av-rel-atencao p { margin: .3rem 0; line-height: 1.5; }
/* Hipótese e conduta são do médico: rótulo + pauta em branco para escrever à mão. */
.av-rel-medico { margin-top: 1rem; }
.av-rel-rotulo { margin: .8rem 0 .2rem; font-weight: 600; }
.av-rel-pauta {
  height: 4.2rem;
  background: repeating-linear-gradient(to bottom,
    transparent 0 1.35rem, var(--color-border) 1.35rem calc(1.35rem + 1px));
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.av-rel-refs { margin: .3rem 0; padding-left: 1.2rem; font-size: .8rem; color: var(--color-muted); }
.av-rel-refs li { margin-bottom: .3rem; }
@media print {
  .av-rel-doc h3, .av-rel-rotulo { break-after: avoid; page-break-after: avoid; }
  .av-rel-atencao, .av-placar-linha, .av-rel-pauta { break-inside: avoid; }
  .av-rel-lista li { orphans: 3; widows: 3; }
}
.av-placar-linha {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem .8rem; background: var(--color-cream);
  border: 1px solid var(--color-border); border-radius: .6rem; font-size: .95rem;
}
.av-selo {
  display: inline-block; padding: .3rem .75rem; border-radius: 999px;
  background: var(--color-cream); border: 1px solid var(--color-border);
  font-size: .82rem; font-weight: 600;
}
.av-selo-ok {
  background: color-mix(in oklch, var(--color-primary) 16%, var(--color-cream));
  border-color: var(--color-primary); color: var(--color-primary-dark);
}
.av-acoes { display: flex; gap: .6rem; flex-wrap: wrap; }
.av-msg-ok { color: var(--color-primary-dark); }
#av-calibracao-resultado { max-width: 46rem; margin: .8rem auto 0; display: grid; gap: .6rem; justify-items: start; }

@media (max-width: 560px) {
  .av-tela .panel { padding-left: .8rem; padding-right: .8rem; }
  .av-estimulo-opcao { grid-template-columns: 1fr; gap: .5rem; padding: .55rem; }
  .av-estimulo-opcao input { position: absolute; top: .65rem; right: .65rem; z-index: 1; }
  .av-estimulo-opcao span { padding-right: 0; }
  .av-estimulo-opcao img { width: 100%; height: 7rem; }
  .av-video-estimulo { height: min(78vh, 760px); }
}

/* ---- Gasometria: distúrbio ácido-base e conduta ---- */
.gaso-grupo-titulo { margin: 1.1rem 0 .4rem; font-size: .95rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.gaso-campos { display: flex; flex-wrap: wrap; gap: .8rem; }
/* * A base de 130px é medida, e não estética: a 390px de largura o conteúdo do painel tem ~310px,
 * e com base de 150px mais o vão só cabia UM campo por linha, o que empurrava o resultado para
 * baixo de oito rolagens. Com 130px cabem dois, e os oito campos ocupam quatro linhas.
 */
.gaso-campos .auth-field { flex: 1 1 130px; margin: 0; }
.gaso-ref { display: block; margin-top: .2rem; font-size: .74rem; color: var(--color-muted); }
.gaso-progresso { margin: .7rem 0 0; font-size: .85rem; color: var(--color-muted); }
.gaso-progresso-ok { color: var(--color-primary); font-weight: 600; }
/*
 * NÃO usa .form-toolbar, e a diferença importa: aquela classe é `position: sticky; bottom: 0`,
 * feita para formulário longo cujo botão de enviar precisa continuar alcançável. Aqui não há o
 * que enviar (o resultado sai a cada tecla), e o sticky se sobrepunha ao campo de albumina,
 * escondendo um campo inteiro. Medido em print de 390px antes de existir esta regra.
 */
.gaso-acoes { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.gaso-auto { font-size: .82rem; }
.gaso-vazio { text-align: center; }

.gaso-placar { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; border-radius: .7rem; background: var(--color-cream); margin-bottom: .9rem; }
.gaso-placar-rot { font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--color-muted); }
.gaso-placar-val { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--color-primary-dark); }
.gaso-placar-sub { font-size: .84rem; color: var(--color-muted); }
.gaso-ph-acidemia { background: color-mix(in oklch, var(--color-high) 12%, var(--color-chapa)); }
.gaso-ph-alcalemia { background: color-mix(in oklch, var(--color-accent) 14%, var(--color-chapa)); }
.gaso-ph-normal { background: color-mix(in oklch, var(--color-primary) 12%, var(--color-chapa)); }

.gaso-disturbio { border-left: 6px solid var(--color-border); background: var(--color-cream); border-radius: .6rem; padding: .7rem .9rem; margin-bottom: .7rem; }
.gaso-disturbio-primario { border-left-color: var(--color-primary); }
.gaso-disturbio-topo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gaso-disturbio-ordem { font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--color-muted); }
.gaso-tag { font-size: .7rem; font-weight: 600; padding: .1rem .5rem; border-radius: var(--radius-pill); background: color-mix(in oklch, var(--color-primary) 16%, var(--color-chapa)); color: var(--color-primary-dark); }
.gaso-tag-assoc { background: color-mix(in oklch, var(--color-accent) 18%, var(--color-chapa)); }
.gaso-disturbio h3 { margin: .3rem 0 .2rem; font-size: 1.02rem; }
.gaso-disturbio p { margin: 0 0 .55rem; font-size: .9rem; }
.gaso-ver { padding: .35rem .8rem; font-size: .85rem; }
.gaso-sem-disturbio { margin: 0; font-size: .95rem; }

.gaso-bloco { margin-top: 1rem; }
.gaso-bloco h3 { margin: 0 0 .4rem; font-size: 1rem; }
.gaso-bloco p { margin: .3rem 0; font-size: .9rem; }
.gaso-formula { color: var(--color-muted); font-size: .82rem !important; }
.gaso-numeros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.gaso-num { flex: 1 1 130px; background: var(--color-cream); border-radius: .6rem; padding: .5rem .7rem; }
.gaso-num-rot { display: block; font-size: .74rem; color: var(--color-muted); }
.gaso-num-val { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--color-primary-dark); }

.gaso-avisos { margin-bottom: .8rem; }
.gaso-aviso { margin: 0 0 .4rem; padding: .55rem .8rem; border-radius: .6rem; background: color-mix(in oklch, var(--color-high) 10%, var(--color-chapa)); color: color-mix(in oklch, var(--color-high) 72%, var(--color-text)); font-size: .87rem; }

.gaso-conduta-card { border-left: 6px solid var(--color-primary); }
.gaso-conduta-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.gaso-conduta-topo h2 { margin: 0; font-size: 1.15rem; }
.gaso-objetivo { margin: .7rem 0; padding: .6rem .85rem; border-radius: .6rem; background: color-mix(in oklch, var(--color-primary) 10%, var(--color-chapa)); }
.gaso-objetivo-rot { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--color-muted); }
.gaso-objetivo p { margin: .2rem 0 0; font-size: .92rem; }
.gaso-conduta-card h3 { margin: 1rem 0 .4rem; font-size: 1rem; }
.gaso-lista { margin: .3rem 0; padding-left: 1.1rem; }
.gaso-lista li { margin: .3rem 0; font-size: .9rem; }
.gaso-causa { border-top: 1px solid var(--color-border); padding: .6rem 0; }
.gaso-causa summary { cursor: pointer; list-style-position: outside; }
.gaso-causa summary::marker { color: var(--color-muted); }
.gaso-causa-nome { display: block; font-weight: 600; font-size: .95rem; color: var(--color-primary-dark); }
.gaso-causa-pista { display: block; font-size: .84rem; color: var(--color-muted); }
.gaso-causa p { margin: .5rem 0 0; font-size: .89rem; }
.gaso-causa[open] { background: var(--color-cream); border-radius: .6rem; padding: .6rem .8rem; }
.gaso-alertas { margin-top: 1rem; padding: .7rem .9rem; border-radius: .6rem; background: color-mix(in oklch, var(--color-accent) 12%, var(--color-chapa)); }
.gaso-alertas h3 { margin: 0 0 .3rem; }
.gaso-ferramentas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.gaso-ferramenta { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: .85rem; text-decoration: none; color: var(--color-primary-dark); background: var(--color-panel); }
.gaso-ferramenta:hover { border-color: var(--color-primary); background: var(--color-secondary); }
.gaso-fontes { margin-top: 1rem; font-size: .78rem; }
.gaso-ref-grid p { font-size: .88rem; }

/* ---------------------------------------------------------------------------------------------
 * OS ÂNGULOS, na Central de Conteúdo (2026-09-05).
 *
 * Cartões clicáveis, e não uma lista de rádio, porque a escolha aqui é de leitura: o médico
 * compara quatro entradas e escolhe uma. Rádio pede que ele já saiba; cartão deixa ele ler.
 */
.ct-angulos { margin: 14px 0; }
.ct-angulos-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ct-angulos-topo .muted { flex: 1 1 240px; font-size: 0.86rem; }
#ct-f-angulos-lista { display: grid; gap: 8px; margin-bottom: 10px; }
@media (min-width: 720px) { #ct-f-angulos-lista { grid-template-columns: 1fr 1fr; } }
.ct-angulo {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--color-panel); border: 1px solid #d9d4c6; border-radius: 10px; padding: 10px 12px;
  font: inherit; color: inherit;
}
.ct-angulo:hover { border-color: #8a7444; }
.ct-angulo strong { display: block; margin-bottom: 4px; }
.ct-angulo-esp { display: block; font-size: 0.9rem; margin-bottom: 4px; }
.ct-angulo-frase { display: block; font-style: italic; color: #8a7444; font-size: 0.9rem; margin-bottom: 4px; }
.ct-angulo .muted { display: block; font-size: 0.82rem; }
/* O escolhido fica marcado com borda E com um traço à esquerda: cor sozinha não é acessível. */
.ct-angulo-on { border-color: #1f4a3c; border-left: 4px solid #1f4a3c; background: var(--color-ok-fundo); }
.ct-angulo-campo { margin-top: 4px; }

/* ---------------------------------------------------------------------------------------------
 * "O QUE ESTÁ CORRENDO?": a conta inversa da calculadora (2026-09-05).
 *
 * Grade de campos curtos, porque são cinco números pequenos e ninguém quer rolar a tela com a
 * bomba apitando. A dose atual vem grande: é a única pergunta que a pessoa tem na cabeça.
 */
.calc-inversa-grade { display: grid; gap: 10px; }
@media (min-width: 620px) { .calc-inversa-grade { grid-template-columns: 1fr 1fr; } }
.calc-inversa-grade .muted { font-size: 0.82rem; margin-top: 2px; display: block; }
.calc-inversa-aviso { font-size: 0.85rem; margin-top: 6px; }
.calc-dose-destaque { font-size: 1.25rem; margin: 0 0 8px; }
.calc-linha { margin: 4px 0; }
/* O aviso de fora da faixa leva borda à esquerda além da cor: cor sozinha não é acessível. */
.calc-aviso {
  margin: 6px 0; padding: 8px 10px; border-left: 4px solid #b3261e;
  background: var(--color-alerta-fundo); border-radius: 0 6px 6px 0;
}

/* ---------------------------------------------------------------------------------------------
 * A FILA DE LAYOUTS APRENDIDOS (2026-09-05).
 *
 * O dono pediu para ensinar pelo menos quatro layouts, não um. Com vários, é preciso ver quais
 * existem, escolher qual ajustar e apagar um sem perder os outros: daí a fila de cartões.
 *
 * Cartões, e não uma lista de rádio: a escolha aqui é visual, feita pela miniatura do print. O
 * selecionado leva borda E fundo, porque cor sozinha não é acessível.
 */
.ct-ref-fila { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ct-ref-chip {
  position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid #d9d4c6; border-radius: 10px; padding: 6px 30px 6px 8px; background: var(--color-panel);
  max-width: 220px;
}
.ct-ref-chip:hover { border-color: #8a7444; }
.ct-ref-chip-on { border-color: #1f4a3c; border-left: 4px solid #1f4a3c; background: var(--color-ok-fundo); }
.ct-ref-chip img, .ct-ref-sem {
  width: 34px; height: 44px; object-fit: cover; border-radius: 4px; background: var(--color-superficie); flex: none;
}
.ct-ref-chip > span { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-ref-x {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; line-height: 1;
  border: 0; border-radius: 50%; background: transparent; color: #8a7444; cursor: pointer;
  font-size: 18px;
}
.ct-ref-x:hover { background: var(--color-alerta-fundo); color: #b3261e; }
.ct-ref-quantos { font-size: 0.85rem; margin: 0 0 10px; }

/* ---------------------------------------------------------------------------------------------
 * O CRACHÁ DO PERFIL na tela de Minha marca (2026-09-06).
 *
 * É só a conferência do que está guardado: a foto redonda, o nome, e a frase que explica o selo.
 * O crachá desenhado na ARTE mora em conteudo/modelos.js, com o CSS do slide, porque ele vai
 * junto quando a imagem é exportada.
 */
.ct-sep { border: 0; border-top: 1px solid #e6e1d5; margin: 18px 0 14px; }
.ct-perfil-box { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ct-perfil-foto {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid #d9d4c6;
}
.ct-perfil-box p { margin: 2px 0 0; font-size: 0.82rem; }

/* Os subtítulos do painel do texto no editor (contorno, sombra, fundo da escrita). */
.ed-sub { margin: .8rem 0 .2rem; font-size: .85rem; font-weight: 600; }

/* ---------------------------------------------------------------------------
 * AS FOTOS DOS SLIDES (2026-09-15). O acervo da peça, o banco de artes prontas
 * e a escolha do slide aberto. Pedido do dono: "se o usuário quiser upar
 * algumas fotos antes da criação, para que sejam colocadas nos slides de forma
 * automática".
 * ------------------------------------------------------------------------- */
.ct-vis-fotos { display: grid; gap: .6rem; margin: .9rem 0; padding: .9rem 1rem;
  border: 1px solid var(--color-border, #e0dccf); border-radius: .8rem; background: var(--color-panel, #fff); }
.ct-vis-fotos-topo { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.ct-vis-fotos-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
/* O input de arquivo vive escondido dentro do rótulo, que é o botão visível. */
.ct-vis-arquivo { cursor: pointer; display: inline-flex; align-items: center; }
.ct-vis-banco { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; }
.ct-vis-arte { display: grid; gap: .25rem; padding: .25rem; border: 1px solid var(--color-border, #e0dccf);
  border-radius: .6rem; background: none; cursor: pointer; font: inherit; text-align: center; }
.ct-vis-arte img { width: 100%; height: 58px; object-fit: cover; border-radius: .4rem; display: block; }
.ct-vis-arte span { font-size: .72rem; color: var(--color-muted, #6b7280); }
.ct-vis-arte:hover { border-color: var(--color-primary, #2f5d50); }
.ct-vis-fotos-fila { display: flex; flex-wrap: wrap; gap: .5rem; }
.ct-vis-foto { position: relative; display: inline-block; }
.ct-vis-foto img { width: 76px; height: 76px; object-fit: cover; border-radius: .5rem; display: block;
  border: 2px solid transparent; }
/* A que está neste slide fica marcada: sem isso, seis miniaturas iguais não dizem qual é qual. */
.ct-vis-foto-usada img { border-color: var(--color-primary, #2f5d50); }
.ct-vis-foto-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; line-height: 1;
  border-radius: 50%; border: 1px solid var(--color-border, #e0dccf); background: #fff; cursor: pointer;
  font-size: 15px; color: #444; padding: 0; }
@media (max-width: 480px) {
  .ct-vis-foto img { width: 62px; height: 62px; }
  .ct-vis-banco { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
}

/* O aviso de "layout próprio": este slide foi editado à mão e os seletores de
 * modelo não alcançam mais ele. Fica logo abaixo da navegação dos slides. */
.ct-vis-proprio { margin: .5rem 0 0; padding: .6rem .8rem; border-radius: .6rem;
  background: var(--color-surface, #f3f0e7); border: 1px solid var(--color-border, #e0dccf);
  font-size: .85rem; line-height: 1.45; }

/* ---------------------------------------------------------------------------
 * Análise do neurodesenvolvimento (js/tnd-ia.js).
 *
 * O desenho serve a uma leitura só: o TRECHO ao lado de cada afirmação. É ele
 * que separa ler o prontuário de opinar sobre a criança, então ele tem peso
 * visual próprio (recuo e barra à esquerda) e nunca vira letra miúda de rodapé.
 * ------------------------------------------------------------------------- */
.tnd-topo h3 { margin: 0 0 .35rem; }
.tnd-topo p { margin: 0 0 1rem; }
.tnd-fontes { margin: 0 0 1rem; }
.tnd-fontes-titulo { margin: 0 0 .3rem; font-weight: 600; }
.tnd-fontes-lista { margin: 0; padding-left: 1.1rem; }
.tnd-fontes-lista li { margin: .15rem 0; }
.tnd-avulso-campo { display: block; margin: 0 0 1rem; }
.tnd-avulso-campo textarea { width: 100%; }
.tnd-acoes-topo { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .8rem; }

.tnd-resultado { margin-top: 1.2rem; }
.tnd-bloco { margin: 0 0 1.5rem; }
.tnd-bloco h4 { margin: 0 0 .6rem; font-size: 1.02rem; }
.tnd-rot { margin: .7rem 0 .3rem; font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; opacity: .75; }

.tnd-hipoteses { display: grid; gap: .8rem; }
.tnd-hip { background: var(--color-panel); border: 1px solid var(--color-border);
  border-radius: .8rem; padding: .85rem 1rem; }
.tnd-hip-cab { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  justify-content: space-between; }
.tnd-selo { font-size: .76rem; padding: .18rem .55rem; border-radius: 999px;
  border: 1px solid var(--color-border); white-space: nowrap; }
.tnd-selo-forte { background: #1f4a3c; color: #f7f4ec; border-color: #1f4a3c; }
.tnd-selo-parcial { background: #d9b26a; color: #2a2a2a; border-color: #c79f56; }
.tnd-selo-fraca { background: transparent; opacity: .8; }

.tnd-apoios, .tnd-decidir, .tnd-difs, .tnd-lacunas, .tnd-encs, .tnd-descartes {
  margin: 0; padding-left: 1.1rem; }
.tnd-apoios li, .tnd-difs li, .tnd-lacunas li, .tnd-encs li { margin: 0 0 .6rem; }
.tnd-decidir li, .tnd-descartes li { margin: .2rem 0; }
.tnd-achado { display: block; }
.tnd-trecho { display: block; margin: .25rem 0 0; padding-left: .7rem;
  border-left: 3px solid var(--color-gold, #d9b26a); font-size: .9rem;
  line-height: 1.45; opacity: .92; }
.tnd-fonte { display: block; margin: .2rem 0 0; font-size: .8rem; opacity: .7; }
.tnd-escala { display: block; margin: .25rem 0 0; font-size: .84rem; font-weight: 600; }
.tnd-favor .tnd-trecho { border-left-color: #1f4a3c; }
.tnd-contra .tnd-trecho { border-left-color: #c97b52; }

.tnd-criterios { margin: 0 0 1.4rem; }
.tnd-crit-titulo { margin: 0 0 .2rem; font-weight: 600; }
.tnd-crit-aviso { margin: 0 0 .7rem; }
.tnd-crit { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
  padding: .6rem .7rem; border: 1px solid var(--color-border); border-radius: .7rem;
  margin: 0 0 .5rem; background: var(--color-panel); }
.tnd-crit input { margin-top: .25rem; flex: none; width: 1.15rem; height: 1.15rem; }
.tnd-crit-corpo { min-width: 0; }
.tnd-crit-label { display: block; }

.tnd-contagem { margin: .8rem 0 0; }
.tnd-cont-linha { padding: .35rem 0; font-size: .92rem; }
.tnd-cont-ok span { color: #1f4a3c; font-weight: 600; }
.tnd-cont-nota { margin: .5rem 0 0; font-size: .84rem; }
.tnd-crit-acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 0; }
.tnd-bloco-descartes { opacity: .85; }

@media (max-width: 640px) {
  .tnd-hip-cab { align-items: flex-start; }
  .tnd-crit { padding: .55rem .6rem; }
}

/* =====================================================================
   ALERTA DE RETORNOS (o "quem chamar" do prontuário)

   As cores saem das variáveis do tema, e não de hexadecimal solto: este
   bloco precisa funcionar no claro e no escuro, e o produto tem os dois.
   O vermelho de atraso é o --color-high que o resto da casa já usa para
   gravidade alta, e o "vencido" é o --color-gold-deep do selo de plano:
   dois tons novos seriam uma segunda gramática de cor na mesma tela.
   ===================================================================== */

.pr-ret-painel { margin-bottom: 1rem; }
.pr-ret-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pr-ret-dobrar { background: none; border: 0; color: var(--color-primary); cursor: pointer;
  font-size: 0.85rem; padding: 0.4rem 0.2rem; text-decoration: underline; }

.pr-ret-lista { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.pr-ret-item { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.55rem 0;
  border-top: 1px solid var(--color-border); }
.pr-ret-item:first-child { border-top: 0; }
.pr-ret-item-pendente { font-weight: 500; }
.pr-ret-data { flex: 0 0 5.6rem; font-variant-numeric: tabular-nums; color: var(--color-muted); font-size: 0.85rem; padding-top: 0.1rem; }
.pr-ret-titulo { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
/* overflow-wrap porque hipótese e motivo são texto livre: um "motivo" de 60 letras sem espaço
   alargava a tela no celular, que é o mesmo defeito que a mentoria acabou de consertar. */
.pr-ret-motivo { font-size: 0.78rem; line-height: 1.35; overflow-wrap: anywhere; }
.pr-ret-estado { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.pr-ret-lista-passada { opacity: 0.72; }
.pr-ret-feito { font-size: 0.78rem; color: var(--color-muted); }

.pr-ret-selo { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.08rem 0.5rem;
  border-radius: 999px; margin-left: 0.5rem; vertical-align: middle; white-space: nowrap; }
.pr-ret-atrasado { background: var(--color-high); color: #fff; }
.pr-ret-vencido { background: var(--color-gold-deep); color: #fff; }
.pr-ret-chegando { background: var(--color-primary); color: var(--color-chapa); }
.pr-ret-sumiu { background: var(--color-muted); color: #fff; }
.pr-ret-aniversario { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }

/* O botão "Já chamei" é alvo de toque: 40px é o mínimo que o dedo acerta no celular. */
.pr-ret-acoes { display: flex; gap: 0.35rem; }
.pr-ret-btn { background: none; border: 1px solid var(--color-border); border-radius: 6px;
  color: var(--color-text); cursor: pointer; font-size: 0.75rem; min-height: 40px; padding: 0 0.6rem; }
.pr-ret-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pr-ret-btn[disabled] { opacity: 0.5; cursor: default; }

.pr-ret-abrir { background: none; border: 0; cursor: pointer; display: flex; align-items: center;
  gap: 0.7rem; padding: 0.3rem 0; text-align: left; width: 100%; min-height: 44px; color: inherit; }
.pr-ret-abrir:hover .pr-ret-titulo { color: var(--color-primary); }

.pr-ret-topo p { margin: 0.2rem 0; }
.pr-ret-novo { border-top: 1px solid var(--color-border); margin-top: 0.9rem; padding-top: 0.9rem; }
.pr-ret-novo label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; }
.pr-ret-novo-linha { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pr-ret-novo-linha input[type="date"] { flex: 0 0 10rem; }
.pr-ret-novo-linha input[type="text"] { flex: 1 1 14rem; min-width: 0; }
.pr-ret-msg { font-size: 0.82rem; margin: 0.5rem 0 0; }

/* No celular a linha de três colunas vira duas: a data sobe para junto do título e as ações
   descem, senão o botão "Já chamei" espreme o texto a ponto de quebrar letra por letra. */
@media (max-width: 560px) {
  .pr-ret-item { flex-wrap: wrap; }
  .pr-ret-data { flex: 0 0 100%; }
  .pr-ret-estado { flex-direction: row; align-items: center; width: 100%; justify-content: flex-end; }
}


/* =====================================================================================
   AS CORREÇÕES DE COMPONENTE DO TEMA ESCURO.

   ELAS MORAM NO FIM DO ARQUIVO, e isso não é organização: é o mecanismo. No CSS, com a mesma
   especificidade, QUEM VEM DEPOIS VENCE. Na primeira tentativa este bloco ficou junto dos
   tokens, lá em cima, e não teve efeito nenhum: `.pr-filtro` está na linha 3200 e sobrescrevia
   tudo. A print mostrou a tela idêntica e foi assim que o erro apareceu.
   ===================================================================================== */

/*
 * OS LUGARES EM QUE `--color-cream` QUERIA DIZER "TEXTO CLARO", e não "superfície clara".
 *
 * O token era duplo: em 54 lugares ele é FUNDO (superfície creme) e em 15 é COR DE TEXTO sobre
 * um fundo escuro. No claro os dois sentidos convivem; no escuro eles se contradizem, porque a
 * superfície precisa escurecer e o texto precisa continuar claro.
 *
 * A escolha foi manter o token como SUPERFÍCIE (é o uso majoritário, e é o que faz o botão
 * primário dourado nascer com texto escuro sem mexer na regra dele) e devolver a cor clara,
 * um a um, nos lugares em que ele era texto. São estes, e a lista foi levantada varrendo a
 * folha, não de memória.
 */
header.app-header,
.fluxo-timer-box,
.header-link,
.landing-badge,
.btn-cta-ghost,
.hub-welcome-burger { color: var(--color-text); }

/* O botão do cabeçalho era claro com texto escuro. No escuro ele vira contorno, como lá. */
header.app-header button {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-fio-forte);
}
header.app-header button:hover { border-color: var(--color-primary); color: var(--color-primary); }

/*
 * OS BLOCOS DE DEGRADÊ DA LANDING. O degradê ia de --color-primary para --color-primary-dark,
 * e --color-primary virou DOURADO: o texto claro ficaria sobre dourado claro na ponta de cima.
 * Aqui o degradê passa a ser o da marca escura para o quase preto, que é o tratamento da
 * Oculoplástica, e o texto claro volta a funcionar na peça inteira.
 */
.landing-hero,
.lp-cta-final,
.trial-banner {
  background: linear-gradient(135deg, #2a2a2a 0%, #141414 45%, #050505 100%);
  color: var(--color-text);
}

/*
 * OS CHIPS DE FILTRO DO PRONTUÁRIO. Eram fundo branco com texto cinza e, quando ativos, verde
 * escuro com texto branco. Os três valores estavam escritos à mão na folha, então nenhum deles
 * seguiu a troca de tema: no escuro o chip virava um retângulo branco e o ativo, escuro sobre
 * escuro.
 */
.pr-filtro { background: transparent; color: var(--color-muted); border-color: var(--color-border); }
.pr-filtro:hover { border-color: var(--color-primary); color: var(--color-text); }
.pr-filtro-ativo {
  background: var(--color-primary);
  color: var(--color-chapa);
  border-color: var(--color-primary);
}


/*
 * OS CAMPOS DE FORMULÁRIO, que eram o buraco mais largo do tema escuro.
 *
 * A folha nunca declarou fundo nem cor para input, select e textarea: no claro isso funciona
 * porque o padrão do navegador (branco com texto preto) coincide com a página. Com
 * `color-scheme: dark` o navegador passa a desenhar o padrão ESCURO dele, que é um cinza que
 * não é nenhuma das cores desta casa, e o campo vira a única coisa cinza numa tela azul.
 *
 * São dezenas de campos, em 47 páginas, e nenhum deles precisaria ser tratado um a um: o que
 * faltava era a regra de base. Ela entra aqui, e vale para todos.
 */
input, select, textarea {
  background: var(--color-primary-dark);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  font-family: inherit;
}
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);
}
/* O menu suspenso é desenhado pelo sistema: sem isto, no Firefox ele abre claro dentro de uma
   página escura, que foi o mesmo sintoma que a Oculoplástica teve e corrigiu com color-scheme. */
select option { background: var(--color-panel); color: var(--color-text); }
/* Caixa de marcar e botão de rádio: o accent-color é o que pinta o preenchimento nativo. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); }
/* Campo de data e hora: o ícone do calendário nasce preto e some no escuro. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.75); }

/*
 * O BOTÃO DE VOLTAR usava --color-primary-dark como COR DE TEXTO (era o verde escuro da marca
 * antiga sobre painel claro). Esse token virou o quase preto do chão, então o texto sumia
 * dentro do próprio botão.
 */
.nav-voltar { color: var(--color-text); box-shadow: none; }
.nav-voltar:hover { box-shadow: none; }

/*
 * SOMBRA NÃO EXISTE NO ESCURO. Sombra é a ausência de luz sobre uma superfície clara; sobre
 * fundo escuro ela não aparece, e o que sobra é o custo de composição. O desenho da
 * Oculoplástica separa por FIO e por AR, e é o que fica.
 */
/* (2026-09-25) O painel e o cartão do hub saíram desta lista: o visual novo aprovado pelo dono
   quer a caixa "flutuante", e a sombra suave com o brilho dourado é o que faz ela flutuar.
   Na loja, que tem desenho próprio, continua sem sombra. */
.card, .feature-card, .loja-body .panel, .loja-body .hub-card { box-shadow: none; }

/*
 * OS CATORZE LUGARES EM QUE --color-primary-dark ERA FUNDO, e não texto. Levantados varrendo a
 * folha (não de memória): são o cabeçalho, o menu lateral, o cronômetro do fluxo, os blocos de
 * degradê da landing, o botão flutuante de copiar e os campos de formulário.
 */
header.app-header,
.fluxo-timer-box,
.nav-drawer,
.nav-drawer-head,
.ct-cop-fab,
input, select, textarea { background: var(--color-chapa); }
.home-quick .hub-card::after { background: var(--color-primary); }
.home-hero {
  background: linear-gradient(135deg, #2a2a2a 0%, #141414 45%, #050505 100%);
  color: var(--color-text);
}
/* O anel de foco usa a chapa como primeira parada, para o anel dourado não encostar no campo. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 2px var(--color-chapa), 0 0 0 4px var(--color-primary);
}

/*
 * O QUADRADINHO DO ÍCONE DE SEÇÃO. O fundo era "primary 14% misturado com BRANCO" e o traço era
 * --color-primary-dark. Com o token virando texto claro, o resultado foi um quadrado branco com
 * um traço branco dentro: o ícone sumia sem deixar buraco na página, que é o pior jeito de
 * sumir. No escuro ele vira superfície discreta com o traço dourado, como o realce da casa.
 */
.section-head-ico {
  background: var(--color-superficie);
  border: 1px solid var(--color-fio);
  color: var(--color-primary);
}

/*
 * OS SELOS QUE MISTURAVAM A COR COM BRANCO para ficarem pálidos. Sobre fundo claro isso produz
 * um pastel; sobre fundo escuro produz uma etiqueta branca gritando no meio da tela. A mistura
 * passa a ser com a CHAPA, que é o mesmo gesto com o fundo certo.
 */
.tema-badge-emergencia { background: color-mix(in oklch, var(--color-high) 22%, var(--color-chapa)); color: var(--color-high); }
.tema-badge-ambulatorio { background: color-mix(in oklch, var(--color-primary) 18%, var(--color-chapa)); color: var(--color-primary); }
.tema-badge-puericultura { background: color-mix(in oklch, var(--color-accent) 18%, var(--color-chapa)); color: var(--color-accent); }
.tema-badge-adolescente { background: color-mix(in oklch, oklch(60% 0.12 260) 22%, var(--color-chapa)); color: oklch(78% 0.10 260); }
.tema-badge-rev { background: color-mix(in oklch, var(--color-medium) 20%, var(--color-chapa)); color: var(--color-medium); }
.vac-b-opcional,
.vac-rede-part,
.vac-status-opcional .vac-dose-badge {
  background: color-mix(in oklch, oklch(60% 0.12 290) 22%, var(--color-chapa));
  color: oklch(80% 0.09 290);
}

/*
 * E OS QUE DECLARAM O TEXTO EM OUTRA LINHA. A troca automatica so alcanca quem escreve o fundo
 * e a cor juntos; estes escrevem em regras separadas, e foram levantados pela varredura de
 * contraste (abre cada pagina com sessao e mede todo texto visivel contra o fundo efetivo).
 */
.pr-filtro-ativo,
.temas-pill.is-active,
.dia-count,
.pt-tab-active,
.atb-chip-on,
.pr-tab-active,
.ag-cal-sel { color: var(--color-chapa); }

/*
 * O VERDE LEGADO DO MEU CONSULTORIO. Uma linha so, com a cor presa num fallback de variavel que
 * nunca existiu (--verde-escuro). Como a variavel nao existe, o valor que valia era sempre o
 * #34614e escrito ali, e ele nao seguiu tema nenhum: ficou verde escuro sobre azul escuro.
 */
.co-sec { color: var(--color-primary); }

/*
 * AS ETIQUETAS DE AVISO em ambar fechado. No claro o ambar escuro le bem; no escuro ele
 * desaparece no chao. Passam ao dourado da casa.
 */
.dia-tag-warn, .pr-val-alerta, .lia-badge-parcial, .lia-regra-falta { color: var(--color-medium); }

/*
 * AS VARIAVEIS QUE NUNCA EXISTIRAM, e por isso nunca seguiram tema nenhum.
 *
 * A folha usava var(--color-surface, #fff), var(--color-danger, #c0392b) e mais cinco nomes que
 * NAO estao definidos em lugar nenhum. Quando a variavel nao existe, o fallback vence SEMPRE:
 * aquilo nunca foi "a cor do tema com uma reserva", era a cor escrita a mao com um disfarce.
 *
 * Foi assim que os cartoes de meta da Estrategia continuaram brancos no tema escuro (quinze
 * textos ilegiveis numa tela so), e o mesmo aconteceu com o verde do Meu Consultorio.
 *
 * Definir os nomes resolve os onze usos de uma vez, e sem tocar em nenhuma das regras: e o
 * conserto que nao precisa saber onde elas estao.
 */
:root {
  --color-surface: var(--color-panel);
  --color-surface-alt: var(--color-cream);
  --color-text-muted: var(--color-muted);
  --color-danger: var(--color-high);
  --verde-escuro: var(--color-primary);
  --font-body: var(--font-sans);
  --shadow-sm: none;
}

/* O botao flutuante de copiar: fundo da chapa com texto da chapa era escuro sobre escuro. */
.ct-cop-fab { color: var(--color-text); }
/* "em breve" no cartao da ferramenta ficava a 4,47 de contraste, um fio abaixo do minimo. */
.ct-card-pe { color: var(--color-medium); }

/*
 * AS TRES IDEIAS QUE ESTAVAM ESCRITAS A MAO EM DEZESSEIS TONS.
 *
 * A folha tinha 67 fundos palidos em hexadecimal, escolhidos no olho em dias diferentes. Eles
 * nao sao 67 cores: sao TRES ideias repetidas.
 *
 *   verde palido     "isto esta ok / confirmado / pago"
 *   amarelo palido   "atencao / rascunho / parcial"
 *   vermelho palido  "alerta / grave / falta"
 *
 * Sobre fundo claro, pastel funciona. Sobre fundo escuro, pastel vira etiqueta branca gritando,
 * e o texto claro por cima some. Foi assim que o aviso "Nunca dar insulina em bolus na CAD"
 * ficou INVISIVEL em fluxos.html: creme sobre creme, 1,03 de contraste, num aviso clinico.
 *
 * Trocar por token, e nao por tom novo, e o que impede o proximo tema de precisar deste mesmo
 * garimpo.
 */
:root {
  --color-ok: #cbae83;
  --color-ok-fundo: #2a2318;
  --color-atencao: var(--oc-dourado-claro);
  --color-atencao-fundo: #2d2716;
  --color-alerta: #f0a199;
  --color-alerta-fundo: #2e1614;
}

/* =============================================================================================
 * MANUAL DE PSICOFARMACOLOGIA PEDIÁTRICA (psicofarmacologia.html, js/psico.js)
 * Tudo em cima dos tokens do tema; nada de cor fixa. Prefixo ps-.
 * ============================================================================================= */
.ps-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.ps-topo h2 { margin: 0; }
.ps-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ps-acoes a, .ps-acoes button { font-size: 0.85rem; }
.ps-voltar { margin-bottom: 0.8rem; }

/* A busca em destaque: é o elemento central do módulo. */
.ps-busca { text-align: center; padding: 1.6rem 1.2rem 1.2rem; }
.ps-busca h2 { margin: 0 0 0.8rem; font-size: 1.5rem; }
.ps-busca-campo { position: relative; max-width: 720px; margin: 0 auto; }
.ps-busca-campo input {
  width: 100%; box-sizing: border-box; font-size: 1.1rem; padding: 0.9rem 1rem 0.9rem 2.9rem;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-cream); color: var(--color-text);
}
.ps-busca-campo input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 22%, transparent); }
.ps-busca-ico { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--color-muted); pointer-events: none; }
.ps-busca-ico svg { width: 20px; height: 20px; }
.ps-exemplos { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 0.9rem; }
.ps-exemplo {
  font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: transparent; color: var(--color-muted); cursor: pointer;
}
.ps-exemplo:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.ps-muted-centro { text-align: center; }

/* Resultados agrupados por categoria, cada um com o POR QUÊ. */
.ps-grupo { margin-top: 1.1rem; }
.ps-grupo-nome { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); margin: 0 0 0.45rem; }
.ps-resultados { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.7rem; }
.ps-res {
  display: flex; flex-direction: column; gap: 0.3rem; text-align: left; text-decoration: none;
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 14px; padding: 0.85rem 1rem;
  color: var(--color-text); transition: transform 0.12s, border-color 0.12s;
}
.ps-res:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--color-primary) 40%, var(--color-border)); }
.ps-res-nome { font-weight: 700; color: var(--color-primary-dark); line-height: 1.25; }
.ps-res-porque { font-size: 0.85rem; color: var(--color-muted); line-height: 1.4; }
.ps-res-fonte { font-size: 0.74rem; color: var(--color-muted); }
.ps-vazio { padding: 1rem; }

/* ------------------------------------------------------------------ índice do manual (famílias)
 * A tela inicial mostrava os 86 fármacos em caixa, num grid só, e virou parede. Agora mostra as
 * nove famílias; o hambúrguer abre o índice de qualquer tela, inclusive de dentro de uma ficha.
 */
.ps-fam-intro { margin: 0 0 0.8rem; }
.ps-fam-resumo { margin: -0.3rem 0 1rem; }
.ps-familias { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.8rem; }
.ps-familia {
  display: flex; flex-direction: column; gap: 0.4rem; text-decoration: none; color: var(--color-text);
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 16px;
  padding: 1rem 1.1rem; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.ps-familia:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--color-primary) 45%, var(--color-border));
  box-shadow: 0 6px 20px color-mix(in oklch, var(--color-primary) 12%, transparent);
}
.ps-familia-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.ps-familia-nome { font-weight: 700; font-size: 1.02rem; color: var(--color-primary-dark); line-height: 1.2; }
.ps-familia-n {
  flex: none; min-width: 1.9rem; text-align: center; font-size: 0.78rem; font-weight: 700;
  color: var(--color-primary-dark); background: color-mix(in oklch, var(--color-primary) 14%, transparent);
  border-radius: var(--radius-pill); padding: 0.12rem 0.5rem;
}
.ps-familia-resumo { font-size: 0.87rem; color: var(--color-muted); line-height: 1.45; }
.ps-familia-classes {
  font-size: 0.75rem; color: var(--color-muted); line-height: 1.4;
  border-top: 1px solid var(--color-border); padding-top: 0.45rem; margin-top: 0.15rem;
}

/* O botão do índice, com os três traços.
 * O seletor leva o "button" de propósito: a casa estiliza "button.secondary, a.secondary", que
 * tem especificidade maior que uma classe sozinha. Sem o elemento aqui, o inline-block dela
 * vencia, e dentro do flex de .ps-acoes ele virava block: o gap não aplicava e os três traços
 * caíam por cima da palavra "Índice". Medido no navegador, não deduzido. */
button.ps-indice-btn { display: inline-flex; align-items: center; gap: 0.45rem; }
.ps-indice-tracos { flex: none; }
.ps-indice-tracos { display: inline-flex; flex-direction: column; gap: 3px; }
.ps-indice-tracos span { display: block; width: 14px; height: 2px; background: currentColor; border-radius: 2px; }

/* a gaveta */
.ps-indice[hidden] { display: none; }
.ps-indice { position: fixed; inset: 0; z-index: 60; }
.ps-indice-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.ps-indice-painel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
  background: var(--color-panel); border-left: 1px solid var(--color-border);
  padding: 1rem 1.1rem 2rem; overflow-y: auto;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18);
}
.ps-indice-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.ps-indice-x {
  background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer;
  color: var(--color-muted); padding: 0 0.3rem;
}
.ps-indice-inicio {
  display: block; font-size: 0.85rem; color: var(--color-primary-dark); text-decoration: none;
  padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); margin-bottom: 0.6rem;
}
.ps-indice-fam { margin-bottom: 0.9rem; }
.ps-indice-fam-nome {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-weight: 700; font-size: 0.92rem; color: var(--color-primary-dark); text-decoration: none;
  padding: 0.25rem 0;
}
.ps-indice-classes { display: flex; flex-direction: column; }
.ps-indice-classes a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-size: 0.82rem; color: var(--color-muted); text-decoration: none;
  padding: 0.28rem 0 0.28rem 0.7rem; border-left: 2px solid var(--color-border);
}
.ps-indice-classes a:hover { color: var(--color-primary-dark); border-left-color: var(--color-primary); }
.ps-indice-n {
  flex: none; font-size: 0.72rem; font-weight: 700; color: var(--color-muted);
  background: color-mix(in oklch, var(--color-muted) 12%, transparent);
  border-radius: var(--radius-pill); padding: 0.05rem 0.42rem;
}
body.ps-indice-aberto { overflow: hidden; }

/* Selos */
.ps-selo {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--color-secondary); color: var(--color-primary-dark);
}
.ps-selo-aprovada { background: color-mix(in oklch, var(--color-low) 22%, var(--color-chapa)); color: var(--color-low); }
.ps-selo-offlabel { background: color-mix(in oklch, var(--color-medium) 22%, var(--color-chapa)); color: var(--color-medium); }
.ps-selo-limitada { background: color-mix(in oklch, var(--color-high) 18%, var(--color-chapa)); color: var(--color-high); }
.ps-selo-grave { background: color-mix(in oklch, var(--color-high) 18%, var(--color-chapa)); color: var(--color-high); }
.ps-selo-relevante { background: color-mix(in oklch, var(--color-medium) 22%, var(--color-chapa)); color: var(--color-medium); }
.ps-selo-alta { background: color-mix(in oklch, var(--color-high) 18%, var(--color-chapa)); color: var(--color-high); }
.ps-selo-media { background: color-mix(in oklch, var(--color-medium) 22%, var(--color-chapa)); color: var(--color-medium); }
.ps-selo-baixa { background: transparent; border: 1px solid var(--color-border); color: var(--color-muted); }
.ps-selo-forte { background: color-mix(in oklch, var(--color-low) 22%, var(--color-chapa)); color: var(--color-low); }
.ps-selo-fraca { background: transparent; border: 1px solid var(--color-border); color: var(--color-muted); }
.ps-selo-nao { background: transparent; color: var(--color-muted); }
.ps-selo-tipo { background: transparent; border: 1px solid var(--color-border); color: var(--color-muted); font-weight: 600; }

/* Faixa de revisão: só o revisor vê conteúdo em revisão, e ele precisa saber que está vendo. */
.ps-faixa {
  border: 1px solid color-mix(in oklch, var(--color-medium) 45%, var(--color-border));
  background: color-mix(in oklch, var(--color-medium) 10%, var(--color-panel));
  border-radius: 12px; padding: 0.7rem 0.9rem; font-size: 0.88rem; margin: 0.8rem 0;
}
.ps-faixa strong { color: var(--color-medium); }
.ps-pendencias { font-size: 0.85rem; color: var(--color-muted); margin: 0.6rem 0 0; padding-left: 1.1rem; }

/* Ficha: cabeçalho, abas que rolam até a seção, seções em acordeão. */
.ps-ficha-cab h2 { margin: 0.2rem 0 0.2rem; }
.ps-ficha-meta { font-size: 0.82rem; color: var(--color-muted); display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.ps-abas { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.9rem 0 0.6rem; position: sticky; top: 0; background: var(--color-bg); padding: 0.4rem 0; z-index: 2; }
.ps-aba {
  font-size: 0.78rem; padding: 0.3rem 0.65rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border);
  background: var(--color-panel); color: var(--color-text); cursor: pointer;
}
.ps-aba:hover { border-color: var(--color-primary); }
.ps-secao { margin-top: 0.6rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-panel); }
.ps-secao > summary {
  cursor: pointer; padding: 0.8rem 1rem; font-weight: 700; color: var(--color-primary-dark); list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.ps-secao > summary::-webkit-details-marker { display: none; }
.ps-secao > summary::after { content: "+"; color: var(--color-muted); font-weight: 400; }
.ps-secao[open] > summary::after { content: "\2212"; }
.ps-secao-corpo { padding: 0 1rem 1rem; }
.ps-secao-corpo p, .ps-secao-corpo li { line-height: 1.5; }
.ps-lista { padding-left: 1.2rem; margin: 0.3rem 0; }
.ps-lista li { margin-bottom: 0.45rem; }
.ps-dl { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 0.35rem 0.9rem; margin: 0.3rem 0; }
.ps-dl dt { font-weight: 600; color: var(--color-muted); font-size: 0.86rem; }
.ps-dl dd { margin: 0; }
.ps-ref { font-size: 0.72rem; color: var(--color-primary); cursor: pointer; margin-left: 0.15rem; white-space: nowrap; }
.ps-ref:hover { text-decoration: underline; }
.ps-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.7rem; }
.ps-cartao { border: 1px solid var(--color-border); border-radius: 12px; padding: 0.8rem 0.9rem; background: var(--color-cream); }
.ps-cartao h4 { margin: 0.3rem 0 0.3rem; font-size: 0.98rem; }
.ps-cartao p { margin: 0.2rem 0; font-size: 0.9rem; }
.ps-cartao a { color: var(--color-primary-dark); }

/* Tabelas: no desktop, tabela; no celular, cada linha vira um cartão com o rótulo da coluna. */
.ps-tabela { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 0.4rem 0; }
.ps-tabela th, .ps-tabela td { text-align: left; vertical-align: top; padding: 0.5rem 0.55rem; border-bottom: 1px solid var(--color-border); }
.ps-tabela th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); font-weight: 700; }
.ps-tabela td a { color: var(--color-primary-dark); }
.ps-fontes { padding-left: 1.3rem; font-size: 0.86rem; }
.ps-fontes li { margin-bottom: 0.5rem; }
.ps-fontes a { color: var(--color-primary-dark); word-break: break-all; }
.ps-fontes .ps-fonte-nota { color: var(--color-muted); font-size: 0.8rem; }
.ps-historico { font-size: 0.8rem; color: var(--color-muted); }
.ps-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0; }
.ps-chip { font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border); color: var(--color-muted); }

/* Comparador */
.ps-escolha { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.6rem 0 0.9rem; }
.ps-escolha label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.35rem 0.8rem; cursor: pointer; }
.ps-comp-rol { overflow-x: auto; }
.ps-comp { min-width: 520px; }
.ps-comp th:first-child, .ps-comp td:first-child { font-weight: 600; color: var(--color-muted); width: 170px; }
.ps-comp ul { margin: 0; padding-left: 1rem; }

/* Autoria */
.ps-problemas { border: 1px solid color-mix(in oklch, var(--color-high) 45%, var(--color-border)); border-radius: 12px; padding: 0.7rem 0.9rem; font-size: 0.86rem; }
.ps-ok { border: 1px solid color-mix(in oklch, var(--color-low) 45%, var(--color-border)); border-radius: 12px; padding: 0.7rem 0.9rem; font-size: 0.9rem; }

/* ------------------------------------------------------ o manual usa a tela que tem
 * O dono, vendo a ficha num monitor largo: "Guia de psicofarmaco ta todo PORCO, olha o jeito
 * que isso ta escrito". Ele tinha razão, e a causa não era a tabela: era a PÁGINA.
 *
 * main tem max-width 860px no app inteiro, e essa é a medida de LEITURA certa para um
 * formulário ou uma lista. Para um manual de referência cheio de tabela é estrangulamento:
 * medido num monitor de 1720px, a tabela de Interações (5 colunas) ficava com 99 a 184px por
 * coluna e a de Posologia (8 colunas) com 57 a 137px. Cada frase virava uma coluna de duas
 * palavras, com tarja preta dos dois lados da tela.
 *
 * O :has() escolhe SÓ a página do manual pelo #psico-mount, então a medida de leitura do resto
 * do app não muda. Na loja o espelho era capado ainda mais (.loja-pagina em 900px), e por isso
 * os dois shells entram aqui.
 */
main:has(#psico-mount),
.loja-main:has(#psico-mount),
.loja-pagina:has(#psico-mount) { max-width: min(1280px, 100%); }

/* E A PROSA CONTINUA NA MEDIDA DE LEITURA. Soltar a largura conserta a tabela e estraga o texto
 * corrido, que é o erro clássico de "deixa tudo largo": linha de 1280px cansa a vista. Mecanismo,
 * pérolas, precauções e afins ficam na medida; só a tabela é que ocupa a tela. */
.ps-secao-corpo > p, .ps-secao-corpo > .ps-lista, .ps-secao-corpo > .ps-dl { max-width: 78ch; }

/* ------------------------------------------------------ a Posologia é cartão em toda largura
 * Oito colunas de frase não cabem em tela nenhuma com conforto: mesmo a 1280px sobram ~150px
 * por coluna. Então ela usa o MESMO cartão que o celular já usa (as regras abaixo são as do
 * @media de 640px, para esta tabela só), em vez de um segundo padrão inventado. O data-rotulo
 * que o cartão precisa já vinha de td() em js/psico.js.
 */
.ps-tabela.ps-cartoes-sempre,
.ps-tabela.ps-cartoes-sempre tbody,
.ps-tabela.ps-cartoes-sempre tr,
.ps-tabela.ps-cartoes-sempre td { display: block; width: 100%; box-sizing: border-box; }
.ps-tabela.ps-cartoes-sempre thead { display: none; }
.ps-tabela.ps-cartoes-sempre tr {
  border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 0.6rem;
  padding: 0.5rem 0.3rem; background: var(--color-cream);
}
.ps-tabela.ps-cartoes-sempre td { border: none; padding: 0.3rem 0.7rem; }
.ps-tabela.ps-cartoes-sempre td::before {
  content: attr(data-rotulo); display: block; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-muted); font-weight: 700;
}
.ps-tabela.ps-cartoes-sempre td:empty { display: none; }

/* Em tela grande o cartão se abre em COLUNAS, senão cada situação de dose viraria uma tira
 * vertical de oito linhas e rolar para comparar duas doses seria pior que a tabela espremida.
 *
 * FLEX, E NÃO GRADE, e a diferença foi medida. Com grid e auto-fit, o "Situação" ocupando
 * 1 / -1 IMPEDE o colapso das faixas vazias: a faixa existe porque o item que a atravessa a
 * usa. O resultado era o pior dos mundos, medido a 1720px: um cartão que só tem Observação
 * ficava com o texto preso em 219px e 900px de vazio ao lado.
 *
 * Com flex, "Situação" toma a linha inteira por flex-basis 100%, e o que sobra DIVIDE o espaço:
 * uma célula sozinha cresce e ocupa tudo, quatro células repartem a linha. É o comportamento
 * que se queria, e sai de graça. */
@media (min-width: 720px) {
  .ps-tabela.ps-cartoes-sempre tr {
    display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; padding: 0.7rem 0.5rem;
  }
  /* A célula cresce para ocupar a linha, mas o TEXTO dentro dela para na medida de leitura:
   * uma observação sozinha num cartão de 1122px daria uma linha longa demais para a vista. */
  .ps-tabela.ps-cartoes-sempre td { flex: 1 1 210px; min-width: 0; max-width: 78ch; }
  /* A situação é o TÍTULO do cartão: linha inteira e destacada. O max-width de leitura não vale
   * para ela, senão ela deixa de ser título e vira mais uma coluna, e o cartão perde a forma. */
  .ps-tabela.ps-cartoes-sempre td[data-rotulo="Situação"] {
    flex: 0 0 100%; max-width: none; font-weight: 600;
  }
}

@media (max-width: 640px) {
  .ps-busca { padding: 1.1rem 0.6rem 0.9rem; }
  .ps-busca h2 { font-size: 1.25rem; }
  .ps-busca-campo input { font-size: 1rem; padding-left: 2.6rem; }
  .ps-resultados, .ps-cartoes { grid-template-columns: 1fr; }
  .ps-dl { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .ps-dl dt { margin-top: 0.5rem; }
  .ps-tabela:not(.ps-comp), .ps-tabela:not(.ps-comp) tbody, .ps-tabela:not(.ps-comp) tr, .ps-tabela:not(.ps-comp) td { display: block; width: 100%; box-sizing: border-box; }
  .ps-tabela:not(.ps-comp) thead { display: none; }
  .ps-tabela:not(.ps-comp) tr { border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 0.6rem; padding: 0.3rem 0; background: var(--color-cream); }
  .ps-tabela:not(.ps-comp) td { border: none; padding: 0.3rem 0.7rem; }
  .ps-tabela:not(.ps-comp) td::before { content: attr(data-rotulo); display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); font-weight: 700; }
  .ps-tabela:not(.ps-comp) td:empty { display: none; }
  .ps-abas { position: static; }
}

/* Ferramenta ligada na tela dos Fluxos (a Fototerapia neonatal veio para cá em 2026-09-22). */
.fluxo-ferramentas { margin: 0.9rem 0 0.2rem; }
.fluxo-ferramentas-tit { margin: 0 0 0.4rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); font-weight: 700; }
.fluxo-ferramenta {
  display: flex; align-items: center; gap: 0.7rem; text-decoration: none;
  padding: 0.7rem 0.9rem; border: 1px solid var(--color-border); border-radius: 14px;
  background: var(--color-cream); color: var(--color-text); transition: border-color 0.12s, transform 0.12s;
}
.fluxo-ferramenta:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.fluxo-ferramenta-ico { flex: 0 0 auto; color: var(--color-primary); }
.fluxo-ferramenta-ico svg { width: 22px; height: 22px; }
.fluxo-ferramenta-txt { display: flex; flex-direction: column; gap: 0.1rem; }
.fluxo-ferramenta-txt strong { color: var(--color-primary-dark); font-size: 0.98rem; }
.fluxo-ferramenta-txt span { color: var(--color-muted); font-size: 0.85rem; line-height: 1.35; }
.temas-grupo-nota { margin-top: 0.5rem; font-size: 0.88rem; }
.temas-grupo-nota a { color: var(--color-primary-dark); }

/* Histórico e salvamento das análises do neurodesenvolvimento (js/tnd-ia.js). */
.tnd-salvas { margin: 0.9rem 0; padding: 0.8rem 0.95rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-cream); }
.tnd-salvas-tit { margin: 0 0 0.5rem; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); font-weight: 700; }
.tnd-salvas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.tnd-salva-abrir {
  width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; text-align: left;
  padding: 0.55rem 0.7rem; border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-panel); color: var(--color-text); cursor: pointer; font: inherit;
}
.tnd-salva-abrir:hover { border-color: var(--color-primary); }
.tnd-salva-abrir strong { color: var(--color-primary-dark); }
.tnd-salva-hip { font-size: 0.9rem; }
.tnd-salva-meta { font-size: 0.8rem; color: var(--color-muted); margin-left: auto; }
.tnd-salvar-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.tnd-salvar-nota { font-size: 0.82rem; flex: 1 1 16rem; line-height: 1.35; }
@media (max-width: 560px) { .tnd-salva-meta { margin-left: 0; } }

/* ---- Calendário vacinal completo (js/vacinas-view.js, renderCompleto) ---- */
.vac-comp { margin-top: 1rem; }
.vac-comp-cab h3 { margin: 0 0 0.3rem; }
.vac-comp-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.8rem 0; }
.vac-comp-sep { width: 1px; height: 1.4rem; background: var(--color-border); margin: 0 0.3rem; }
.vac-chip {
  font-size: 0.82rem; padding: 0.32rem 0.75rem; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-panel); color: var(--color-muted); cursor: pointer;
}
.vac-chip:hover { border-color: var(--color-primary); }
.vac-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-chapa); font-weight: 700; }
.vac-comp-tab { overflow-x: auto; }
.vac-tab { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.vac-tab th, .vac-tab td { text-align: left; vertical-align: top; padding: 0.6rem 0.6rem; border-bottom: 1px solid var(--color-border); }
.vac-tab th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); font-weight: 700; }
.vac-tab-idade { font-weight: 700; color: var(--color-primary-dark); white-space: nowrap; }
.vac-tab-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.vac-tab-lista li { line-height: 1.35; }
.vac-tab-lista strong { color: var(--color-text); }
.vac-tab-dose, .vac-tab-protege, .vac-tab-obs, .vac-tab-limite { display: block; font-size: 0.82rem; color: var(--color-muted); }
.vac-tab-esq li { font-size: 0.86rem; }
.vac-tab-limite { display: inline; margin-left: 0.3rem; font-style: italic; }
.vac-selo { display: inline-block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.42rem; border-radius: 999px; vertical-align: 1px; }
.vac-selo-pni { background: color-mix(in oklch, var(--color-low) 22%, var(--color-chapa)); color: var(--color-low); }
.vac-selo-part { background: color-mix(in oklch, var(--color-medium) 22%, var(--color-chapa)); color: var(--color-medium); }
@media (max-width: 640px) {
  .vac-tab, .vac-tab tbody, .vac-tab tr, .vac-tab td { display: block; width: 100%; box-sizing: border-box; }
  .vac-tab thead { display: none; }
  .vac-tab tr { border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 0.6rem; padding: 0.35rem 0; background: var(--color-cream); }
  .vac-tab td { border: none; padding: 0.35rem 0.7rem; }
  .vac-tab td::before { content: attr(data-rotulo); display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); font-weight: 700; }
  .vac-tab td:empty { display: none; }
}

/* =========================================================================
   AGENDA DE PLANTÕES
   Calendário do mês, ficha do plantão e relatório de ganhos. Tudo em tokens,
   nunca em cor literal: a trava de contraste (tests/tema-legivel.test.js)
   varre esta página como varre as outras, e cor escrita à mão é o jeito mais
   rápido de a Oculoplastic (que troca os tokens) ficar ilegível.
   ========================================================================= */
.pl-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.pl-topo-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* O relatório vem antes do calendário: é a pergunta do fim do mês. */
.pl-relatorio { padding: 0.9rem 1rem; }
.pl-rel-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin: 0.5rem 0 0.4rem; }
.pl-rel-cartao { background: var(--color-cream); border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.55rem 0.7rem; display: flex; flex-direction: column; gap: 0.1rem; }
.pl-rel-rot { font-size: 0.78rem; color: var(--color-muted); }
.pl-rel-cartao strong { font-size: 1.15rem; color: var(--color-primary-dark); font-variant-numeric: tabular-nums; }
.pl-rel-detalhe { font-size: 0.85rem; margin: 0.2rem 0 0.4rem; }
.pl-rel-locais { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.pl-rel-locais li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.35rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.pl-rel-locais li span:last-child { font-variant-numeric: tabular-nums; color: var(--color-primary-dark); font-weight: 600; }

/* O calendário. Sete colunas em qualquer largura: mês em grade que vira lista
   deixa de ser calendário, e ele pediu calendário. */
/* minmax(0, 1fr) e min-width 0: sem isso, um nome de local comprido na etiqueta alargava a coluna e a tela rolava de lado no celular. */
.pl-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; margin: 1rem 0; }
.pl-cal-dia { min-width: 0; }
.pl-cal-cab { text-align: center; font-size: 0.75rem; color: var(--color-muted); padding: 0.2rem 0; text-transform: uppercase; letter-spacing: 0.04em; }
.pl-cal-vazio { min-height: 3.6rem; }
.pl-cal-dia { min-height: 3.6rem; background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.25rem; display: flex; flex-direction: column; align-items: stretch; gap: 0.12rem; cursor: pointer; text-align: left; font: inherit; color: var(--color-text); }
.pl-cal-dia:hover { border-color: var(--color-primary); }
.pl-cal-num { font-size: 0.8rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.pl-cal-hoje { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.pl-cal-hoje .pl-cal-num { color: var(--color-primary-dark); font-weight: 700; }
.pl-cal-tem { background: color-mix(in oklch, var(--color-primary) 7%, var(--color-panel)); }
.pl-cal-item { font-size: 0.7rem; line-height: 1.2; border-radius: 0.3rem; padding: 0.08rem 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*
 * A PALETA DO CALENDÁRIO. Cor é FUNDO da etiqueta, e o texto dela é sempre escuro: por isso
 * todas as sete são claras. Assim a mesma classe funciona no tema escuro (azul) e no claro
 * (branco) sem precisar de um par de tons para cada.
 *
 * "JÁ RECEBI" DEIXOU DE TROCAR O FUNDO. Antes o pago virava a etiqueta inteira de cor, o que
 * apagaria a cor escolhida agora que ela existe. Pago passou a ser a etiqueta mais clara, com um
 * ✓ posto pelo script: os dois sinais passam a conviver na mesma etiqueta.
 */
.pl-cor-dourado { --pl-cor: #f1cf6b; }
.pl-cor-verde   { --pl-cor: #9fd8b4; }
.pl-cor-azul    { --pl-cor: #9ec9ec; }
.pl-cor-roxo    { --pl-cor: #c4b3e6; }
.pl-cor-rosa    { --pl-cor: #f0aec4; }
.pl-cor-laranja { --pl-cor: #f3b183; }
.pl-cor-cinza   { --pl-cor: #cacaca; }
.pl-cal-item { background: var(--pl-cor, var(--color-primary)); color: #0a0a0a; }
.pl-cal-pago { opacity: 0.62; }

/* A bolinha da cor na lista do mês, para a linha dizer a mesma coisa que o calendário. */
.pl-ponto { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.35rem; background: var(--pl-cor, var(--color-primary)); vertical-align: baseline; }

/* Os botões da paleta na ficha. O radio some, o quadradinho colorido é o alvo do toque. */
.pl-cor-rot { display: block; font-size: 0.85rem; color: var(--color-muted); margin-bottom: 0.3rem; }
.pl-cores { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pl-cor { cursor: pointer; line-height: 0; }
.pl-cor input { position: absolute; opacity: 0; width: 0; height: 0; }
.pl-cor-visual { display: block; width: 2rem; height: 2rem; border-radius: 0.5rem; background: var(--pl-cor); border: 2px solid transparent; box-shadow: 0 0 0 1px var(--color-border); }
.pl-cor input:checked + .pl-cor-visual { border-color: var(--color-text); box-shadow: 0 0 0 2px var(--color-text); }
.pl-cor input:focus-visible + .pl-cor-visual { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* O valor da hora é a resposta que ele pediu: ganha o mesmo peso dos outros cartões, com borda. */
.pl-rel-hora { border-color: var(--color-primary); }
.pl-rel-turnos { border-top: 0; }
.pl-rel-locais li span { display: flex; flex-direction: column; gap: 0.05rem; }
.pl-rel-locais li span:last-child { text-align: right; }
.pl-rel-locais small { font-size: 0.75rem; font-weight: 400; color: var(--color-muted); }
.pl-rel-regra { font-size: 0.78rem; margin: 0.15rem 0 0.5rem; }

/* A lista do mês, que é onde o valor aparece por extenso. */
.pl-lista-painel { padding: 0.9rem 1rem; }
.pl-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.2rem; border: none; border-bottom: 1px solid var(--color-border); background: none; font: inherit; color: var(--color-text); cursor: pointer; text-align: left; }
.pl-item:hover { background: color-mix(in oklch, var(--color-primary) 5%, transparent); }
.pl-item-quando { flex: 0 0 auto; font-size: 0.85rem; color: var(--color-muted); min-width: 6.5rem; font-variant-numeric: tabular-nums; }
.pl-item-local { flex: 1 1 auto; }
.pl-item-valor { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-primary-dark); }
.pl-item-pago { color: var(--color-primary); }
.pl-selo { font-size: 0.72rem; background: var(--color-secondary); color: var(--color-primary-dark); border-radius: 0.3rem; padding: 0.05rem 0.35rem; }

/* A ficha. Modal simples, sem biblioteca. */
.pl-modal { position: fixed; inset: 0; background: color-mix(in oklch, var(--color-primary-dark) 55%, transparent); display: flex; align-items: flex-start; justify-content: center; padding: 1rem; overflow-y: auto; z-index: 60; }
.pl-modal-caixa { background: var(--color-panel); border-radius: 0.8rem; width: min(34rem, 100%); padding: 1rem 1.1rem 1.2rem; margin: auto; }
.pl-modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem; }
.pl-modal-topo h3 { margin: 0; }
.pl-form { display: flex; flex-direction: column; gap: 0.55rem; }
.pl-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.pl-pago { padding: 0.2rem 0; }
.pl-rec { border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.6rem 0.8rem 0.8rem; margin: 0.2rem 0 0; }
.pl-rec legend { font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; color: var(--color-primary-dark); padding: 0 0.3rem; }
.pl-rec-bloco { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pl-chip { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--color-border); border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.85rem; cursor: pointer; background: var(--color-panel); color: var(--color-text); }
.pl-chip:has(input:checked) { background: var(--color-primary); color: var(--color-panel); border-color: var(--color-primary); }
.pl-chip input { accent-color: var(--color-primary); }
.pl-rec-resumo { font-size: 0.85rem; color: var(--color-muted); margin: 0.5rem 0 0; line-height: 1.45; }

/* Valor da hora e tipos de plantão (2026-10-23). A conta fica embaixo do valor, em destaque, porque é o número salvo. */
.pl-conta { font-size: 0.9rem; font-weight: 600; color: var(--color-primary-dark); margin: -0.2rem 0 0; min-height: 1.2em; font-variant-numeric: tabular-nums; }
.pl-chips .pl-chip { white-space: nowrap; padding: 0.4rem 0.85rem; font-size: 0.9rem; }
.pl-chips .pl-chip input[type="radio"] { accent-color: var(--color-primary); width: auto; min-width: 0; height: auto; margin: 0; padding: 0; box-shadow: none; }
.pl-tipo-linha button { padding: 0.35rem 0.7rem; font-size: 0.85rem; }
.pl-item-hora { display: block; font-size: 0.72rem; font-weight: 400; color: var(--color-muted); text-align: right; }
.pl-rel-sub { font-size: 0.9rem; margin: 0.8rem 0 0.2rem; color: var(--color-primary-dark); }
.pl-tipos-ajuda { font-size: 0.85rem; margin: 0 0 0.6rem; line-height: 1.45; }
.pl-tipos-lista { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.7rem; }
.pl-tipo-linha { display: grid; grid-template-columns: 1fr 7.5rem 6.5rem auto; gap: 0.4rem; align-items: center; }
.pl-tipo-linha input, .pl-tipo-linha select { min-width: 0; }
.pl-tipo-btns { display: flex; gap: 0.3rem; }
.pl-tipo-novo { border-top: 1px solid var(--color-border); padding-top: 0.7rem; }

/* Agenda de plantões, 2026-10-23: adicionais do tipo, locais e pagamento, avisos de atraso e o líquido. */
.pl-tipo-cartao { display: flex; flex-direction: column; gap: 0.4rem; border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.55rem 0.6rem; }
.pl-tipo-cartao .pl-tipo-linha { grid-template-columns: 1fr 7.5rem 6.5rem; }
.pl-tipo-cartao.pl-tipo-novo { border-style: dashed; padding-top: 0.55rem; }
.pl-tipo-adic { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: end; gap: 0.4rem; font-size: 0.8rem; }
.pl-tipo-adic-rot { font-weight: 600; color: var(--color-primary-dark); padding-bottom: 0.35rem; }
.pl-tipo-adic label { display: flex; flex-direction: column; gap: 0.15rem; color: var(--color-muted); min-width: 0; }
/* os locais de um tipo (2026-10-23): uma caixinha por local da agenda */
.pl-tipo-locais { border: 1px solid var(--color-border, rgba(0,0,0,.12)); border-radius: 10px; padding: 0.4rem 0.6rem 0.5rem; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; min-width: 0; }
.pl-tipo-locais legend { font-weight: 600; color: var(--color-primary-dark); padding: 0 0.25rem; font-size: 0.8rem; }
.pl-tipo-locais .auth-check span { overflow-wrap: anywhere; }
.pl-tipo-adic input { width: 100%; min-width: 0; }
.pl-tipo-cartao .pl-tipo-btns { justify-content: flex-end; }
.pl-adic-regras { font-size: 0.85rem; margin: 0 0 0.7rem; border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.45rem 0.7rem; }
.pl-adic-regras summary { cursor: pointer; font-weight: 600; color: var(--color-primary-dark); }
.pl-adic-regras ul { margin: 0.45rem 0 0.1rem; padding-left: 1.1rem; line-height: 1.45; }
.pl-adic-regras li { margin-bottom: 0.25rem; }
.pl-adic-nota, .pl-previsto { font-size: 0.82rem; color: var(--color-muted); margin: -0.25rem 0 0; line-height: 1.4; }
.pl-previsto { color: var(--color-primary-dark); }
.pl-locais-lista { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.7rem; }
.pl-local-cartao { border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; }
.pl-local-nome { margin: 0; font-size: 0.98rem; color: var(--color-primary-dark); }
.pl-local-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; align-items: end; }
.pl-local-campos .pl-local-regra { grid-column: 1 / -1; }
.pl-local-campos .auth-field { margin-bottom: 0; font-size: 0.8rem; }
.pl-local-campos .auth-field input, .pl-local-campos .auth-field select { min-width: 0; padding: 0.45rem 0.55rem; }
.pl-local-resumo { font-size: 0.8rem; margin: 0; line-height: 1.4; }
.pl-local-cartao .pl-tipo-btns { justify-content: flex-end; }
.pl-local-novo { display: flex; gap: 0.4rem; border-top: 1px solid var(--color-border); padding-top: 0.7rem; }
.pl-local-novo input { flex: 1 1 auto; min-width: 0; }
.pl-avisos { padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.pl-aviso { border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: 0.6rem; padding: 0.55rem 0.8rem; }
.pl-aviso h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.pl-aviso ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pl-aviso p { margin: 0; font-size: 0.92rem; line-height: 1.4; }
.pl-aviso button { margin-top: 0.35rem; padding: 0.35rem 0.7rem; font-size: 0.85rem; white-space: normal; text-align: left; }
.pl-aviso-atraso { border-left-color: var(--color-alerta, #c0392b); background: var(--color-alerta-fundo, color-mix(in oklch, #c0392b 6%, var(--color-panel))); }
.pl-aviso-atraso h3 { color: var(--color-alerta, #a93226); }
.pl-aviso-breve { border-left-color: var(--color-atencao, #c9a227); }
.pl-selo-atraso { background: var(--color-alerta-fundo, #fbe3e0); color: var(--color-alerta, #a93226); border: 1px solid currentColor; }
.pl-rel-liq { font-size: 0.78rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.pl-rel-liquido .pl-rel-liq-total span:first-child { font-weight: 600; }
.pl-rel-liquido li span:first-child { flex: 1 1 auto; min-width: 0; }
.pl-rel-liquido li span:last-child { flex: 0 0 auto; }

@media (max-width: 560px) {
  .pl-cal { gap: 0.15rem; }
  .pl-cal-dia { min-height: 3rem; padding: 0.15rem; }
  .pl-cal-item { font-size: 0.6rem; }
  .pl-linha { grid-template-columns: 1fr; }
  .pl-item-quando { min-width: 5rem; }
  .pl-topo-btns { flex: 1 1 100%; }
  .pl-tipo-linha, .pl-tipo-cartao .pl-tipo-linha { grid-template-columns: 1fr 1fr; }
  .pl-tipo-linha input[name="nome"], .pl-tipo-novo #pl-tipo-nome { grid-column: 1 / -1; }
  .pl-local-campos { grid-template-columns: 1fr 1fr; }
  .pl-tipo-adic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-tipo-adic-rot { grid-column: 1 / -1; padding-bottom: 0; }
  .pl-local-campos .pl-local-regra { grid-column: 1 / -1; }
}

/* Nutrição e Suplementação dentro do Receituário (js/receituario-nutri.js) e lista de produtos
   da página Nutrição (js/nutricao.js). */
.rx-nutri-paciente { margin: 0.2rem 0 0.4rem; }
.rx-nutri-lista { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.4rem 0 0.8rem; }
.rx-nutri-prod { display: flex; align-items: flex-start; gap: 0.7rem; border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.55rem 0.7rem; }
.rx-nutri-prod.is-sel { border-color: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary) 25%, transparent); }
.rx-nutri-prod.is-off { opacity: 0.6; }
.rx-nutri-prod-txt { flex: 1; min-width: 0; font-size: 0.92rem; }
.rx-nutri-rotulo { font-size: 0.84rem; }
.rx-nutri-thumb, .nutri-produto-thumb { width: 48px; height: 48px; object-fit: contain; border-radius: 0.4rem; background: #fff; flex: none; }
.rx-nutri-selo { display: inline-block; font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 0.05rem 0.5rem; vertical-align: middle; }
.rx-nutri-selo-validado { background: #dcefe0; color: #1f5a2e; }
.rx-nutri-selo-revisao_pendente { background: #fbeacf; color: #6b4e12; }
.rx-nutri-selo-nao_validado { background: #eee; color: #555; }
.rx-nutri-selo-descontinuado { background: #f3d6d2; color: #7d1a12; }
.rx-nutri-sel { border-top: 1px solid var(--color-border); margin-top: 0.6rem; padding-top: 0.6rem; }
.nutri-produto { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.5rem; }
.nutri-produto-txt { flex: 1; min-width: 0; }
.nutri-add-receita { flex: none; font-size: 0.85rem; padding: 0.3rem 0.6rem; border-radius: 0.5rem; text-decoration: none; }
@media (max-width: 560px) {
  .rx-nutri-prod, .nutri-produto { flex-wrap: wrap; }
}

/* =========================================================================
   O VISUAL DA SIMULAÇÃO QUE O DONO APROVOU (2026-09-25)

   "atualmente o SPI está tudo muito monocromático, tudo muito azul. [...] achei que está
   interessante, pode aderir." E, vendo a primeira versão: "não tá nem próxima da print que eu
   mandei [...] Deixa igualzinho aquela outra lá."

   As medidas abaixo foram TIRADAS DA SIMULAÇÃO, não estimadas: a tela do celular dela tem
   704 px para 390 px de CSS, então cada medida é o pixel dela vezes 0,554, conferida numa
   imagem lado a lado (simulação x página) a 390x844. Quem for mexer, compare do mesmo jeito.

   A paleta é a mesma de antes (azul-petróleo e dourado da Oculoplástica); o dourado é o
   destaque (ícone, fio, estrela, a palavra que importa, o brilho no canto dos cartões).
   Os ganchos são classes novas (spi-header, spi-hero, home-quick-card, has-tabbar), para não
   mexer no desenho da loja, que reaproveita .home-hero e .hub-card.
   ========================================================================= */
:root {
  --spi-dourado: #f1ca71;
  --spi-dourado-fio: #cfb965;
  --spi-fio-teal: rgba(133, 133, 133, .38);
  --spi-tabbar-h: 72px;
}

/* Leitor de tela: texto que existe para quem ouve, e não para quem vê. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Fundo: azul-petróleo em degradê, mais claro no topo (não chapado) ---- */
body:has(header.spi-header) {
  background-color: #111111;
  background-image:
    radial-gradient(120% 60% at 50% 0%, rgba(35, 35, 35, .55) 0%, rgba(35, 35, 35, 0) 70%),
    linear-gradient(180deg, #181818 0%, #121212 40%, #101010 100%);
}

/* ---- Cabeçalho: menu redondo, marca em duas linhas, botão redondo à direita, fio dourado ---- */
header.app-header.spi-header {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: .75rem;
  min-height: 66px; padding: .55rem 1.25rem;
  background: linear-gradient(180deg, rgba(24, 24, 24, .96) 0%, rgba(20, 20, 20, .96) 100%);
  box-shadow: inset 0 -1px 0 var(--spi-dourado-fio);
}
header.app-header.spi-header .nav-toggle {
  grid-column: 1; margin: 0; width: 44px; height: 44px; border-radius: 50%; gap: 4px; padding: 0;
  border: 1px solid var(--spi-fio-teal); background: rgba(30, 30, 30, .45);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
header.app-header.spi-header .nav-toggle:hover { background: rgba(40, 40, 40, .6); border-color: rgba(241, 202, 113, .55); }
header.app-header.spi-header .nav-toggle span { width: 17px; height: 1.6px; background: #ececec; }
body.nav-open header.app-header.spi-header .nav-toggle span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
body.nav-open header.app-header.spi-header .nav-toggle span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
header.app-header.spi-header h1 { grid-column: 2; margin: 0; min-width: 0; justify-self: start; }
header.app-header.spi-header h1,
header.app-header.spi-header .header-home-link { display: flex; align-items: center; gap: .55rem; }
header.app-header.spi-header .header-actions { grid-column: 3; display: flex; align-items: center; gap: .5rem; }
header.app-header.spi-header .header-actions.hidden { display: none; }
header.app-header.spi-header .header-mark-img {
  width: 44px; height: 44px; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(120, 190, 170, .12), 0 4px 14px rgba(0, 0, 0, .35), 0 0 18px rgba(130, 130, 130, .12);
}
.header-brand { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.header-brand-nome { font-family: var(--font-display); font-weight: 600; font-size: 23px; letter-spacing: .01em; color: #fff; }
.header-brand-sub { font-family: var(--font-display); font-weight: 400; font-size: 9.8px; color: #dcdcdc; margin-top: 4px; white-space: nowrap; letter-spacing: -.005em; }
.header-atalho {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--spi-fio-teal); background: rgba(30, 30, 30, .45); color: #ececec;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.header-atalho svg { width: 21px; height: 21px; }
a.header-atalho:hover { border-color: rgba(241, 202, 113, .55); color: var(--spi-dourado); }
.header-atalho-vazio { border-color: transparent; background: none; box-shadow: none; }
/* O botão da loja: ícone de sacola; no computador leva "Ferramentas para médicos" junto (pílula). */
a.header-loja { width: auto; white-space: nowrap; padding: 0 .95rem 0 .8rem; gap: .4rem; border-radius: 999px; text-decoration: none; font-size: .9rem; font-weight: 600; }
a.header-loja:hover { border-color: rgba(241, 202, 113, .55); color: var(--spi-dourado); }
header.app-header.spi-header .nav-toggle:focus-visible,
a.header-atalho:focus-visible,
header.app-header.spi-header h1 a:focus-visible { outline: 2px solid var(--spi-dourado); outline-offset: 2px; }
/* No celular a marca vai para o centro, entre os dois botões redondos, como na simulação. */
@media (max-width: 899px) {
  header.app-header.spi-header { grid-template-columns: 44px minmax(0, 1fr) auto; padding: .55rem 13px; }
  /* no celular a loja é só o ícone redondo, ao lado do prontuário */
  a.header-loja { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
  a.header-loja .header-loja-txt { display: none; }
  header.app-header.spi-header .header-actions { gap: .4rem; }
  /* A marca da simulação fica um pouco à direita do centro exato (o logo é mais largo que o botão). */
  header.app-header.spi-header h1 { justify-self: center; padding-left: 18px; }
}
@media (max-width: 360px) {
  .header-brand-sub { font-size: 9.5px; }
  header.app-header.spi-header .header-mark-img { width: 38px; height: 38px; }
}

/* ---- Saudação ---- */
/* Na simulação o conteúdo da tela inicial encosta a 16px das bordas no celular (o main usa 24px). */

/* A bola da saudação deixou de ser a bolinha dourada com as iniciais (2026-10-16): agora é o símbolo do SPI
   (logotipo dourado) sobre preto, com fio dourado. Mesmo tamanho de antes (49px, 58px no computador), então
   nada se mexe em volta. */

/* ---- Cartão de destaque (carrossel) ---- */
.home-hero.spi-hero {
  margin: 23px 0 0; padding: 22px 25px 0; min-height: 183px; box-sizing: border-box; border-radius: 14px;
  background:
    radial-gradient(48% 70% at 100% 0%, rgba(222, 178, 88, .70) 0%, rgba(214, 170, 82, .22) 45%, rgba(214, 170, 82, 0) 100%),
    radial-gradient(60% 80% at 80% 60%, rgba(120, 100, 50, .18) 0%, rgba(120, 100, 50, 0) 70%),
    linear-gradient(160deg, #2a2a2a 0%, #1d1d1d 45%, #181818 100%);
  border: 1px solid rgba(109, 109, 109, .45);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .6);
  color: var(--color-text);
}
.home-hero.spi-hero::before { display: none; }
.spi-hero-slides { display: grid; position: relative; z-index: 1; }
.spi-hero-slide { grid-area: 1 / 1; max-width: 212px; visibility: hidden; opacity: 0; transition: opacity .3s ease; }
.spi-hero-slide.ativo { visibility: visible; opacity: 1; }
.home-hero.spi-hero h2 {
  font-family: var(--font-display); font-size: 21.5px; line-height: 25px; font-weight: 500; letter-spacing: -.005em;
  color: #fff; max-width: none; margin: 0 0 12px;
}
.home-hero.spi-hero h2 em { font-style: normal; font-weight: 700; color: var(--spi-dourado); display: block; }
.home-hero.spi-hero p { color: #aeaeae; font-size: 12.6px; line-height: 19.5px; margin: 0; }
/* A arte do destaque é o recorte da própria simulação aprovada; o fundo escuro do recorte
   some no degradê do cartão pelo modo "screen" (preto não soma nada, o dourado brilha). */
.spi-hero-arte {
  position: absolute; right: 4px; top: 7px; width: 128px; height: auto; z-index: 0;
  mix-blend-mode: screen; pointer-events: none; user-select: none; filter: brightness(1.18);
}
.spi-hero-pontos { display: flex; align-items: center; margin: -6px 0 -3px -11px; position: relative; z-index: 1; }
/* Cada pontinho é um alvo de toque de 44px (acessibilidade); por isso ficam um pouco mais
   afastados que na simulação, onde eram só enfeite. */
.spi-hero-ponto {
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; flex: none;
}
.spi-hero-ponto::before {
  content: ""; width: 13px; height: 3.5px; border-radius: 3px; background: #353535;
  transition: width .2s ease, background .2s ease;
}
.spi-hero-ponto[aria-current="true"]::before { width: 22px; background: var(--spi-dourado); }
.spi-hero-ponto:focus-visible { outline: 2px solid var(--spi-dourado); outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) { .spi-hero-slide, .spi-hero-ponto::before { transition: none; } }

/* ---- Busca grande, com o botão redondo de filtro à direita ---- */
.home-filtro {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(48, 48, 48, .9) 0%, rgba(33, 33, 33, .9) 100%); color: #ebebeb;
}
.home-filtro svg { width: 22px; height: 22px; }
.home-filtro:hover { color: var(--spi-dourado); }
.home-filtro:focus-visible { outline: 2px solid var(--spi-dourado); outline-offset: 1px; }

/* ---- Acesso rápido ---- */
.home-sec-estrela { color: var(--spi-dourado); font-size: 1.15em; }
.home-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 11px; }
@media (min-width: 900px) { .home-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/*
 * OS QUATRO CARTÕES DA SIMULAÇÃO: fundo azul-petróleo escuro que esquenta para um brilho
 * dourado no canto de cima à direita, borda dourada translúcida, sombra, ícone dourado grande,
 * título branco em negrito, subtítulo cinza-claro, seta branca e estrela dourada cheia.
 * O texto é claro sobre fundo escuro: branco sobre #171717 passa de 14:1.
 */
.home-quick .hub-card.home-quick-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr;
  align-items: end; gap: 0 4px; min-height: 102px; box-sizing: border-box;
  padding: 10px 12px 12px 18px; border-radius: 12px;
  background-color: #171717;
  background-image:
    radial-gradient(75% 85% at 100% 0%, rgba(206, 164, 78, .42) 0%, rgba(206, 164, 78, .12) 45%, rgba(206, 164, 78, 0) 75%),
    radial-gradient(60% 60% at 0% 0%, rgba(150, 125, 70, .16) 0%, rgba(150, 125, 70, 0) 70%),
    linear-gradient(165deg, #1d1d1d 0%, #171717 55%, #181818 100%);
  border: 1px solid rgba(190, 165, 100, .42);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 230, 170, .06);
}
.home-quick .hub-card.home-quick-card:hover { border-color: rgba(241, 202, 113, .7); transform: translateY(-1px); }
.home-quick .hub-card.home-quick-card:active { transform: translateY(1px) scale(.985); background-color: #121212; }
.home-quick .hub-card.home-quick-card:focus-visible {
  border-color: var(--spi-dourado);
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--spi-dourado);
}
.home-quick .hub-card.home-quick-card::after { display: none; }
.home-quick-card .hub-card-ico { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; color: var(--spi-dourado); margin: 0 0 2px -6px; }
.home-quick-card .hub-card-ico svg { width: 44px; height: 44px; stroke-width: 1.25; }
.home-quick-card:hover .hub-card-ico { color: var(--spi-dourado); }
.home-quick-txt { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* A seta acompanha o TÍTULO (centrada nele, como na simulação) e o subtítulo usa a largura toda. */
.home-quick-titulo { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.home-quick .home-quick-card .hub-card-label { color: #fff; font-weight: 600; font-size: 14px; line-height: 1.12; letter-spacing: -.005em; }
.home-quick-seta { display: inline-flex; justify-content: center; width: 12px; flex: none; color: #dedede; margin-right: 2px; }
.home-quick-seta svg { width: 20px; height: 20px; flex: none; stroke-width: 1.6; }
/* A estrela: cheia e dourada nos quatro, como na simulação. A marcada tem brilho total; a que
   está ali por ser do padrão fica um pouco mais apagada. O toque continua marcando e
   desmarcando, e o estado exato vai para o leitor de tela (aria-pressed). */
.home-quick .fav-star { top: -2px; right: -3px; width: 44px; height: 44px; color: var(--spi-dourado); opacity: .72; }
.home-quick .fav-star.on { opacity: 1; }
.home-quick .fav-star svg { width: 19px; height: 19px; fill: currentColor; stroke-width: 1.2; }
.home-quick .fav-star:hover { background: transparent; opacity: 1; }
.hub-card-wrap .fav-star { width: 44px; height: 44px; top: .1rem; right: .1rem; }
.home-quick .hub-card-wrap .fav-star { top: -2px; right: -3px; }
.fav-star:focus-visible { outline: 2px solid var(--spi-dourado); outline-offset: -4px; }

/* ---- Barra inferior do celular ---- */
.home-tabbar {
  z-index: 80; padding: 4px 6px calc(10px + env(safe-area-inset-bottom, 0px)); min-height: var(--spi-tabbar-h); box-sizing: border-box;
  background: linear-gradient(180deg, #1a1a1a 0%, #141414 100%);
  border-top: 1px solid rgba(115, 115, 115, .30);
  border-radius: 16px 16px 0 0; box-shadow: 0 -10px 28px -14px rgba(0, 0, 0, .85);
  align-items: flex-start;
}
.home-tabbar button {
  position: relative; min-height: 56px; justify-content: center; gap: 3px;
  color: #ababab; font-size: 11px; font-weight: 400; border-radius: .7rem;
}
.home-tabbar .tab-ico svg { width: 23px; height: 23px; stroke-width: 1.55; }
.home-tabbar button:first-child { color: #ababab; }
.home-tabbar button[aria-current="page"] { color: var(--spi-dourado); }
.home-tabbar button[aria-current="page"]::after {
  content: ""; position: absolute; bottom: -3px; left: 50%; width: 49px; height: 2px; margin-left: -24.5px;
  border-radius: 2px; background: var(--spi-dourado);
}
.home-tabbar button:hover { color: #fff; }
.home-tabbar button[aria-current="page"]:hover { color: var(--spi-dourado); }
.home-tabbar button:focus-visible { outline: 2px solid var(--spi-dourado); outline-offset: -3px; }
/*
 * FORA DA HOME A BARRA VAI NO BODY, e ele reserva o espaço dela. Sem isto a última linha de
 * cada tela (e o rodapé) ficaria por baixo da barra. O que já era fixo ou grudado no rodapé
 * sobe a mesma altura: o botão do copiloto da Central de Conteúdo e a barra de ações do
 * formulário de escala.
 */
@media (max-width: 899px) {
  body.has-tabbar { padding-bottom: calc(var(--spi-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar .ct-cop-fab { bottom: calc(var(--spi-tabbar-h) + 1rem + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar .ct-cop-painel { bottom: calc(var(--spi-tabbar-h) + 4.4rem + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar .form-toolbar { bottom: calc(var(--spi-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  /* Na home a barra mora dentro do hub; quando ele está à vista, o rodapé da página (que fica
     fora do hub) também precisa do espaço, senão os links legais ficam por baixo da barra. */
  body:has(#view-app-root:not(.hidden) #view-hub:not(.hidden) #home-tabbar) {
    padding-bottom: calc(var(--spi-tabbar-h) + env(safe-area-inset-bottom, 0px));
  }
  #view-hub { padding-bottom: 1rem; }
  /*
   * O QUE ABRE POR CIMA FICA POR CIMA DA BARRA (2026-10-15, revisão do celular a pedido do dono:
   * "Nessa repaginação aí sua, já olha tudo isso daí, as funções e tudo"). As janelas da agenda, do
   * financeiro e do prontuário, a ficha do plantão e o índice da psicofarmacologia ficavam numa
   * camada abaixo da barra (80): o Salvar e o último campo sumiam embaixo dela, e um toque em Início
   * saía da tela no meio do formulário. No celular elas sobem acima da barra, e a janela cabe na
   * altura que o celular mostra de verdade (dvh, sem a barra de endereço). O aviso que aparece
   * embaixo (e-mail, WhatsApp pessoal) e o da IA de gestão também sobem, acima da barra.
   */
  .pr-modal-backdrop, .pl-modal, .ps-indice { z-index: 85; }
  .pr-modal { max-height: 90dvh; }
  body.has-tabbar .wz-toast { bottom: calc(var(--spi-tabbar-h) + .8rem + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar .gestor-ia-aviso { bottom: calc(var(--spi-tabbar-h) + .75rem + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 900px) { .home-tabbar { display: none; } body.has-tabbar { padding-bottom: 0; } }
@media print { .home-tabbar, .header-atalho { display: none !important; } body.has-tabbar { padding-bottom: 0; } }

/* =====================================================================================
   O VISUAL NOVO NO SITE INTEIRO (2026-09-25)

   O dono, depois de ver o visual novo só na tela inicial do celular: "no PC continua aquele
   azul igual [...] todas as outras caixas de baixo continuam azul normal [...] eh pra expandir
   pra TUDO, o site inteiro, as outras paginas tbm, layout todo renovado, os botoes pequenos
   tbm, dentro do prontuario, os menores, todos com detalhes em dourado, caixa mais flutuante,
   enfim, padroniza tudo".

   O QUE ESTE BLOCO FAZ: leva a linguagem dos quatro cartões do Acesso rápido (o bloco de cima,
   "O VISUAL DA SIMULAÇÃO") para cada COMPONENTE do SPI, e não página a página:

     - caixas e cartões: degradê azul-petróleo escuro que esquenta para um brilho dourado no
       canto de cima à direita, borda dourada translúcida, sombra suave, cantos de 16px;
     - botões: primário dourado com texto escuro; secundário e os pequenos com contorno dourado
       fino sobre fundo translúcido, e dourado no passar do mouse e no toque;
     - abas e filtros: pílulas com contorno dourado, a ativa cheia de dourado;
     - campos: borda fina clara, foco dourado;
     - tabelas, separadores, details/summary, menu lateral, cabeçalhos de seção: fio dourado.

   ONDE ELE NÃO ENTRA, e é regra:
     - NA LOJA (body.loja-body), que reaproveita esta folha e tem desenho próprio de caixa. Por
       isso todo seletor daqui começa por :where(body:not(.loja-body)), que não soma
       especificidade: a regra vence por vir depois, e não por ser mais forte.
     - NO PAPEL. O bloco inteiro está em @media screen, então a impressão é a de sempre. E os
       documentos que o js/doc-pdf.js fotografa NA TELA (receita, atestado, laudo, plano,
       materiais: .laudo-doc, .plano-doc, .print-area, .mp-folha) ficam fora dos seletores de
       campo e tabela, e continuam brancos com o layout de papel.

   Contraste: todo fundo daqui tem uma cor sólida escura por baixo do degradê
   (--spi-card-cor), que é a que o tests/tema-legivel.test.js mede. O brilho dourado é fraco o
   bastante para o cinza-claro dos textos secundários continuar acima de 4,5 também no canto.
   ===================================================================================== */
:root {
  --spi-card-cor: #181818;
  --spi-card-brilho:
    radial-gradient(360px 230px at 100% 0%, rgba(206, 164, 78, .24) 0%, rgba(206, 164, 78, .08) 45%, rgba(206, 164, 78, 0) 78%),
    radial-gradient(260px 200px at 0% 0%, rgba(150, 125, 70, .10) 0%, rgba(150, 125, 70, 0) 70%),
    linear-gradient(165deg, #1e1e1e 0%, #171717 55%, #181818 100%);
  --spi-card-borda: rgba(196, 168, 98, .36);
  --spi-card-borda-forte: rgba(241, 202, 113, .72);
  --spi-card-sombra: 0 12px 26px -14px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 230, 170, .06);
  --spi-card-raio: 16px;
  /* caixa DENTRO de caixa (resultado, célula, bloco de texto): sem sombra, só o fio */
  --spi-sub-cor: #171717;
  --spi-sub-brilho: linear-gradient(165deg, rgba(37, 37, 37, .55) 0%, rgba(20, 20, 20, .35) 100%);
  --spi-sub-borda: rgba(196, 168, 98, .26);
  /* pílula, aba e botão secundário */
  --spi-pilula-cor: #1a1a1a;
  --spi-pilula-borda: rgba(207, 185, 101, .5);
  --spi-pilula-texto: #f2ead9;
  /* o dourado cheio: botão primário, aba ativa, filtro ativo */
  --spi-ouro: #efc766;
  --spi-ouro-grad: linear-gradient(180deg, #f8dc92 0%, #efc766 55%, #e7ba56 100%);
  --spi-tinta-escura: #1e1e1e;
  /* campo */
  --spi-campo-cor: #101010;
  --spi-campo-borda: rgba(232, 232, 232, .22);
}

@media screen {

/* ---------------------------------------------------------------- caixas e cartões --- */
:where(body:not(.loja-body)) :is(
  .card, .scale-card, .tema-card, .lia-sug-card, .pr-escala-pick, .dia-row, .ag-item,
  .laudo-tipo-card, .nutri-card, .hub-acc, .home-continue, .doc-item, .ct-card, .ct-porta,
  .ps-res, .ps-familia, .ps-secao, .fluxo-ferramenta, .tnd-salvas, .pl-rel-cartao,
  .fin-sum-card, .calc-result, .calc-ref-content, .result-total-box, .pr-patient-card,
  .home-q-results, .home-search-box, .pl-modal-caixa, .ct-cop-painel, .av-paciente, .gaso-placar,
  .rx-calc, .escriba-panel, .pu-panel, .anot-panel, .case-item
) {
  background-color: var(--spi-card-cor);
  background-image: var(--spi-card-brilho);
  border: 1px solid var(--spi-card-borda);
  border-radius: var(--spi-card-raio);
  box-shadow: var(--spi-card-sombra);
  color: var(--color-text);
}
/* O que se clica (cartão de paciente, de escala, de tema, item da agenda) levanta e acende. */
:where(body:not(.loja-body)) :is(
  .scale-card, .tema-card, .lia-sug-card, .pr-escala-pick, .dia-row, .ag-item, .laudo-tipo-card,
  .nutri-card, .home-continue, .doc-item, .ct-card, .ps-res, .fluxo-ferramenta, .pl-rel-cartao,
  .pr-patient-card, .pr-consulta-item, .case-item
) {
  transition: border-color .18s ease, box-shadow .2s ease, transform .15s ease;
}
:where(body:not(.loja-body)) :is(
  .scale-card, .tema-card, .lia-sug-card, .pr-escala-pick, .dia-row, .ag-item, .laudo-tipo-card,
  .nutri-card, .home-continue, .doc-item, .ct-card, .ps-res, .fluxo-ferramenta, .pl-rel-cartao,
  .pr-patient-card, .pr-consulta-item, .case-item
):hover {
  border-color: var(--spi-card-borda-forte);
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .8), 0 0 0 1px rgba(241, 202, 113, .12);
  transform: translateY(-1px);
}
:where(body:not(.loja-body)) :is(
  .scale-card, .tema-card, .pr-escala-pick, .dia-row, .ag-item, .laudo-tipo-card, .nutri-card,
  .home-continue, .doc-item, .ps-res, .fluxo-ferramenta, .pr-patient-card, .case-item
):active { transform: translateY(1px) scale(.99); }
/* Os cartões da lista de materiais: a capa creme é a miniatura do papel, e fica; o que muda é o
   cartão em volta dela. Seletor mais forte porque materiais.css carrega depois desta folha. */
:where(body:not(.loja-body)) button.mp-cartao {
  background-color: var(--spi-card-cor);
  background-image: var(--spi-card-brilho);
  border: 1px solid var(--spi-card-borda);
  border-radius: var(--spi-card-raio);
  box-shadow: var(--spi-card-sombra);
}
:where(body:not(.loja-body)) button.mp-cartao:hover { border-color: var(--spi-card-borda-forte); }
/* Os modificadores de cobertura do paciente continuam com a faixa à esquerda. */
:where(body:not(.loja-body)) .pr-patient-card.pr-cob-plano { border-left: 4px solid #B0894A; }
:where(body:not(.loja-body)) .pr-patient-card.pr-cob-nao_cobrado { border-left: 4px solid #9aa0a6; }
:where(body:not(.loja-body)) .hub-acc.hub-group-urg { border-left: 3px solid var(--color-accent); }
:where(body:not(.loja-body)) .pr-patient-name,
:where(body:not(.loja-body)) .scale-card-name,
:where(body:not(.loja-body)) .nutri-card-title,
:where(body:not(.loja-body)) .tema-card-title,
:where(body:not(.loja-body)) .ag-item-name,
:where(body:not(.loja-body)) .dia-row-title { color: #fff; font-weight: 600; }

/* Caixa dentro de caixa: o fio dourado, sem sombra (sombra em cima de sombra vira borrão). */
:where(body:not(.loja-body)) :is(
  .rx-result, .ct-item, .ps-cartao, .chk-content, .pu-content, .foto-res-cell, .des-score-box,
  .cre-res-box, .dev-dom, .gaso-num, .tox-sinal, .tnd-hip, .tnd-crit, .ag-cal-day, .pl-cal-dia,
  .ct-cal-cel, .escriba-preview, .generated-link-box, .exam-mini, .des-vol, .des-fase, .vac-meta-in
) {
  background-color: var(--spi-sub-cor);
  background-image: var(--spi-sub-brilho);
  border-color: var(--spi-sub-borda);
}
:where(body:not(.loja-body)) :is(.rx-result, .ag-cal-day, .pl-cal-dia, .ct-cal-cel):hover {
  border-color: var(--spi-card-borda-forte);
}
:where(body:not(.loja-body)) .rx-result { border-radius: 12px; }
/* O dia escolhido no calendário da agenda é dourado cheio, como a aba ativa. */
:where(body:not(.loja-body)) .ag-cal-day.ag-cal-sel {
  background-color: var(--spi-ouro); background-image: var(--spi-ouro-grad);
  border-color: var(--spi-ouro); color: var(--spi-tinta-escura);
  box-shadow: 0 6px 16px -8px rgba(241, 202, 113, .6);
}
:where(body:not(.loja-body)) .fin-sum-card.fin-sum-bal { border-color: var(--spi-card-borda-forte); }

/* --------------------------------------------- tela inicial: "Explorar tudo" e "Continuar" --- */
:where(body:not(.loja-body)) .hub-acc { overflow: hidden; }
:where(body:not(.loja-body)) .hub-acc-head { min-height: 56px; }
:where(body:not(.loja-body)) .hub-acc-title { color: #fff; font-size: 1rem; }
:where(body:not(.loja-body)) .hub-acc-count {
  color: var(--spi-dourado); background: rgba(241, 202, 113, .12); border: 1px solid rgba(241, 202, 113, .35);
}
:where(body:not(.loja-body)) .hub-acc-chev { color: var(--spi-dourado); }
:where(body:not(.loja-body)) .hub-acc-body { border-top: 1px solid rgba(196, 168, 98, .2); padding-top: .9rem; }
/* Os cartões de dentro de cada categoria: a mesma placa do Acesso rápido, em tamanho menor. */
:where(body:not(.loja-body)) .hub-card:not(.home-quick-card) {
  background-color: var(--spi-card-cor);
  background-image:
    radial-gradient(75% 85% at 100% 0%, rgba(206, 164, 78, .30) 0%, rgba(206, 164, 78, .08) 45%, rgba(206, 164, 78, 0) 75%),
    linear-gradient(165deg, #1d1d1d 0%, #171717 55%, #181818 100%);
  border: 1px solid var(--spi-card-borda);
  border-radius: 14px;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 230, 170, .06);
  min-height: 104px;
}
:where(body:not(.loja-body)) .hub-card:not(.home-quick-card):hover {
  border-color: var(--spi-card-borda-forte);
  box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .8);
}
:where(body:not(.loja-body)) .hub-card:not(.home-quick-card):active {
  background-color: #121212; border-color: var(--spi-card-borda-forte);
}
:where(body:not(.loja-body)) .hub-card:not(.home-quick-card)::after { background: var(--spi-dourado); }
:where(body:not(.loja-body)) .hub-card:not(.home-quick-card) .hub-card-ico,
:where(body:not(.loja-body)) .hub-card:not(.home-quick-card):hover .hub-card-ico { color: var(--spi-dourado); }
:where(body:not(.loja-body)) .hub-card:not(.home-quick-card) .hub-card-ico svg { width: 30px; height: 30px; stroke-width: 1.4; }
:where(body:not(.loja-body)) .hub-card:not(.home-quick-card) .hub-card-label { color: #fff; font-weight: 600; font-size: .98rem; }
:where(body:not(.loja-body)) .hub-group-urg .hub-card:not(.home-quick-card) .hub-card-ico { color: var(--color-accent); }
:where(body:not(.loja-body)) .hub-acc .fav-star { color: rgba(241, 202, 113, .6); }
:where(body:not(.loja-body)) .hub-acc .fav-star.on { color: var(--spi-dourado); }
:where(body:not(.loja-body)) .hub-acc .fav-star.on svg { fill: var(--spi-dourado); }
:where(body:not(.loja-body)) .home-continue { padding: 1rem 1.1rem; }
:where(body:not(.loja-body)) .home-cont-ico {
  background: rgba(241, 202, 113, .08); border: 1px solid rgba(241, 202, 113, .35); color: var(--spi-dourado);
}
:where(body:not(.loja-body)) .home-cont-txt strong { color: #fff; }
:where(body:not(.loja-body)) .home-cont-arrow { color: var(--spi-dourado); }
:where(body:not(.loja-body)) #view-hub .hub-grid > h2,

/* --------------------------------------------------------------------------- botões --- */
:where(body:not(.loja-body)) :is(button.primary, a.primary) {
  background-color: var(--spi-ouro);
  background-image: var(--spi-ouro-grad);
  color: var(--spi-tinta-escura);
  border: 1px solid rgba(255, 226, 150, .9);
  font-weight: 600;
  box-shadow: 0 8px 18px -10px rgba(241, 202, 113, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: filter .15s ease, transform .12s ease, box-shadow .2s ease;
}
:where(body:not(.loja-body)) :is(button.primary, a.primary):hover { opacity: 1; filter: brightness(1.06); box-shadow: 0 10px 22px -10px rgba(241, 202, 113, .8), inset 0 1px 0 rgba(255, 255, 255, .4); }
:where(body:not(.loja-body)) :is(button.primary, a.primary):active { transform: translateY(1px); filter: brightness(.96); }
:where(body:not(.loja-body)) :is(button.primary, a.primary):disabled { filter: saturate(.4) brightness(.8); cursor: not-allowed; }
/* O secundário e TODOS os botões pequenos de ação (Editar cadastro, Arquivar, Exportar, a
   seta do calendário, o "Escolher" da nutrição): contorno dourado fino sobre fundo translúcido. */
:where(body:not(.loja-body)) :is(button.secondary, a.secondary, .nav-voltar, .doc-editor-btn, .ct-reap-btn, .ct-cop-acao, .ct-botao-link, .privacy-note button) {
  background-color: var(--spi-pilula-cor);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(0, 0, 0, .10) 100%);
  color: var(--spi-pilula-texto);
  border: 1px solid var(--spi-pilula-borda);
  box-shadow: 0 4px 12px -8px rgba(0, 0, 0, .8);
  transition: border-color .15s ease, color .15s ease, background-color .15s ease, transform .12s ease;
}
:where(body:not(.loja-body)) :is(button.secondary, a.secondary, .nav-voltar, .doc-editor-btn, .ct-reap-btn, .ct-cop-acao, .ct-botao-link, .privacy-note button):hover {
  border-color: var(--spi-dourado);
  color: var(--spi-dourado);
  background-color: #202020;
}
:where(body:not(.loja-body)) :is(button.secondary, a.secondary, .nav-voltar, .doc-editor-btn):active { transform: translateY(1px); background-color: #121212; }
:where(body:not(.loja-body)) :is(button.secondary, a.secondary):disabled { opacity: .55; cursor: not-allowed; }
:where(body:not(.loja-body)) .nav-voltar svg { color: var(--spi-dourado); }
/* O de apagar continua com cara de perigo: contorno avermelhado, e não dourado. */
:where(body:not(.loja-body)) :is(button.pr-danger, .secondary.pr-danger) { border-color: rgba(240, 161, 153, .55); color: #f5c1ba; }
:where(body:not(.loja-body)) :is(button.pr-danger, .secondary.pr-danger):hover { border-color: var(--color-high); color: #ffd9d3; background-color: rgba(240, 120, 100, .12); }
/* Botão sem classe dentro do conteúdo (ex.: "Limpar todos os dados" das escalas). */
:where(body:not(.loja-body)) main button:not([class]):not(.home-tabbar button) {
  background-color: var(--spi-pilula-cor); color: var(--spi-pilula-texto);
  border: 1px solid var(--spi-pilula-borda); border-radius: var(--radius-pill);
  padding: .5rem 1.05rem; cursor: pointer; font: inherit;
}
:where(body:not(.loja-body)) main button:not([class]):not(.home-tabbar button):hover { border-color: var(--spi-dourado); color: var(--spi-dourado); }
/* Botões só de ícone e links que fazem papel de botão (Esconder, estrela, fechar). */
:where(body:not(.loja-body)) :is(.pr-ret-dobrar, .home-search-close, .nav-close):hover { color: var(--spi-dourado); }
:where(body:not(.loja-body)) .fav-star:hover { background: rgba(241, 202, 113, .1); color: var(--spi-dourado); }

/* --------------------------------------------------------------- abas, filtros e chips --- */
:where(body:not(.loja-body)) :is(
  .pr-tab, .pt-tab, .tox-tab, .ps-aba, button.mp-aba, .temas-pill, .pr-filtro, .atb-chip, .lab-chip,
  .exam-chip, .vac-chip, .pl-chip, .ct-chip, .anot-tool, .gaso-ferramenta, .legal-sumario a, .ed-arquivo
) {
  background-color: var(--spi-pilula-cor);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, rgba(0, 0, 0, .08) 100%);
  border: 1px solid var(--spi-pilula-borda);
  color: var(--spi-pilula-texto);
  border-radius: var(--radius-pill);
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
:where(body:not(.loja-body)) :is(
  .pr-tab, .pt-tab, .tox-tab, .ps-aba, button.mp-aba, .temas-pill, .pr-filtro, .atb-chip, .lab-chip,
  .exam-chip, .vac-chip, .pl-chip, .ct-chip, .anot-tool, .gaso-ferramenta, .legal-sumario a, .ed-arquivo
):hover {
  border-color: var(--spi-dourado);
  color: var(--spi-dourado);
}
/* A ATIVA: dourado cheio com texto escuro (mais de 9:1). Repetida aqui porque a regra de cima,
   vindo depois, venceria a ativa de cada componente. */
:where(body:not(.loja-body)) :is(
  .pr-tab-active, .pt-tab-active, .tox-tab-active, button.mp-aba.is-active, .temas-pill.is-active,
  .pr-filtro-ativo, .atb-chip-on, .lab-chip-on, .exam-chip.on, .vac-chip.is-active,
  .pl-chip:has(input:checked), .anot-tool-active, .ct-chip-on, [role="tab"][aria-selected="true"].ps-aba
),
:where(body:not(.loja-body)) :is(
  .pr-tab-active, .pt-tab-active, .tox-tab-active, button.mp-aba.is-active, .temas-pill.is-active,
  .pr-filtro-ativo, .atb-chip-on, .lab-chip-on, .exam-chip.on, .vac-chip.is-active,
  .pl-chip:has(input:checked), .anot-tool-active, .ct-chip-on
):hover {
  background-color: var(--spi-ouro);
  background-image: var(--spi-ouro-grad);
  border-color: var(--spi-ouro);
  color: var(--spi-tinta-escura);
  font-weight: 600;
  box-shadow: 0 6px 16px -8px rgba(241, 202, 113, .6);
}
:where(body:not(.loja-body)) .pr-tabs { gap: .5rem; }

/* Selos e etiquetas pequenas: pílula com fio dourado. */
:where(body:not(.loja-body)) :is(.nutri-card-tag, .srch-chip) {
  background-color: rgba(241, 202, 113, .08); border: 1px solid rgba(241, 202, 113, .3); color: #efe3c6;
}

/* --------------------------------------------------------------------------- campos --- */
:where(body:not(.loja-body)) :is(input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"])), select, textarea):where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha) *)) {
  background-color: var(--spi-campo-cor);
  border-color: var(--spi-campo-borda);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:where(body:not(.loja-body)) :is(input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])), select, textarea):where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha) *)):hover {
  border-color: rgba(241, 202, 113, .45);
}
:where(body:not(.loja-body)) :is(input, select, textarea):where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha) *)):focus-visible {
  border-color: var(--spi-dourado);
  box-shadow: 0 0 0 3px rgba(241, 202, 113, .22);
}
:where(body:not(.loja-body)) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--spi-dourado); }

/* ------------------------------------------------------ details, tabelas e separadores --- */
:where(body:not(.loja-body)) details:where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha) *)) > summary { cursor: pointer; }
:where(body:not(.loja-body)) details:where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha) *)) > summary::marker { color: var(--spi-dourado); }
:where(body:not(.loja-body)) details:where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha) *)) > summary:hover { color: var(--spi-dourado); }
:where(body:not(.loja-body)) :is(.ps-secao) > summary::after { color: var(--spi-dourado); }
:where(body:not(.loja-body)) main table:where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha) *)) th {
  color: var(--spi-dourado);
  border-bottom: 1px solid rgba(241, 202, 113, .4);
}
:where(body:not(.loja-body)) main table:where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha) *)) td {
  border-bottom-color: rgba(196, 168, 98, .18);
}
:where(body:not(.loja-body)) hr:where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha) *)) {
  border: 0; height: 1px;
  background: linear-gradient(90deg, rgba(241, 202, 113, 0), rgba(241, 202, 113, .55) 20%, rgba(241, 202, 113, .55) 80%, rgba(241, 202, 113, 0));
}

/* ----------------------------------------------------- cabeçalhos de seção e títulos --- */
:where(body:not(.loja-body)) .section-head-ico {
  background: radial-gradient(circle at 70% 25%, rgba(241, 202, 113, .22) 0%, rgba(241, 202, 113, .04) 70%), #1a1a1a;
  border: 1px solid rgba(241, 202, 113, .5);
  color: var(--spi-dourado);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8);
}
:where(body:not(.loja-body)) .section-head-ico svg { stroke-width: 1.5; }
:where(body:not(.loja-body)) .hub-group-title { color: var(--spi-dourado); }

/* ----------------------------------------------------------------- modais e busca --- */
:where(body:not(.loja-body)) .pr-modal-backdrop { background: rgba(8, 8, 8, .66); backdrop-filter: blur(2px); }
:where(body:not(.loja-body)) .pr-modal { border-color: var(--spi-card-borda-forte); }
:where(body:not(.loja-body)) :is(.srch-item, .home-search-item):hover { background: rgba(241, 202, 113, .08); }
:where(body:not(.loja-body)) .srch-ico { color: var(--spi-dourado); }

/* --------------------------------------------------------------------- menu lateral --- */
:where(body:not(.loja-body)) .nav-drawer {
  background: linear-gradient(180deg, #1a1a1a 0%, #131313 55%, #0e0e0e 100%);
  border-right: 1px solid rgba(207, 185, 101, .45);
  box-shadow: 18px 0 40px -18px rgba(0, 0, 0, .85);
}
:where(body:not(.loja-body)) .nav-drawer-head {
  background: linear-gradient(180deg, #1a1a1a 0%, #161616 100%);
  border-bottom: 1px solid rgba(207, 185, 101, .45);
}
:where(body:not(.loja-body)) .nav-group { color: var(--spi-dourado); opacity: .9; }
:where(body:not(.loja-body)) .nav-ico { color: rgba(241, 202, 113, .75); }
:where(body:not(.loja-body)) .nav-link:hover { background: rgba(241, 202, 113, .08); color: #fff; }
:where(body:not(.loja-body)) .nav-link:hover .nav-ico { color: var(--spi-dourado); }
:where(body:not(.loja-body)) .nav-link-active {
  background: linear-gradient(90deg, rgba(241, 202, 113, .16) 0%, rgba(241, 202, 113, .03) 100%);
  border-left-color: var(--spi-dourado);
}
:where(body:not(.loja-body)) .nav-link-active .nav-ico { color: var(--spi-dourado); }
:where(body:not(.loja-body)) .nav-overlay { background: rgba(8, 8, 8, .6); }

/* O cabeçalho do paciente no celular: nome em cima, com o fio dourado, e os botões pequenos em
   fileira embaixo (antes a coluna de botões espremia o nome em cinco linhas). */
@media (max-width: 560px) {
  :where(body:not(.loja-body)) .pr-patient-header { flex-direction: column; gap: .8rem; }
  :where(body:not(.loja-body)) .pr-patient-header > div:first-child {
    width: 100%; padding-bottom: .7rem; border-bottom: 1px solid rgba(241, 202, 113, .3);
  }
  :where(body:not(.loja-body)) .pr-patient-header-actions { width: 100%; }
}

/* -------------------------------------------- alvos de toque de 44px no celular --- */
@media (max-width: 899px) {
  :where(body:not(.loja-body)) :is(button.primary, button.secondary, .pr-tab, .pt-tab, .tox-tab, .ps-aba,
    button.mp-aba, .temas-pill, .pr-filtro, .atb-chip, .lab-chip, .exam-chip, .vac-chip, .nav-voltar,
    .hub-acc-head, main button:not([class]):not(.home-tabbar button)) { min-height: 44px; }
  :where(body:not(.loja-body)) :is(a.primary, a.secondary) {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ------------------------------------------ a tela inicial no COMPUTADOR, igual à do celular --- */
/*
 * No computador a home tinha a mesma coluna estreita do celular esticada até 860px, e o
 * destaque ficava com a arte pequena no canto de um cartão largo. Aqui ela ganha uma coluna
 * mais larga, o destaque cresce na mesma proporção da simulação, e o "Explorar tudo" vira
 * grade de cartões flutuantes em mais colunas.
 */
@media (min-width: 900px) {
  .home-hero.spi-hero { min-height: 280px; padding: 40px 48px 0; border-radius: 20px; margin-top: 28px; }
  .spi-hero-slide { max-width: 520px; }
  .home-hero.spi-hero h2 { font-size: 36px; line-height: 42px; margin-bottom: 16px; }
  .home-hero.spi-hero p { font-size: 16px; line-height: 25px; }
  /* A arte traz o próprio halo (é recorte da simulação): encostada na borda e com as beiradas
     esmaecidas, o retângulo dela não aparece contra o brilho do cartão largo. */
  .spi-hero-arte {
    width: 250px; right: 0; top: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%);
    mask-image: linear-gradient(to right, transparent 0, #000 28%);
  }
  .spi-hero-pontos { margin: 10px 0 4px -11px; }
  .home-quick { gap: 16px; margin-top: 14px; }
  .home-quick .hub-card.home-quick-card { min-height: 150px; padding: 16px 16px 18px 22px; border-radius: 16px; }
  .home-quick-card .hub-card-ico svg { width: 52px; height: 52px; }
  .home-quick .home-quick-card .hub-card-label { font-size: 17px; }
  :where(body:not(.loja-body)) #view-hub .hub-cards:not(.home-quick) { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
  :where(body:not(.loja-body)) .home-continue { padding: 1.15rem 1.3rem; }
}

} /* fim do @media screen */

/* Aviso de PDF sem assinatura digital (js/aviso-assinatura.js, B9 da análise de 01/10/2026).
   Na tela: faixa discreta junto dos botões de imprimir/enviar. No documento: nota pequena no fim,
   que sai no PDF (o médico pode apagar, o documento é editável). */
.aviso-assinatura { margin: .5rem 0 .75rem; padding: .5rem .75rem; font-size: .85rem; line-height: 1.4;
  border-left: 3px solid #b8860b; background: rgba(184, 134, 11, .1); border-radius: 4px; }
.aviso-assinatura-doc { margin-top: 1.5rem; padding-top: .5rem; border-top: 1px solid #bbb; font-size: 9pt;
  line-height: 1.35; color: #555; }

/* Area do SPI (2026-10-04): os roteiros da especialidade no formulario da consulta. */
.pr-esp-roteiros { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .8rem; }
.pr-esp-roteiros button { font-size: .85rem; padding: .3rem .7rem; }
.pr-esp-sep { flex-basis: 100%; height: 0; }
/* Fichas estruturadas da especialidade (js/especialidade-fichas.js) */
.fx-dialogo { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 1px solid var(--line, #ccc); border-radius: 12px; padding: 1rem 1.2rem; }
.fx-dialogo::backdrop { background: rgba(0, 0, 0, .45); }
.fx-form h3 { margin: 0 0 .6rem; }
.fx-grupo { border: 1px solid var(--line, #ddd); border-radius: 10px; padding: .5rem .8rem .7rem; margin: 0 0 .7rem; }
.fx-grupo legend { font-weight: 600; padding: 0 .3rem; }
.fx-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .3rem .8rem; }
.fx-par { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; grid-column: 1 / -1; }
.fx-multi { border: 0; padding: 0; margin: 0; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.fx-multi legend { font-size: .9rem; padding: 0; margin-bottom: .2rem; }
.fx-check { font-size: .9rem; display: inline-flex; gap: .3rem; align-items: center; }
.fx-fonte { font-size: .8rem; }

/* Calculadoras do adulto (2026-10-04): resultado em texto para copiar */
.ca-saida { white-space: pre-wrap; font-family: inherit; font-size: 0.95rem; margin: 0 0 0.75rem; }

/* =========================================================================
   VERDE DE VOLTA E BOTÕES MAIS BAIXOS (2026-10-05)

   O dono, mandando uma simulação: "Eu queria mudar um pouco a identidade visual do SPI, algo
   parecido com isso [...] um botão um pouquinho menor do que é atualmente para caber mais coisa
   na tela [...] Mantém o escuro, mas coloca um pouquinho de verde de volta."

   O que muda, só na tela (a impressão continua branca) e fora da loja:
     - o chão e os cartões CONTINUAM PRETOS. Na primeira versão deste bloco tudo foi puxado para o
       verde e o dono reprovou: "Tá tudo verde. Eu gosto do fundo preto. [...] O fundo é preto e
       tem alguns detalhes verde." O verde fica SO nos detalhes: a plaquinha do icone e o
       cartao de destaque do topo;
     - Acesso rápido: ícone à esquerda, texto ao lado (o cartão fica ~25% mais baixo);
     - Explorar tudo: cada ferramenta vira uma linha compacta (ícone + nome), duas por linha no
       celular, e cabe quase o dobro na tela.
   Apagar este bloco devolve o visual anterior inteiro.
   ========================================================================= */
@media screen {
body:not(.loja-body) {
  /* Cores medidas na print do dono (média de 9x9 px): plaquinha #0b3432, destaque #052223 a
     #071415. É um petróleo quase ciano e bem fundo; a primeira versão (#15433a) era verde demais. */
  --spi-verde-placa: linear-gradient(160deg, #0e3b39 0%, #0a2e2c 100%);
  --spi-verde-placa-borda: rgba(70, 150, 142, .24);
}
/* O destaque: verde-petróleo com o brilho dourado no canto, como na simulação. */
.home-hero.spi-hero {
  background:
    radial-gradient(48% 70% at 100% 0%, rgba(222, 178, 88, .55) 0%, rgba(214, 170, 82, .16) 45%, rgba(214, 170, 82, 0) 100%),
    radial-gradient(70% 90% at 75% 65%, rgba(11, 48, 46, .55) 0%, rgba(11, 48, 46, 0) 70%),
    linear-gradient(160deg, #06292a 0%, #071a1b 50%, #061314 100%);
  border-color: rgba(196, 168, 98, .38);
}

/* A plaquinha verde do ícone (Acesso rápido e Explorar tudo). */
.home-quick-card .hub-card-ico,
:where(body:not(.loja-body)) .hub-card:not(.home-quick-card) .hub-card-ico {
  flex: none; border-radius: 11px; background: var(--spi-verde-placa);
  border: 1px solid var(--spi-verde-placa-borda); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* Na urgência a plaquinha é bronze, como na print (#302d20): o verde fica para o consultório. */
:where(body:not(.loja-body)) .hub-group-urg .hub-card:not(.home-quick-card) .hub-card-ico {
  background: linear-gradient(160deg, #36321f 0%, #2a2618 100%); border-color: rgba(196, 168, 98, .28);
}

/* Acesso rápido: ícone à esquerda, título e subtítulo ao lado, seta e estrela à direita. */
.home-quick .hub-card.home-quick-card {
  grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; align-items: center;
  gap: 0 11px; min-height: 76px; padding: 12px 12px 12px 12px;
}
.home-quick-card .hub-card-ico { grid-column: 1; grid-row: 1; align-self: center; margin: 0; width: 46px; height: 46px; }
.home-quick-card .hub-card-ico svg { width: 25px; height: 25px; stroke-width: 1.5; }
.home-quick-txt { grid-column: 2; grid-row: 1; padding-right: 22px; }
/* A seta sai do lado do título e vai para o canto de baixo, como na simulação: o título usa a
   largura toda e não disputa espaço com a estrela. */
.home-quick .hub-card.home-quick-card { position: relative; }
.home-quick-seta { position: absolute; right: 9px; bottom: 11px; }
.home-quick .home-quick-card .hub-card-label { font-size: 13.5px; }

/* Explorar tudo: linha compacta, duas por linha no celular. */
:where(body:not(.loja-body)) #view-hub .hub-cards:not(.home-quick) { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .55rem; }
:where(body:not(.loja-body)) .hub-card:not(.home-quick-card) {
  flex-direction: row; align-items: center; gap: .5rem; min-height: 58px;
  padding: .5rem 1.1rem .5rem .5rem; border-radius: 12px;
}
:where(body:not(.loja-body)) .hub-card:not(.home-quick-card) .hub-card-ico { width: 34px; height: 34px; border-radius: 9px; }
:where(body:not(.loja-body)) .hub-card:not(.home-quick-card) .hub-card-ico svg { width: 20px; height: 20px; stroke-width: 1.6; }
:where(body:not(.loja-body)) .hub-card:not(.home-quick-card) .hub-card-label { font-size: .78rem; line-height: 1.2; min-width: 0; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; }
:where(body:not(.loja-body)) .hub-card:not(.home-quick-card)::after { left: .6rem; right: .6rem; bottom: .3rem; }
:where(body:not(.loja-body)) .hub-acc .hub-card-wrap .fav-star { top: 0; right: 0; width: 32px; height: 32px; }
:where(body:not(.loja-body)) .hub-acc .fav-star svg { width: 13px; height: 13px; }
:where(body:not(.loja-body)) .hub-acc-body { padding-top: .7rem; }
@media (max-width: 899px) {
  :where(body:not(.loja-body)) .hub-acc-body { padding-left: .5rem; padding-right: .5rem; padding-bottom: .6rem; }
  :where(body:not(.loja-body)) #view-hub .hub-cards:not(.home-quick) { gap: .45rem; }
}

@media (min-width: 900px) {
  .home-quick .hub-card.home-quick-card { min-height: 92px; padding: 14px 16px; border-radius: 16px; }
  .home-quick-card .hub-card-ico { width: 54px; height: 54px; }
  .home-quick-card .hub-card-ico svg { width: 28px; height: 28px; }
  .home-quick .home-quick-card .hub-card-label { font-size: 16px; }
  :where(body:not(.loja-body)) #view-hub .hub-cards:not(.home-quick) { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; }
  :where(body:not(.loja-body)) .hub-card:not(.home-quick-card) { min-height: 66px; }
  :where(body:not(.loja-body)) .hub-card:not(.home-quick-card) .hub-card-label { font-size: .92rem; }
}
}

/* Gerador de planos (2026-10-05): as consultas do plano, uma por linha, com Remover e Adicionar. */
.pl-cons { margin: .6rem 0 1rem; }
.pl-cons h4 { margin: 0 0 .4rem; }
.pl-cons-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.pl-cons-item { display: flex; gap: .4rem; align-items: center; }
.pl-cons-item input { flex: 1 1 auto; min-width: 0; }
.pl-cons-item button { flex: none; }
.pl-cons-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: .4rem 0 .6rem; }
.pl-cons-add .auth-field { flex: 1 1 200px; margin: 0; }
.pl-desconto { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 .3rem; font-weight: 600; cursor: pointer; }
.pl-desconto input { width: 1.2rem; height: 1.2rem; }
.pl-cons-campo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.pl-cons-livre input { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .8; }
.pl-cons-tag { font-size: .75rem; color: var(--color-accent); font-weight: 600; }
.pl-cons-rm { background: none; border: 0; color: var(--color-muted); text-decoration: underline; cursor: pointer; padding: .3rem; font: inherit; font-size: .85rem; }
.pl-cons-rm:disabled { opacity: .4; cursor: default; }
.pl-cons-cobrar { padding: .35rem .8rem; font-size: .85rem; min-height: 36px; }
@media (max-width: 600px) {
  .pl-cons-item { flex-wrap: wrap; padding-bottom: .35rem; border-bottom: 1px solid var(--color-border); }
  .pl-cons-campo { flex-basis: 100%; }
  .pl-cons-cobrar { margin-left: auto; }
}
/* Aviso do portal pelo WhatsApp do SPI, no prontuario (2026-10-06) */
.pr-portal-aviso { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--color-border); }
.pr-portal-aviso textarea { width: 100%; box-sizing: border-box; font: inherit; }

/* ===== OS PLANOS DO SPI (2026-10-10, js/planos-spi.js) =====
   O que fica acima do plano da conta aparece com cadeado e o nome do plano; o clique abre o aviso
   de upgrade. A tela aberta pelo endereço mostra o mesmo aviso no lugar do conteúdo. */
.plano-selo {
  display: inline-flex; align-items: center; gap: .25rem; margin-left: .4rem; padding: .1rem .45rem;
  border: 1px solid color-mix(in oklch, var(--color-gold) 60%, transparent); border-radius: 999px;
  background: color-mix(in oklch, var(--color-gold) 12%, transparent); color: var(--color-gold-deep, var(--color-gold));
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3; white-space: nowrap; vertical-align: middle;
}
.plano-selo svg { width: 11px; height: 11px; flex: none; }
.plano-trancado { opacity: .78; }
.plano-trancado:hover { opacity: 1; }
.hub-card.plano-trancado .plano-selo { margin-left: 0; align-self: flex-start; }
.pr-tab.plano-trancado .plano-selo { margin-left: .3rem; }

.plano-up-fundo {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(15, 20, 18, .55); backdrop-filter: blur(2px);
}
.plano-up {
  position: relative; width: 100%; max-width: 30rem; max-height: calc(100vh - 2rem); overflow: auto;
  padding: 1.5rem 1.4rem 1.2rem; border-radius: 1.1rem; background: var(--color-panel); color: var(--color-text);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5); border-top: 3px solid var(--color-gold);
}
.plano-up h2, .plano-portao h2 { margin: .3rem 0 .4rem; font-size: 1.3rem; line-height: 1.2; }
.plano-up-fechar {
  position: absolute; top: .6rem; right: .7rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: transparent; color: var(--color-muted); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.plano-up-fechar:hover { background: color-mix(in oklch, var(--color-text) 8%, transparent); }
.plano-up-sobrancelha {
  display: inline-flex; align-items: center; gap: .35rem; margin: 0; color: var(--color-gold-deep, var(--color-gold));
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.plano-up-sobrancelha svg { width: 14px; height: 14px; }
.plano-up-cartao {
  position: relative; display: flex; flex-direction: column; margin-top: 1rem; padding: 1.1rem 1.1rem 1rem;
  border: 1px solid var(--color-border); border-radius: .95rem; background: var(--color-bg, #fff);
}
.plano-up-destaque { border-color: color-mix(in oklch, var(--color-gold) 65%, var(--color-border)); box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-gold) 30%, transparent); }
.plano-up-seu {
  align-self: flex-start; margin: 0 0 .4rem; padding: .12rem .55rem; border-radius: 999px;
  background: var(--color-primary); color: #fff; font-size: .7rem; font-weight: 700;
}
.plano-up-nome { margin: 0; font-weight: 800; font-size: 1.05rem; color: var(--color-primary-dark, var(--color-text)); }
.plano-up-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35rem; margin: .35rem 0 .2rem; font-variant-numeric: tabular-nums; }
.plano-up-preco strong { font-size: 1.55rem; }
.plano-up-preco small { flex-basis: 100%; color: var(--color-muted); font-size: .8rem; }
.plano-up-tudo { margin: .5rem 0 .2rem; font-size: .85rem; font-weight: 600; }
.plano-up-cartao ul { margin: .2rem 0 .9rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.plano-up-cartao li { position: relative; padding-left: 1.2rem; font-size: .88rem; line-height: 1.45; }
.plano-up-cartao li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-gold-deep, var(--color-gold)); font-weight: 800; }
.plano-up-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin: auto 0 0; }
.plano-up-acoes a { flex: 1 1 8rem; text-align: center; text-decoration: none; }
.plano-up-comparar { margin: .9rem 0 0; text-align: center; font-size: .88rem; }
.plano-portao { max-width: 34rem; margin: 1.2rem auto; border-top: 3px solid var(--color-gold); }
.as-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; }
.as-planos .plano-up-cartao { margin-top: 0; }
/* Os quatro planos na página de venda (2026-10-10): quatro colunas no computador, duas no tablet. */
@media (min-width: 1100px) { .plan-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan-anual { display: block; margin-top: .55rem; text-align: center; font-size: .88rem; font-weight: 600; color: var(--color-primary); }

/* =====================================================================================
   A IDENTIDADE NOVA (2026-10-11). O dono mandou o quadro da marca: o logotipo "SPi" dourado
   sobre preto, com "Soluções Profissionais Integradas em Saúde" embaixo. images/logo-mark.png
   passou a ser o logotipo (largo, 242x96), então a marca deixa de ser um quadrado recortado e a
   palavra "SPI" ao lado some: o próprio logotipo já diz SPI.
   ===================================================================================== */
.header-mark-img,
header.app-header.spi-header .header-mark-img {
  width: auto; height: 30px; aspect-ratio: 483 / 203; border-radius: 0; object-fit: contain; box-shadow: none;
}
header.app-header.spi-header .header-brand-nome { display: none; }
header.app-header.spi-header .header-brand-sub { margin-top: 0; color: #cfc8b8; letter-spacing: .04em; }
.nav-drawer-title .header-mark-img { width: auto; height: 1.35rem; border-radius: 0; }
@media (max-width: 360px) {
  header.app-header.spi-header .header-mark-img { width: auto; height: 26px; }
}

/* O LOGOTIPO NÃO PODE SUBIR NO MENU (2026-10-12). No celular a marca ia para o centro, mas o
   logotipo largo com o significado ao lado é mais largo que o espaço do meio: centralizada, ela
   transbordava para os dois lados e encostava no botão do menu. O dono: "a logo do SPI está
   encostando um pouco, subindo um pouquinho em cima do menu hambúrguer". No celular ela começa
   logo depois do menu, e o significado quebra em duas linhas em vez de vazar. */
@media (max-width: 899px) {
  header.app-header.spi-header h1 { justify-self: start; padding-left: 0; max-width: 100%; overflow: hidden; }
  header.app-header.spi-header .header-brand-sub { white-space: normal; font-size: 9px; line-height: 1.2; max-width: 9.5rem; }
}


/* =====================================================================================
   TELA CHEIA NO COMPUTADOR, EM TODAS AS TELAS DO SPI (2026-10-15).

   O dono: "vc arrumou ontem a pagina do SPI inicial, deixando ela pegando tela inteira no PC e
   tudo mais... eu percebi que vc fez essa repaginacao apenas na inicial. eu gostaria que vc
   fizesse em todas as paginas [...] faca a repaginacao de tela cheia em todo SPI, e no celular
   otimize da maneira que der e ficar otimo!!!!"

   O QUE MUDA, e só do 1200px para cima:
     - o <main> de toda tela que carrega js/nav.js deixa a coluna de 860px e ocupa a largura;
     - (2026-10-19) o menu ao lado/em cima saiu: o menu é um só, o do cabeçalho, que abre por cima
       (css/casca.css e js/nav.js); nada de coluna fixa;
     - listas, grades, quadros e painéis usam a largura; texto corrido e formulário de uma coluna
       guardam uma medida de leitura confortável DENTRO da tela larga (mais abaixo).

   POR QUE O SELETOR É body:has(> script[src^="js/nav.js"]): é exatamente "tela logada do SPI" —
   a loja (loja/*.html) usa style.css mas carrega ../js/nav.js, que não casa, e as páginas
   públicas não carregam o menu. E vale desde o primeiro desenho, sem esperar o JavaScript: a
   tela não nasce estreita para depois pular.

   O PAPEL NÃO MUDA: tudo aqui está dentro de @media screen. Receita, laudo, escala e ficha
   impressos continuam saindo exatamente como antes (as travas de impressão medem isso).

   FICAM DE FORA as telas que já são tela cheia por conta própria e têm a sua coluna de navegação (o
   E-mail e o WhatsApp pessoal, body.wz-pagina, css/crm-spi.css) e os modos de tela inteira de uma
   atividade (a observação de atenção visual, body.av-em-atividade; o Cérebro aberto, body.cb-tela-cheia).
   ===================================================================================== */

@media screen and (min-width: 1200px) {
  /* ---- os itens do menu: os mesmos da home (vieram de css/home-spi.css) ---- */

  /* ---- a casca: o main ocupa a tela ---- */
  body:has(> script[src^="js/nav.js"]):not(.wz-pagina):not(.av-em-atividade):not(.cb-tela-cheia) > main:not(:has(#view-hub)) {
    max-width: none; box-sizing: border-box; position: relative;
    padding: 1.5rem 2rem 2.5rem; min-height: calc(100vh - 66px);
  }
  /* Sem coluna de menu ao lado desde 2026-10-19 (o menu único abre por cima, css/casca.css): o
     conteúdo começa na margem de 2rem, sem reserva de espaço para a coluna antiga. */
  /* EM CIMA: a barra com as áreas, presa no alto ao rolar */
  /* a troca ao lado/em cima, dentro do próprio menu */
}
/* A BARRA DE ÁREAS EM NOTEBOOK (2026-10-16). Em cima passou a ser o padrão da tela inicial (a coluna ao
   lado não nasce mais aberta no Mac), e entre 1200 e 1399px "Gestão e relacionamento" saía da caixa dela.
   Nessa faixa a letra fica do mesmo tamanho; encolhem só o espaço entre as letras e o recuo das laterais. */


/* ---------------------------------------------------------------- prontuário: meninas e meninos ---
   O dono: "pode pintar de leve tbm as meninas a caixinha de rosa, dos meninos de azul". Um véu leve
   da cor sobre o cartão escuro (fundo SÓLIDO por baixo, que é o que tests/tema-legivel.test.js mede)
   e o fio da borda na mesma cor; sem sexo, o cartão fica como sempre. Sexo presumido pelo nome
   (ficha da Carla): mesma cor, borda tracejada. No tema claro (a cópia da loja), o rosa e o azul
   claros de sempre, com o texto escuro. Só na tela: o papel não tem cartão de paciente. */
@media screen {
  :where(body:not(.loja-body)) .pr-patient-card.pr-sexo-f {
    background-color: #2a1822;
    background-image: linear-gradient(165deg, rgba(244, 114, 182, .16) 0%, rgba(244, 114, 182, .07) 60%, rgba(244, 114, 182, .04) 100%);
    border-color: rgba(244, 114, 182, .55);
  }
  :where(body:not(.loja-body)) .pr-patient-card.pr-sexo-m {
    background-color: #17202c;
    background-image: linear-gradient(165deg, rgba(96, 165, 250, .17) 0%, rgba(96, 165, 250, .07) 60%, rgba(96, 165, 250, .04) 100%);
    border-color: rgba(96, 165, 250, .55);
  }
  :where(body:not(.loja-body)) .pr-patient-card.pr-sexo-f:hover { border-color: rgba(249, 168, 212, .9); }
  :where(body:not(.loja-body)) .pr-patient-card.pr-sexo-m:hover { border-color: rgba(147, 197, 253, .9); }
  :where(body:not(.loja-body)) .pr-patient-card.pr-sexo-f .pr-patient-meta { color: #f3d3e3; }
  :where(body:not(.loja-body)) .pr-patient-card.pr-sexo-m .pr-patient-meta { color: #cfe0f5; }
  body.loja-body .pr-patient-card.pr-sexo-f { background: #fdeef5; border-color: #f2a7c9; color: #3b1328; }
  body.loja-body .pr-patient-card.pr-sexo-m { background: #ecf4fe; border-color: #9cc3f2; color: #0f2a4a; }
  .pr-patient-card.pr-sexo-palpite { border-style: dashed; }
  /* a faixa do plano continua à esquerda, por cima da cor do sexo */
  :where(body:not(.loja-body)) .pr-patient-card.pr-cob-plano.pr-sexo-f,
  :where(body:not(.loja-body)) .pr-patient-card.pr-cob-plano.pr-sexo-m { border-left: 4px solid #B0894A; }

  .pr-ordem { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; font-size: .85rem; color: var(--color-muted); }
  .pr-ordem select { font: inherit; font-size: .85rem; padding: .32rem .6rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-panel); color: var(--color-text); min-height: 0; }
  .pr-lista-grupo { grid-column: 1 / -1; margin: .6rem 0 -.2rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .pr-lista-grupo-f { color: #f9a8d4; }
  .pr-lista-grupo-m { color: #93c5fd; }
  .pr-lista-grupo-x { color: var(--color-muted); }
  body.loja-body .pr-lista-grupo-f { color: #9d174d; }
  body.loja-body .pr-lista-grupo-m { color: #1e40af; }
}
@media screen and (max-width: 899px) {
  .pr-ordem { margin-left: 0; width: 100%; }
  .pr-ordem select { flex: 1; min-height: 44px; }
}

/* ------------------------------------------------- nenhuma palavra partida nas caixas (2026-10-15) ---
   O dono: "nao quebre as palavras nas caixas, ficha de reanimacao quebra reanimacao e calendario
   vacinal tbm quebra.. veja todas que quebram e escreva de uma maneira que nao quebra. agenda de
   plantoes tbm quebra". A causa era a hifenização automática (hyphens: auto) e o overflow-wrap:
   anywhere nos rótulos dos cartões, que partiam "reanima-ção" e "Psicofarmac-ologia" para caber
   num cartão estreito. Agora o rótulo só quebra ENTRE palavras, e é o desenho que abre espaço:
     - celular (até 599px): o ícone sobe e o nome usa a largura inteira do cartão, nos atalhos do
       Acesso rápido e no Explorar tudo; a letra do nome desce um pouco no aparelho mais estreito;
     - o "/" de "(prematuro/síndromes)" vira ponto de quebra (js/nav.js, rotulo()).
   tests/tela-cheia.test.js mede palavra por palavra (cada uma numa linha só, dentro da caixa) em
   1920, 1366, 768, 390 e 360px. */
@media screen {
  :where(body:not(.loja-body)) :is(.hub-card-label, .home-quick-sub, .home-menu-itens a > span, .nav-link > span) {
    hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal;
  }
}
@media screen and (max-width: 599px) {
  .home-quick .hub-card.home-quick-card {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: end;
    gap: 6px 4px; min-height: 104px; padding: 10px 12px 12px 13px;
  }
  .home-quick-card .hub-card-ico { grid-column: 1; grid-row: 1; align-self: start; width: 40px; height: 40px; }
  .home-quick-card .hub-card-ico svg { width: 22px; height: 22px; }
  .home-quick-txt { grid-column: 1 / -1; grid-row: 2; padding-right: 16px; }
  .home-quick .home-quick-card .hub-card-label { font-size: 13.5px; line-height: 1.18; }
}
/* o Explorar tudo empilha até o tablet (a 768px, quatro colunas estreitas também partiam o nome) */
@media screen and (max-width: 899px) {
  :where(body:not(.loja-body)) .hub-card:not(.home-quick-card) {
    flex-direction: column; align-items: flex-start; gap: .4rem; padding: .55rem .5rem .6rem .6rem;
  }
  :where(body:not(.loja-body)) .hub-card:not(.home-quick-card) .hub-card-label { letter-spacing: -.01em; }
}
@media screen and (max-width: 374px) {
  .home-quick .home-quick-card .hub-card-label { font-size: 12.5px; }
  :where(body:not(.loja-body)) .hub-card:not(.home-quick-card) .hub-card-label { font-size: .74rem; }
  :where(body:not(.loja-body)) .hub-acc-body { padding-left: .35rem; padding-right: .35rem; }
}

/* ---------------------------------------------------------------- a caixa do CRM (crm-caixa.html) ---
   2026-10-15, o dono: "tudo que eh referennte a CRM deve estar dentro da caixa do CRM". Os cartões na
   cor da área Gestão (verde-água, a mesma do menu), um por ferramenta, com o nome inteiro e uma linha
   do que ela faz. Celular: um por linha; computador: quantos couberem. */
.cx-topo h2 { margin: .2rem 0 .3rem; }
.cx-topo p { margin: 0 0 1rem; max-width: 70ch; }
.cx-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.cx-cartao {
  --g: #43c9b5;
  display: flex; align-items: flex-start; gap: .85rem; min-height: 88px; box-sizing: border-box;
  padding: 1rem 1.05rem; border-radius: 16px; text-decoration: none; color: var(--color-text);
  background-color: #141a19;
  background-image: linear-gradient(150deg, rgba(67, 201, 181, .13) 0%, rgba(19, 19, 21, 0) 60%);
  border: 1px solid rgba(67, 201, 181, .32);
  transition: border-color .18s ease, box-shadow .18s ease, transform .15s ease;
}
.cx-cartao:hover { border-color: rgba(67, 201, 181, .75); box-shadow: 0 14px 34px -16px rgba(67, 201, 181, .5); transform: translateY(-1px); }
.cx-cartao:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.cx-cartao-ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--g); background: rgba(67, 201, 181, .12); border: 1px solid rgba(67, 201, 181, .34);
}
.cx-cartao-ico svg { width: 22px; height: 22px; }
.cx-cartao-txt { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.cx-cartao-nome { font-weight: 700; font-size: 1rem; color: #fff; line-height: 1.25; hyphens: manual; overflow-wrap: normal; word-break: normal; }
.cx-cartao-desc { font-size: .84rem; line-height: 1.4; color: #b9c7c4; }
@media screen and (max-width: 599px) {
  .cx-cartoes { grid-template-columns: 1fr; gap: .6rem; }
  .cx-cartao { min-height: 0; }
}

/* ---------------------------------------------------------------- configurações da conta (conta.html) --- */
.conta-titulo { margin: .2rem 0 1rem; }
.conta-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 1rem; align-items: start; }
.conta-bloco h3 { margin: 0 0 .7rem; }
.conta-dados { display: grid; grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr); gap: .45rem 1rem; margin: 0 0 .9rem; }
.conta-dados dt { color: var(--color-muted); font-size: .86rem; }
.conta-dados dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.conta-nota { font-size: .84rem; margin: .4rem 0 .8rem; }
.conta-atalho { display: inline-flex; align-items: center; text-decoration: none; }
.conta-acoes { display: flex; gap: .6rem; flex-wrap: wrap; }
.conta-esqueci { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--color-border); }
#ct-senha-form .auth-field { max-width: 26rem; }
@media screen and (max-width: 480px) {
  .conta-dados { grid-template-columns: 1fr; gap: .1rem; }
  .conta-dados dd { margin-bottom: .45rem; }
  .conta-acoes .primary, .conta-esqueci .secondary, .conta-atalho { width: 100%; justify-content: center; }
}

/* Endereços e nomes técnicos longos (referências dos protocolos, passos da conexão do WhatsApp) podem
   quebrar em qualquer ponto: são links e códigos, não nomes de caixa, e sem isso estouravam a tela no
   celular (2026-10-15). */
@media screen { .prot-refs, .wa-passos { overflow-wrap: anywhere; } }

/* ------------------------------------------------ alvos de toque de 44px no celular, em toda tela ---
   2026-10-15 ("no celular otimize da maneira que der e ficar otimo"). A regra de cima já cobria os
   botões principais; a varredura a 390px achou o resto abaixo de 44px: campos e listas de escolha
   (38px), os botões de chip e de exemplo (27 a 37px), os dias do calendário editorial (36px) e os
   "abrir/fechar" (summary, 23 a 27px). Fica de fora o deslizante (type=range), a estrela de favorito
   (ela fica em cima do cartão, que é o alvo grande) e caixa de marcar, cujo alvo é o rótulo. */
@media screen and (max-width: 899px) {
  :where(body:not(.loja-body)) main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="color"]), select) {
    min-height: 44px; box-sizing: border-box;
  }
  :where(body:not(.loja-body)) main button:not(.fav-star):not(.home-menu-titulo) { min-height: 44px; }
  :where(body:not(.loja-body)) main summary { min-height: 44px; box-sizing: border-box; align-content: center; }
}

/* A MEDIDA DE LEITURA DENTRO DA TELA LARGA (2026-10-15). A tela usa a largura toda, mas um parágrafo
   corrido de 1500px cansa o olho: o texto dos painéis e cartões para em 110 caracteres por linha.
   Listas, grades, quadros, tabelas e campos continuam usando a largura (só o <p> direto do painel tem
   o limite). Fora dele o parágrafo centralizado de propósito (style com text-align), que continua igual. */
@media screen and (min-width: 1200px) {
  body:has(> script[src^="js/nav.js"]) > main :is(.panel, .card, .crm-bloco, .cx-topo) > p:not([style*="text-align"]) { max-width: 110ch; }
}

/* Entre 900 e 1199px (tablet deitado, notebook pequeno) o menu ao lado não cabe, mas a coluna de 860px
   também deixava faixa vazia dos dois lados: a tela usa a largura, e o menu continua no ☰. */
@media screen and (min-width: 900px) and (max-width: 1199px) {
  body:has(> script[src^="js/nav.js"]):not(.wz-pagina):not(.av-em-atividade):not(.cb-tela-cheia) > main:not(:has(#view-hub)) { max-width: none; padding-left: 2rem; padding-right: 2rem; }
}

/* as telas de tela cheia própria e os modos de atividade não levam o menu do computador (ver acima) */

/*
 * LETRA ESCURA SOBRE DOURADO, SEMPRE (2026-10-15). O dono: "os botoes amarelos com escrito branco no
 * SPI nao ta rolando... nao da pra ver o escrito" e "sao os botoes". No tema escuro --color-primary e
 * --color-accent viraram dourado claro, e estes componentes ainda punham texto branco por cima (abaixo
 * de 2:1). A mesma regra das abas e chips ativos lá de cima: dourado cheio, tinta escura.
 */
body:not(.loja-body) :is(
  .wa-abas button.wa-aba-atual, .wa-badge, .wa-status-conectado, .wa-esperando, .wa-chip-atual,
  .plan-badge, .chat-user .chat-bubble, .ct-vis-tira-atual, .rx-conferir-tag,
  .lp2-portal-tabs .lp2-portal-tab-on, .pr-ret-vencido, .plano-up-seu, .exam-chip.on
) {
  color: var(--spi-tinta-escura);
}
body:not(.loja-body) :is(.wa-abas button.wa-aba-atual, .wa-badge, .wa-status-conectado, .wa-esperando, .wa-chip-atual) :is(span, strong, small) {
  color: inherit;
}

/*
 * LETRA DE COMPUTADOR NO COMPUTADOR (2026-10-15). O dono: "algumas paginas ainda estao pequenas no PC [...]
 * ta parecendo um celular na tela do PC" e "vc manteve os escritos pequenos como se fosse a pagina de
 * celular, e so alargou a pagina pros lados". Medido em todas as telas do SPI a 1440px: o texto do meio da
 * página estava em 14,4px, a mesma letra do celular. Na tela de computador (só na tela: a impressão não
 * muda), o rem passa a valer 18px, e tudo o que é medido em rem cresce junto, na mesma proporção.
 *
 * FICAM DE FORA, de propósito: as telas de documento (receita, exames, laudos, atestados, encaminhamentos,
 * modelos, orientações de alta, reconhecidas pelo script da própria tela, sem mexer no HTML delas), porque o dono: "NAO EH PRA MEXER NO
 * TAMANHO DE LETRAS DE RECEITAS E OUTRAS COISAS [...] laudos exames, n mexe nisso nao q ta bao"; e a loja
 * (body.loja-body), que tem o desenho dela.
 */
/*
 * NO CELULAR, UM POUCO MAIOR TAMBÉM (2026-10-15, a revisão do celular; o dono, antes: "tem que aparecer mais,
 * vc escreve muito pequeno no site"). Medido a 390px: o texto do meio de várias telas estava entre 12,5 e 14px.
 * Até 699px o rem vale 17px nas mesmas telas (as de documento e a loja de fora, como no computador).
 */
@media screen and (max-width: 699px) {
  :root:has(> body:not(.loja-body)):not(:has(#rx-app, #at-view, script:is([src="js/exames-page.js"], [src="js/laudos.js"],
    [src="js/encaminhamentos-page.js"], [src="js/modelos-especialidade.js"], [src="js/orientacoes.js"]))) { font-size: 17px; }
}
/* Na tela inicial do celular, o nome das áreas do "Escolher os atalhos" um pouco maior. (As legendas
   de 10,5px dos atalhos antigos saíram com a tela inicial nova: o atalho agora é só o nome.) */
@media screen and (max-width: 699px) {
  :where(body:not(.loja-body)) .hub-card:not(.home-quick-card) .hub-card-label { font-size: .82rem; }
  .ps-familia-classes { font-size: .8rem; }
}
/* Datas em português: só a primeira letra maiúscula ("Quinta-feira, 15 de outubro de 2026"). O
   capitalize de antes deixava "15 De Outubro De 2026". */
:is(.dia-data, .ag-day-title, .ag-cal-title)::first-letter { text-transform: uppercase; }
/* Título de página com ícone: no celular o título longo quebra em 2 ou 3 linhas e o ícone ficava
   no meio da altura, solto; agora ele acompanha a primeira linha. */
@media screen and (max-width: 599px) {
  .section-head { align-items: flex-start; }
  .section-head h2 { line-height: 1.25; }
}
/*
 * NO NOTEBOOK, A LETRA CRESCE COM A TELA (2026-10-15). O dono: "pelo notebook ta tudo saindo das caixas
 * os escritos". Os 18px fixos a partir de 1100px eram do monitor grande; no notebook (1280 a 1536px,
 * com o menu ao lado) as caixas ficavam estreitas para eles. Agora o rem vai de 16px em 1100px até
 * 18px em 1600px ou mais, junto com a largura: 1280 dá 16,7; 1366 dá 17,1; 1440 dá 17,4.
 */
@media screen and (min-width: 1100px) {
  :root:has(> body:not(.loja-body)):not(:has(#rx-app, #at-view, script:is([src="js/exames-page.js"], [src="js/laudos.js"],
    [src="js/encaminhamentos-page.js"], [src="js/modelos-especialidade.js"], [src="js/orientacoes.js"]))) { font-size: clamp(16px, calc(16px + (100vw - 1100px) * 0.004), 18px); }
  /* com a letra maior, os cartões do "Explorar tudo" ganham largura em rem: "Psicofarmacologia" e
     "Encaminhamentos" cabem inteiros (tests/tela-cheia.test.js, palavras partidas ou fora da caixa) */
  :where(body:not(.loja-body)) #view-hub .hub-cards:not(.home-quick) { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
}

/* Operação da clínica: mesmos dados no CRM e na Equipe; sem depender só de arrastar. */
.crm-operacao { min-width: 0; font-family:var(--font-sans,"Segoe UI",Arial,sans-serif); }
.crm-op-topo, .crm-op-filtros, .crm-op-fila header { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.crm-op-metricas { display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:.8rem; margin:1rem 0; }
.crm-op-metricas article, .crm-op-editor, .crm-op-fila article { padding:1rem; background:var(--color-cream); border:1px solid var(--color-border); border-radius:14px; }
.crm-op-metricas strong { display:block; font-size:1.8rem; }
.crm-op-quadro { display:flex; gap:.8rem; overflow-x:auto; padding:1rem 0; scroll-snap-type:x proximity; }
.crm-op-coluna { flex:0 0 16rem; min-width:0; scroll-snap-align:start; background:var(--color-cream); border:1px solid var(--color-border); padding:.75rem; border-radius:14px; }
.crm-op-coluna ul { padding:0; list-style:none; }
.crm-op-cartao { display:flex; flex-direction:column; width:100%; text-align:left; gap:.65rem; white-space:normal; overflow-wrap:anywhere; margin:.7rem 0; min-height:44px; padding:.9rem; border:1px solid var(--color-border); border-radius:10px; background:var(--color-panel); color:var(--color-text); font:inherit; cursor:pointer; }
.crm-op-cartao:hover { border-color:var(--color-primary); }
.crm-op-cartao.crm-op-pegando { outline:2px solid var(--color-primary); opacity:.7; user-select:none; }
.crm-op-coluna.crm-op-alvo { outline:3px dashed var(--color-primary); outline-offset:-3px; }
.crm-op-cartao:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; }
.crm-operacao input, .crm-operacao select, .crm-operacao textarea { font:inherit; color:var(--color-text); background:var(--color-panel); border:1px solid var(--color-border); border-radius:8px; padding:.6rem; }
.crm-op-etiqueta { font-size:.88rem; font-weight:600; }
.crm-op-editor { margin:1rem 0; }
.crm-op-editor form { display:grid; gap:.8rem; margin:.8rem 0; }
.crm-op-editor input, .crm-op-editor select, .crm-op-filtros select, .crm-op-fila select, .crm-op-fila textarea { min-height:44px; width:100%; max-width:100%; }
.crm-op-fila article { margin:1rem 0; }
.crm-op-fila summary { cursor:pointer; padding:.75rem 0; }
.crm-op-editor button, .crm-op-fila button { margin:.3rem; min-height:44px; }
@media(max-width:640px) { .crm-op-metricas{grid-template-columns:repeat(2,minmax(0,1fr));}.crm-op-coluna{flex-basis:82vw;}.crm-op-editor{padding:.8rem;} }
/* Consulta: leitura rápida sem retirar o conteúdo completo ou confundir tarefa com achado. */
#pr-tnd-guia .guia-visao { margin: 1rem 0; }
#pr-tnd-guia .guia-visao > h3 { margin-bottom: .35rem; font-size: 1.2rem; }
#pr-tnd-guia .guia-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
#pr-tnd-guia .guia-cartoes article { padding: 1rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-cream); min-width: 0; }
#pr-tnd-guia .guia-cartoes h4 { margin: 0 0 .4rem; font-size: 1rem; color: var(--color-primary-dark); }
#pr-tnd-guia .guia-cartoes p { margin: 0; font-size: 1rem; line-height: 1.55; }
#pr-tnd-guia .guia-alerta { margin: 1rem 0; padding: 1rem; border: 2px solid #9b3d29; border-radius: 12px; background: #fff3ee; color: #632a1d; }
#pr-tnd-guia .guia-alerta p { margin: .4rem 0 0; line-height: 1.55; }
#pr-tnd-guia .guia-etapa { margin: .8rem 0; padding: .85rem 1rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-cream); }
#pr-tnd-guia .guia-etapa > summary { cursor: pointer; font-weight: 700; line-height: 1.5; min-height: 2rem; }
#pr-tnd-guia .guia-etapa > summary h4 { display: inline; margin: 0; font-size: 1.03rem; letter-spacing: normal; text-transform: none; }
#pr-tnd-guia .guia-etapa li { margin: .65rem 0; line-height: 1.6; }
#pr-tnd-guia .guia-registro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
#pr-tnd-guia .guia-registro textarea { min-height: 7rem; width: 100%; font-size: 1rem; line-height: 1.5; }
#pr-tnd-guia .guia-acoes, #pr-checklist .guia-filtros { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 1rem 0; }
#pr-checklist .guia-filtros > .auth-field { flex: 1 1 15rem; margin: 0; }
#pr-checklist .guia-filtros .chk-item { flex: 1 1 14rem; margin: 0; }
#pr-checklist .guia-filtros input[type="search"] { width: 100%; min-height: 44px; }
#pr-tnd-guia .guia-acoes button, #pr-checklist .guia-filtros button { min-height: 44px; }
#pr-tnd-guia a { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  #pr-tnd-guia .guia-cartoes, #pr-tnd-guia .guia-registro-grid { grid-template-columns: minmax(0, 1fr); }
  #pr-tnd-guia .guia-etapa { padding: .8rem; }
  #pr-tnd-guia .guia-acoes button, #pr-checklist .guia-filtros button { flex: 1 1 10rem; }
}

/* =====================================================================================
   CAMADA CHAPA (redesign A, 2026-10-19)

   O dono escolheu a Direção A versão 2, "chapa e régua de ouro": preto liso, grafite em
   degraus, fio fino no lugar da caixa, dourado só na ação principal, em onde a pessoa está e
   no agora, e Montserrat em tudo. As referências aprovadas estão em diag-visual/direcao-a/
   (chapa-v2.css, inicio-v2.html, paciente-v2.html). Os tokens --a-* moram no :root escuro lá
   de cima e são o vocabulário comum das frentes do redesign.

   O QUE ESTA CAMADA FAZ: a PELE dos componentes internos das telas, em todas as telas do SPI
   (superfícies, bordas, botões, campos, abas e filtros, tabelas, selos, avisos, modais, estados
   vazios). Tira o que dá cara de IA: o brilho dourado no canto das caixas, o degradê, a borda
   dourada em toda caixa, a sombra, a pílula em tudo, a caixa dentro de caixa e a caixa alta
   espaçada.

   POR QUE NO FIM DO ARQUIVO: no CSS, com a mesma especificidade, quem vem depois vence. As
   camadas anteriores (o "VISUAL NOVO NO SITE INTEIRO" de 2026-09-25 e as correções do tema
   escuro) continuam no arquivo e a reversão é apagar este bloco.

   ONDE ELA NÃO ENTRA, e é regra:
     - NA LOJA (body.loja-body): todo seletor começa por :where(body:not(.loja-body)).
     - NO PAPEL: tudo está em @media screen. Nenhuma regra @media print foi tocada.
     - NA FOLHA DOS DOCUMENTOS (receita, laudo, exames, atestado, encaminhamento, orientação,
       plano, materiais: .laudo-doc, .plano-doc, .print-area, .mp-folha, .mp-doc). O dono: "NAO EH
       PRA MEXER NO TAMANHO DE LETRAS DE RECEITAS E OUTRAS COISAS". A folha guarda até os valores
       antigos dos tokens (logo abaixo), para não mudar um pixel; a comparação pixel a pixel das
       seis folhas está no relatório da frente.
     - NO TAMANHO DA LETRA BASE (html/body): continua o de antes.
     - NA CASCA (cabeçalho, menu, gaveta, barra inferior, busca), NA TELA INICIAL, NA FICHA E NA
       LISTA DE PACIENTES: são de outras frentes do redesign e não têm seletor próprio aqui.
       Elas recebem só o que é global (letra, botão, campo).
   ===================================================================================== */
@media screen {

/* ------------------------------------------------ a folha do documento não muda nada --- */
/* Os tokens antigos mudaram de valor em 2026-10-19 (--color-muted, --color-border, ...). Dentro da
   folha eles continuam com o valor de antes, para o documento sair idêntico na tela. */
:is(.laudo-doc, .plano-doc, .print-area, .mp-folha, .mp-doc) {
  --color-cream: #1a1a1a;
  --color-panel: #141414;
  --color-border: #2a2a2a;
  --color-chapa: #050505;
  --color-muted: #bdbdbd;
  --color-secondary: #1a1a1a;
  --color-high: #f0a199;
  --color-fio: rgba(252, 244, 232, .13);
  --color-fio-forte: rgba(252, 244, 232, .28);
  --color-superficie: rgba(252, 244, 232, .04);
  --radius: 1rem;
  --radius-pill: 9999px;
}

/* ------------------------------------------------------------------- tokens da pele --- */
/* Os tokens do visual de 2026-09-25 viram chapa lisa: cada regra antiga que lia o brilho, a borda
   dourada e a sombra passa a ler fundo liso, fio e nada. É o que achata dezenas de componentes sem
   reescrever um por um. */
body:not(.loja-body) {
  --spi-card-cor: var(--a-chapa-1);
  --spi-card-brilho: none;
  --spi-card-borda: var(--a-fio);
  --spi-card-borda-forte: var(--a-fio-forte);
  --spi-card-sombra: none;
  --spi-card-raio: var(--a-raio-3);
  --spi-sub-cor: transparent;
  --spi-sub-brilho: none;
  --spi-sub-borda: var(--a-fio);
  --spi-pilula-cor: transparent;
  --spi-pilula-borda: var(--a-fio-forte);
  --spi-pilula-texto: var(--a-texto);
  --spi-ouro: var(--a-ouro);
  --spi-ouro-grad: none;
  --spi-tinta-escura: var(--a-fundo);
  --spi-campo-cor: var(--a-chapa-1);
  --spi-campo-borda: var(--a-fio-forte);
  --spi-dourado: var(--a-ouro);
  /* raio pequeno (4 a 8 px) no lugar da pílula e do cartão de 16px */
  --radius: var(--a-raio-3);
  --radius-pill: var(--a-raio-2);
  /* as três ideias de aviso (ok, atenção, alerta), no fundo próprio de cada uma */
  --color-ok: var(--a-texto);
  --color-ok-fundo: var(--a-chapa-2);
  --color-alerta: var(--a-risco);
  --color-alerta-fundo: #241411;
  /* o fundo da página: chapa lisa, sem a luz cinza no topo */
  background-color: var(--a-fundo);
  background-image: none;
}
body:not(.loja-body):has(header.spi-header) { background-color: var(--a-fundo); background-image: none; }

/* ------------------------------------------------------------------- uma letra só --- */
/* Botão, campo e lista de escolha nasciam na letra do sistema (Arial, Segoe), porque o navegador
   não herda a família neles. Só a FAMÍLIA é herdada (não o `font` inteiro, que mudaria tamanhos). */
:where(body:not(.loja-body)) :where(button, input, select, textarea, optgroup, option) { font-family: inherit; }
/* O CRM tinha uma letra própria (Jost): passa a ser a mesma do resto. */
:where(body:not(.loja-body)) :is(.crm-unificado, .crm-u-modal, .crm-u-drawer) { font-family: var(--font-sans); }

/* --------------------------------------------------------------- foco visível --- */
:where(body:not(.loja-body)) main :where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--a-ouro); outline-offset: 2px;
}

/* ---------------------------------------------------------- superfícies e caixas --- */
/* Painel: chapa 1 lisa e fio fino. O que se clica acende o fio e sobe um degrau de chapa, sem
   levantar, sem sombra e sem brilho. */
:where(body:not(.loja-body)) :is(
  .panel, .card, .scale-card, .tema-card, .lia-sug-card, .pr-escala-pick, .ag-item,
  .laudo-tipo-card, .nutri-card, .doc-item, .ct-card, .ct-porta, .ps-res, .ps-familia, .ps-secao,
  .fluxo-ferramenta, .tnd-salvas, .pl-rel-cartao, .fin-sum-card, .calc-result, .calc-ref-content,
  .result-total-box, .pl-modal-caixa, .ct-cop-painel, .av-paciente, .gaso-placar, .rx-calc,
  .escriba-panel, .pu-panel, .anot-panel, .case-item, .cx-cartao, .wa-painel, .crm-bloco, .crm-kpi,
  .crm-op-editor, .crm-op-coluna
) {
  background-image: none;
  box-shadow: none;
  border-radius: var(--a-raio-3);
}
:where(body:not(.loja-body)) :is(
  .scale-card, .tema-card, .lia-sug-card, .pr-escala-pick, .ag-item, .laudo-tipo-card, .nutri-card,
  .doc-item, .ct-card, .ps-res, .fluxo-ferramenta, .pl-rel-cartao, .case-item, .cx-cartao
) { transition: background-color .15s ease, border-color .15s ease; }
:where(body:not(.loja-body)) :is(
  .scale-card, .tema-card, .lia-sug-card, .pr-escala-pick, .ag-item, .laudo-tipo-card, .nutri-card,
  .doc-item, .ct-card, .ps-res, .fluxo-ferramenta, .pl-rel-cartao, .case-item, .cx-cartao
):is(:hover, :active) {
  background-color: var(--a-chapa-2);
  border-color: var(--a-fio-forte);
  box-shadow: none;
  transform: none;
}
:where(body:not(.loja-body)) :is(.scale-card-name, .nutri-card-title, .tema-card-title, .ag-item-name) { color: var(--a-texto); }

/* NADA DE CAIXA DENTRO DE CAIXA. Painel dentro de painel perde o fundo e a borda (a borda fica
   transparente, e não some: a largura do que está dentro não muda nenhum pixel). */
:where(body:not(.loja-body)) :is(.panel, .card, .wa-painel, .crm-bloco, .cx-topo) :is(.panel, .card, .wa-cartao, .crm-bloco, .ct-porta, .calc-result, .result-total-box, .fin-sum-card, .pl-rel-cartao, .wa-kpi, .wa-numero, .crm-kpi, .eq-kpi, .pc-tile) {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
}
/* As caixas internas de resultado e de célula (o "sub" do visual antigo): sem fundo, só o fio. */
:where(body:not(.loja-body)) :is(
  .rx-result, .ct-item, .ps-cartao, .chk-content, .pu-content, .foto-res-cell, .des-score-box,
  .cre-res-box, .dev-dom, .gaso-num, .tox-sinal, .tnd-hip, .tnd-crit, .ag-cal-day, .pl-cal-dia,
  .ct-cal-cel, .escriba-preview, .generated-link-box, .exam-mini, .des-vol, .des-fase, .vac-meta-in
) { background-image: none; box-shadow: none; }
:where(body:not(.loja-body)) .rx-result { border-radius: var(--a-raio-2); }
:where(body:not(.loja-body)) :is(.rx-result, .ag-cal-day, .pl-cal-dia, .ct-cal-cel):hover {
  border-color: var(--a-fio-forte); background-color: var(--a-chapa-2);
}
/* O dia escolhido no calendário: onde a pessoa está, então é ouro, mas como régua e fio, não
   como bloco dourado cheio. */
:where(body:not(.loja-body)) .ag-cal-day.ag-cal-sel {
  background-color: var(--a-chapa-3); background-image: none;
  border-color: var(--a-ouro); color: var(--a-texto); box-shadow: inset 0 -2px 0 var(--a-ouro);
}
:where(body:not(.loja-body)) .ag-cal-day.ag-cal-sel * { color: inherit; }

/* Superfícies de destaque que eram degradê: ficam chapa lisa. */
:where(body:not(.loja-body)) :is(.calc-dose-hero, .ct-hero, .ag-cal-bloq, .ag-slot-bloq, .av-rel-pauta) {
  background-image: none;
}
:where(body:not(.loja-body)) :is(.calc-dose-hero, .ct-hero) { background-color: var(--a-chapa-1); }
:where(body:not(.loja-body)) :is(.ag-cal-bloq, .ag-slot-bloq) { background-color: rgba(252, 244, 232, .035); }

/* O quadradinho do ícone ao lado do título da página: o ícone fica, a caixinha sai (a medida dela
   continua, para o título não andar). */
:where(body:not(.loja-body)) .section-head-ico {
  background: transparent; border-color: transparent; box-shadow: none; color: var(--a-texto-2);
}
:where(body:not(.loja-body)) .section-head h2 { font-weight: 600; letter-spacing: -0.01em; }

/* Separador: fio liso, sem o degradê dourado. */
:where(body:not(.loja-body)) hr:where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha, .mp-doc) *)) {
  border: 0; height: 1px; background: var(--a-fio);
}

/* -------------------------------------------------------------------------- botões --- */
/* PRINCIPAL: dourado cheio, só para a ação principal da tela. Raio pequeno, sem degradê, sem
   sombra, sem brilho. A tinta é escura (mais de 12:1 sobre o ouro). */
:where(body:not(.loja-body)) :is(button.primary, a.primary) {
  background-color: var(--a-ouro);
  background-image: none;
  color: var(--a-fundo);
  border: 1px solid var(--a-ouro);
  border-radius: var(--a-raio-2);
  box-shadow: none;
  filter: none;
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease;
}
:where(body:not(.loja-body)) :is(button.primary, a.primary):hover { background-color: var(--a-ouro-claro); border-color: var(--a-ouro-claro); opacity: 1; filter: none; box-shadow: none; }
:where(body:not(.loja-body)) :is(button.primary, a.primary):active { background-color: var(--a-ouro-fechado); border-color: var(--a-ouro-fechado); transform: none; filter: none; }
:where(body:not(.loja-body)) :is(button.primary, a.primary):disabled { opacity: .5; filter: none; }

/* SECUNDÁRIO: fio forte em volta, fundo liso, texto claro. No passar do mouse sobe um degrau de
   chapa; o dourado não aparece. Vale para todos os botões pequenos de ação. */
:where(body:not(.loja-body)) :is(
  button.secondary, a.secondary, .doc-editor-btn, .ct-reap-btn, .ct-cop-acao, .ct-botao-link,
  .privacy-note button, .crm-botao
) {
  background-color: transparent;
  background-image: none;
  color: var(--a-texto);
  border: 1px solid var(--a-fio-forte);
  border-radius: var(--a-raio-2);
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
:where(body:not(.loja-body)) :is(
  button.secondary, a.secondary, .doc-editor-btn, .ct-reap-btn, .ct-cop-acao, .ct-botao-link,
  .privacy-note button, .crm-botao
):hover {
  background-color: var(--a-chapa-2);
  border-color: rgba(252, 244, 232, .34);
  color: var(--a-texto);
}
:where(body:not(.loja-body)) :is(button.secondary, a.secondary, .doc-editor-btn):active { background-color: var(--a-chapa-3); transform: none; }
/* O botão sem classe dentro do conteúdo ("Limpar todos os dados") segue o secundário. */
:where(body:not(.loja-body)) main button:not([class]):not(.home-tabbar button) {
  background-color: transparent; color: var(--a-texto);
  border: 1px solid var(--a-fio-forte); border-radius: var(--a-raio-2);
}
:where(body:not(.loja-body)) main button:not([class]):not(.home-tabbar button):hover { background-color: var(--a-chapa-2); border-color: rgba(252, 244, 232, .34); color: var(--a-texto); }

/* PERIGO (apagar, excluir, sair sem salvar): o vermelho de risco, em texto e fio. */
:where(body:not(.loja-body)) :is(button.pr-danger, .secondary.pr-danger, .wz-perigo, button.perigo, .doc-excluir, .fin-del) {
  color: var(--a-risco); border-color: var(--a-risco-fio); background-color: transparent; background-image: none;
}
:where(body:not(.loja-body)) :is(button.pr-danger, .secondary.pr-danger, .wz-perigo, button.perigo, .doc-excluir, .fin-del):hover {
  color: var(--a-risco); border-color: var(--a-risco); background-color: var(--a-risco-fundo);
}

/* FANTASMA: o botão que é só texto (Esconder, link de ação). Sem caixa, sublinhado só no foco. */
:where(body:not(.loja-body)) :is(.wa-link, .pl-cons-rm, .crm-u-cartao-pe button) { color: var(--a-texto); }

/* VOLTAR: link simples com seta, como na Direção A. O alvo de toque continua de 44px no celular. */
:where(body:not(.loja-body)) .nav-voltar.nav-voltar {
  background: transparent; background-image: none;
  border-color: transparent; box-shadow: none;
  border-radius: var(--a-raio-1);
  padding-left: .25rem; padding-right: .5rem;
  color: var(--a-texto-2); font-weight: 500;
}
:where(body:not(.loja-body)) .nav-voltar.nav-voltar svg { color: var(--a-texto-2); }
:where(body:not(.loja-body)) .nav-voltar.nav-voltar:hover { background: var(--a-chapa-2); color: var(--a-texto); border-color: transparent; box-shadow: none; transform: none; }
:where(body:not(.loja-body)) .nav-voltar.nav-voltar:hover svg { color: var(--a-texto); }
:where(body:not(.loja-body)) .nav-voltar.nav-voltar:active { background: var(--a-chapa-3); transform: none; }
:where(body:not(.loja-body)) .nav-voltar.nav-voltar:focus-visible { outline: 2px solid var(--a-ouro); outline-offset: 2px; box-shadow: none; }

/* ------------------------------------------------------------------------- campos --- */
/* Campo e lista de escolha planos: chapa 1, fio forte, raio pequeno. O foco é dourado e
   visível (fio de ouro mais um anel fino), que é onde a pessoa está. */
:where(body:not(.loja-body)) :is(input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="hidden"])), select, textarea):where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha, .mp-doc) *)) {
  background-color: var(--a-chapa-1);
  background-image: none;
  border-color: var(--a-fio-forte);
  border-radius: var(--a-raio-2);
  color: var(--a-texto);
  box-shadow: none;
}
:where(body:not(.loja-body)) :is(input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="hidden"])), select, textarea):where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha, .mp-doc) *)):hover {
  border-color: rgba(252, 244, 232, .34);
}
:where(body:not(.loja-body)) :is(input, select, textarea):where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha, .mp-doc) *)):focus-visible {
  outline: none;
  border-color: var(--a-ouro);
  box-shadow: 0 0 0 1px var(--a-ouro);
}
:where(body:not(.loja-body)) :is(input, textarea)::placeholder { color: var(--a-texto-3); opacity: 1; }
:where(body:not(.loja-body)) select option { background: var(--a-chapa-2); color: var(--a-texto); }
:where(body:not(.loja-body)) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--a-ouro); }
:where(body:not(.loja-body)) .auth-field { color: var(--a-texto); }

/* ------------------------------------------------- abas e filtros: texto com régua --- */
/* ABAS E FILTROS DE UMA ESCOLHA SÓ: texto, sem pílula. A ativa ganha a régua dourada embaixo e
   o peso; as outras ficam no segundo tom de texto. A medida da aba não muda (a borda fica
   transparente), então nada quebra de linha diferente. */
:where(body:not(.loja-body)) :is(
  .pr-tab, .pt-tab, .tox-tab, .ps-aba, button.mp-aba, .temas-pill, .cm-aba, .cm-subaba, .ca-aba,
  .wa-abas button, .ag-cal-ver button, button.secondary.fin-chip, .ev-tipo, .ct-x-filtros button,
  .vac-chip, .lab-chip, .wa-chip, .crm-chip, .ct-chip, .pc-chip, .crm-u-drawer nav button, .atb-chip
) {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  border-radius: var(--a-raio-1);
  box-shadow: none;
  color: var(--a-texto-2);
  font-weight: 500;
  letter-spacing: 0;
  transition: color .15s ease, background-color .15s ease;
}
:where(body:not(.loja-body)) :is(
  .pr-tab, .pt-tab, .tox-tab, .ps-aba, button.mp-aba, .temas-pill, .cm-aba, .cm-subaba, .ca-aba,
  .wa-abas button, .ag-cal-ver button, button.secondary.fin-chip, .ev-tipo, .ct-x-filtros button,
  .vac-chip, .lab-chip, .wa-chip, .crm-chip, .ct-chip, .pc-chip, .crm-u-drawer nav button, .atb-chip
):hover {
  background-color: var(--a-chapa-2);
  border-color: transparent;
  color: var(--a-texto);
}
:where(body:not(.loja-body)) :is(
  .pr-tab-active, .pt-tab-active, .tox-tab-active, button.mp-aba.is-active, .temas-pill.is-active,
  .cm-aba.ativa, .cm-subaba.ativa, .ca-aba[aria-selected="true"], .wa-abas button.wa-aba-atual,
  .ag-cal-ver button[aria-pressed="true"], button.secondary.fin-chip[aria-pressed="true"],
  .ev-tipo[aria-pressed="true"], .ct-x-filtros button[aria-pressed="true"], .vac-chip.is-active,
  .lab-chip-on, .wa-chip-atual, .crm-chip-atual, .ct-chip-on, .pc-chip-ativo, .atb-chip-on,
  .crm-u-drawer nav button[aria-pressed="true"], [role="tab"][aria-selected="true"].ps-aba
),
:where(body:not(.loja-body)) :is(
  .pr-tab-active, .pt-tab-active, .tox-tab-active, button.mp-aba.is-active, .temas-pill.is-active,
  .cm-aba.ativa, .cm-subaba.ativa, .ca-aba[aria-selected="true"], .wa-abas button.wa-aba-atual,
  .ag-cal-ver button[aria-pressed="true"], button.secondary.fin-chip[aria-pressed="true"],
  .ev-tipo[aria-pressed="true"], .ct-x-filtros button[aria-pressed="true"], .vac-chip.is-active,
  .lab-chip-on, .wa-chip-atual, .crm-chip-atual, .ct-chip-on, .pc-chip-ativo, .atb-chip-on,
  .crm-u-drawer nav button[aria-pressed="true"]
):hover {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  color: var(--a-texto);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--a-ouro);
}
:where(body:not(.loja-body)) :is(.cm-aba.ativa, .cm-aba) span { color: inherit; }
/* As abas grandes do CRM e da Equipe: as regras delas moram no próprio crm.html (que vem depois desta
   folha), por isso o seletor aqui é um degrau mais forte. */
body:not(.loja-body) .crm-abas button {
  background: transparent; background-image: none; border-color: transparent; border-radius: var(--a-raio-1);
  box-shadow: none; color: var(--a-texto-2); font-weight: 600; letter-spacing: 0;
}
body:not(.loja-body) .crm-abas button:hover { background: var(--a-chapa-2); border-color: transparent; color: var(--a-texto); }
body:not(.loja-body) .crm-abas button.crm-aba-atual,
body:not(.loja-body) .crm-abas button.crm-aba-atual:hover {
  background: transparent; background-image: none; border-color: transparent; color: var(--a-texto);
  box-shadow: inset 0 -2px 0 var(--a-ouro);
}
body:not(.loja-body) .crm-abas { background: var(--a-fundo); border-bottom-color: var(--a-fio); }
/* As abas e os filtros do WhatsApp têm as regras no próprio whatsapp.html (depois desta folha). */
/* (as abas sem classe também caem na regra do "botão sem classe" de 2026-09-25, que é forte: daí o main) */
body:not(.loja-body) main :is(.wa-abas button, .wa-chip):not(.primary):not(.secondary) {
  background: transparent; border-color: transparent; border-radius: var(--a-raio-1); color: var(--a-texto-2); box-shadow: none;
}
body:not(.loja-body) main :is(.wa-abas button, .wa-chip):not(.primary):not(.secondary):hover { background: var(--a-chapa-2); border-color: transparent; color: var(--a-texto); }
/* As escolhas "Tudo do Google / Só consultas" da agenda e os filtros do conteúdo também são botões sem classe. */
body:not(.loja-body) main :is(.ag-cal-ver, .ct-x-filtros) button:not(.primary):not(.secondary) {
  background: transparent; border-color: transparent; border-radius: var(--a-raio-1); color: var(--a-texto-2); box-shadow: none;
}
body:not(.loja-body) main :is(.ag-cal-ver, .ct-x-filtros) button:not(.primary):not(.secondary):hover { background: var(--a-chapa-2); border-color: transparent; color: var(--a-texto); }
body:not(.loja-body) main :is(.ag-cal-ver, .ct-x-filtros) button[aria-pressed="true"]:not(.primary):not(.secondary) {
  background: transparent; border-color: transparent; color: var(--a-texto); font-weight: 600; box-shadow: inset 0 -2px 0 var(--a-ouro);
}
body:not(.loja-body) main :is(.wa-abas button.wa-aba-atual, .wa-chip.wa-chip-atual):not(.primary):not(.secondary) {
  background: transparent; border-color: transparent; color: var(--a-texto); font-weight: 600; box-shadow: inset 0 -2px 0 var(--a-ouro);
}
body:not(.loja-body) .wa-abas button.wa-aba-atual :is(span, strong, small) { color: var(--a-texto); }
body:not(.loja-body) .wa-abas button .wa-badge { color: var(--a-fundo); }
body:not(.loja-body) .wa-abas { border-bottom: 1px solid var(--a-fio); }

/* ESCOLHAS DE VÁRIAS AO MESMO TEMPO (exames do pedido, antibióticos, consultas do plano,
   ferramentas): continuam como peças com fio, porque a pessoa marca e desmarca muitas, mas
   quadradas e lisas; a marcada ganha o degrau de chapa, o fio claro e a régua de ouro. */
:where(body:not(.loja-body)) :is(.exam-chip, .pl-chip, .anot-tool, .gaso-ferramenta, .ed-arquivo, .eo-chip, .wz-chip, .ca-chip, .ps-chip, .ag-r-chip, .ct-ref-chip, .legal-sumario a) {
  background-color: transparent;
  background-image: none;
  border-color: var(--a-fio-forte);
  border-radius: var(--a-raio-1);
  box-shadow: none;
  color: var(--a-texto);
}
:where(body:not(.loja-body)) :is(.exam-chip, .pl-chip, .anot-tool, .gaso-ferramenta, .ed-arquivo, .eo-chip, .wz-chip, .ca-chip, .ps-chip, .ag-r-chip, .ct-ref-chip, .legal-sumario a):hover {
  background-color: var(--a-chapa-2); border-color: rgba(252, 244, 232, .34); color: var(--a-texto);
}
/* (o seletor começa por body, e não por :where, para vencer a regra de 2026-09-25, que tem um item mais forte na lista) */
body:not(.loja-body) :is(.exam-chip.on, .pl-chip:has(input:checked), .anot-tool-active, .ag-r-chip-on, .ct-ref-chip-on, .wz-chip-on),
body:not(.loja-body) :is(.exam-chip.on, .pl-chip:has(input:checked), .anot-tool-active, .ag-r-chip-on, .ct-ref-chip-on, .wz-chip-on):hover {
  background-color: var(--a-chapa-3);
  background-image: none;
  border-color: rgba(252, 244, 232, .5);
  color: var(--a-texto);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--a-ouro);
}
body:not(.loja-body) .exam-chip.on { color: var(--a-texto); }
/* A barra de edição do documento (fica FORA da folha): o tamanho escolhido com a régua de ouro, e o botão do
   logotipo deixa de ser branco no meio da tela escura. */
:where(body:not(.loja-body)) .doc-editor-btn.ed-on { border-color: rgba(252, 244, 232, .5); color: var(--a-texto); background: var(--a-chapa-3); box-shadow: inset 0 -2px 0 var(--a-ouro); }
:where(body:not(.loja-body)) .timbre-logo-btn:where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha, .mp-doc) *)) {
  background: transparent; color: var(--a-texto); border-color: var(--a-fio-forte); border-radius: var(--a-raio-2);
}
:where(body:not(.loja-body)) .timbre-logo-btn:where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha, .mp-doc) *)):hover { background: var(--a-chapa-2); }
/* Pediátrico/Adulto e as vias do receituário: as mesmas peças de escolha (a borda continua com 2px, a medida
   não muda), quadradas, e a escolhida com o degrau de chapa e a régua de ouro. */
:where(body:not(.loja-body)) :is(.rx-modo-btn, .rx-via-btn) { border-color: var(--a-fio-forte); border-radius: var(--a-raio-2); background: transparent; }
:where(body:not(.loja-body)) :is(.rx-modo-btn, .rx-via-btn):hover { border-color: rgba(252, 244, 232, .34); background: var(--a-chapa-2); }
:where(body:not(.loja-body)) :is(.rx-modo-btn.rx-modo-on, .rx-via-btn.rx-via-btn-on) {
  border-color: rgba(252, 244, 232, .5); background: var(--a-chapa-3); box-shadow: inset 0 -2px 0 var(--a-ouro);
}

/* --------------------------------------------------------------------------- tabelas --- */
:where(body:not(.loja-body)) main table:where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha, .mp-doc) *)) th {
  color: var(--a-texto-2);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--a-fio-forte);
  background-image: none;
}
:where(body:not(.loja-body)) main table:where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha, .mp-doc) *)) td {
  border-bottom-color: var(--a-fio);
}
:where(body:not(.loja-body)) main :is(.ps-tabela, .vac-tab, .ct-x-tabela, .details-table, .nutri-table, .pt-table, .pr-table) th { text-transform: none; letter-spacing: 0; }

/* ----------------------------------------------------------------------------- selos --- */
/* Selo de status: texto curto com a cor do que ele quer dizer, num retângulo de raio pequeno.
   Sem caixa alta espaçada, e nunca abaixo de 12px. */
:where(body:not(.loja-body)) :is(
  .tema-badge, .doc-badge, .vac-selo, .vac-rede, .vac-dose-badge, .vac-badge, .ps-selo, .plano-selo,
  .nutri-card-tag, .nutri-conf-tag, .pu-faixa-badge, .tnd-selo, .ag-portal-tag, .gaso-tag, .ct-tag,
  .lia-badge, .rx-nutri-selo, .av-selo, .pl-selo, .pl-cons-tag, .wa-status, .wa-selo, .wa-badge,
  .crm-selo, .crm-origem, .crm-u-tag, .ca-tag, .cm-selo, .pp-selo-ia, .pp-selo-lgpd, .ct-x-selo,
  .ct-honesto-selo, .dev-hit-tag, .atb-cat-tag, .rx-conferir-tag, .wz-badge, .crm-alerta-n,
  .crm-coluna-n, .ag-tag-secretaria, .ag-tag-plano, .ag-tag-extra, .ag-tag-carla, .ct-item-tipo
) {
  border-radius: var(--a-raio-1);
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  background-image: none;
}
:where(body:not(.loja-body)) :is(.vac-selo, .vac-rede, .vac-dose-badge, .plano-selo, .crm-selo, .crm-origem, .wa-selo, .wa-badge, .ps-selo, .tema-badge, .doc-badge, .ct-item-tipo, .nutri-conf-tag, .ct-x-selo, .ct-honesto-selo) {
  font-size: max(.75rem, 12px);
}
/* Os selos que eram pastel claro com tinta escura (feitos para o tema claro) viram selo escuro. */
body:not(.loja-body) :is(.crm-origem, .crm-origem-whatsapp, .crm-origem-carla, .crm-origem-secretaria, .crm-origem-agenda, .crm-origem-prontuario) {
  background: transparent; color: var(--a-texto-2); box-shadow: inset 0 0 0 1px var(--a-fio-forte);
}
body:not(.loja-body) .crm-selo-atrasado { background: var(--a-risco-fundo); color: var(--a-risco); }
:where(body:not(.loja-body)) .row-flag-marca { background: var(--a-risco-fundo); color: var(--a-risco); box-shadow: inset 0 0 0 1px var(--a-risco-fio); border-radius: var(--a-raio-1); }
:where(body:not(.loja-body)) :is(.plano-selo, .ct-barra-custo) { background: transparent; border-color: var(--a-fio-forte); color: var(--a-texto-2); border-radius: var(--a-raio-1); letter-spacing: 0; }
/* O "novo" ao lado da aba de materiais (a regra dele mora em materiais-pacientes/materiais.css, que vem depois). */
body:not(.loja-body) .mp-aba-novo { text-transform: none; letter-spacing: 0; font-size: max(.75rem, 12px); }
body:not(.loja-body) .wa-badge { background: var(--a-ouro); color: var(--a-fundo); }
body:not(.loja-body) .wa-status { background: var(--a-chapa-3); color: var(--a-texto-2); }
body:not(.loja-body) .wa-status-conectado { background: transparent; color: var(--a-texto); box-shadow: inset 0 0 0 1px var(--a-fio-forte); }
body:not(.loja-body) .wa-status-erro { background: var(--a-risco-fundo); color: var(--a-risco); }
body:not(.loja-body) .wa-esperando { background: var(--a-chapa-3); color: var(--a-ouro); }

/* ---------------------------------------------------------------------------- avisos --- */
/* Três avisos, cada um com o fundo dele e uma régua à esquerda (sem caixa com borda em volta):
   informação (grafite), alerta (ouro apagado) e risco (vermelho de risco). */
:where(body:not(.loja-body)) :is(.auth-info, .wa-aviso-bom, .doc-msg-info, .wa-sec-faixa, .pr-portal-aviso) {
  background-color: var(--a-chapa-2); background-image: none; box-shadow: none; color: var(--a-texto);
  border-color: transparent; border-left: 3px solid var(--a-fio-forte); border-radius: 0 var(--a-raio-1) var(--a-raio-1) 0;
}
:where(body:not(.loja-body)) :is(
  .wa-aviso, .crm-aviso, .ca-aviso, .pp-aviso, .ev-aviso, .cm-aviso, .calc-aviso, .rx-aviso,
  .nutri-aviso, .tg-aviso, .pa-aviso, .ct-aviso, .carla-aviso, .gestor-ia-aviso, .ag-grade-aviso,
  .ag-google-aviso, .pr-rasc-aviso, .aviso-assinatura, .ct-pub-aviso, .calc-inversa-aviso,
  .tnd-crit-aviso, .lia-gaps-warn, .wa-sec-pausada, .wa-sec-urgente, .eq-aviso, .ct-honesto
) {
  background-color: rgba(241, 207, 107, .07); background-image: none; box-shadow: none; color: var(--a-texto);
  border-color: transparent; border-left: 3px solid var(--a-ouro-fechado); border-radius: 0 var(--a-raio-1) var(--a-raio-1) 0;
}
:where(body:not(.loja-body)) :is(
  .auth-error, .rx-alerta-grave, .cre-erro, .foto-erro, .gaso-foto-erro, .ct-pub-erro, .ct-pub-alerta,
  .rx-peso-alerta, .pr-peso-alerta, .tox-calc-alerta, .rea-det-alerta, .foto-res-alerta, .dev-alerta-geral,
  .eq-erro, .ap-erro
) {
  background-color: var(--a-risco-fundo); background-image: none; box-shadow: none;
  border-color: transparent; border-left: 3px solid var(--a-risco); border-radius: 0 var(--a-raio-1) var(--a-raio-1) 0;
}
:where(body:not(.loja-body)) .auth-error { color: var(--a-risco); }
:where(body:not(.loja-body)) .pr-msg-err { color: var(--a-risco); }
:where(body:not(.loja-body)) .pr-msg-ok { color: var(--a-texto); }
/* O alerta do guia de neurodesenvolvimento era branco com tinta escura (do tema claro). */
:where(body:not(.loja-body)) #pr-tnd-guia .guia-alerta { background: var(--a-risco-fundo); border-color: transparent; border-left-color: var(--a-risco); color: var(--a-texto); border-radius: 0 var(--a-raio-1) var(--a-raio-1) 0; }
:where(body:not(.loja-body)) #pr-tnd-guia :is(.guia-cartoes article, .guia-etapa) { background: transparent; border-color: var(--a-fio); border-radius: var(--a-raio-3); }

/* ------------------------------------------------------------------ estados vazios --- */
:where(body:not(.loja-body)) :is(.ct-vazio, .ca-vazio, .doc-empty, .ps-vazio, .gaso-vazio, .pl-cal-vazio, .ag-cal-empty, .temas-empty, .calc-search-empty, .assistente-empty, .crm-u-vazio) {
  border-color: var(--a-fio-forte); border-radius: var(--a-raio-3); color: var(--a-texto-2); background-image: none;
}

/* ---------------------------------------------------------------- modais e janelas --- */
/* A única coisa que flutua, e por isso a única com sombra: chapa 2, fio forte, raio 8px. */
:where(body:not(.loja-body)) :is(.pr-modal, .pl-modal-caixa, .plano-up, .crm-janela, .crm-u-modal, .crm-u-drawer, .eq-janela, .ca-janela, .pp-janela, .fx-dialogo, .ct-cop-painel) {
  background-color: var(--a-chapa-2);
  background-image: none;
  border: 1px solid var(--a-fio-forte);
  border-radius: var(--a-raio-3);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
  color: var(--a-texto);
}
:where(body:not(.loja-body)) .crm-u-drawer { border-radius: 0; }
:where(body:not(.loja-body)) :is(.pr-modal-backdrop, .pl-modal, .plano-up-fundo, .crm-fundo) { background: rgba(0, 0, 0, .6); backdrop-filter: none; }
:where(body:not(.loja-body)) :is(.pr-modal-backdrop, .pl-modal, .plano-up-fundo, .crm-fundo) :is(.panel, .pr-modal) { border-color: var(--a-fio-forte); }
:where(body:not(.loja-body)) .plano-up { border-top: 1px solid var(--a-fio-forte); }
:where(body:not(.loja-body)) .plano-portao { border-top: 1px solid var(--a-fio); }
:where(body:not(.loja-body)) .plano-up-cartao { background: var(--a-chapa-1); border-color: var(--a-fio); border-radius: var(--a-raio-3); }
:where(body:not(.loja-body)) .plano-up-destaque { border-color: var(--a-fio-forte); box-shadow: none; }
:where(body:not(.loja-body)) .plano-up-seu { background: var(--a-chapa-3); color: var(--a-texto); border-radius: var(--a-raio-1); }
:where(body:not(.loja-body)) .plano-up-fechar { border-radius: var(--a-raio-2); }

/* -------------------------------------------- links e títulos: a cor é do texto --- */
/* O link dentro do texto fica na cor do texto, com a régua dourada fina embaixo (o ouro marca, não pinta). */
:where(body:not(.loja-body)) main :where(p, li, dd, td, span, small, label, .muted) > a:not([class]) {
  color: var(--a-texto); text-decoration: underline; text-decoration-color: var(--a-ouro-fechado);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
:where(body:not(.loja-body)) main :where(p, li, dd, td, span, small, label, .muted) > a:not([class]):hover { text-decoration-color: var(--a-ouro); }
/* Subtítulos de seção que vinham em dourado ficam na cor do texto: a hierarquia é peso e tamanho. */
:where(body:not(.loja-body)) :is(.co-sec, .tema-subheading, .ct-cat-head h4, .tg-masking h4, .tg-exemplos summary, .ct-fonte summary, .ct-pub-det summary, .nutri-group-title) { color: var(--a-texto); }
/* Dinheiro que entra fica na cor do texto; o que sai continua no vermelho de risco. */
:where(body:not(.loja-body)) :is(.fin-sum-in .fin-sum-val, .fin-val-in) { color: var(--a-texto); }

/* ------------------------------------------------- títulos em frase, sem caixa alta --- */
/* Rótulo pequeno em CAIXA ALTA espaçada acima do título ("CENTRAL DE CONTEÚDO") vira frase normal,
   peso 600, sem espaçamento entre letras. */
:where(body:not(.loja-body)) :is(
  .ct-eyebrow, .calc-section h4, .pr-ai-sec, .pr-lote-head, .nutri-group-title, .atb-linha,
  .tox-sinal-k, .dev-dom h4, .enc-grupo h4, .ct-card-pe, .ct-campo-rot, .ct-cal-dow,
  .av-placar-titulo, .gaso-grupo-titulo, .tnd-rot, .ps-grupo-nome, .fluxo-ferramentas-tit,
  .tnd-salvas-tit, .pl-cal-cab, .plano-up-sobrancelha, .ps-tabela td::before, .vac-tab td::before,
  .ca-dep-nome, .ca-org-dep h4, .cm-passo-n, .pp-j-rotulo, .crm-kpi-rot, .crm-u-drawer header p,
  .crm-nav-titulo, .crm-cadeado, .wz-painel h3, .wz-rotulo, .wz-dia, .wz-autor, .wz-cadeado
) {
  text-transform: none;
  letter-spacing: 0;
}
:where(body:not(.loja-body)) :is(.ct-eyebrow, .pp-j-rotulo, .plano-up-sobrancelha, .wz-painel h3, .wz-rotulo, .crm-nav-titulo) {
  font-weight: 600;
  font-size: max(.875rem, 13px);
  color: var(--a-texto-2);
}
:where(body:not(.loja-body)) :is(.ct-card-pe, .ct-campo-rot, .ct-cal-dow, .tnd-rot, .ps-grupo-nome, .fluxo-ferramentas-tit, .tnd-salvas-tit, .pl-cal-cab, .ca-dep-nome, .ca-org-dep h4, .crm-kpi-rot, .cm-passo-n, .wz-dia, .wz-autor) {
  font-size: max(.8rem, 12px);
}
/* Os textos que só apareciam em maiúsculas estão escritos em minúsculas na origem ("começar", "seg"):
   sem a caixa alta, a primeira letra sobe sozinha, como numa frase. */
:where(body:not(.loja-body)) :is(
  .ct-eyebrow, .calc-section h4, .pr-ai-sec, .nutri-group-title, .atb-linha, .tox-sinal-k, .dev-dom h4,
  .enc-grupo h4, .ct-card-pe, .ct-campo-rot, .ct-cal-dow, .av-placar-titulo, .gaso-grupo-titulo, .tnd-rot,
  .ps-grupo-nome, .fluxo-ferramentas-tit, .tnd-salvas-tit, .pl-cal-cab, .plano-up-sobrancelha, .ca-dep-nome,
  .ca-org-dep h4, .cm-passo-n, .pp-j-rotulo, .crm-kpi-rot, .crm-nav-titulo, .wz-painel h3, .wz-rotulo, .wz-dia,
  .wz-autor, .tema-badge, .doc-badge, .vac-selo, .vac-rede, .vac-dose-badge, .ps-selo, .ct-item-tipo,
  .nutri-conf-tag, .ct-x-selo, .ct-honesto-selo, .crm-selo, .sb-rotulo, .ct-x-tabela th
)::first-letter { text-transform: uppercase; }
/* "Começar", "Ver ferramentas": a ação do cartão é texto, na cor do texto. */
:where(body:not(.loja-body)) .ct-card-pe { display: inline-block; color: var(--a-texto); font-weight: 600; }

/* --------------------------------------------------------- detalhes que abrem e fecham --- */
:where(body:not(.loja-body)) details:where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha, .mp-doc) *)) > summary::marker { color: var(--a-texto-3); }
:where(body:not(.loja-body)) details:where(:not(:is(.laudo-doc, .plano-doc, .print-area, .mp-folha, .mp-doc) *)) > summary:hover { color: var(--a-texto); }
:where(body:not(.loja-body)) .ps-secao > summary::after { color: var(--a-texto-3); }

/* --------------------------------------------------------- a caixa do CRM (crm-caixa) --- */
/* Um por ferramenta, como antes, mas na chapa: o verde de Gestão fica só no ícone. */
:where(body:not(.loja-body)) .cx-cartao { --g: var(--a-area-gestao); background-color: var(--a-chapa-1); border-color: var(--a-fio); }
:where(body:not(.loja-body)) .cx-cartao-ico { background: transparent; border-color: transparent; }
:where(body:not(.loja-body)) .cx-cartao-nome { color: var(--a-texto); font-weight: 600; }
:where(body:not(.loja-body)) .cx-cartao-desc { color: var(--a-texto-2); }

/* ------------------------------------------------------------- o CRM (crm.html) --- */
body:not(.loja-body) :is(.crm-kpi, .crm-bloco) { background: var(--a-chapa-1); border-color: var(--a-fio); border-radius: var(--a-raio-3); }
body:not(.loja-body) .crm-kpi strong { color: var(--a-texto); }
body:not(.loja-body) .crm-coluna, body:not(.loja-body) .crm-coluna header { background: var(--a-chapa-1); }
body:not(.loja-body) .crm-coluna { border-radius: var(--a-raio-3); }
body:not(.loja-body) .crm-cartao-corpo { background: var(--a-chapa-2); border-color: var(--a-fio); border-radius: var(--a-raio-2); }
body:not(.loja-body) .crm-alerta { background: transparent; border-color: var(--a-fio); border-radius: var(--a-raio-2); }
body:not(.loja-body) .crm-alerta-tem .crm-alerta-n { background: var(--a-ouro); color: var(--a-fundo); }
body:not(.loja-body) .crm-iniciais { background: var(--a-chapa-3); color: var(--a-texto); }
body:not(.loja-body) .crm-sug { background: transparent; border-color: var(--a-fio); }

/* --------------------------------------------------------- o WhatsApp (whatsapp.html) --- */
body:not(.loja-body) :is(.wa-kpi, .wa-numero, .wa-item, .wa-fila-item, .wa-sec-alerta, .wa-corrigir) { background: var(--a-chapa-1); border-color: var(--a-fio); border-radius: var(--a-raio-2); }
body:not(.loja-body) .wa-item-atual { background: var(--a-chapa-2); border-color: var(--a-fio-forte); box-shadow: inset 2px 0 0 var(--a-ouro); }
body:not(.loja-body) .wa-kpi-atencao { border-color: rgba(241, 207, 107, .45); }
body:not(.loja-body) .wa-cartao { border-radius: var(--a-raio-3); }
body:not(.loja-body) :is(.wa-historico, .wa-msgpronta) { background: var(--a-chapa-1); border-radius: var(--a-raio-2); }
body:not(.loja-body) .wa-msg { background: var(--a-chapa-2); border-color: var(--a-fio); border-radius: var(--a-raio-3); }
body:not(.loja-body) .wa-msg-saida { background: var(--a-chapa-3); }

/* ------------------------------------------------------- o CRM unificado (Funil) --- */
:where(body:not(.loja-body)) :is(.crm-u-resumo article, .crm-u-panel, .crm-u-fila article) { border-radius: var(--a-raio-3); background: var(--a-chapa-1); }
:where(body:not(.loja-body)) .crm-u-coluna { border-radius: var(--a-raio-3); background: var(--a-chapa-1); }
:where(body:not(.loja-body)) .crm-u-cartao { border-radius: var(--a-raio-2); background: var(--a-chapa-2); box-shadow: none; }
:where(body:not(.loja-body)) .crm-u-cartao:hover { border-color: var(--a-fio-forte); }

/* --------------------------------------------------------- operação da clínica --- */
:where(body:not(.loja-body)) :is(.crm-op-metricas article, .crm-op-editor, .crm-op-fila article, .crm-op-coluna) { background: var(--a-chapa-1); border-color: var(--a-fio); border-radius: var(--a-raio-3); box-shadow: none; }
:where(body:not(.loja-body)) .crm-op-cartao { border-radius: var(--a-raio-2); }

/* ----------------------------------------------------------- o Cérebro (cerebro.html) --- */
/* As duas abas grandes do Cérebro viram as abas de texto com régua (regra acima); o mapa em si e as
   bolinhas do mapa ficam (são o desenho do mapa, não decoração de caixa). */
:where(body:not(.loja-body)) .cm-abas { border-bottom: 1px solid var(--a-fio); gap: 0; }

/* As setas de mês e de quadro: 44px também na largura, no celular (o dedo precisa do alvo inteiro). */
@media (max-width: 899px) {
  :where(body:not(.loja-body)) main :is(#fin-prev, #fin-next, .ag-cal-arrow, .crm-u-setas button) { min-width: 44px; }
}
/* A situação do agendamento: texto com a cor da situação, sem a pílula azul-clara (que destoava da
   chapa), igual à coluna "Situação" do Hoje. */
:where(body:not(.loja-body)) .ag-status { background: transparent; border: 0; border-radius: 0; padding: 0; font-size: .82rem; font-weight: 600; }
:where(body:not(.loja-body)) :is(.ag-st-confirmado, .ag-st-agendado) { background: transparent; color: var(--a-texto); }
:where(body:not(.loja-body)) .ag-st-agendado { color: var(--a-texto-2); }
:where(body:not(.loja-body)) .ag-st-atendido { background: transparent; color: var(--a-texto-2); }
:where(body:not(.loja-body)) .ag-st-faltou { background: transparent; color: var(--a-ouro-claro); }
:where(body:not(.loja-body)) .ag-st-cancelado { background: transparent; color: var(--a-risco); }

/* A lista do dia na agenda, no celular: a hora e a situação na primeira linha, o nome inteiro embaixo
   (lado a lado, o nome ficava com 40px e a etiqueta da situação passava por cima dele); o horário
   bloqueado e o livre deixam os botões descerem em vez de sair da caixa. */
@media (max-width: 599px) {
  :where(body:not(.loja-body)) .ag-list .ag-item { flex-wrap: wrap; row-gap: .35rem; }
  :where(body:not(.loja-body)) .ag-list .ag-item .ag-status { margin-left: auto; }
  :where(body:not(.loja-body)) .ag-list .ag-item .ag-item-main { order: 3; flex-basis: 100%; }
  :where(body:not(.loja-body)) .ag-list .ag-slot { flex-wrap: wrap; }
  :where(body:not(.loja-body)) .ag-list .ag-slot .ag-slot-acoes { margin-left: auto; }
}
/* Os links do rodapé (Termos, Privacidade, Portal) tinham 15px de altura de toque no celular. */
@media (max-width: 699px) {
  :where(body:not(.loja-body)) .app-footer .footer-legal-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ------------------------------------------------- letra de computador no computador --- */
/* O dono (2026-10-15): "ta parecendo um celular na tela do PC", "vc manteve os escritos pequenos". O
   texto de leitura das telas (o aviso da grade da agenda, a descrição dos cartões do CRM, a nota da
   conta) não fica abaixo de 16px no computador; antes ficava em .84 a .88rem (14,6 a 15,3px a 1440). Os títulos, os
   rótulos curtos e os botões continuam como estão. As telas de DOCUMENTO ficam de fora pelo mesmo
   filtro do rem que cresce (receituário, atestados, exames, laudos, encaminhamentos, modelos,
   orientações), e a folha impressa não é tocada (tudo aqui é @media screen). tests/letra-pc.test.js. */
@media (min-width: 1100px) {
  :where(:root:not(:has(#rx-app, #at-view, script:is([src="js/exames-page.js"], [src="js/laudos.js"],
    [src="js/encaminhamentos-page.js"], [src="js/modelos-especialidade.js"], [src="js/orientacoes.js"])))) :where(body:not(.loja-body)) main
    :is(.ag-grade-aviso, .cx-cartao-desc, .conta-nota) { font-size: 16px; }
}

} /* fim do @media screen da CAMADA CHAPA */