/* =====================================================================
   SGQ — design system
   Mobile-first: o padrão é celular; tablet e desktop entram por min-width.
   Tudo em rem + clamp() para acompanhar o zoom/tamanho de fonte do usuário.
   ===================================================================== */

:root {
    /* ------------------------------------------------------------- MARCA
       Amostrado do site do Centro da Visão (centrodavisao.com), medindo a
       ÁREA que cada cor ocupa na página — não a contagem de elementos, que
       daria peso a ícone de widget. As seções usam verde em três tons e roxo
       como apoio; o logo é monocromático.

       Para trocar a marca inteira, mude só estas três linhas: todo o resto
       do sistema deriva delas. */
    --marca: #097747;              /* verde escuro das seções do site */
    --marca-escura: #05543a;
    --marca-clara: #e9f6f0;
    --marca-apoio: #9155a7;        /* roxo secundário do site */

    --cor-primaria: var(--marca);
    --cor-primaria-escura: var(--marca-escura);
    --cor-primaria-clara: var(--marca-clara);

    --cor-texto: #101828;
    /* Era #667085: 4,42:1 sobre --cor-fundo, abaixo do mínimo AA de 4,5 para
       texto. Passava no cartão (4,97) e reprovava na página — a diferença que
       nenhuma revisão pega no olho. Escurecido o mínimo para passar nos três
       fundos em que ele aparece. ContrasteDaPaletaTests agora tranca. */
    --cor-texto-suave: #636d82;
    /* A intenção do comentário original estava certa e o valor não entregava:
       #98a2b3 dava 2,58:1 sobre branco e 2,46:1 sobre o campo, contra o mínimo
       de 3:1 que a WCAG 1.4.11 pede para limite de componente. Numa clínica
       oftalmológica, borda de campo que some é problema de operação. */
    --cor-borda: #8490a4;          /* borda de campo: precisa ser vista sobre branco */
    --cor-borda-clara: #dde1e7;
    --cor-fundo: #eef2f6;          /* fundo da página mais escuro que o cartão */
    --cor-superficie: #ffffff;     /* cartão */
    --cor-campo: #f8fafc;          /* campo levemente tingido, para não sumir no cartão */
    --cor-campo-foco: #ffffff;

    /* A marca é verde e "conforme" também seria verde: as duas juntas fariam
       o olho confundir botão com status aprovado. O status de sucesso puxa
       para o azulado (teal) para se separar da marca sem deixar de ser lido
       como positivo — e continua distinguível de alerta e erro. */
    --cor-ok: #0e7490;
    --cor-ok-fundo: #ecfeff;
    --cor-alerta: #b54708;
    --cor-alerta-fundo: #fffaeb;
    --cor-erro: #b42318;
    --cor-erro-fundo: #fef3f2;
    --cor-info: #175cd3;
    --cor-info-fundo: #eff8ff;
    /* Violeta: só para "pausado por decisão" (ex. contrato suspenso). Não é
       urgência (alerta/erro) nem estado formando (info) nem saudável (ok) — é
       um quarto estado que precisa parar de se confundir com alerta. */
    --cor-pausa: #6941c6;
    --cor-pausa-fundo: #f4f3ff;

    /* Raio maior é o sinal mais barato de "atual": os mesmos cartões, menos
       burocráticos. O raio-sm acompanha para botão e campo não destoarem. */
    --raio: 0.75rem;
    --raio-sm: 0.5rem;

    /* Sombra em duas camadas: uma curta de contato e uma longa de ambiente.
       Uma sombra só, dura, é o que fazia o cartão parecer recortado. */
    --sombra-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --sombra: 0 8px 24px -6px rgba(16, 24, 40, 0.14), 0 2px 6px -2px rgba(16, 24, 40, 0.06);

    /* A faixa superior inteira escala por este número — altura, respiros,
       marca, data, nome da empresa, versão e avatar. Ficou um token e não
       valores maiores escritos um a um porque a faixa só funciona se tudo
       nela crescer JUNTO: aumentar a altura e esquecer a fonte produz uma
       tarja vazia com letrinha no meio. */
    --escala-topo: 1.5;

    /* Nome da empresa e versão em corpo triplo: são a resposta a "em que clínica
       estou" e "em que versão isto está rodando" — a segunda é o primeiro dado
       que se pergunta quando alguém relata um problema. Token próprio porque
       eles crescem MAIS que o resto da faixa, e não junto.

       Aplicado SÓ nas regras de .app__identidade, no fim do arquivo. Elas são
       mais específicas e vencem as de .app__empresa/.app__versao — multiplicar
       nos dois lugares daria 4,5x no cálculo e 3x na tela, que é o pior tipo de
       divergência: a que não quebra nada. */
    --escala-identidade: 3;

    /* A faixa tem a altura que foi pedida — +50% — e para de crescer aqui.
       Ela chegou a subir para caber a identidade empilhada em corpo triplo; a
       saída certa era outra: nome e versão passaram a dividir a MESMA linha, e
       aí cabem sem que a faixa coma um sexto da tela. */
    --altura-topo: calc(3.5rem * var(--escala-topo));
    --largura-menu: 16rem;

    /* Alvo mínimo de toque em celular (acessibilidade). */
    --alvo-toque: 2.75rem;

    /* ------------------------------------------------- VINDO DAS ONDAS
       Espaçamento (onda 2), cores do menu (onda 3) e sombra de cartão e
       duração (onda 4) moravam em blocos :root soltos no fim do arquivo.
       Aquilo era deliberado — dava para reverter uma onda inteira sem caçar
       edição espalhada — e serviu enquanto as ondas estavam em curso.

       Agora cobra: um token declarado em dois lugares diverge sem avisar,
       e foi o que aconteceu com --raio e --sombra. E, para haver TEMA, é
       preciso poder dizer o que é a paleta base — a lista que todo tema
       tem de cobrir inteira. Isso não se lê espalhado por quatro blocos.
       A reversão por onda continua existindo: chama-se git. */

    /* Escala de espaçamento — nomeia o que já era usado como valor solto. */
    --espaco-1: 0.25rem;
    --espaco-2: 0.5rem;
    --espaco-3: 0.75rem;
    --espaco-4: 1rem;
    --espaco-5: 1.5rem;
    --espaco-6: 2rem;

    /* Menu: o texto era cinza-claro sobre branco, a mesma cor de fundo do
       conteúdo, e nada nele se destacava. Fundo escuro na família da marca
       (não um cinza qualquer) separa "onde eu navego" de "o que eu leio". */
    --cor-nav-fundo: #0b2418;
    --cor-nav-texto: #f2f4f7;
    --cor-nav-texto-suave: #9aa4b2;
    --cor-nav-hover: rgba(255, 255, 255, 0.08);
    --cor-nav-borda: rgba(255, 255, 255, 0.1);

    --sombra-cartao: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 4px -1px rgba(16, 24, 40, 0.05);

    /* Uma duração só para o sistema inteiro: interface em que cada peça
       anima num tempo diferente parece montada, não desenhada. */
    --transicao: 0.15s ease;
    /* ------------------------------------------------- TINTA SOBRE COR
       Todo token de superfície colorida precisa do par que diz o que se
       escreve EM CIMA dela. Sem esse par, o `color: #fff` fica preso dentro
       da regra e nenhum tema o alcança — é exatamente assim que um botão
       nasce ilegível quando o tema muda o preenchimento e não muda a letra. */
    --tinta-sobre-marca: #ffffff;

    /* O preenchimento do botão que decide. É token próprio, e não var(--marca)
       disfarçado, porque --marca pinta DUAS coisas ao mesmo tempo: a faixa do
       topo e o botão principal. Enquanto as duas forem a mesma cor, nenhum tema
       pode clarear o botão sem clarear a faixa — e faixa clara com letra clara
       é uma barra ilegível. Separar custou duas linhas. */
    --acao: var(--marca);
    --acao-hover: var(--marca-escura);
    --acao-tinta: var(--tinta-sobre-marca);
    --tinta-sobre-erro: #ffffff;
    --tinta-sobre-ok: #ffffff;
    --tinta-sobre-escuro: #ffffff;   /* topo, menu, bloqueio, foco no escuro */

    /* ------------------------------------- RAMPA DE CLARO SOBRE ESCURO
       Nove degraus do MESMO branco, usados para clarear superfície escura:
       realce de item ativo, brilho de botão, borda sobre a faixa, barra de
       rolagem. O nome é a opacidade em centésimos porque qualquer nome
       "semântico" aqui mentiria: o que separa um degrau do outro é só
       quanto ele clareia. Um tema redefine a rampa inteira de uma vez. */
    --claro-08: rgba(255, 255, 255, 0.08);
    --claro-10: rgba(255, 255, 255, 0.1);
    --claro-12: rgba(255, 255, 255, 0.12);
    --claro-14: rgba(255, 255, 255, 0.14);
    --claro-15: rgba(255, 255, 255, 0.15);
    --claro-16: rgba(255, 255, 255, 0.16);
    --claro-25: rgba(255, 255, 255, 0.25);
    --claro-35: rgba(255, 255, 255, 0.35);
    --claro-40: rgba(255, 255, 255, 0.4);
    --claro-45: rgba(255, 255, 255, 0.45);

    /* ------------------------------------------------------------ VÉUS
       O que escurece a tela atrás de um modal ou do menu aberto. */
    --veu: rgba(16, 24, 40, 0.45);
    --veu-forte: rgba(16, 24, 40, 0.5);
    --veu-modal: rgba(12, 18, 28, 0.45);

    /* -------------------------------------------------- BORDAS DE AVISO
       A faixa dos avisos: fundo claro do estado, texto na cor do estado e
       uma borda no meio do caminho entre os dois. Ela existia só dentro da
       regra, então o tema escuro herdaria cinco bordas claras. */
    --cor-ok-borda: #abefc6;
    --cor-erro-borda: #fecdca;
    --cor-alerta-borda: #fedf89;
    --cor-info-borda: #b2ddff;
    --cor-pausa-borda: #d9d6fe;

    /* Versões escuras de ok e erro, usadas na borda da opção marcada. */
    --cor-ok-escura: #0b5c72;
    --cor-erro-escura: #8f1c13;

    /* ------------------------------------------------ SUPERFÍCIES FINAS
       Fundos e bordas de um passo só de distância do branco. São os que
       mais somem num tema escuro se ficarem escritos na regra. */
    --cor-borda-cartao: #e7ecf1;
    --cor-borda-cartao-antiga: #e4e7ec;     /* onda anterior, ainda no arquivo */
    --cor-borda-tabela: #eaecf0;
    --cor-borda-botao: #d0d5dd;
    --cor-linha-hover: #f4f8fb;
    --cor-linha-hover-antiga: #f7f9fc;      /* onda anterior, ainda no arquivo */
    --cor-linha-alerta: #fffbfa;
    --cor-linha-anulada: #fafbfc;
    --cor-vazio-fundo: #fcfcfd;
    --cor-trilha-feita: #067647;
    --cor-trilha-feita-borda: #d1fadf;
    --cor-trilha-feita-fundo: #f6fef9;
    --cor-bloqueio-fundo: #1f2933;
    --cor-camera-fundo: #000000;

    /* ---------------------------------------------------------- SOMBRAS
       Sombra é cor com opacidade, e num tema escuro ela precisa de outra
       opacidade — sombra preta sobre fundo preto não existe. Por isso cada
       uma vira token, inteira: o tema troca a sombra, não o desfoque. */
    --sombra-cartao-antiga: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --sombra-opcao: 0 1px 2px rgba(16, 24, 40, 0.18);
    --sombra-erro-ui: 0 -1px 4px rgba(0, 0, 0, 0.1);
    --sombra-kpi: 0 2px 10px rgba(0, 0, 0, 0.12);
    --sombra-estado: 0 1px 2px rgba(16, 24, 40, 0.2);
    --sombra-modal: 0 24px 48px -12px rgba(16, 24, 40, 0.25);
    --sombra-login: 0 24px 48px -12px rgba(3, 42, 28, 0.45);
    --sombra-bloqueio: 0 12px 28px -8px rgba(0, 0, 0, 0.5);
    --sombra-logo: 0 1px 2px rgba(3, 42, 28, 0.3);
    --brilho-marca: rgba(5, 84, 58, 0.35);
    --brilho-marca-forte: rgba(5, 84, 58, 0.4);
    --anel-foco: rgba(9, 119, 71, 0.12);

    /* ------------------------------------------- IDENTIDADE DO PRODUTO
       As cores do logotipo do Ziip. NÃO seguem tema: logotipo que muda de
       cor conforme a interface deixa de ser logotipo. Ficam aqui porque
       cor escrita na regra é cor que ninguém encontra — não porque sejam
       paleta. O teste de tema ignora tudo que começa com --logo-. */
    /* Amostras do seletor de tema. São RETRATOS de cada tema, então não podem
       seguir o tema ativo: uma amostra que muda de cor junto com a tela deixa
       de ser amostra. Mesma isenção do logotipo no PaletaETemasTests. */
    --amostra-claro-barra: #097747;   --amostra-claro-corpo: #eef2f6;
    --amostra-escuro-barra: #0e7849;  --amostra-escuro-corpo: #0a1410;
    --amostra-verde-barra: #0d7a4c;   --amostra-verde-corpo: #061711;

    --logo-azul: #347CAD;
    --logo-verde: #5CAF74;
    --logo-menta: #34d399;
    --logo-tinta: #0b2540;

}

/* =====================================================================
   TEMAS

   Quem manda é o atributo data-tema no <html>, escrito pelo servidor antes
   da primeira pintura. Com DOIS temas, uma @media (prefers-color-scheme)
   resolveria; a partir do TERCEIRO ela obriga a escrever o mesmo bloco duas
   vezes — e bloco gêmeo diverge. Então: um bloco por tema, e a decisão de
   qual aplicar é feita uma vez, em C#, onde ela pode consultar a preferência
   da pessoa e não pisca.

   Cada bloco redefine SÓ token. Nenhuma regra de componente sabe que existe
   tema — é isso que faz o quarto tema custar horas em vez de semanas, e é o
   que PaletaETemasTests tranca: todo tema tem de cobrir a paleta de cor
   inteira, porque token esquecido herda a cor do claro, e herdar uma cor
   clara dentro de um tema escuro é uma tela ilegível descoberta por quem
   está usando o sistema.

   A onda 4 tinha escrito que modo escuro exigiria "reauditar cada cor
   literal". Estava certa — foi o que as frentes 0 e 1 fizeram. Não sobrou
   cor literal fora da paleta, e por isso estes dois blocos cabem aqui.
   ===================================================================== */

/* ------------------------------------------------------------- ESCURO
   Cinza-esverdeado, não preto: preto puro com texto branco vibra a 21:1 e
   cansa em turno de oito horas. A navegação fica MAIS escura que o
   conteúdo, e não mais clara — no claro ela se separa por ser escura, no
   escuro ela se separa por ser a superfície mais funda da tela.

   O verde da marca aqui é o PREENCHIMENTO do botão e o fio do sistema ao
   mesmo tempo, então ele tem de servir aos dois: 4,5:1 contra a letra que
   vai em cima dele e 3:1 contra o cartão em que ele desenha uma linha.  */
:root[data-tema="escuro"] {
    color-scheme: dark;

    --marca: #0e7849;
    --marca-escura: #0a5c38;
    --marca-clara: #10301f;
    --marca-apoio: #c99ad9;

    --cor-texto: #e2eae5;
    --cor-texto-suave: #a6b8af;
    --cor-borda: #567362;
    --cor-borda-clara: #2a3e35;
    --cor-fundo: #0a1410;
    --cor-superficie: #111d18;
    --cor-campo: #16241e;
    --cor-campo-foco: #1b2c24;

    /* Estado no escuro inverte o par: a cor do estado CLAREIA e o fundo
       dela escurece. Manter o #b42318 do claro sobre um cartão escuro daria
       um vermelho que não se lê — e vermelho que não se lê num sistema de
       ocorrência é a pior economia possível. */
    --cor-ok: #5ab8cf;      --cor-ok-fundo: #0b2730;
    --cor-alerta: #e5a05a;  --cor-alerta-fundo: #2d1d0c;
    --cor-erro: #f0857c;    --cor-erro-fundo: #2e120f;
    --cor-info: #7fadf2;    --cor-info-fundo: #0f1e36;
    --cor-pausa: #a98ce8;   --cor-pausa-fundo: #1b1634;

    --cor-nav-fundo: #08120e;
    --cor-nav-texto: #e2eae5;
    --cor-nav-texto-suave: #90a69a;
    --cor-nav-hover: rgba(255, 255, 255, 0.06);
    --cor-nav-borda: rgba(255, 255, 255, 0.08);

    /* A razão de estes quatro existirem. No claro os três primeiros são
       branco; aqui, dois deles viram ESCUROS — porque no escuro o
       preenchimento de "erro" e de "conforme" é uma cor clara, e branco
       sobre salmão claro não se lê. Sem o par, o tema trocaria o fundo do
       botão e deixaria a letra para trás. */
    --acao: #0e7849;
    --acao-hover: #0a5c38;
    --acao-tinta: #eafaf2;

    --tinta-sobre-marca: #eafaf2;
    --tinta-sobre-erro: #2e120f;
    --tinta-sobre-ok: #06222a;
    --tinta-sobre-escuro: #e8f0ec;

    /* A rampa continua clareando: as superfícies que ela clareia (faixa,
       menu, botão) seguem escuras neste tema. Os degraus baixam um pouco
       porque o contraste de partida já é maior. */
    --claro-08: rgba(255, 255, 255, 0.06);
    --claro-10: rgba(255, 255, 255, 0.08);
    --claro-12: rgba(255, 255, 255, 0.1);
    --claro-14: rgba(255, 255, 255, 0.12);
    --claro-15: rgba(255, 255, 255, 0.12);
    --claro-16: rgba(255, 255, 255, 0.13);
    --claro-25: rgba(255, 255, 255, 0.2);
    --claro-35: rgba(255, 255, 255, 0.28);
    --claro-40: rgba(255, 255, 255, 0.32);
    --claro-45: rgba(255, 255, 255, 0.36);

    /* Véu preto: o azulado do claro (16,24,40) sobre um fundo já escuro
       vira uma névoa cinza que não separa nada. */
    --veu: rgba(0, 0, 0, 0.6);
    --veu-forte: rgba(0, 0, 0, 0.7);
    --veu-modal: rgba(0, 0, 0, 0.65);

    --cor-ok-borda: #1f5563;
    --cor-erro-borda: #6b2b25;
    --cor-alerta-borda: #61400f;
    --cor-info-borda: #234170;
    --cor-pausa-borda: #3a2f66;

    --cor-ok-escura: #8fd8e8;
    --cor-erro-escura: #f7b3ad;

    --cor-borda-cartao: #24352d;
    --cor-borda-cartao-antiga: #24352d;
    --cor-borda-tabela: #1f2e27;
    --cor-borda-botao: #3c5347;
    --cor-linha-hover: #16241e;
    --cor-linha-hover-antiga: #16241e;
    --cor-linha-alerta: #241811;
    --cor-linha-anulada: #131d18;
    --cor-vazio-fundo: #0e1a15;
    --cor-trilha-feita: #0e804f;
    --cor-trilha-feita-borda: #1d4f37;
    --cor-trilha-feita-fundo: #0e2418;
    --cor-bloqueio-fundo: #1f2933;
    --cor-camera-fundo: #000000;

    --brilho-marca: rgba(0, 0, 0, 0.35);
    --brilho-marca-forte: rgba(0, 0, 0, 0.45);
    --anel-foco: rgba(70, 196, 139, 0.22);
}

/* -------------------------------------------------------------- VERDE
   O verde da marca como CHÃO, não como botão. O fundo vem do #0b2418 que a
   navegação já usava — não é cor nova, é a cor que o sistema já tinha,
   ocupando a tela inteira.

   A armadilha deste tema é o botão: verde sobre verde some. Por isso aqui a
   ação INVERTE — preenchimento de menta luminosa com letra verde-escura. O
   botão principal passa a ser a coisa mais visível da tela, em vez da mais
   escondida, e a inversão só é possível porque --tinta-sobre-marca existe
   como token.                                                            */
:root[data-tema="verde"] {
    color-scheme: dark;

    --marca: #0d7a4c;
    --marca-escura: #095a38;
    --marca-clara: #0f3323;
    --marca-apoio: #d4a9e2;

    --cor-texto: #e9f4ee;
    --cor-texto-suave: #abc9b8;
    --cor-borda: #477d5b;
    --cor-borda-clara: #23492f;
    --cor-fundo: #061711;
    --cor-superficie: #0c2318;
    --cor-campo: #112c1e;
    --cor-campo-foco: #173725;

    --cor-ok: #67c8dd;      --cor-ok-fundo: #07272e;
    --cor-alerta: #e8ae6b;  --cor-alerta-fundo: #2e1f0c;
    --cor-erro: #ff9b91;    --cor-erro-fundo: #33130f;
    --cor-info: #8fb8f5;    --cor-info-fundo: #0e1d34;
    --cor-pausa: #b79ceb;   --cor-pausa-fundo: #1d1738;

    /* Aqui a navegação não pode ser "mais verde que o verde": ela vira a
       superfície mais funda, e quem a separa do conteúdo é a profundidade,
       não a cor. */
    --cor-nav-fundo: #04120c;
    --cor-nav-texto: #e9f4ee;
    --cor-nav-texto-suave: #93b6a2;
    --cor-nav-hover: rgba(255, 255, 255, 0.06);
    --cor-nav-borda: rgba(255, 255, 255, 0.08);

    /* A inversão. Sobre um chão verde-escuro, botão verde some; uma cor de texto
       luminosa com letra verde-escura faz o botão principal ser a coisa mais
       visível da tela, em vez da mais escondida. Só é possível porque --acao
       deixou de ser a mesma coisa que --marca. */
    --acao: #5bd39a;
    --acao-hover: #8fe6bb;
    --acao-tinta: #06251a;

    --tinta-sobre-marca: #eafaf2;
    --tinta-sobre-erro: #33130f;
    --tinta-sobre-ok: #062229;
    --tinta-sobre-escuro: #e9f4ee;

    --claro-08: rgba(255, 255, 255, 0.06);
    --claro-10: rgba(255, 255, 255, 0.08);
    --claro-12: rgba(255, 255, 255, 0.1);
    --claro-14: rgba(255, 255, 255, 0.12);
    --claro-15: rgba(255, 255, 255, 0.12);
    --claro-16: rgba(255, 255, 255, 0.13);
    --claro-25: rgba(255, 255, 255, 0.2);
    --claro-35: rgba(255, 255, 255, 0.28);
    --claro-40: rgba(255, 255, 255, 0.32);
    --claro-45: rgba(255, 255, 255, 0.36);

    --veu: rgba(1, 10, 6, 0.62);
    --veu-forte: rgba(1, 10, 6, 0.74);
    --veu-modal: rgba(1, 10, 6, 0.68);

    --cor-ok-borda: #1c5560;
    --cor-erro-borda: #6d2a24;
    --cor-alerta-borda: #63430f;
    --cor-info-borda: #21406e;
    --cor-pausa-borda: #3b3168;

    --cor-ok-escura: #9adcea;
    --cor-erro-escura: #ffc0b8;

    --cor-borda-cartao: #1d3f2a;
    --cor-borda-cartao-antiga: #1d3f2a;
    --cor-borda-tabela: #183424;
    --cor-borda-botao: #3a6a4c;
    --cor-linha-hover: #112c1e;
    --cor-linha-hover-antiga: #112c1e;
    --cor-linha-alerta: #241a11;
    --cor-linha-anulada: #0a1f15;
    --cor-vazio-fundo: #081d14;
    --cor-trilha-feita: #0d7a4c;
    --cor-trilha-feita-borda: #1f5136;
    --cor-trilha-feita-fundo: #0a2a1a;
    --cor-bloqueio-fundo: #14221b;
    --cor-camera-fundo: #000000;

    --brilho-marca: rgba(0, 0, 0, 0.35);
    --brilho-marca-forte: rgba(0, 0, 0, 0.45);
    --anel-foco: rgba(91, 211, 154, 0.24);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 0.5rem; line-height: 1.25; font-weight: 600; }
h1 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); }
h2 { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); }
h3 { font-size: 1.0625rem; }
p { margin: 0 0 0.75rem; }
a { color: var(--cor-primaria); }

/* ---------------------------------------------------------------- shell */

.app {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.app__topo {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: calc(0.75rem * var(--escala-topo));
    height: var(--altura-topo);
    padding: 0 calc(1rem * var(--escala-topo));
    background: var(--cor-primaria);
    color: var(--tinta-sobre-escuro);
    box-shadow: var(--sombra-sm);
}

.app__marca {
    font-weight: 600;
    font-size: calc(1.0625rem * var(--escala-topo));
    color: var(--tinta-sobre-escuro);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Versão colada na marca: discreta, mas sempre visível e selecionável — quem
   relata um problema precisa poder copiar esse número. */
.app__versao {
    /* Sem a escala da identidade: quem manda no tamanho aqui e a regra de
       .app__identidade, mais especifica, la embaixo. */
    font-size: calc(0.6875rem * var(--escala-topo));
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
    padding: calc(0.0625rem * var(--escala-topo)) calc(0.375rem * var(--escala-topo));
    border: 1px solid var(--claro-35);
    border-radius: 999px;
    white-space: nowrap;
    flex: none;
}

.app__empresa {
    font-size: calc(0.8125rem * var(--escala-topo));
    opacity: 0.85;
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45%;
}

.app__menu-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--alvo-toque) * var(--escala-topo));
    height: calc(var(--alvo-toque) * var(--escala-topo));
    margin-left: calc(-0.5rem * var(--escala-topo));
    border: 0;
    border-radius: var(--raio-sm);
    background: transparent;
    color: var(--tinta-sobre-escuro);
    font-size: calc(1.5rem * var(--escala-topo));
    line-height: 1;
    cursor: pointer;
}

.app__menu-botao:hover { background: var(--claro-12); }

.app__corpo { display: flex; flex: 1; min-height: 0; }

/* Menu: gaveta sobreposta no celular, coluna fixa no desktop. */
.app__nav {
    position: fixed;
    inset: var(--altura-topo) auto 0 0;
    z-index: 25;
    width: min(var(--largura-menu), 82vw);
    padding: 0.75rem;
    overflow-y: auto;
    background: var(--cor-superficie);
    border-right: 1px solid var(--cor-borda-clara);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
}

.app__nav--aberto { transform: translateX(0); }

.app__overlay {
    position: fixed;
    inset: var(--altura-topo) 0 0 0;
    z-index: 20;
    background: var(--veu);
    border: 0;
    padding: 0;
}

.app__conteudo {
    flex: 1;
    min-width: 0;
    padding: 1rem;
    padding-bottom: 3rem;
}

.nav__grupo { margin-bottom: 1rem; }

.nav__titulo {
    padding: 0 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

.nav__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: var(--alvo-toque);
    padding: 0.5rem 0.75rem;
    border-radius: var(--raio-sm);
    color: var(--cor-texto);
    text-decoration: none;
    font-size: 0.9375rem;
}

.nav__link:hover { background: var(--cor-fundo); }

.nav__link.active {
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
    font-weight: 600;
}

.nav__icone { flex: none; width: 1.25rem; text-align: center; }

/* Sub-item de um link do menu (ex.: Avisos e notificações dentro de Minha
   conta) — mesma linha visual, um degrau mais para dentro. */
.nav__link--sub { padding-left: 2rem; font-size: 0.875rem; }

/* ------------------------------------------------------------- cabeçalho */

.pagina__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.pagina__cabecalho > div:first-child { flex: 1 1 15rem; min-width: 0; }
.pagina__acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pagina__subtitulo { margin: 0; color: var(--cor-texto-suave); font-size: 0.9375rem; }

/* ---------------------------------------------------------------- cartão */

.cartao {
    padding: 1.25rem;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda-clara);
    border-radius: var(--raio);
    box-shadow: var(--sombra-cartao-antiga);
}

.cartao + .cartao { margin-top: 1rem; }
.cartao__titulo { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; }

/* Grade que se adapta sozinha à largura — sem media query. */
.grade {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.indicador__valor { font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.indicador__rotulo { color: var(--cor-texto-suave); font-size: 0.875rem; }

/* --------------------------------------------------------------- tabelas */

.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.tabela th, .tabela td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--cor-borda-clara);
    vertical-align: top;
}

.tabela th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cor-texto-suave);
    background: var(--cor-fundo);
    white-space: nowrap;
}

.tabela tbody tr:hover { background: var(--cor-fundo); }
.tabela__numero { text-align: right; font-variant-numeric: tabular-nums; }

/* Coluna de ação presa na borda direita: numa tabela larga com rolagem
   horizontal (linha com contraparte, tipo, natureza, vigência, valor,
   situação...), o botão de editar ficava atrás da rolagem e só reaparecia
   quando um filtro estreitava a tabela por acaso. Presa, ela viaja com a
   rolagem e o botão nunca some. Só faz sentido no modo tabela — no cartão do
   celular a coluna já vira uma linha normal, sem rolagem para prender contra. */
@media (min-width: 48em) {
    .tabela__coluna-fixa {
        position: sticky;
        right: 0;
        background: var(--cor-superficie);
        box-shadow: -1px 0 0 var(--cor-borda-clara);
    }

    .tabela tbody tr:hover .tabela__coluna-fixa { background: var(--cor-fundo); }
}

/* No celular a tabela vira lista de cartões: cada célula ganha o rótulo da
   coluna via data-rotulo, evitando rolagem horizontal em telas estreitas. */
@media (max-width: 47.99em) {
    .tabela--cartoes thead { display: none; }

    .tabela--cartoes tr {
        display: block;
        margin-bottom: 0.75rem;
        padding: 0.25rem 0;
        border: 1px solid var(--cor-borda-clara);
        border-radius: var(--raio);
        background: var(--cor-superficie);
    }

    .tabela--cartoes td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border: 0;
        padding: 0.375rem 0.75rem;
        text-align: right;
    }

    .tabela--cartoes td::before {
        content: attr(data-rotulo);
        flex: none;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--cor-texto-suave);
        text-align: left;
    }

    .tabela--cartoes td:first-child {
        font-weight: 600;
        border-bottom: 1px solid var(--cor-borda-clara);
        padding-bottom: 0.5rem;
        margin-bottom: 0.25rem;
    }
}

/* ------------------------------------------------------------ formulários */

.formulario { display: grid; gap: 1rem; }

.campos {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.campo { display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; }
.campo--largo { grid-column: 1 / -1; }

.campo__rotulo { font-size: 0.875rem; font-weight: 500; }
.campo__dica { font-size: 0.8125rem; color: var(--cor-texto-suave); }

/* Explicação curta junto ao próprio rótulo — para quando o campo__dica abaixo
   do controle ficaria longe demais do que ela está explicando. */
.campo__dica-inline { font-size: 0.75rem; font-weight: 400; color: var(--cor-texto-suave); margin-inline-start: 0.25rem; }
.campo__erro { font-size: 0.8125rem; color: var(--cor-erro); }
.campo__obrigatorio { color: var(--cor-erro); }

.entrada, .selecao, .area-texto {
    width: 100%;
    min-height: var(--alvo-toque);
    padding: 0.5rem 0.75rem;
    font: inherit;
    /* 16px evita o zoom automático do iOS ao focar o campo. */
    font-size: max(1rem, 0.9375rem);
    color: var(--cor-texto);
    /* Campo branco dentro de cartão branco fica invisível: só a borda separava.
       Um fundo levemente tingido resolve sem depender de o usuário enxergar
       uma linha de 1px. */
    background: var(--cor-campo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
}

.entrada:hover:not(:disabled), .selecao:hover:not(:disabled), .area-texto:hover:not(:disabled) {
    border-color: var(--cor-primaria);
}

.area-texto { min-height: 6rem; resize: vertical; }

.entrada:focus-visible, .selecao:focus-visible, .area-texto:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 1px;
    border-color: var(--cor-primaria);
    background: var(--cor-campo-foco);
}

.entrada:disabled, .selecao:disabled, .area-texto:disabled {
    background: var(--cor-fundo);
    color: var(--cor-texto-suave);
}

.entrada.invalido, .selecao.invalido, .area-texto.invalido { border-color: var(--cor-erro); }

/* Caixa de seleção e botão de opção nativos. O accent do navegador é azul —
   cor que neste sistema não significa nada — e a caixa nativa de ~13px fica
   perdida ao lado de campos com --alvo-toque. O tamanho sobe para legível em
   tablet; o alvo de toque de verdade continua sendo o <label class="linha">
   que embala cada caixa nos checklists e cadastros. flex: none porque .linha
   é flex e uma caixa espremida para o texto caber é pior do que quebrar linha. */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--cor-primaria);
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
}

/* --------------------------------------------------------------- botões */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: var(--alvo-toque);
    padding: 0.5rem 1rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--raio-sm);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.botao:disabled { opacity: 0.55; cursor: not-allowed; }

.botao--primario { background: var(--acao); color: var(--acao-tinta); }
.botao--primario:hover:not(:disabled) { background: var(--acao-hover); }

.botao--secundario { background: var(--cor-superficie); color: var(--cor-texto); border-color: var(--cor-borda); }
.botao--secundario:hover:not(:disabled) { background: var(--cor-fundo); }

.botao--perigo { background: var(--cor-erro); color: var(--tinta-sobre-erro); }
.botao--sucesso { background: var(--cor-ok); color: var(--tinta-sobre-ok); }

.botao--texto { background: transparent; color: var(--cor-primaria); padding-inline: 0.5rem; }
.botao--texto:hover:not(:disabled) { text-decoration: underline; }

.botao--pequeno { min-height: 2.25rem; padding: 0.25rem 0.625rem; font-size: 0.875rem; }
.botao--bloco { width: 100%; }

/* Em celular, a barra de ações do formulário ocupa a largura toda. */
.acoes-formulario { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (max-width: 35.99em) {
    .acoes-formulario .botao { flex: 1 1 100%; }
}

/* -------------------------------------------------------------- etiquetas */

.etiqueta {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.etiqueta--neutra { background: var(--cor-borda-clara); color: var(--cor-texto-suave); }
.etiqueta--ok { background: var(--cor-ok-fundo); color: var(--cor-ok); }
.etiqueta--alerta { background: var(--cor-alerta-fundo); color: var(--cor-alerta); }
.etiqueta--erro { background: var(--cor-erro-fundo); color: var(--cor-erro); }
.etiqueta--pausa { background: var(--cor-pausa-fundo); color: var(--cor-pausa); }

/* Lacuna de cadastro: dado que falta, não prazo que corre.

   Era cinza sobre cinza, e o discreto virou invisível: "fora do cadastro" numa
   nota é trabalho parado — sem fornecedor não se lança a nota, não se concilia
   pedido e não se cobra documento vencido — e a etiqueta que anuncia isso
   passava despercebida numa lista de trinta linhas. Ganhou o âmbar de coisa
   pendente e um marcador na frente.

   O TRACEJADO fica, e é ele que separa esta etiqueta das de urgência: âmbar
   sólido é prazo correndo, âmbar tracejado é dado faltando. Quem lê a lista
   duas vezes por semana aprende a diferença sem que ninguém explique. */
.etiqueta--lacuna {
    background: var(--cor-alerta-fundo);
    color: var(--cor-alerta);
    border: 1px dashed var(--cor-alerta);
    font-weight: 700;
}

/* O marcador vem do CSS e não do markup: a etiqueta é usada em telas
   diferentes, e um "!" esquecido numa delas seria a mesma informação com dois
   pesos. O aria-hidden é implícito — conteúdo gerado não é lido por leitor de
   tela, e o texto da etiqueta já diz tudo. */
.etiqueta--lacuna::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.9375rem;
    height: 0.9375rem;
    border-radius: 50%;
    background: var(--cor-alerta);
    color: var(--cor-alerta-fundo);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    flex: none;
}
.etiqueta--info { background: var(--cor-info-fundo); color: var(--cor-info); }

/* ---------------------------------------------------------------- avisos */

.aviso {
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: var(--raio-sm);
    border: 1px solid;
    font-size: 0.9375rem;
    margin-bottom: 1rem;
}

.aviso--ok { background: var(--cor-ok-fundo); border-color: var(--cor-ok-borda); color: var(--cor-ok); }
.aviso--erro { background: var(--cor-erro-fundo); border-color: var(--cor-erro-borda); color: var(--cor-erro); }
.aviso--alerta { background: var(--cor-alerta-fundo); border-color: var(--cor-alerta-borda); color: var(--cor-alerta); }
.aviso--info { background: var(--cor-info-fundo); border-color: var(--cor-info-borda); color: var(--cor-info); }

/* Mesmo tom tracejado da etiqueta--lacuna: dado que falta, não prazo correndo. */
.aviso--lacuna { background: var(--cor-fundo); border-color: var(--cor-borda); border-style: dashed; color: var(--cor-texto-suave); }

/* Mesmo violeta de etiqueta--pausa: decisão tomada, não urgência de prazo. */
.aviso--pausa { background: var(--cor-pausa-fundo); border-color: var(--cor-pausa-borda); color: var(--cor-pausa); }

.vazio {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--cor-texto-suave);
}

/* ---------------------------------------------------------------- modal */

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: var(--veu-forte);
}

.modal__caixa {
    width: 100%;
    max-height: 92dvh;
    overflow-y: auto;
    background: var(--cor-superficie);
    border-radius: var(--raio) var(--raio) 0 0;
    box-shadow: var(--sombra);
}

.modal__topo {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--cor-superficie);
    border-bottom: 1px solid var(--cor-borda-clara);
}

.modal__titulo { flex: 1; margin: 0; font-size: 1.0625rem; font-weight: 600; }
.modal__corpo { padding: 1rem; }
.modal__rodape {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--cor-superficie);
    border-top: 1px solid var(--cor-borda-clara);
}

@media (max-width: 35.99em) {
    .modal__rodape .botao { flex: 1; }
}

/* --------------------------------------------------------------- login */

.login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 1.5rem 1rem;
    background: linear-gradient(160deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
}

.login__caixa {
    width: 100%;
    max-width: 25rem;
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    background: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}

.login__marca { margin-bottom: 0.25rem; text-align: center; color: var(--cor-primaria); }
/* Subtítulo e versão em preto e negrito: os dois eram cinza-suave, o tom que o
   sistema usa para texto de apoio, e no cartão branco do login sumiam. São as
   duas únicas frases que dizem EM QUE SISTEMA e EM QUE VERSÃO a pessoa está
   entrando — e a versão é o primeiro dado que se pergunta quando alguém relata
   um problema. */
.login__sub {
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--cor-texto);
    font-size: 0.9375rem;
    font-weight: 700;
}

/* ----------------------------------------------------- opções de resposta */

/* Opções compactas: no desktop viram pílulas do tamanho do texto, lado a lado.
   No celular voltam a crescer, porque lá o dedo é o ponteiro. */
.opcoes { display: flex; flex-wrap: wrap; gap: 0.375rem; }

/* NÃO escolhida: recuada de propósito — texto suave, borda clara, fundo do
   campo. Antes as duas opções tinham quase o mesmo peso (a marcada era só um
   tingido pálido com borda colorida), e o que se via era um par de pílulas
   parecidas: a resposta DADA e a resposta POSSÍVEL lidas como a mesma coisa.
   Num checklist preenchido de pé, com o tablet na mão e o expediente correndo,
   "quase igual" vira "não dá para conferir sem chegar perto" — e conferir de
   relance é justamente para o que a lista serve. */
.opcao {
    flex: 0 1 auto;
    min-height: 2rem;
    padding: 0.25rem 0.75rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--cor-texto-suave);
    background: var(--cor-campo);
    border: 1px solid var(--cor-borda-clara);
    border-radius: 1rem;
    cursor: pointer;
    white-space: nowrap;
}

@media (max-width: 47.99em) {
    .opcao { flex: 1 1 6rem; min-height: var(--alvo-toque); font-size: 0.9375rem; }
}

/* O hover exclui as marcadas: `.opcao:hover` tem especificidade MAIOR que
   `.opcao--marcada`, e sem o :not() passar o mouse por cima apagaria o
   preenchimento da opção escolhida — exatamente o destaque que este bloco
   existe para criar. */
.opcao:not(.opcao--marcada):not(.opcao--marcada-ok):not(.opcao--marcada-erro):hover:not(:disabled) {
    background: var(--cor-fundo);
    border-color: var(--cor-borda);
    color: var(--cor-texto);
}

/* ESCOLHIDA: preenchida, não tingida. Fundo sólido na cor da resposta e texto
   branco — o contraste que faz a marcação ser lida de longe, e que separa
   "conforme" (teal) de "não conforme" (vermelho) sem depender de ler a
   palavra. */
.opcao--marcada,
.opcao--marcada-ok,
.opcao--marcada-erro {
    color: var(--tinta-sobre-erro);
    font-weight: 600;
    box-shadow: var(--sombra-opcao);
}

.opcao--marcada { background: var(--cor-primaria); border-color: var(--cor-primaria-escura); }
.opcao--marcada-ok { background: var(--cor-ok); border-color: var(--cor-ok-escura); }
.opcao--marcada-erro { background: var(--cor-erro); border-color: var(--cor-erro-escura); }

/* Checklist concluído fica com tudo desabilitado, e é nesse estado que ele é
   CONFERIDO. Por isso a marcada NÃO perde opacidade aqui: quem revisa depois
   precisa da mesma leitura de quem preencheu. Some só o convite ao clique. */
.opcao:disabled { cursor: default; }

/* 0.75, e não 0.5: a opção não escolhida continua sendo INFORMAÇÃO no
   checklist concluído — é ela que mostra o que estava em jogo quando a
   resposta foi dada. Apagar demais empobreceria a evidência. */
.opcao:not(.opcao--marcada):not(.opcao--marcada-ok):not(.opcao--marcada-erro):disabled {
    opacity: 0.75;
}

.item-checklist {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--cor-borda-clara);
}

.item-checklist:last-child { border-bottom: 0; }
.item-checklist__titulo { display: flex; gap: 0.5rem; font-size: 0.9375rem; }
.item-checklist__ordem { flex: none; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.item-checklist__resposta { justify-self: end; }
/* A observação ocupa a linha inteira, abaixo do par pergunta/resposta. */
.item-checklist__obs { grid-column: 1 / -1; }
.item-checklist .entrada { min-height: 2.25rem; padding: 0.25rem 0.5rem; }

/* No celular a resposta desce para baixo da pergunta — não cabe lado a lado. */
@media (max-width: 47.99em) {
    .item-checklist { grid-template-columns: 1fr; padding: 0.75rem 0; }
    .item-checklist__resposta { justify-self: stretch; }
    .item-checklist .entrada { min-height: var(--alvo-toque); }
}

/* --------------------------------------------------------------- utilidades */

.texto-suave { color: var(--cor-texto-suave); }
.texto-pequeno { font-size: 0.875rem; }
.texto-direita { text-align: right; }
.sem-quebra { white-space: nowrap; }
.empilha { display: flex; flex-direction: column; gap: 0.25rem; }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.espacador { flex: 1; }

/* ------------------------------------------------------ caixa de marcação
   Checkbox com o rótulo ao lado.

   NÃO É ".linha", e a diferença é visível: aquela é flex com flex-wrap, e
   rótulo que não cabe na largura do campo quebra para a linha de baixo —
   indo parar DEBAIXO da caixinha. Numa lista de marcações isso é pior que
   feio: a caixa fica órfã em cima e o texto solto embaixo, colado no item
   seguinte, e quem lê não sabe mais qual marcação pertence a qual frase.
   Foi assim que "Exige treinamento formal registrado" apareceu descolado
   da própria caixa na habilitação de equipamento, enquanto "Ato privativo
   de médico", mais curto, cabia e parecia certo.

   Grade de duas colunas resolve pelo desenho, e não pela sorte de o texto
   caber: a caixa ocupa o que precisa, o rótulo quebra DENTRO da coluna
   dele e nunca passa por baixo. */
.marcar {
    display: grid;
    /* Três colunas porque algumas marcações trazem uma etiqueta no fim
       ("núcleo", "nova"). Com duas, a etiqueta cairia para a linha de
       baixo e pareceria rótulo do item seguinte. Quem não tem etiqueta
       não paga nada: a terceira coluna simplesmente some. */
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0.5rem;
    cursor: pointer;
}

/* Alinha a caixa com a PRIMEIRA linha do rótulo. Com align-items:center um
   rótulo de duas linhas deixaria a caixa flutuando no meio do parágrafo. */
.marcar > input[type="checkbox"] { margin-top: 0.15rem; }

/* ------------------------------------------------- pastilhas de categoria
   Filtro por categoria. Mais denso que uma linha de cartões-KPI de propósito:
   são muitas categorias e o que se procura é o NOME com a contagem ao lado,
   não o número em destaque.

   Já foi rolagem horizontal (nowrap + overflow-x). Numa clínica com seis ou
   mais categorias a fileira ficava mais larga que a tela, e a barra fina
   (scrollbar-width: thin) quase não aparece no Windows/Chrome sem hover —
   pastilha sumia da vista sem nenhum sinal de que havia mais coisa ao lado,
   lida como "cadastro incompleto" em vez de "role para o lado". Quebrar em
   linha é sempre visível: nada fica escondido atrás de uma barra que ninguém
   percebe. */
.linha--pastilhas {
    flex-wrap: wrap;
}

.pastilha {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--cor-texto);
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda-clara);
    border-radius: 999px;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.pastilha:hover { border-color: var(--cor-borda); }
.pastilha:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

.pastilha--ativa {
    border-color: var(--cor-primaria);
    box-shadow: inset 0 0 0 1px var(--cor-primaria);
    background: var(--cor-primaria-clara);
}

.pastilha__contagem {
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    color: var(--cor-texto-suave);
    background: var(--cor-fundo);
    border-radius: 999px;
    padding: 0.0625rem 0.375rem;
}

.pastilha__contagem--alerta {
    color: var(--cor-alerta);
    background: var(--cor-alerta-fundo);
    font-weight: 600;
}

/* ------------------------------------------------- combo com busca */

/* Substitui <select> em toda lista longa (fornecedor, produto...) — rolar
   uma lista de centenas de itens até achar o certo é o tipo de tarefa que
   digitar três letras resolve na hora. */
.combo-pesquisa { position: relative; flex: 1; min-width: 0; }

.combo-pesquisa__limpar {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: var(--cor-texto-suave);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.125rem 0.25rem;
}
.combo-pesquisa__limpar:hover { color: var(--cor-texto); }

.combo-pesquisa__lista {
    position: absolute;
    z-index: 60;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda-clara);
    border-radius: var(--raio-sm);
    box-shadow: var(--sombra);
    padding: 0.25rem;
}

.combo-pesquisa__opcao {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 0.5rem 0.625rem;
    border-radius: var(--raio-sm);
    font: inherit;
    color: var(--cor-texto);
    cursor: pointer;
}
.combo-pesquisa__opcao:hover,
.combo-pesquisa__opcao--ativa { background: var(--cor-fundo); }

.combo-pesquisa__vazio {
    padding: 0.5rem 0.625rem;
    color: var(--cor-texto-suave);
    font-size: 0.875rem;
}

/* A lista de sugestões é `position: absolute`, então quem recorta é o ancestral
   com overflow — e `.tabela-rolagem` recorta. Na conferência de nota, onde o
   combo vive DENTRO da tabela de itens, a sugestão aparecia cortada e o
   container ganhava uma barra de rolagem própria (overflow-x: auto computa
   overflow-y: auto, mesmo sem ninguém pedir).

   `:has()` resolve sem JS: enquanto existir uma lista aberta lá dentro, o
   container para de recortar. Fechou a lista, o elemento sai do DOM (é
   `@if (_aberto)`) e a rolagem horizontal volta sozinha. O preço é não poder
   rolar a tabela de lado nos segundos em que a sugestão está aberta — e nesses
   segundos ninguém está rolando a tabela, está escolhendo o produto. */
.tabela-rolagem:has(.combo-pesquisa__lista) { overflow: visible; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
/* `.mb-1` fecha a família com o mesmo meio-passo de `.mt-1`. Ele não existia e
   era emitido por `PainelDoDataJud.razor` (três vezes), onde a classe não fazia
   nada: a guarda `ClasseDeCssExistenteTests` é que achou. */
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }

/* Lista sem marcador e sem recuo, e é o que o nome promete: uma lista de
   linhas curtas — as falhas que aguardam a próxima passada, a conciliação
   pendente — onde a bolinha e o recuo do navegador só empurram o texto. Não é
   decoração: sem ela a lista herda `list-style: disc` e o recuo padrão, e o
   cartão fica com duas hierarquias visuais onde a tela previa uma. */
.lista-simples { list-style: none; margin: 0; padding: 0; }

/* Texto de ATENÇÃO, e não de erro. A cor é `--cor-alerta`, a mesma de
   `aviso--alerta` e de `etiqueta--alerta`: a distinção que o sistema já faz
   entre "isto está errado" (`--cor-erro`) e "isto precisa de olho" continua
   valendo para o texto solto. Emitida por `Confianca`, `Crm`, `Envelopes` e
   `Honorarios` — "prazo estourado", "sem memória", "reprovada" — e nenhuma
   delas existia, o que deixava as quatro frases no mesmo tom do resto da
   linha. */
.texto-alerta { color: var(--cor-alerta); }

.apenas-leitor {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================== TABLET (>=48em) */
@media (min-width: 48em) {
    .app__conteudo { padding: 1.5rem; }
    .modal { align-items: center; padding: 1.5rem; }
    .modal__caixa { max-width: 40rem; border-radius: var(--raio); }
}

/* ========================================================== DESKTOP (>=64em) */
@media (min-width: 64em) {
    /* O menu deixa de ser gaveta e passa a ocupar uma coluna fixa. */
    .app__nav {
        position: sticky;
        top: var(--altura-topo);
        inset-inline-start: auto;
        height: calc(100dvh - var(--altura-topo));
        width: var(--largura-menu);
        flex: none;
        transform: none;
    }

    .app__menu-botao, .app__overlay { display: none; }
    .app__conteudo { padding: 2rem; max-width: 90rem; }
    .app__empresa { font-size: 0.875rem; }
}

/* ===================================================== MENU LATERAL RETRÁTIL
   Os grupos dobram para o menu continuar navegável à medida que o sistema
   ganha funções — uma lista de 30 links exige rolagem antes de qualquer
   clique, e aí o menu deixa de orientar e passa a atrapalhar. */
.nav__grupo--dobra > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    border-radius: var(--raio-sm);
    padding: 0.375rem 0.75rem;
}

/* O marcador nativo é substituído pela seta própria, que fica à direita e
   acompanha a leitura do título. */
.nav__grupo--dobra > summary::-webkit-details-marker { display: none; }
.nav__grupo--dobra > summary::marker { content: ""; }

.nav__grupo--dobra > summary:hover { background: var(--claro-08); }

.nav__grupo--dobra > summary:focus-visible {
    outline: 2px solid var(--cor-primaria-clara);
    outline-offset: -2px;
}

.nav__seta { font-size: 0.75rem; opacity: 0.7; }

/* ========================================================== DENSIDADE (mouse)
   O alvo de 2.75rem existe para o dedo, não para o mouse. Em telas com ponteiro
   fino ele só empurra o conteúdo para baixo e faz caber uma linha por tela.
   `pointer: fine` acerta o alvo melhor que largura: um tablet grande continua
   com o alvo cheio, um notebook pequeno não. */
@media (pointer: fine) {
    .entrada, .selecao, .area-texto {
        min-height: 2.125rem;
        padding: 0.3125rem 0.5rem;
        font-size: 0.9375rem;
    }

    .botao { min-height: 2.125rem; padding: 0.3125rem 0.75rem; }
    .cartao { padding: 0.875rem 1rem; }
    .cartao + .cartao { margin-top: 0.625rem; }
    .cartao__titulo { margin-bottom: 0.5rem; }
    .formulario { gap: 0.625rem; }
    .campos { gap: 0.625rem 0.875rem; }
    .campo { gap: 0.1875rem; }
}

/* Campo numérico não precisa de coluna de 14rem: "30" cabe em muito menos, e a
   coluna larga é o que espalha o formulário por toda a tela. */
.campo--estreito { max-width: 9rem; }
.campo--medio { max-width: 14rem; }

/* Buscar é o oposto do campo numérico: é o mais usado da tela e o que menos
   cabe em 14rem. "Nome, CNPJ ou contato" já não cabia no rótulo, e o que a
   pessoa digita — razão social inteira, código com prefixo — sumia da vista
   enquanto ela digitava. Dobro do campo--medio.
   O min-width vai no input, não no campo: em .campos--compacto a coluna é
   dimensionada pelo conteúdo (auto), então um max-width sozinho no campo não
   alarga nada — quem precisa pedir o espaço é o próprio input.

   E era `min-width: min(100%, 22rem)`, que NÃO FUNCIONAVA. Porcentagem dentro
   de uma coluna de largura intrínseca (auto) é indefinida: o navegador a trata
   como se não existisse, e `min(100%, 22rem)` inteiro deixa de contribuir para
   o tamanho da coluna. Medido em 1920px: o campo pedia 22rem (352px) e
   desenhava 207px — o tamanho do conteúdo, como se a regra não estivesse lá.
   Era a causa do "campo de busca pequeno demais" relatado pela clínica.

   `width` com comprimento absoluto contribui para o max-content da coluna, e o
   `max-width: 100%` segura em tela estreita — medido em 375px: 303px de largura
   e nenhuma rolagem lateral. */
.campo--busca { max-width: 44rem; }
.campo--busca .entrada { width: 34rem; max-width: 100%; }

/* Duas colunas da grade, para o que tem texto longo — razão social de
   fornecedor não cabe numa coluna de 14rem — mas não justifica a linha inteira
   do campo--largo. Em tela estreita a grade tem uma coluna só e o span 2 é
   naturalmente reduzido a ela, sem estourar a largura. */
.campo--duplo { grid-column: span 2; }

.campos--compacto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), auto));
    justify-content: start;
}

/* Explicação sob demanda: o texto continua disponível (e é bom), mas fechado
   não custa altura. Aberto uma vez, quem já entendeu não precisa reler sempre. */
.explica { margin: 0.25rem 0 0; }

.explica > summary {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--cor-primaria);
    width: fit-content;
    padding: 0.125rem 0;
}

.explica > summary:hover { text-decoration: underline; }
.explica > summary::marker { color: var(--cor-texto-suave); }

.explica__corpo {
    font-size: 0.8125rem;
    color: var(--cor-texto-suave);
    padding: 0.5rem 0 0.25rem;
    display: grid;
    gap: 0.375rem;
}

.explica__corpo dt { font-weight: 600; color: var(--cor-texto); }
.explica__corpo dd { margin: 0 0 0.375rem; }

/* Cabeçalho de cartão com título à esquerda e situação/ações à direita, na
   mesma linha — em vez de cada um consumir a sua. */
.cartao__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ======================================================== IMPRESSÃO / auditoria */
@media print {
    /* Cabeçalho e rodapé controlados repetidos em toda página: é o que o auditor
       procura na folha solta que encontrou no balcão — código, revisão e o aviso
       de cópia não controlada. position: fixed é o único recurso que os
       navegadores repetem a cada página sem envolver a folha numa tabela. */
    .sgq-folha__cabecalho {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        border-bottom: 1px solid #000;
        background: #fff;
    }

    .sgq-folha__rodape {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1px solid #000;
        background: #fff;
        color: #000;
    }

    /* A faixa de controle repete em TODA página, como o cabeçalho: é ela que
       identifica a folha solta encontrada no balcão. Fica abaixo do rodapé
       editável, e por isso o padding inferior da folha cresce junto. */
    .sgq-folha__controle {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1px solid #000;
        background: #fff;
        color: #000;
        font-size: 7pt;
        line-height: 1.35;
        padding: 2pt 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0 1rem;
        justify-content: space-between;
    }

    /* O rodapé editável sobe para dar lugar à faixa de controle. */
    .sgq-folha__rodape { bottom: 2.6rem; }

    /* Espaço reservado para as faixas fixas — sem isto o texto passa por baixo. */
    .sgq-folha { padding: 3.5rem 0 5.5rem; }

    .app__topo, .app__nav, .pagina__acoes, .acoes-formulario,
    .nao-imprime { display: none !important; }
    .app__conteudo { padding: 0; }
    .cartao { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
    body { background: #fff; }

    /* O relatório de conformidade é feito para ser entregue ao auditor, então
       o papel precisa carregar a mesma informação da tela. */

    /* Recolhível fechado no papel esconderia a legenda que explica a
       classificação — e o auditor lê exatamente essa parte. */
    details.explica { display: block; }
    details.explica > summary { display: none; }
    .explica__corpo { color: #000; }

    /* Sem rolagem no papel: a tabela precisa caber e quebrar entre páginas. */
    .tabela-rolagem { overflow: visible !important; }
    .tabela { font-size: 0.75rem; border-collapse: collapse; width: 100%; }
    .tabela th, .tabela td { border: 1px solid #bbb; padding: 0.25rem 0.375rem; }
    .tabela thead { display: table-header-group; }   /* repete o cabeçalho a cada página */
    .tabela tr { break-inside: avoid; }

    /* Etiqueta colorida vira texto legível: impressora monocromática
       transformaria "conforme" e "sem evidência" no mesmo cinza. */
    .etiqueta {
        border: 1px solid #666;
        background: none !important;
        color: #000 !important;
        font-weight: 600;
    }

    a { text-decoration: none; color: #000; }
}

/* ==================================================== preferências do sistema */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Erros de validação do Blazor */
.validation-message { font-size: 0.8125rem; color: var(--cor-erro); }
.invalid { border-color: var(--cor-erro) !important; }

#blazor-error-ui {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: none;
    padding: 0.75rem 1.25rem;
    background: var(--cor-erro-fundo);
    color: var(--cor-erro);
    box-shadow: var(--sombra-erro-ui);
}

#blazor-error-ui .dismiss { position: absolute; right: 1rem; top: 0.5rem; cursor: pointer; }

/* Conteúdo de documento publicado — só leitura, mesma tipografia do editor */
.sgq-conteudo-somente-leitura table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5rem 0;
}

.sgq-conteudo-somente-leitura td,
.sgq-conteudo-somente-leitura th {
    border: 1px solid var(--cor-borda);
    padding: 0.4rem 0.6rem;
}

.sgq-conteudo-somente-leitura th { background: var(--cor-fundo); text-align: left; }
.sgq-conteudo-somente-leitura img { max-width: 100%; height: auto; }

/* --------------------------------------------------- folha do documento
   Cabeçalho e rodapé da versão. Na tela aparecem uma vez, delimitados; no
   papel se repetem em toda página (ver bloco @media print). */
.sgq-folha__cabecalho {
    border-bottom: 2px solid var(--cor-borda);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.sgq-folha__rodape {
    border-top: 2px solid var(--cor-borda);
    padding-top: 0.5rem;
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: var(--cor-texto-suave);
}

/* Faixa de controle: na TELA ela é discreta, porque existe para o papel — mas
   aparece, para quem confere o documento saber o que vai sair impresso. */
.sgq-folha__controle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--cor-borda);
    font-size: 0.75rem;
    color: var(--cor-texto-suave);
}

.sgq-papel-editor {
    border: 1px dashed var(--cor-borda);
    border-radius: var(--raio);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

/* Bloco de assinaturas da versão: quem elaborou, quem aprovou, desde quando
   vigora. Fica DENTRO da folha para sair no papel junto com o texto. */
.sgq-assinaturas {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cor-borda);
}

.sgq-assinaturas dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cor-texto-suave);
}

.sgq-assinaturas dd {
    margin: 0;
    font-weight: 600;
}

.sgq-assinaturas dd span { display: block; font-weight: 400; }

.sgq-papel-editor > summary {
    cursor: pointer;
    font-weight: 600;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

details > summary { padding: 0.5rem 0; }

/* ==========================================================================
   REFINO VISUAL — onda 1
   ==========================================================================

   O que faltava não era cor: era HIERARQUIA. Título de página, título de cartão
   e texto do corpo tinham peso quase igual, então a tela chegava como um bloco
   uniforme e o olho não sabia onde pousar. As regras abaixo separam os três
   níveis e dão às tabelas — que é onde este sistema realmente vive — leitura de
   linha em vez de leitura de planilha.

   Tudo aqui é SOBRESCRITA no fim do arquivo, de propósito: as regras originais
   continuam legíveis onde estão e a mudança de aparência fica num bloco só,
   fácil de reverter inteiro se ficar ruim.                                    */

/* --------------------------------------------------- hierarquia de título */

.pagina__cabecalho h1 {
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 0.125rem;
}

.pagina__subtitulo { max-width: 62ch; line-height: 1.5; }

/* Título de cartão sobe meio degrau e ganha respiro embaixo. Antes competia com
   o corpo, e a tela virava uma lista sem começo. */
.cartao__titulo {
    font-size: 1.0625rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin-bottom: 0.875rem;
}

/* Leitura corrida (descrição de chamado, laudo) com largura limitada: linha de
   150 caracteres é fisicamente cansativa de acompanhar. */
.texto-corrido {
    margin: 0;
    max-width: 70ch;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* --------------------------------------------------------- cartão e grade */

.cartao {
    /* Sombra mais rasa e borda mais clara: o cartão se apoia na página em vez
       de flutuar sobre ela. */
    border-color: var(--cor-borda-cartao-antiga);
    box-shadow: var(--sombra-sm);
}

.grade > .cartao { padding: 1rem 1.125rem; }

.indicador__rotulo {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.indicador__valor {
    font-size: 2rem;
    font-weight: 680;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--cor-texto);
}

/* ---------------------------------------------------------------- tabelas */

/* Cabeçalho em caixa alta pequena: sai do caminho como conteúdo e continua
   fazendo o papel de rótulo. */
.tabela th {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: transparent;
    border-bottom: 1px solid var(--cor-borda);
    padding-bottom: 0.5rem;
}

/* Linha com respiro e separador mais leve — a grade forte fazia a tabela
   parecer planilha, e planilha ninguém lê, só consulta. */
.tabela td {
    padding-top: 0.6875rem;
    padding-bottom: 0.6875rem;
    border-bottom-color: var(--cor-borda-tabela);
}

.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background-color 90ms linear; }
.tabela tbody tr:hover { background: var(--cor-linha-hover-antiga); }

/* Linha que pede atenção (equipamento parado, prazo estourado): marca na
   lateral, não fundo forte. Fundo inteiro brigaria com o hover e com as
   etiquetas de situação que já estão na linha. */
.tabela__linha--alerta td { background: var(--cor-linha-alerta); }
.tabela__linha--alerta td:first-child { box-shadow: inset 0.1875rem 0 0 var(--cor-erro); }

/* Linha que continua no registro mas saiu da conta (medição anulada). Apagada,
   não vermelha: anulada não é falha nem urgência — é um fato que deixou de
   valer, e precisa ficar visível justamente para não parecer que sumiu. O
   risco no valor vem do <s> na própria célula; aqui só o recuo de contraste. */
.tabela__linha--anulada td { background: var(--cor-linha-anulada); color: var(--cor-texto-suave); }
.tabela__linha--anulada td:first-child { box-shadow: inset 0.1875rem 0 0 var(--cor-borda); }
.tabela__linha--anulada s { text-decoration-thickness: 0.125rem; }

/* -------------------------------------------------------------- etiquetas */

/* Ponto colorido antes do texto: identifica a situação sem depender só da cor
   de fundo — que é o que falha na impressão em preto e branco e para quem não
   distingue bem as cores. Num sistema de clínica oftalmológica, tratar
   percepção de cor como garantida seria uma ironia cara. */
.etiqueta {
    gap: 0.375rem;
    padding: 0.1875rem 0.5625rem;
    font-weight: 600;
    line-height: 1.4;
}

.etiqueta::before {
    content: "";
    flex: none;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: currentColor;
}

/* A neutra não representa situação — é rótulo (sigla de norma, categoria).
   Ponto ali sugeriria um estado que não existe. */
.etiqueta--neutra::before { display: none; }

/* ----------------------------------------------- lista de dados (dl/dt/dd) */

/* Pares rótulo/valor de um registro. Grade que se adapta sozinha, com o rótulo
   pequeno ACIMA do valor: lado a lado, em tela estreita, o valor ficava
   espremido em duas palavras por linha. */
.dados {
    display: grid;
    gap: 0.875rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    margin: 0;
}

.dados > div { min-width: 0; }

.dados dt {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
    margin-bottom: 0.125rem;
}

.dados dd {
    margin: 0;
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------- trilha de etapas */

/* O andamento do processo mostrado como caminho, não como "etapa 2 de 5". A
   pessoa precisa ver quanto falta e quem está com a bola — foi essa ausência
   que fez o pedido de compra parecer não ter fluxo nenhum. */
.trilha {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trilha__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 12rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cor-borda-clara);
    border-radius: var(--raio-sm);
    background: var(--cor-superficie);
    font-size: 0.875rem;
}

.trilha__ordem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--cor-fundo);
    color: var(--cor-texto-suave);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.trilha__nome { min-width: 0; overflow-wrap: anywhere; }
.trilha__quem { margin-left: auto; padding-left: 0.5rem; white-space: nowrap; }

/* Etapa cumprida sai do primeiro plano mas continua legível: ela é o caminho
   percorrido, e apagá-la de vez tiraria a noção de quanto já andou. */
.trilha__item--feita { border-color: var(--cor-trilha-feita-borda); background: var(--cor-trilha-feita-fundo); }
.trilha__item--feita .trilha__ordem { background: var(--cor-trilha-feita); color: var(--tinta-sobre-marca); }

/* Etapa atual: é a única informação que a pessoa procura ao abrir a tela. */
.trilha__item--atual {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria-clara);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--cor-primaria);
}

.trilha__item--atual .trilha__ordem { background: var(--cor-primaria); color: var(--tinta-sobre-marca); }

/* ---------------------------------------------------------- estado vazio */

/* Vazio não é erro: fica discreto, com contorno tracejado, para não parecer que
   alguma coisa quebrou quando simplesmente ainda não há nada. */
.vazio {
    border: 1px dashed var(--cor-borda-clara);
    border-radius: var(--raio-sm);
    background: var(--cor-vazio-fundo);
    font-size: 0.9375rem;
    padding: 2rem 1rem;
}

.cartao > .vazio { border: 0; background: transparent; padding: 1.75rem 1rem; }

/* -------------------------------------------------------------- formulário */

/* Dica que precisa ser vista ANTES de o usuário decidir — não depois. */
.campo__dica--forte { color: var(--cor-alerta); font-weight: 500; }

/* -------------------------------------------------------------------- foco */

/* Anel de foco único e visível em tudo que é operável. Antes cada componente
   tinha o seu, e alguns não tinham nenhum — o que deixa quem navega por teclado
   sem saber onde está. */
.botao:focus-visible,
.nav__link:focus-visible,
.opcao:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
    border-radius: var(--raio-sm);
}

/* --------------------------------------------------------------- impressão */

@media print {
    /* Na folha em preto e branco o fundo colorido some; o ponto da etiqueta e o
       contorno são o que ainda distingue uma situação da outra. */
    .etiqueta { background: transparent !important; border: 1px solid #999; }
    .trilha__item { break-inside: avoid; }
    .tabela__linha--alerta td { background: transparent !important; }

    /* No papel o fundo some e a linha anulada ficaria idêntica às válidas — e é
       a folha impressa que vai para a mesa da auditoria. O risco no valor e o
       motivo escrito continuam, mas sem a barra lateral a linha se perde. */
    .tabela__linha--anulada td { background: transparent !important; color: #555 !important; }
    .tabela__linha--anulada td:first-child { box-shadow: inset 0.1875rem 0 0 #999 !important; }

    /* O checklist impresso é evidência de auditoria, e o navegador descarta
       fundo colorido por padrão: sem isto, as duas pílulas sairiam idênticas
       no papel e a folha não diria o que foi respondido. Contorno grosso e
       negrito marcam a escolhida; a outra quase some. */
    .opcao { background: transparent !important; color: #000 !important; box-shadow: none !important; }
    .opcao--marcada,
    .opcao--marcada-ok,
    .opcao--marcada-erro { border: 2px solid #000 !important; font-weight: 700; }
    .opcao:not(.opcao--marcada):not(.opcao--marcada-ok):not(.opcao--marcada-erro) {
        border-color: #ccc !important;
        color: #999 !important;
    }
}

/* ==========================================================================
   REFORMA VISUAL — onda 3
   ==========================================================================

   As ondas 1 e 2 arrumaram hierarquia e contraste; o que faltava era o
   sistema PARECER que se auto-audita — número cru em card não diferencia
   "zero problemas" de "quarenta problemas" com uma leitura de meio segundo.
   Este bloco entra: (1) um cartão de KPI com cor de severidade, (2) anel e
   barra de progresso reaproveitáveis, e os tokens que faltavam (espaçamento,
   tipografia) para não repetir o padrão de valor solto que a onda 1 já
   apontou como risco de manutenção.

   Mesma decisão da onda 1: sobrescrita no fim do arquivo, para poder reverter
   o bloco inteiro sem caçar edição espalhada. */

/* A escala de espaçamento foi para a paleta única do topo. */

/* ---------------------------------------------------------- cartão de KPI */

.cartao-kpi { border-top: 3px solid var(--cor-borda-clara); }
.cartao-kpi--ok { border-top-color: var(--cor-ok); }
.cartao-kpi--alerta { border-top-color: var(--cor-alerta); }
.cartao-kpi--erro { border-top-color: var(--cor-erro); }

.cartao-kpi__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espaco-2);
}

.cartao-kpi__icone { font-size: 1.25rem; line-height: 1; opacity: 0.85; }

.cartao-kpi__valor {
    font-variant-numeric: tabular-nums;
}

.cartao-kpi--ok .cartao-kpi__valor { color: var(--cor-ok); }
.cartao-kpi--alerta .cartao-kpi__valor { color: var(--cor-alerta); }
.cartao-kpi--erro .cartao-kpi__valor { color: var(--cor-erro); }

.cartao-kpi__visual { margin: var(--espaco-2) 0; }

/* Cartão que filtra a lista. É <button> de verdade (teclado/leitor de tela), e
   button traz estilo nativo junto: fonte do sistema, texto centralizado e
   largura do conteúdo. Sem desfazer isso, o cartão-filtro não se parece com os
   outros cartões da mesma grade. */
.cartao-kpi--filtro {
    font: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.cartao-kpi--filtro:hover { box-shadow: var(--sombra-kpi); }
.cartao-kpi--filtro:active { transform: translateY(1px); }

.cartao-kpi--filtro:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
}

/* Filtro aplicado: anel na própria cor da severidade, para dar para ver de
   relance QUAL cartão está mandando na lista de baixo — e que clicar de novo
   desliga. */
.cartao-kpi--ativo { box-shadow: inset 0 0 0 2px var(--cor-borda-clara); }
.cartao-kpi--ok.cartao-kpi--ativo { box-shadow: inset 0 0 0 2px var(--cor-ok); }
.cartao-kpi--alerta.cartao-kpi--ativo { box-shadow: inset 0 0 0 2px var(--cor-alerta); }
.cartao-kpi--erro.cartao-kpi--ativo { box-shadow: inset 0 0 0 2px var(--cor-erro); }

/* -------------------------------------------------------- anel de progresso */

.anel-progresso {
    position: relative;
    display: inline-block;
    flex: none;
}

.anel-progresso svg { width: 100%; height: 100%; display: block; }

.anel-progresso__centro {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
}

.anel-progresso__valor { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.anel-progresso__rotulo { font-size: 0.6875rem; color: var(--cor-texto-suave); max-width: 5.5rem; }

/* -------------------------------------------------------- menu com contraste

   O menu era texto cinza-claro sobre branco — a mesma cor de fundo do
   conteúdo, então nada nele se destacava sem olhar com atenção. Fundo escuro
   (na mesma família da marca, não um cinza qualquer) separa "onde eu navego"
   de "o que eu leio" à primeira vista, sem depender de detalhe fino de cor. */

/* As cinco cores do menu foram para a paleta única do topo. */

.app__nav { background: var(--cor-nav-fundo); border-right-color: var(--cor-nav-borda); }

.nav__titulo { color: var(--cor-nav-texto-suave); }

.nav__link { color: var(--cor-nav-texto); }
.nav__link:hover { background: var(--cor-nav-hover); }

.nav__link.active {
    background: var(--cor-primaria);
    color: var(--tinta-sobre-escuro);
    font-weight: 600;
}

.nav__seta { color: var(--cor-nav-texto-suave); }

.app__nav .nav__link:focus-visible,
.app__nav summary:focus-visible {
    outline-color: var(--tinta-sobre-escuro);
}

.nav__grupo--dobra > summary:focus-visible { outline: 2px solid var(--tinta-sobre-escuro); outline-offset: -2px; }


@media print {
    .cartao-kpi { border-top-color: #999 !important; }
    .cartao-kpi__valor { color: #000 !important; }
}

/* Controle de paginação. Só é renderizado quando há mais de uma página — ver
   ListaDocumentos: paginação visível numa lista curta sugere que falta conteúdo
   escondido em algum lugar. */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 0 0.25rem;
}

/* Pular para o conteúdo — WCAG 2.4.1 (Contornar Blocos, nível A).

   Técnica: escondido por recorte (clip-path) e, ao receber foco, vira
   position:fixed — o padrão "visualmente escondido até receber foco". Com
   `fixed` o ponto de referência é a janela, então o link não depende do bloco de
   contenção dos ancestrais (.app e .app__corpo são flex, sem posicionamento).

   Não usa display:none nem visibility:hidden de propósito: os dois tirariam o
   link da ordem de tabulação, que é exatamente o que ele existe para ocupar. */
.pular-para-conteudo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pular-para-conteudo:focus {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    padding: 0.75rem 1.25rem;
    background: var(--cor-primaria);
    color: var(--tinta-sobre-escuro);
    font-weight: 600;
    border-radius: 0 0 var(--raio) 0;
    text-decoration: none;
    outline: 2px solid var(--tinta-sobre-escuro);
    outline-offset: -4px;
}

/* O <main> recebe tabindex="-1" para poder receber o foco pelo salto. Sem esta
   regra o navegador desenharia o contorno padrão em volta da página inteira. */
.app__conteudo:focus { outline: none; }


/* ==========================================================================
   REFORMA VISUAL — onda 4 (facelift)
   ==========================================================================

   As ondas 1–3 arrumaram hierarquia, contraste e severidade. Esta arruma a
   SENSAÇÃO: raio maior, sombra em camadas, transições curtas e foco com halo
   — o vocabulário visual que separa "sistema interno de 2015" de ferramenta
   atual, sem trocar nenhuma decisão semântica das ondas anteriores.

   Três limites deliberados:
   1. NENHUMA fonte externa. system-ui carrega em zero milissegundos e a CSP
      é só 'self' — um webfont bonito custaria os dois.
   2. NENHUM par texto/fundo novo. Tudo que é cor de texto continua vindo dos
      tokens já auditados em AA; o que muda aqui é decoração (sombra, borda,
      gradiente), que não tem requisito de contraste de leitura.
   3. NADA de modo escuro por enquanto: o sistema imprime dossiê e relatório
      em papel branco, e um tema escuro exigiria reauditar cada cor literal.

   Como as ondas anteriores: sobrescrita no fim do arquivo, reversível em
   bloco. As transições novas ficam automaticamente inertes sob
   prefers-reduced-motion — a regra global de 0.01ms já cobre tudo.          */

/* Os tokens desta onda foram para a paleta única do topo — ver a nota lá.
   As regras abaixo continuam aqui, e continuam revertíveis em bloco. */

/* Título quebrando equilibrado (e não uma palavra órfã na segunda linha) é
   polimento que o navegador dá de graça onde suportado. */
h1, h2 { text-wrap: balance; }
.pagina__subtitulo { text-wrap: pretty; }

::selection { background: var(--cor-primaria); color: var(--tinta-sobre-marca); }

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

/* Gradiente sutil no sentido da leitura + fio de luz na borda inferior: o
   topo ganha profundidade sem ganhar peso. */
.app__topo {
    background: linear-gradient(90deg, var(--marca-escura) 0%, var(--marca) 60%);
    box-shadow: inset 0 -1px 0 var(--claro-12), var(--sombra-sm);
}

/* ------------------------------------------------------------------ menu */

.app__nav {
    scrollbar-width: thin;
    scrollbar-color: var(--claro-25) transparent;
}

.nav__link {
    border-radius: var(--raio-sm);
    transition: background-color var(--transicao), color var(--transicao);
}

/* Ativo: fundo translúcido + barra de acento à esquerda, em vez do bloco
   verde sólido — o item salta menos e orienta mais, e a barra é o mesmo
   idioma da linha-alerta das tabelas ("a lateral marca o que importa").
   A barra é decorativa (o estado já está no fundo e no peso da fonte),
   então não entra na regra de contraste de texto. */
.nav__link.active {
    background: var(--claro-12);
    color: var(--tinta-sobre-escuro);
    box-shadow: inset 0.1875rem 0 0 var(--logo-menta);
}

.nav__grupo--dobra > summary { transition: background-color var(--transicao); }

/* ---------------------------------------------------------------- cartão */

.cartao {
    border-color: var(--cor-borda-cartao);
    box-shadow: var(--sombra-cartao);
}

/* -------------------------------------------------------------- botões */

.botao {
    transition: background-color var(--transicao), border-color var(--transicao),
                box-shadow var(--transicao), color var(--transicao);
}

/* Pressionar afunda 1px: resposta tátil imediata, antes de o servidor
   responder — em Blazor Server é o que preenche a ida ao circuito. */
.botao:not(:disabled):active { transform: translateY(1px); }

.botao--primario {
    box-shadow: inset 0 1px 0 var(--claro-14), 0 1px 2px var(--brilho-marca);
}

.botao--primario:hover:not(:disabled) {
    box-shadow: inset 0 1px 0 var(--claro-14), 0 4px 10px -2px var(--brilho-marca-forte);
}

.botao--secundario { border-color: var(--cor-borda-botao); box-shadow: var(--sombra-sm); }
.botao--perigo, .botao--sucesso { box-shadow: var(--sombra-estado); }

/* ---------------------------------------------------------------- campos */

.entrada, .selecao, .area-texto {
    transition: border-color var(--transicao), box-shadow var(--transicao),
                background-color var(--transicao);
}

/* Halo suave por fora do anel de foco: o anel continua sendo o indicador
   acessível (2px sólidos, já auditado); o halo só o assenta na página. */
.entrada:focus-visible, .selecao:focus-visible, .area-texto:focus-visible {
    box-shadow: 0 0 0 4px var(--anel-foco);
}

/* --------------------------------------------------------------- tabelas */

.tabela-rolagem { scrollbar-width: thin; }

/* Hover levemente mais frio que o fundo da página: marca a linha sob o
   ponteiro sem competir com as etiquetas de situação. */
.tabela tbody tr:hover { background: var(--cor-linha-hover); }

/* ---------------------------------------------------------------- modal */

/* Escurecer E desfocar o fundo diz "isto está pausado" melhor do que só
   escurecer — e reforça o aria-modal que o foco gerido já honra. Progressivo:
   sem suporte, fica o véu escuro de sempre. */
@supports (backdrop-filter: blur(3px)) {
    .modal { backdrop-filter: blur(3px); background: var(--veu-modal); }
}

.modal__caixa { box-shadow: var(--sombra), var(--sombra-modal); }

/* ----------------------------------------------------------------- login */

/* Brilho radial no canto: dá profundidade à primeira tela que qualquer
   pessoa vê, pelo custo de uma linha de gradiente. */
.login {
    background:
        radial-gradient(80rem 40rem at 110% -10%, var(--claro-16), transparent 60%),
        linear-gradient(160deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
}

.login__caixa {
    border-radius: 1rem;
    box-shadow: var(--sombra-login);
}

/* ------------------------------------------------------------ interativos */

.pastilha, .opcao, .combo-pesquisa__opcao {
    transition: background-color var(--transicao), border-color var(--transicao),
                box-shadow var(--transicao);
}

.cartao-kpi--filtro { transition: box-shadow var(--transicao), transform 80ms ease; }

/* ------------------------------------------- reafirmações pós-cascata

   O ".cartao { border-color; box-shadow }" desta onda vem DEPOIS das regras
   de severidade e de filtro da onda 3 no arquivo — e com a mesma
   especificidade, quem vem depois vence. Sem as reafirmações abaixo, o
   facelift apagava sem querer duas decisões semânticas: a barra colorida de
   severidade dos KPIs e o anel de "filtro aplicado" dos cartões neutros.
   (Achado da revisão adversarial da própria onda.) */

.cartao-kpi { border-top-color: var(--cor-borda-clara); }
.cartao-kpi--ok { border-top-color: var(--cor-ok); }
.cartao-kpi--alerta { border-top-color: var(--cor-alerta); }
.cartao-kpi--erro { border-top-color: var(--cor-erro); }

.cartao-kpi--ativo { box-shadow: inset 0 0 0 2px var(--cor-borda-clara); }

/* Polegar do scrollbar do menu a 0.25 de opacidade ficava abaixo dos 3:1 de
   contraste não-textual (WCAG 1.4.11) sobre o verde escuro. */
.app__nav { scrollbar-color: var(--claro-45) transparent; }

/* Com o raio maior, o fundo e a barra lateral da linha-alerta (pintados nos
   <td>) passaram a vazar ~3px para fora da curva do cartão-linha no celular —
   com o raio antigo o vazamento era subpixel e invisível. */
@media (max-width: 47.99em) {
    .tabela--cartoes tr { overflow: hidden; }
}

/* -------------------------------------------------------------- impressão */

/* Papel não tem profundidade: gradiente e sombra são ruído de toner. E a
   border-color de tela desta onda (#e7ecf1) venceria o #999 do bloco de
   impressão lá de cima — num papel monocromático, o contorno do cartão é o
   único delimitador dos blocos, e #e7ecf1 sobre branco é ~1,2:1: some no
   toner. Devolve-se o cinza legível aqui, depois da regra de tela. */
@media print {
    .cartao { box-shadow: none; border-color: #999; }
    .modal { backdrop-filter: none; }
}


/* =========================================================== CABEÇALHO E MARCA
   A marca ganhou símbolo e corpo maior, a data entrou no meio e a versão saiu
   de junto do nome do produto. Bloco no fim do arquivo, como as ondas
   anteriores, para poder ser revertido inteiro.                              */

.app__marca {
    display: inline-flex;
    align-items: center;
    gap: calc(0.5rem * var(--escala-topo));
    /* Era 1.0625rem e sumia ao lado do nome da empresa. O nome do produto é a
       âncora da tela: quem abre precisa saber em que sistema está. */
    font-size: calc(1.25rem * var(--escala-topo));
    font-weight: 700;
    letter-spacing: -0.01em;

    /* Sem clipe. A regra de cima (bloco original de .app__marca) tem
       overflow: hidden, herdado de quando isto era UM texto que precisava de
       reticências. Hoje é um flex com o símbolo e o bloco nome+versão — e a
       versão desce por deslocamento RELATIVO, que não entra na conta da altura
       da caixa. Resultado: ela saía do box e era cortada pela metade, que é
       exatamente o que se via no topo.

       Reticências aqui não fazem falta: o texto que trunca é o nome da clínica
       (.app__empresa), que tem as suas próprias. O nome do produto é fixo. */
    overflow: visible;
}

.marca-ziip { flex: none; display: block; }

.app__data {
    /* Assentada na base da faixa, e não no meio dela: a data é referência de
       fundo — quase todo registro do sistema é datado — e no meio disputava a
       linha do olhar com o nome do produto, que é a âncora da tela. 20% menor
       pelo mesmo motivo: presente, sem puxar leitura. */
    align-self: flex-end;
    padding-bottom: calc(0.5rem * var(--escala-topo));
    font-size: calc(0.875rem * 0.8 * var(--escala-topo));
    opacity: 0.9;
    white-space: nowrap;
    /* Sem text-transform: capitalize aqui. Ele maiúsculiza TODA palavra e
       produzia "Quarta-Feira, 19 De Agosto De 2026" — em português as
       preposições ficam minúsculas, e só a primeira letra sobe. Quem faz isso
       é o C#, que sabe onde a frase começa. */
}

/* Empresa em cima, versão embaixo — duas linhas curtas ocupam menos largura
   que uma longa, e o cabeçalho tem 3.5rem de altura sobrando. */
.app__identidade {
    display: flex;

    /* Na MESMA linha, e não empilhados. Empilhado, o corpo triplo pedia 82px de
       altura numa faixa de 84px — o que obrigava a faixa a crescer. Lado a lado
       o bloco pede 46px e sobra respiro. */
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    line-height: 1.1;
    min-width: 0;
}

.app__identidade .app__empresa {
    margin-left: 0;
    max-width: 100%;
    font-size: calc(0.875rem * var(--escala-identidade));
    font-weight: 500;
}

/* Embaixo do nome do produto: texto pequeno, sem a pastilha.
   A moldura arredondada servia quando a versão ficava solta ao lado do nome da
   clínica e precisava se separar dele. Ancorada sob a marca, ela já pertence a
   alguma coisa — e a pastilha viraria um segundo objeto competindo com o
   símbolo logo ao lado. */
.app__marca .app__versao {
    border: 0;
    padding: 0;
    opacity: 0.72;
    font-size: calc(0.625rem * var(--escala-topo));
    font-weight: 400;
    letter-spacing: 0;

    /* A versao desce SOZINHA, e o nome do produto nao se mexe.
       Com margin-top ela empurrava: o bloco (nome + versao) e centrado na faixa,
       entao aumentar a altura dele subia o "Ziip X" junto — pedir para a versao
       descer acabava levantando a marca. Deslocamento relativo nao entra na
       conta da altura, entao o nome fica exatamente onde estava. */
    position: relative;
    top: calc(0.3rem * var(--escala-topo));
}

/* Nome e versão empilhados, encostados na base do símbolo. */
.app__marca__nome {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
    min-width: 0;
}

/* Em tela estreita não cabem data, empresa e versão. A data sai primeiro: é a
   única das três que a pessoa consegue obter em qualquer outro lugar. */
@media (max-width: 61.99em) {
    .app__data { display: none; }
}

@media (max-width: 35.99em) {
    .app__marca { font-size: 1.0625rem; }
    .app__identidade .app__empresa { font-size: 0.8125rem; }
}

/* ------------------------------------------------------------------- login */

.login__marca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    /* Bem maior que o do topo: aqui é a única coisa na tela, e a primeira que
       qualquer pessoa vê do produto. */
    font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.login__versao {
    display: block;
    margin-top: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--cor-texto);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media print {
    .app__data, .app__identidade { display: none !important; }
}

/* Cartão do que a Receita respondeu. Fundo levemente distinto do formulário:
   é dado TRAZIDO, não digitado, e a diferença precisa ser visível para ninguém
   confundir o que conferiu com o que veio pronto. */
.cartao-receita {
    padding: 0.875rem 1rem;
    border: 1px solid var(--cor-borda-clara);
    border-left: 3px solid var(--cor-info);
    border-radius: var(--raio-sm);
    background: var(--cor-campo);
}

.cartao-receita .dados { gap: 0.625rem 1.25rem; }
.cartao-receita .campo__dica { margin-top: 0.625rem; }

/* Campo com prefixo fixo (o +55 do telefone). O prefixo é parte da moldura, não
   um texto solto ao lado: emendado à borda, ele lê como "este campo continua
   daqui", e não como um segundo campo que se deveria preencher.

   A borda e o foco moram no invólucro porque o que a pessoa vê como "o campo" é
   o conjunto — anel de foco só em volta do <input> deixaria o prefixo de fora. */
.entrada-composta {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: var(--alvo-toque);
    background: var(--cor-campo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    overflow: hidden;
    transition: border-color var(--transicao), box-shadow var(--transicao),
                background-color var(--transicao);
}

.entrada-composta:hover { border-color: var(--cor-primaria); }

.entrada-composta:focus-within {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 1px;
    border-color: var(--cor-primaria);
    background: var(--cor-campo-foco);
    box-shadow: 0 0 0 4px var(--anel-foco);
}

.entrada-composta--invalida { border-color: var(--cor-erro); }

.entrada-composta__prefixo {
    display: inline-flex;
    align-items: center;
    padding: 0 0.625rem;
    font-size: 0.9375rem;
    color: var(--cor-texto-suave);
    background: var(--cor-fundo);
    border-inline-end: 1px solid var(--cor-borda);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sem borda, sem fundo e sem anel próprios: quem desenha tudo isso é o
   invólucro. Só o outline precisa ser anulado explicitamente, senão o navegador
   desenha dois anéis concêntricos ao focar. */
.entrada-composta__campo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: max(1rem, 0.9375rem);
    color: var(--cor-texto);
    background: transparent;
    border: 0;
}

.entrada-composta__campo:focus { outline: none; }

/* Sufixo é o mesmo desenho do prefixo, do outro lado: a unidade ("meses")
   emendada à moldura lê como parte do campo. Solta ao lado, ela vira palavra
   perdida entre um número e um botão. */
.entrada-composta__sufixo {
    display: inline-flex;
    align-items: center;
    padding: 0 0.625rem;
    font-size: 0.9375rem;
    color: var(--cor-texto-suave);
    background: var(--cor-fundo);
    border-inline-start: 1px solid var(--cor-borda);
    white-space: nowrap;
}

/* Campo de número curto dentro de um cabeçalho: o padrão do componente é
   largura total, feito para formulário em coluna. Aqui ele divide a linha com
   rótulo e botão, e 100% empurraria os dois para fora. */
.entrada-composta--curta { width: auto; flex: none; }
.entrada-composta--curta .entrada-composta__campo { width: 4.5rem; flex: none; }

/* Filtro que mora na mesma linha do título do cartão: rótulo, campo e botão
   centrados entre si. Não é .acoes-formulario porque aquele grupo é só de
   botões — sem align-items, o rótulo colava no topo do campo, que é mais alto. */
.filtro-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Rótulo que fica na mesma linha do campo, e não acima dele. */
.rotulo-inline {
    font-size: 0.875rem;
    color: var(--cor-texto-suave);
    white-space: nowrap;
}

/* ====================================================== MARCA OFICIAL ZIIP
   O símbolo provisório saiu; entrou a marca do Ziip Cloud (ladrilho com
   gradiente azul→verde #347CAD→#5CAF74 e raio branco — cores próprias, não
   currentColor). Bloco no fim do arquivo, como as ondas anteriores, para
   poder ser revertido inteiro. */

/* Relevo sutil do ladrilho sobre o verde do topo e o cartão claro do login. */
.marca-ziip { filter: drop-shadow(var(--sombra-logo)); }

/* O "X" é o que separa este produto do Ziip Cloud — ganha destaque na cor da
   ponta verde do gradiente da marca. No topo, usa o mesmo verde-acento dos
   itens ativos do menu (fundo escuro pede a variante clara). */
.app__marca .marca-x { color: var(--logo-menta); }
.login__marca .marca-x { color: var(--logo-verde); }

/* Login: ladrilho empilhado sobre o nome, como app — aqui a marca é a única
   coisa na tela e não precisa se espremer ao lado do texto. O azul-marinho do
   nome é o do logotipo horizontal oficial (#0B2540). */
.login__marca { flex-direction: column; gap: 0.5rem; color: var(--logo-tinta); }

/* Fita com o gradiente da marca no alto do cartão de login: assinatura
   discreta, sem disputar com o formulário. */
.login__caixa { position: relative; overflow: hidden; }
.login__caixa::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 0.25rem;
    background: linear-gradient(90deg, var(--logo-azul) 0%, var(--logo-verde) 100%);
}

/* ------------------------------------------------ área do usuário (conta) */

/* A porta da conta no topo: foto redonda, ou as iniciais sobre vidro. */
.app__avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(2.25rem * var(--escala-topo));
    height: calc(2.25rem * var(--escala-topo));
    border-radius: 50%;
    overflow: hidden;
    background: var(--claro-15);
    border: 1px solid var(--claro-40);
    color: var(--tinta-sobre-escuro);
    font-size: calc(0.8125rem * var(--escala-topo));
    font-weight: 700;
    text-decoration: none;
}

.app__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.perfil__foto-bloco { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }

.perfil__foto {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 1px solid var(--cor-borda);
}

.perfil__foto--iniciais {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-campo);
    color: var(--cor-texto-suave);
    font-size: 1.5rem;
    font-weight: 700;
}

.perfil__empresas { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.375rem; }
.perfil__empresas li { display: flex; align-items: center; gap: 0.5rem; }

.login__separador { border: 0; border-top: 1px solid var(--cor-borda); margin: 1.5rem 0; }

/* Faixa de aviso do bloqueio por inatividade (js/bloqueio-inatividade.js).
   Fixa no rodapé, acima de tudo — inclusive de modal aberto, que é justamente
   onde a pessoa pode estar quando o tempo acaba. */
.aviso-bloqueio {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: calc(100vw - 2rem);
    padding: 0.7rem 1rem;
    border-radius: var(--raio-sm);
    background: var(--cor-bloqueio-fundo);
    color: var(--tinta-sobre-escuro);
    font-size: 0.875rem;
    box-shadow: var(--sombra-bloqueio);
}

.aviso-bloqueio button {
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--claro-45);
    border-radius: var(--raio-sm);
    background: transparent;
    color: var(--tinta-sobre-escuro);
    cursor: pointer;
}

.aviso-bloqueio button:hover { background: var(--claro-15); }

/* Contraste do avatar: iniciais brancas sobre o vidro translúcido davam ~4,2:1
   no verde do topo, abaixo do mínimo de 4,5:1 para texto. O verde escuro sólido
   da marca leva a ~8,9:1 e continua parecendo parte do cabeçalho. */
.app__avatar { background: var(--marca-escura); }

/* ------------------------------------------- cabeçalho de tabela ordenável */

.coluna-ordenavel {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.coluna-ordenavel:hover { color: var(--cor-primaria); }
.coluna-ordenavel:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* A seta inativa fica apagada, mas visível: é o que revela que a tabela ordena.
   Invisível até o hover, ninguém descobriria — e no celular não há hover. */
.coluna-ordenavel__seta { font-size: 0.7em; opacity: 0.35; }

th[aria-sort="ascending"] .coluna-ordenavel__seta,
th[aria-sort="descending"] .coluna-ordenavel__seta { opacity: 1; color: var(--cor-primaria); }

/* Coluna de seleção em massa: estreita e centrada, sem o alinhamento da célula. */
.tabela__selecao { width: 2.5rem; text-align: center; }

/* Prévia da câmera na tela de perfil: quadrada, como o recorte que será salvo —
   mostrar um retângulo e salvar um quadrado surpreende quem enquadrou o rosto. */
.perfil__camera {
    display: block;
    width: 100%;
    max-width: 20rem;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--raio);
    background: var(--cor-camera-fundo);
    margin: 0 auto 0.75rem;
    transform: scaleX(-1);   /* espelhado: é assim que a pessoa se vê no espelho */
}

/* Separador de grupo dentro da matriz de permissões: é o título do menu, não
   uma linha de dados — por isso fundo próprio e nada de hover. */
.tabela__separador td {
    background: var(--cor-campo);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--cor-texto-suave);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* ---------------------------------------------------- barras de distribuição

   Usadas nos painéis do Cockpit. A barra é horizontal e o rótulo fica ao lado
   do dado, não numa legenda: o que se faz com uma distribuição de convênios ou
   formas de pagamento é comparar e ler o nome, e pizza obriga a caçar a cor. */

.fatias { display: flex; flex-direction: column; gap: var(--espaco-3); }

.fatia__topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--espaco-2);
    margin-bottom: 0.25rem;
}

/* O rótulo pode ser longo ("Indicação de amigos e pacientes") e o valor NÃO
   pode ser empurrado para fora: o nome corta com reticências, o número nunca. */
.fatia__rotulo {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.fatia__valor {
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fatia__trilho {
    height: 0.5rem;
    background: var(--cor-fundo);
    border-radius: 999px;
    overflow: hidden;
}

.fatia__barra {
    height: 100%;
    background: var(--cor-primaria);
    border-radius: 999px;
    /* Largura mínima para que uma fatia pequena mas EXISTENTE não desapareça —
       "quase zero" e "zero" precisam ser distinguíveis. */
    min-width: 2px;
}

/* --------------------------------------------- Central de Gestão: liberações

   A matriz é uma grade de cartões, um por módulo, e não uma tabela: aqui a
   escolha tem UM eixo (contratado ou não), enquanto a matriz de perfis tem
   seis colunas de ação. Forçar as duas no mesmo desenho faria a Central
   parecer mais complicada do que é.

   Mínimo de 15rem porque o nome de função mais longo do menu ("Notas de
   serviço tomadas") precisa caber sem quebrar no meio. */
.grade-modulos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
    align-items: start;
}

/* Números que se comparam de linha em linha — contagem de funções liberadas,
   identificadores. Tabular para as colunas baterem entre si. */
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

/* ------------------------------------------- seleção múltipla em fieldset
   Grupo de caixas de seleção (perfil profissional do colaborador, e o que
   vier depois). Fieldset + legend, e não um <label> solto: um rótulo só
   descreve UM controle, e um leitor de tela num grupo de quinze caixas sem
   agrupamento anuncia quinze caixas sem dizer de que pergunta são. */
.campo__grupo {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 0.75rem;
    margin: 0;
}

.opcoes-multiplas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.25rem 1rem;
    margin-top: 0.5rem;
}

/* A caixa e o texto são um alvo só: clicar no rótulo marca, que é o que
   qualquer um espera — e é o que o `for`/`id` daria se cada uma tivesse id. */
.campo-caixa {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.15rem 0;
    min-height: var(--alvo-toque, 2.75rem);
}

@media (pointer: fine) {
    .campo-caixa { min-height: 0; }
}

/* ------------------------------------------------------------ matriz de risco

   O quadriculado 5×5 da gestão de riscos. Desenha as 25 células SEMPRE,
   inclusive as vazias: uma matriz que só mostra onde há risco esconde a
   informação de que a faixa vermelha está limpa.

   A cor vem das mesmas variáveis das etiquetas (ok/info/alerta/erro), e não de
   uma paleta própria: quem lê a lista de ocorrências já sabe o que vermelho
   quer dizer, e uma segunda gramática de cor só para riscos faria a matriz
   precisar de legenda. */

.matriz-risco {
    border-collapse: separate;
    border-spacing: 3px;
    width: 100%;
    min-width: 34rem;
}

.matriz-risco th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cor-texto-suave);
    text-align: center;
    padding: 0.25rem;
    white-space: nowrap;
}

.matriz-risco__canto {
    text-align: left !important;
    font-weight: 500;
}

/* A legenda de cada eixo é o que evita a matriz virar cinco números sem
   sentido: "4" não diz nada, "4 — Provável" diz. Some no celular, onde a coluna
   não cabe, e ali o title do cabeçalho continua valendo. */
.matriz-risco__legenda {
    display: block;
    font-weight: 400;
    font-size: 0.68rem;
    color: var(--cor-texto-suave);
}

@media (max-width: 40rem) {
    .matriz-risco__legenda { display: none; }
}

.matriz-risco__celula {
    padding: 0;
    border-radius: var(--raio);
}

.matriz-risco__celula--ok { background: var(--cor-ok-fundo); }
.matriz-risco__celula--info { background: var(--cor-info-fundo); }
.matriz-risco__celula--alerta { background: var(--cor-alerta-fundo); }
.matriz-risco__celula--erro { background: var(--cor-erro-fundo); }

.matriz-risco__celula--ok .matriz-risco__botao { color: var(--cor-ok); }
.matriz-risco__celula--info .matriz-risco__botao { color: var(--cor-info); }
.matriz-risco__celula--alerta .matriz-risco__botao { color: var(--cor-alerta); }
.matriz-risco__celula--erro .matriz-risco__botao { color: var(--cor-erro); }

/* A célula inteira é o alvo, e é um <button> de verdade: filtro que só responde
   ao clique do mouse deixa a matriz inacessível pelo teclado. */
.matriz-risco__botao {
    width: 100%;
    min-height: 2.75rem;
    border: 2px solid transparent;
    border-radius: var(--raio);
    background: transparent;
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}

.matriz-risco__botao:hover { border-color: currentColor; }

.matriz-risco__botao:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 1px;
}

.matriz-risco__botao--ativo {
    border-color: currentColor;
    box-shadow: inset 0 0 0 1px currentColor;
}

.matriz-risco__rodape {
    margin-top: 0.75rem;
    line-height: 1.5;
}

/* Na impressão o botão vira número: a matriz impressa é evidência de auditoria,
   e borda de foco/hover em papel só suja. */
@media print {
    .matriz-risco__botao {
        border-color: transparent;
        box-shadow: none;
    }
}

/* Só para leitor de tela. A matriz de risco é a primeira tabela do sistema cujo
   sentido depende dos DOIS eixos ao mesmo tempo — sem a legenda descrita, quem
   navega por áudio ouve vinte e cinco números soltos. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------- seletor de tema
   Três retratos lado a lado. A amostra mostra a faixa do topo e o corpo da
   página, que são as duas superfícies que a pessoa realmente vê ao abrir o
   sistema — mostrar um quadrado da cor da marca não diria nada sobre o que
   muda. */
.tema-opcoes {
    display: grid;
    gap: var(--espaco-3);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.tema-opcao {
    display: grid;
    gap: var(--espaco-1);
    padding: var(--espaco-3);
    text-align: left;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda-clara);
    border-radius: var(--raio);
    cursor: pointer;
    min-height: var(--alvo-toque);
    color: var(--cor-texto);
    font: inherit;
    transition: border-color var(--transicao);
}

.tema-opcao:hover { border-color: var(--cor-borda); }

.tema-opcao--marcada {
    border-color: var(--marca);
    box-shadow: 0 0 0 1px var(--marca);
}

.tema-opcao__amostra {
    display: block;
    height: 3.25rem;
    border: 1px solid var(--cor-borda-clara);
    border-radius: var(--raio-sm);
    overflow: hidden;
    margin-bottom: var(--espaco-2);
}

.tema-opcao__amostra-barra { display: block; height: 0.9rem; }
.tema-opcao__amostra-corpo { display: block; height: calc(100% - 0.9rem); }

[data-tema-amostra="claro"] .tema-opcao__amostra-barra  { background: var(--amostra-claro-barra); }
[data-tema-amostra="claro"] .tema-opcao__amostra-corpo  { background: var(--amostra-claro-corpo); }
[data-tema-amostra="escuro"] .tema-opcao__amostra-barra { background: var(--amostra-escuro-barra); }
[data-tema-amostra="escuro"] .tema-opcao__amostra-corpo { background: var(--amostra-escuro-corpo); }
[data-tema-amostra="verde"] .tema-opcao__amostra-barra  { background: var(--amostra-verde-barra); }
[data-tema-amostra="verde"] .tema-opcao__amostra-corpo  { background: var(--amostra-verde-corpo); }

.tema-opcao__nome { font-weight: 600; }
.tema-opcao__texto { font-size: 0.8125rem; color: var(--cor-texto-suave); }

/* ===========================================================================
   A GRADE DO CALENDÁRIO DE PRAZOS (Fatia 4).

   A grade é uma grade de sete colunas que NÃO encolhe: dia 1 cai na coluna do
   seu dia da semana e a semana começa na segunda. Encolher a grade para caber
   cabeçalho em tela estreita é o caminho de a segunda-feira virar o dia "1" de
   um mês que já mudou, e de ninguém encontrar o prazo.

   A COR DA CÉLULA VEM DA CLASSE, E A CLASSE VEM DO SERVIÇO. A célula não
   calcula urgência: ela recebe `--erro`, `--alerta` ou `--ok` e pinta. A regra
   mora em ConsultaDePrazos, e é a mesma que a lista de processos usa — duas
   contas parecidas divergem no dia em que alguém mudar o limite numa e esquecer
   da outra.
   =========================================================================== */

.calendario {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    margin-bottom: var(--espaco-2);
}

.calendario__titulo {
    padding: var(--espaco-1) var(--espaco-1);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cor-texto-suave);
    text-align: center;
}

.calendario__dia {
    min-height: 4.25rem;
    padding: var(--espaco-1);
    border: 1px solid var(--cor-borda-clara);
    border-radius: var(--raio-sm);
    background: var(--cor-ok-fundo);
    overflow: hidden;
}

/* A célula do dia que NÃO conta no prazo fica cinza, e não apagada: ela continua
   sendo dia, e é a posição dela na semana que dá a noção de distância. */
.calendario__dia--nao-conta {
    background: var(--cor-fundo);
    border-style: dashed;
}

.calendario__dia--vazia { background: transparent; border-color: transparent; }
.calendario__dia--neutra { background: var(--cor-fundo); }
.calendario__dia--ok { background: var(--cor-ok-fundo); }
.calendario__dia--alerta { background: var(--cor-alerta-fundo); }
.calendario__dia--erro { background: var(--cor-erro-fundo); border-color: var(--cor-erro-borda); }

.calendario__numero {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espaco-1);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cor-texto);
}

/* O número de prazos do dia. Só aparece com mais de um, porque "1" em cima de um
   prazo só é ruído — e dois prazos no mesmo dia é o dia em que a pessoa precisa
   saber que são dois. */
.calendario__quantidade {
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--cor-texto);
    color: var(--cor-fundo);
    font-size: 0.6875rem;
    font-weight: 700;
}

.calendario__motivo {
    font-size: 0.625rem;
    line-height: 1.2;
    color: var(--cor-texto-suave);
    text-transform: lowercase;
}

/* O prazo dentro da célula é uma linha, e o excesso é cortado: a grade que cresce
   com o texto do prazo deixa de ser uma grade e vira uma lista de trinta linhas
   fora de lugar. O `title` carrega a frase completa. */
.calendario__prazo {
    display: block;
    margin-top: 2px;
    padding: 1px 4px;
    border-radius: var(--raio-sm);
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-size: 0.6875rem;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendario__prazo:hover,
.calendario__prazo:focus-visible { background: var(--cor-borda-clara); }

@media (max-width: 48rem) {
    .calendario__dia { min-height: 3.25rem; }
    .calendario__motivo { display: none; }
}

/* ------------------------------------------------- MFA: codes de recuperacao
   A lista de codigos de recuperacao e o segredo TOTP sao MONOESPACADOS e
   agrupados, e nao parecem um paragrafo: sao valores que a pessoa vai digitar
   ou transcrever, e um bloco de texto corrido faz ela errar a transcricao.
   O segredo tem quebra automatica porque Base32 nao tem separador e uma linha
   de 32 caracteres estoura a largura da caixa em tela estreita. */

.codigos-de-recuperacao {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.375rem;
}

.codigos-de-recuperacao code {
    display: block;
    text-align: center;
    font-size: 0.9375rem;
    letter-spacing: 0.0625em;
    padding: 0.375rem 0.25rem;
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
}

.codigo-de-segredo {
    margin: 0.5rem 0;
}

.codigo-de-segredo code {
    display: block;
    word-break: break-all;
    line-height: 1.5;
    font-size: 0.8125rem;
    padding: 0.5rem 0.625rem;
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
}