/* =====================================================================================================================
   AVALIE NÚCLEO BP · marca.css  (versão real, 27/10/2026)
   Tokens da marca Núcleo BP (marinho + dourado; ~/design-nucleobp/MARCA-NUCLEO-BP.md) com os raios, sombras, movimento e
   componentes do padrão "Acolhe" (~/design-nucleobp/DESIGN.md e referencia-acolhe.css). Só CSS: a troca de tema
   (escuro → claro → cor do aparelho) fica no api.js (api.tema.aplicar / api.tema.alternar / api.tema.ligarBotoes).

   REGRAS GERAIS
   - Tema ESCURO é o padrão (:root). O claro vale quando o <html> tem data-theme="light" (quem põe é o api.js).
   - Letras: Quicksand em tudo (corpo 500; rótulos e botões 600–700). Cinzel (var(--display)) SÓ em "NÚCLEO BP", no título
     do hero e no título das abas principais (.titulo-pag h1). Nunca Cinzel em texto corrido, botões, números ou tabelas.
   - Dourado = marca e ação principal. Atenção = LARANJA (--warn), nunca âmbar. Vermelho = crítico, verde = bom, azul = info.
   - Toque ≥ 44 px em tudo que é clicável; foco visível = anel dourado; respeita prefers-reduced-motion (sem animação nenhuma
     — por isso NÃO espere o evento "transitionend" no JS: use setTimeout(..., 300) para tirar folhas e toasts da tela).
   - Nada de rolagem para o lado em 360 px: o que é largo (tabela) rola DENTRO da própria caixa (.tabela-caixa).
   - Ícones: <svg class="i" viewBox="0 0 24 24"><path d="..."/></svg> (traço, sem preenchimento, cor = cor do texto).

   ÍNDICE DE COMPONENTES (classe → para que serve → como usar)
   ------------------------------------------------------------------------------------------------------------------
   PÁGINA
   .pagina ............ coluna única centralizada (máx. 560 px, margem lateral 16 px) — index.html e votar.html
   .tela-cheia ........ tela inteira com o conteúdo no meio (PIN, tela final, "Link inválido")
   .leao .............. logo (leao.jpg) num quadrado de raio 14 com borda dourada; tamanhos .leao-p (40) .leao-g (72)
                        <img class="leao" src="leao.jpg" alt="Núcleo BP" width="56" height="56">
   .nbp ............... o nome "NÚCLEO BP" em Cinzel dourado (dentro do hero ele fica dourado-claro)
   .hero .............. bloco marinho do topo, com degradê e linha dourada embaixo. Dentro:
                        .hero-marca (linha com .leao + .nbp) · .ola (sobretítulo pequeno) · h1 (Cinzel) · .sub (subtítulo)
                        .hero.centro = tudo centralizado (abertura da pesquisa, votação)
                        <header class="hero centro"><div class="hero-marca"><img class="leao" src="leao.jpg" alt="">
                          <span class="nbp">Núcleo BP</span></div><h1>Pesquisa de satisfação</h1><p class="sub">…</p></header>
   .titulo-pag ........ título de tela do painel: <div class="titulo-pag"><h1>Resumo</h1><select class="entrada seletor-mes">…</div>
                        (h1 em Cinzel; se tiver um .voltar dentro, o h1 vira Quicksand 700)
   .cabeca ............ título de seção com contador: <div class="cabeca"><h2>Para ligar</h2><span class="n">3</span></div>
   .rodape ............ rodapé discreto (texto pequeno + <details> "Como usamos seus dados" + .btn-tema). Cada parte da
                        linha da empresa vai num <span class="junto"> para não quebrar no meio (ex.: o CNPJ):
                        <p><span class="junto">Núcleo BP Serviços Médicos</span> · <span class="junto">CNPJ 53.771.064/0001-52</span> · <span class="junto">Boa Vista/RR</span></p>
   .mudo .pequeno .centro .sr-only .oculto .junto ... utilitários (texto apagado, menor, centralizado, só p/ leitor de tela,
                        escondido, não quebra a linha no meio)
   Nada passa da borda: .pagina, .conteudo e .tela-cheia cortam o que sair para o lado (ex.: uma animação que desliza).
   No body isso não adianta: o navegador manda o overflow do body para a janela inteira, e o Chrome do celular "encolhe"
   a página se algo passa da borda direita, mesmo por um instante.

   CARTÕES E LISTAS
   .cartao ............ caixa padrão (fundo surface, borda, raio 16). Faixa colorida à esquerda: .faixa-ok .faixa-warn
                        .faixa-crit .faixa-info .faixa-ouro .faixa-cinza. Variante .cartao.destaque (fundo dourado bem suave).
                        Dentro: h2/h3 (título), .cartao-topo (linha flex: nome à esquerda, selo à direita)
   .lista / .item ..... lista de linhas clicáveis ou não (avatar + .txt com <b> e <small> + ação à direita)
                        <div class="lista"><div class="item"><span class="avatar avatar-p">L</span>
                          <div class="txt"><b>Luana</b><small>Enfermagem</small></div><button class="btn btn-peq btn-secundario">Editar</button></div></div>
                        (o botão não fica menor que 44 px por causa do padding do .btn; se a página tirar o padding — botão
                        só de ícone —, use .btn-icone ou ponha min-width:44px nele)
   .secao ............. bloco com título pequeno em caixa-alta (h3) — p/ agrupar coisas dentro do painel
   .alerta ............ aviso em linha: .alerta.warn (laranja) .alerta.crit .alerta.info .alerta.ok
   .aviso-discreto .... pílula discreta dourada; com .com-cadeado ganha o ícone de cadeado ("Seu voto é confidencial")

   BOTÕES (sempre <button class="btn ...">; todos ≥ 44 px)
   .btn-principal ..... dourado (ação principal: Continuar, Enviar, Confirmar voto)
   .btn-secundario .... neutro com borda (Voltar, Cancelar)
   .btn-texto ......... sem fundo, texto dourado (ações leves, "Voltar" discreto)
   .btn-perigo ........ vermelho suave (Desativar, Apagar dados de teste)
   .btn-whats ......... verde do WhatsApp (abrir conversa)
   .btn-cheio (largura toda) · .btn-peq (44 px de altura) · .btn-icone (quadrado 44×44, só ícone; ponha aria-label)
   Enviando: <button class="btn btn-principal" aria-busy="true" disabled>Enviando…</button> → mostra a rodinha
   Desabilitado: disabled  OU  aria-disabled="true" (este continua clicável, p/ o JS explicar o motivo).
                 O .btn-principal desabilitado fica cinza e legível (não dourado apagado, que ficava barrento e sem contraste).
   .motivo ............ texto pequeno embaixo do botão dizendo por que ele está desabilitado
   .acoes ............. linha de botões que dividem a largura (.acoes.coluna = um embaixo do outro)
   .btn-tema .......... botão "Claro ou escuro" (ícone de lua já vem pelo CSS):
                        <button class="btn-tema" type="button" data-acao="tema">Claro ou escuro <small data-tema-estado></small></button>
                        (o api.tema.ligarBotoes() liga o clique e escreve o estado atual dentro de [data-tema-estado])
   .link .............. link com área de toque de 44 px

   CAMPOS
   .campo ............. bloco de um campo: <div class="campo"><label for="nome">Seu nome</label>
                          <input id="nome" class="entrada" aria-describedby="nome-erro">
                          <p id="nome-erro" class="erro-campo"></p></div>   (o .erro-campo vazio some sozinho)
   .entrada ........... input, textarea e select (fonte 16 px: o iPhone não dá zoom). textarea.entrada já é mais alta.
   Erro ............... aria-invalid="true" no campo  OU  .campo.erro  → borda vermelha; o texto vai no .erro-campo
   .dica .............. texto de ajuda embaixo do campo · .contador = contador de letras (à direita)
   .seletor-mes ....... select de mês no topo do painel (largura do conteúdo)
   .busca ............. campo de busca com lupa: <input class="entrada busca" type="search" placeholder="Buscar…">
   .marcador .......... caixa de marcar / bolinha (checkbox/radio) com texto, tudo clicável:
                        <label class="marcador"><input type="checkbox"> Concorre ao funcionário do mês</label>

   ESCOLHAS
   .opcoes / .opcao ... cartões de opção (um só): <div class="opcoes" role="radiogroup" aria-label="Médico">
                          <button class="opcao" type="button" role="radio" aria-checked="false">Dr. David</button>…</div>
                        Marcado = aria-checked="true" (ou aria-pressed="true", ou .on). .opcoes.duas = 2 colunas.
                        Fundo do marcado: --escolhido-bg-linha (.opcao) e --escolhido-bg (.pessoa) — no escuro é marinho mais
                        claro com brilho dourado (o dourado transparente sozinho deixava o cartão acinzentado).
   .pessoas / .pessoa . grade de pessoas (2 colunas no celular, 3–4 em tela maior). Foto OU iniciais, mesmo tamanho:
                        <div class="pessoas" role="radiogroup" aria-label="Colaboradores">
                          <button class="pessoa" type="button" role="radio" aria-checked="false">
                            <img class="avatar" src="fotos/vivi.jpg" alt=""><span class="nome-pessoa">Vivi</span></button>
                          <button class="pessoa" …><span class="avatar" aria-hidden="true">L</span><span class="nome-pessoa">Luana</span></button></div>
                        Marcado = aria-checked="true" (ou .on): borda dourada + selo ✓ no canto.
   .avatar ............ círculo de foto (<img class="avatar">) ou de iniciais (<span class="avatar">L</span>), MESMO tamanho.
                        Tamanhos: padrão 48 · .avatar-p 36 · .avatar-m 56 · .avatar-g 84 · .avatar-gg 120 (ou style="--tam:64px")
   .estrelas / .estrela  5 estrelas (1–5), cada uma 48×48:
                        <div class="estrelas" role="radiogroup" aria-label="Recepção">
                          <button class="estrela" type="button" role="radio" aria-checked="false" aria-label="1 estrela, Péssimo"></button> ×5
                          <span class="estrela-rotulo">Bom</span></div>
                        O JS põe .acesa nas estrelas ATÉ a nota escolhida (ex.: nota 4 → as 4 primeiras) e aria-checked="true" na escolhida.
                        .nao-passei = botão "Não passei por essa etapa" (use .chip com aria-pressed).
   .notas / .nota-btn . os 11 botões de 0 a 10 (6 + 5 no celular, uma linha só em tela ≥ 600 px):
                        <div class="notas" role="radiogroup" aria-label="Nota de 0 a 10"><button class="nota-btn" role="radio" aria-checked="false">0</button>…</div>
                        <div class="notas-legenda"><span>Nem um pouco provável</span><span>Extremamente provável</span></div>
                        (no computador, deixe .notas fora de .cartao: só assim cada botão tem ≥ 44 px na coluna de 560 px)
   .chips / .chip ..... filtros em pílula: <div class="chips"><button class="chip" aria-pressed="true">Todos <span class="n">38</span></button></div>
                        Ligado = aria-pressed="true" (ou .on / aria-checked="true") → dourado. Cores de estado quando ligado:
                        .chip.warn (Pendente) · .chip.info (Liguei) · .chip.ok (Resolvido) · .chip.crit
                        .chips.rolar = uma linha só que rola DENTRO da faixa (padrão: quebra de linha)

   NÚMEROS E SELOS
   .selo .............. pílula em caixa-alta: .selo.ok .selo.warn .selo.crit .selo.info .selo.cinza .selo.ouro
                        (texto azul de .selo.info, .chip.info e .alerta.info usa --info-ink: no escuro o --info puro fica
                        abaixo de 4,5:1 sobre --surface2 e sobre o .cartao.destaque)
   .selo-nota ......... quadradinho com a nota (0–10): .selo-nota.ok (9–10) · .selo-nota.cinza (7–8) · .selo-nota.crit (0–6)
   .stats / .stat ..... blocos de número: <div class="stats"><div class="stat"><div class="stat-topo"><span class="rot">NPS do mês</span>
                          <span class="ico ouro"><svg class="i">…</svg></span></div><b class="num">61</b><span class="selo ok">Bom</span>
                          <span class="det">38 respostas</span></div></div>      (.stat.largo ocupa a linha toda)
   .barra-partes ...... barra dividida em cores (ex.: promotores/neutros/detratores):
                        <div class="barra-partes" role="img" aria-label="…"><i class="ok" style="width:74%"></i><i class="cinza" style="width:13%"></i><i class="crit" style="width:13%"></i></div>
                        .legenda (itens com .bolinha.ok/.cinza/.crit) explica as cores
   .progresso ......... barra de progresso: <div class="progresso" role="progressbar" aria-valuemin="0" aria-valuemax="100"
                          aria-valuenow="40" aria-label="Progresso"><i style="width:40%"></i></div>   (.progresso.ok/.warn/.crit mudam a cor)

   FOLHAS, AVISOS E ESTADOS
   .fundo + .folha .... folha que sobe de baixo (no computador vira janela no meio). Abrir: crie/mostre o .fundo e, no
                        quadro seguinte (requestAnimationFrame), acrescente .on. Fechar: tire .on e esconda depois de 300 ms.
                        <div class="fundo" role="presentation"><div class="folha" role="dialog" aria-modal="true" aria-labelledby="f-tit">
                          <div class="puxador"></div><button class="fechar-folha" aria-label="Fechar">×</button>
                          <h2 id="f-tit">Votar em Vivi?</h2><p class="sub">…</p>
                          <div class="acoes"><button class="btn btn-secundario">Voltar</button><button class="btn btn-principal">Confirmar</button></div></div></div>
                        .fundo.dialogo = sempre no meio da tela (diálogo pequeno). Com folha aberta, ponha .travado no <body>.
   .toast ............. aviso rápido embaixo: <div class="toast" role="status" aria-live="polite"></div> + .on (.toast.erro = vermelho)
                        Página com barra de ação grudada embaixo (fora do painel): suba o aviso com body{--toast-acima:120px}
                        (a altura da barra + uma folga); o padrão é 24px. No painel (.tem-menu) já sobe sozinho.
   .vazio ............. estado vazio: <div class="vazio"><div class="ilus"><svg class="i">…</svg></div><b>Nenhum comentário neste mês.</b><p>…</p></div>
   .esqueleto ......... carregando: <div class="esqueleto" aria-hidden="true"><i class="media"></i><i></i><i class="curta"></i></div>
                        (linhas: padrão 100% · .media 65% · .curta 40% · .alta = linha grossa)
   .tela-final ........ tela de conclusão (leão grande + título + texto), centralizada:
                        <div class="tela-final"><img class="leao" src="leao.jpg" alt="Núcleo BP"><h1>Obrigado!</h1><p>…</p></div>
                        (antes se chamava .final, nome genérico demais: colidia com classes das páginas, ex. a coluna "Final %")
   .anima-entrar ...... entrada suave de uma etapa/tela (some com prefers-reduced-motion) · .anima-treme = tremidinha (PIN errado)

   PAINEL (casca do Acolhe)
   <body class="tem-menu"> + nav.menu + main.conteudo:
     <nav class="menu" aria-label="Menu"><div class="menu-caixa">
       <div class="menu-marca so-pc"><img class="leao" src="leao.jpg" alt=""><span><b class="nome-app">Avalie</b><span class="nbp">Núcleo BP</span></span></div>
       <button class="menu-item on" aria-current="page"><svg class="i">…</svg><span>Resumo</span></button>
       <button class="menu-item"><svg class="i">…</svg><span>Para ligar</span><span class="bolha">3</span></button>
       <span class="menu-grupo so-pc">Mais</span>
       <button class="menu-item so-pc">…Votos…</button>
       <button class="menu-item so-celular">…Mais…</button></div></nav>
     <main class="conteudo"><div class="conteudo-largura">…</div></main>
   Celular (< 900 px): barra de vidro embaixo, ícone em cima e texto embaixo, item ativo dourado. Computador (≥ 900 px):
   menu lateral fixo de 244 px. .so-pc só aparece no computador; .so-celular só no celular.
   .pontos / .teclado / .tecla / .erro-pin ... tela de PIN (6 bolinhas, teclado grande, tecla de ação .tecla.acao)

   TABELAS
   .tabela-caixa > table.tabela ... a tabela rola dentro da caixa se não couber (a página nunca rola para o lado).
   table.tabela.empilha ........... no celular (< 640 px) cada linha vira um cartão: cada <td data-rotulo="Pacientes %">;
                                    o <td class="principal"> é o título do cartão (sem rótulo). Números: <td class="num">.
   ===================================================================================================================== */

/* ---------- 1. TOKENS — tema ESCURO (padrão). Valores exatos do MARCA-NUCLEO-BP.md + raios/sombras/movimento do Acolhe ---------- */
:root{
  color-scheme:dark;
  --bg:#0B1627; --bg2:#0F1E34; --surface:#132540; --surface2:#183052; --surface3:#1E3A60; --lado-bg:rgba(11,22,39,.94);
  --ink:#F4EFE4; --ink2:#D9D2C3; --muted:#A9B3C4; --muted2:#8E9AAE;
  --line:rgba(224,184,104,.13); --line2:rgba(224,184,104,.26); --borda-campo:#7486A3;   /* 3,6:1 sobre o preenchimento (--surface2) e 4,2:1 no cartão; o #5B6B86 dava 2,5:1 */
  --accent:#E0B868; --accent2:#CA9A4A; --accent3:#F5DE93; --accent-soft:rgba(224,184,104,.13); --accent-soft2:rgba(224,184,104,.32);
  --accent-ink:#EDCF86; --on-accent:#1A1405;
  --ouro-grad:linear-gradient(135deg,#CA8D3E 0%,#E6C170 50%,#FAEC9D 100%);
  --ia:#8B5CF6; --ia2:#7C3AED; --ia-soft:rgba(167,139,250,.16); --ia-ink:#C4B5FD; --on-ia:#FFFFFF;
  --eq:#E0B868; --eq2:#CA9A4A; --on-eq:#1A1405;
  --ok:#4ADE80; --ok-soft:rgba(74,222,128,.13); --warn:#FDA859; --warn-soft:rgba(253,168,89,.14); --crit:#F87171; --crit-soft:rgba(248,113,113,.14);
  --crit-forte:#B91C1C; --on-crit-forte:#FFFFFF; --nav-bg:rgba(12,24,42,.97);
  --info:#60A5FA; --info-soft:rgba(96,165,250,.14); --cinza:#94A3B8; --cinza-soft:rgba(148,163,184,.14);
  --info-ink:#93C5FD;   /* texto azul sobre --info-soft: 5,8:1 em cima de --surface2 (o --info dava 4,1:1) */
  --crit-ink:#FCA5A5; --cinza-ink:#CBD5E1;   /* texto dos selos Crítico/cinza: 5,1:1 ou mais até em --surface3 (os puros davam 3,6–4,1) */
  --wa:#25D366; --wa2:#1DB954; --on-wa:#04210F;
  --hero-a:#10223B; --hero-b:#152D4A; --hero-c:#1F3A5E; --hero-ink:#F4EFE4; --hero-muted:rgba(244,239,228,.76);
  --glass:rgba(11,22,39,.82); --glass-line:rgba(224,184,104,.16);
  --glow:0 0 0 1px rgba(224,184,104,.42), 0 0 20px rgba(224,184,104,.28); --glow-soft:0 0 16px rgba(224,184,104,.20); --glow-ia:0 0 18px rgba(139,92,246,.30);
  --brilho-a:rgba(224,184,104,.08); --brilho-b:rgba(96,165,250,.07);
  /* sombras, raios e movimento: os do Acolhe (DESIGN.md) */
  --sh-1:0 1px 2px rgba(0,0,0,.35); --sh-2:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.85); --sh-3:0 30px 70px -24px rgba(0,0,0,.9);
  --r-xl:22px; --r-lg:16px; --r-md:12px; --r-sm:10px; --r-xs:6px; --lado:244px;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.4,.64,1);
  --font:"Quicksand",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Cinzel","Iowan Old Style",Georgia,"Times New Roman",serif;
  /* derivados (só deste app, iguais aos do Radar): título e contorno do hero, contornos dos selos, fundo do botão principal */
  --hero-titulo:#F5DE93; --hero-line:rgba(224,184,104,.30);
  --warn-line:rgba(253,168,89,.40); --info-line:rgba(96,165,250,.40); --ok-line:rgba(74,222,128,.40); --crit-line:rgba(248,113,113,.40);
  --btn-p-bg:var(--ouro-grad);
  --estrela-cheia:var(--ouro-grad); --estrela-vazia:var(--muted2);
  --fundo-folha:rgba(5,11,22,.64);
  --gutter:16px;
  /* fundo do cartão ESCOLHIDO (.pessoa e .opcao marcados): marinho mais claro com brilho dourado. Só o --accent-soft
     (dourado transparente) por cima do marinho dava #2E3845, um cinza que não parece dourado */
  --escolhido-bg:radial-gradient(95% 70% at 50% 0%,rgba(224,184,104,.20),transparent 75%), var(--surface2);
  --escolhido-bg-linha:radial-gradient(70% 140% at 0% 50%,rgba(224,184,104,.18),transparent 75%), var(--surface2);
}

/* ---------- 2. TOKENS — tema CLARO (opção). Valores exatos do MARCA-NUCLEO-BP.md ---------- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F7F4EC; --bg2:#EFEADF; --surface:#FFFFFF; --surface2:#F6F2E9; --surface3:#ECE5D6; --lado-bg:rgba(255,255,255,.95);
  --ink:#152D4A; --ink2:#2B3E5C; --muted:#586377; --muted2:#646E80;
  --line:rgba(21,45,74,.10); --line2:rgba(21,45,74,.18);
  --borda-campo:#7A8497;   /* borda dos campos: 3,4:1 no fundo e 3,8:1 no branco (WCAG 1.4.11 pede 3:1; o #8C96A8 dava 2,7:1) */
  --accent:#8A6420; --accent2:#6F4F14; --accent3:#E0B868; --accent-soft:#F6EBD2; --accent-soft2:#EAD6A8; --accent-ink:#6F4F14; --on-accent:#FFFFFF;
  --ouro-grad:linear-gradient(135deg,#B07A2E 0%,#CA9A4A 50%,#E0B868 100%);
  --ia:#6D28D9; --ia2:#5B21B6; --ia-soft:#EFE9FE; --ia-ink:#5B21B6; --on-ia:#FFFFFF;
  --eq:#8A6420; --eq2:#6F4F14; --on-eq:#FFFFFF;
  --ok:#166534; --ok-soft:#DCFCE7; --warn:#9A4A00; --warn-soft:#FFEDD5; --crit:#B91C1C; --crit-soft:#FEE2E2;
  --info:#1D4ED8; --info-soft:#DBEAFE; --info-ink:#1D4ED8; --crit-ink:#B91C1C; --cinza-ink:#475569; --cinza:#475569; --cinza-soft:#E2E8F0; --nav-bg:rgba(255,255,255,.97);
  --wa:#15803D; --wa2:#166534; --on-wa:#FFFFFF;
  /* o hero continua MARINHO no claro, como o logo: título dourado/creme sobre #152D4A */
  --hero-a:#152D4A; --hero-b:#1B365A; --hero-c:#244570; --hero-ink:#F4EFE4; --hero-muted:rgba(244,239,228,.78);
  --glass:rgba(255,255,255,.86); --glass-line:rgba(21,45,74,.10);
  --glow:0 0 0 1px rgba(138,100,32,.28), 0 8px 20px -8px rgba(138,100,32,.40); --glow-soft:0 6px 16px -10px rgba(138,100,32,.35);
  --brilho-a:rgba(224,184,104,.10); --brilho-b:rgba(21,45,74,.05);
  /* sombras do Acolhe claro, no tom marinho da marca (igual ao Radar) */
  --sh-1:0 1px 1px rgba(21,45,74,.03), 0 2px 8px rgba(21,45,74,.05); --sh-2:0 1px 2px rgba(21,45,74,.05), 0 16px 40px -18px rgba(21,45,74,.28); --sh-3:0 30px 70px -24px rgba(21,45,74,.45);
  --glow-ia:0 6px 16px -8px rgba(109,40,217,.4);
  --hero-titulo:#F5DE93; --hero-line:rgba(224,184,104,.34);
  --warn-line:rgba(154,74,0,.22); --info-line:rgba(29,78,216,.22); --ok-line:rgba(22,101,52,.22); --crit-line:rgba(185,28,28,.22);
  /* no claro o degradê dourado com letra branca não dá contraste: botão em dourado escuro (branco sobre ele = 5,4:1) */
  --btn-p-bg:linear-gradient(160deg,#8A6420,#6F4F14);
  --estrela-cheia:linear-gradient(135deg,#9A6F24,#B07A2E); --estrela-vazia:var(--muted2);
  --fundo-folha:rgba(21,45,74,.42);
  --escolhido-bg:linear-gradient(180deg,#F6EBD2,#FBF6EA);
  --escolhido-bg-linha:linear-gradient(90deg,#F6EBD2,#FBF6EA);
}

/* ---------- 3. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
html{background:var(--bg); -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:16px}
body{margin:0; min-height:100vh; min-height:100dvh; background:transparent; color:var(--ink); font-family:var(--font); font-weight:500;
     font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; overflow-wrap:break-word}
@supports (overflow:clip){ body{overflow-x:clip} }   /* "clip" não quebra o position:sticky como o "hidden" */
/* ATENÇÃO: o overflow do body vai para a JANELA inteira e não corta nada; se algo passa da borda direita (mesmo por um
   instante, numa animação que desliza), o Chrome do celular "encolhe" a página (innerWidth 377 em vez de 375). Quem
   corta de verdade são os contêineres da página: .pagina, .conteudo e .tela-cheia (seção 4). Sem "hidden" de reserva
   neles de propósito: "hidden" quebraria a barra grudada (position:sticky) do votar.html. */
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
     background:radial-gradient(90vmax 60vmax at 0% -10%,var(--brilho-a),transparent 60%),radial-gradient(80vmax 60vmax at 110% 20%,var(--brilho-b),transparent 60%)}
body.travado{overflow:hidden}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-weight:700; line-height:1.2; letter-spacing:-.01em}
img,svg{max-width:100%}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0; margin:0; touch-action:manipulation; text-align:inherit}
button:disabled{cursor:default}
input,select,textarea{font:inherit; color:inherit}
a{color:var(--accent-ink)}
svg.i{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs)}
::selection{background:var(--accent-soft2); color:var(--ink)}
details > summary{list-style:none; cursor:pointer}
details > summary::-webkit-details-marker{display:none}

/* utilitários */
[hidden]{display:none !important}   /* o atributo hidden sempre esconde (mesmo em .fundo, que é display:flex) */
.oculto{display:none !important}
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.mudo{color:var(--muted)}
.pequeno{font-size:.88rem}
.centro{text-align:center}
.junto{white-space:nowrap}   /* não quebra no meio: "CNPJ 53.771.064/0001-52" fica inteiro numa linha */

/* ---------- 4. PÁGINA ---------- */
.pagina{width:100%; max-width:560px; margin:0 auto; padding:0 var(--gutter)}
.tela-cheia{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
            padding:28px var(--gutter) calc(28px + env(safe-area-inset-bottom)); text-align:center}
/* corta o que passar para o lado (ver a nota no body, seção 3). "clip" não cria rolagem: o position:sticky continua valendo */
@supports (overflow:clip){ .pagina, .conteudo, .tela-cheia{overflow-x:clip} }

.leao{--tam:56px; display:block; width:var(--tam); height:var(--tam); border-radius:14px; border:1px solid var(--accent-soft2);
      background:#152D4A; object-fit:cover; flex:0 0 auto}
.leao-p{--tam:40px; border-radius:12px}
.leao-g{--tam:72px; border-radius:16px}

.nbp{font-family:var(--display); font-weight:600; font-size:.8rem; letter-spacing:.2em; line-height:1.2; text-transform:uppercase; color:var(--accent)}

.hero{position:relative; margin:16px 0 14px; padding:20px 18px 20px; border-radius:var(--r-xl); color:var(--hero-ink); overflow:hidden;
      background:linear-gradient(135deg,var(--hero-a),var(--hero-b) 55%,var(--hero-c)); border:1px solid var(--hero-line); box-shadow:var(--sh-2)}
.hero::after{content:""; position:absolute; left:18px; right:18px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--ouro-grad); box-shadow:var(--glow-soft)}
.hero-marca{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.hero .nbp{color:var(--hero-titulo)}
.hero .ola{font-size:.78rem; color:var(--hero-muted); letter-spacing:.08em; text-transform:uppercase; font-weight:700}
.hero h1{font-family:var(--display); color:var(--hero-titulo); font-size:1.65rem; line-height:1.15; margin:4px 0 0; font-weight:700; letter-spacing:.02em; overflow-wrap:anywhere}
.hero .sub{color:var(--hero-muted); font-size:.98rem; margin-top:8px; line-height:1.45}
.hero.centro{text-align:center}
.hero.centro .hero-marca{flex-direction:column; gap:10px}
@media (max-width:639px){ .hero{margin:12px 0 12px; padding:18px 16px 18px} .hero h1{font-size:1.45rem} }

.titulo-pag{display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; margin:18px 0 14px}
.titulo-pag h1{font-family:var(--display); font-weight:700; font-size:1.45rem; letter-spacing:.02em; line-height:1.2; flex:1 1 auto; min-width:0}
.titulo-pag:has(> .voltar) h1{font-family:var(--font); letter-spacing:-.01em; overflow-wrap:anywhere}
.titulo-pag p{color:var(--muted); font-size:.92rem; margin-top:3px}
.voltar{width:44px; height:44px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line2); display:grid; place-items:center; flex:0 0 auto}

.cabeca{display:flex; align-items:center; gap:10px; margin:22px 2px 10px}
.cabeca h2{font-weight:700; font-size:1.1rem; flex:0 1 auto}
.cabeca .n{min-width:28px; height:24px; padding:0 8px; border-radius:999px; display:inline-grid; place-items:center; font-size:.8rem; font-weight:700;
           color:var(--ink2); background:var(--surface2); border:1px solid var(--line2); font-variant-numeric:tabular-nums}
.cabeca .n.warn{color:var(--warn); background:var(--warn-soft); border-color:var(--warn-line)}
.cabeca .n.crit{color:var(--crit); background:var(--crit-soft); border-color:var(--crit-line)}
.cabeca > :last-child:not(h2):not(.n){margin-left:auto}

.rodape{max-width:560px; margin:36px auto 0; padding:18px var(--gutter) calc(24px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);
        color:var(--muted); font-size:.85rem; line-height:1.5; text-align:center}
.rodape p{margin:0 0 6px}
.rodape details{margin:6px auto 10px; max-width:460px; text-align:left}
.rodape summary{display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; color:var(--ink2); font-weight:600}
.rodape summary::before{content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .15s; flex:0 0 auto}
.rodape details[open] summary::before{transform:rotate(45deg)}
.rodape details > :not(summary){color:var(--muted); font-size:.88rem; margin:6px 0}
.rodape details ul{padding-left:18px}
.rodape details li{margin:4px 0}

/* ---------- 5. CARTÕES, LISTAS, AVISOS ---------- */
.cartao{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-1); overflow:hidden; min-width:0}
.cartao + .cartao{margin-top:12px}
.cartao > h2{font-size:1.15rem; margin-bottom:8px}
.cartao > h3{font-size:1rem; margin-bottom:6px}
.cartao > p + p{margin-top:8px}
.cartao::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0; background:transparent}
.cartao.faixa-ok::before{background:var(--ok)} .cartao.faixa-warn::before{background:var(--warn)} .cartao.faixa-crit::before{background:var(--crit)}
.cartao.faixa-info::before{background:var(--info)} .cartao.faixa-ouro::before{background:var(--ouro-grad)}
.cartao.faixa-cinza::before{background:var(--cinza)}   /* neutro: ex. nota 7–8 (SPEC §6) */
.cartao:is(.faixa-ok,.faixa-warn,.faixa-crit,.faixa-info,.faixa-ouro,.faixa-cinza){padding-left:20px}
.cartao.destaque{border-color:var(--accent-soft2); background:linear-gradient(180deg,var(--accent-soft),var(--surface) 70%); box-shadow:var(--sh-1), var(--glow-soft)}
.cartao-topo{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px}
.cartao-topo > b, .cartao-topo > .nome{flex:1 1 150px; min-width:0; font-weight:700; font-size:1.05rem; overflow-wrap:anywhere}

.lista{display:flex; flex-direction:column; gap:10px}
.item{display:flex; align-items:center; gap:12px; min-height:60px; padding:10px 14px; width:100%; text-align:left; color:var(--ink);
      background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); transition:border-color .15s, background .15s}
button.item:active{background:var(--surface2)}
@media (hover:hover){ button.item:hover{border-color:var(--line2); background:var(--surface2)} }
.item .txt{flex:1 1 auto; min-width:0}
.item b{display:block; font-weight:700; font-size:1rem; overflow-wrap:anywhere}
.item small{display:block; color:var(--muted); font-size:.86rem; overflow-wrap:anywhere}
.item.inativo{background:transparent; border-style:dashed; box-shadow:none}
.item.inativo b{color:var(--muted)}
.item.inativo .avatar{filter:grayscale(1)}

.secao{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; margin-bottom:12px; box-shadow:var(--sh-1); min-width:0}
.secao > h3{display:flex; align-items:center; gap:8px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; font-weight:700}
.secao > h3 .i{width:18px; height:18px; color:var(--accent-ink)}

.alerta{display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:var(--r-md); font-size:.92rem; font-weight:600; line-height:1.4;
        background:var(--surface2); color:var(--ink2); border:1px solid var(--line2)}
.alerta .i{width:18px; height:18px; margin-top:1px}
.alerta.warn{background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line)}
.alerta.crit{background:var(--crit-soft); color:var(--crit); border-color:var(--crit-line)}
.alerta.info{background:var(--info-soft); color:var(--info-ink); border-color:var(--info-line)}
.alerta.ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line)}

.aviso-discreto{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:6px 14px; border-radius:999px; font-size:.92rem; font-weight:600;
                background:var(--accent-soft); color:var(--accent-ink); border:1px solid var(--accent-soft2)}
.com-cadeado::before{content:""; width:16px; height:16px; flex:0 0 auto; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- 6. BOTÕES ---------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 18px; border-radius:var(--r-md);
     font-weight:700; font-size:1rem; line-height:1.15; text-align:center; text-decoration:none; border:1px solid transparent;
     transition:transform .08s, filter .15s, box-shadow .15s, background .15s, border-color .15s}
.btn:active{transform:scale(.97)}
.btn .i{width:20px; height:20px}
.btn:disabled, .btn[aria-disabled="true"]{opacity:.45; box-shadow:none; transform:none}
.btn:disabled{pointer-events:none}
.btn-principal{background:var(--btn-p-bg); color:var(--on-accent); box-shadow:var(--glow-soft)}
@media (hover:hover){ .btn-principal:hover{filter:brightness(1.06)} }
/* principal desabilitado: cinza legível (5,4:1 no escuro, 4,8:1 no claro). O dourado meio transparente ficava marrom
   barrento no escuro e letra branca sobre bege no claro. "Enviando…" (aria-busy) continua dourado, com a rodinha. */
.btn-principal:is(:disabled,[aria-disabled="true"]):not([aria-busy="true"]){opacity:1; background:var(--surface3); color:var(--muted);
  border-color:var(--line2); box-shadow:none; filter:none}
.btn-secundario{background:var(--surface2); color:var(--ink); border-color:var(--line2)}
@media (hover:hover){ .btn-secundario:hover{background:var(--surface3)} }
.btn-texto{background:transparent; color:var(--accent-ink); padding:0 12px}
@media (hover:hover){ .btn-texto:hover{background:var(--accent-soft)} }
.btn-perigo{background:var(--crit-soft); color:var(--crit); border-color:var(--crit-line)}
.btn-whats{background:linear-gradient(160deg,var(--wa),var(--wa2)); color:var(--on-wa); box-shadow:0 0 18px rgba(37,211,102,.28)}
:root[data-theme="light"] .btn-whats{box-shadow:0 8px 18px -8px rgba(21,128,61,.55)}
.btn-cheio{width:100%}
.btn-peq{min-height:44px; padding:0 14px; font-size:.92rem}
.btn-icone{width:44px; min-height:44px; height:44px; padding:0; flex:0 0 auto}
/* enviando: rodinha antes do texto (a rodinha para quando a pessoa pede menos movimento, mas continua visível) */
.btn[aria-busy="true"]::before{content:""; width:18px; height:18px; border-radius:50%; border:2.5px solid currentColor; border-right-color:transparent;
                               animation:gira .8s linear infinite; flex:0 0 auto}
.btn[aria-busy="true"]:disabled{opacity:.8}
@keyframes gira{to{transform:rotate(360deg)}}
.motivo{font-size:.85rem; color:var(--muted); text-align:center; margin-top:8px; min-height:1.2em}
.acoes{display:flex; gap:10px; align-items:stretch; margin-top:16px}
.acoes > .btn{flex:1 1 0; min-width:0; white-space:normal}
.acoes > .btn-texto, .acoes > .btn-icone{flex:0 0 auto}
.acoes.coluna{flex-direction:column}
.acoes.coluna > .btn{flex:0 0 auto; width:100%}
.link{display:inline-flex; align-items:center; min-height:44px; color:var(--accent-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px}

.btn-tema{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px;
          background:var(--surface); border:1px solid var(--line2); color:var(--ink2); font-weight:600; font-size:.9rem}
.btn-tema::before{content:""; width:18px; height:18px; flex:0 0 auto; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.2A8.5 8.5 0 1 1 9.8 3.5a6.8 6.8 0 0 0 10.7 10.7z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.2A8.5 8.5 0 1 1 9.8 3.5a6.8 6.8 0 0 0 10.7 10.7z'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-tema small{color:var(--muted); font-size:.82rem; font-weight:600}
.btn-tema small:not(:empty)::before{content:"· "}
@media (hover:hover){ .btn-tema:hover{border-color:var(--accent-soft2)} }

/* ---------- 7. CAMPOS ---------- */
.campo{margin-bottom:16px}
.campo > label, .rotulo{display:block; font-size:.9rem; font-weight:700; color:var(--ink2); margin-bottom:6px}
.entrada{display:block; width:100%; min-height:50px; padding:0 14px; border:1px solid var(--borda-campo); border-radius:var(--r-md); background:var(--surface2);
         color:var(--ink); font-size:16px; font-weight:500; transition:border-color .15s, box-shadow .15s}
.entrada::placeholder{color:var(--muted2); opacity:1}
.entrada:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), var(--glow-soft)}
textarea.entrada{min-height:110px; padding:12px 14px; line-height:1.45; resize:vertical}
select.entrada{appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A9B3C4' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center}
:root[data-theme="light"] select.entrada{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586377' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.entrada[aria-invalid="true"], .campo.erro .entrada{border-color:var(--crit); box-shadow:0 0 0 3px var(--crit-soft)}
.erro-campo{display:flex; gap:6px; align-items:flex-start; color:var(--crit); font-size:.88rem; font-weight:600; margin-top:6px; line-height:1.35}
.erro-campo:empty{display:none}
.dica{display:block; font-size:.85rem; color:var(--muted); margin-top:6px; line-height:1.4}
.contador{font-size:.8rem; color:var(--muted); text-align:right; margin-top:4px; font-variant-numeric:tabular-nums}
.seletor-mes{width:auto; min-width:11.5em; max-width:100%; min-height:44px; font-weight:600}
.entrada.busca{padding-left:44px; background-repeat:no-repeat; background-position:14px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238E9AAE' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
:root[data-theme="light"] .entrada.busca{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23646E80' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}

.marcador{display:flex; align-items:flex-start; gap:12px; min-height:48px; padding:12px 14px; border:1px solid var(--line2); border-radius:var(--r-md);
          background:var(--surface2); margin-bottom:8px; cursor:pointer; font-size:.98rem; font-weight:600}
.marcador input{-webkit-appearance:none; appearance:none; width:22px; height:22px; flex:0 0 auto; margin:1px 0 0; border:2px solid var(--borda-campo);
                border-radius:var(--r-xs); background:var(--surface); display:grid; place-items:center; cursor:pointer}
.marcador input[type="radio"]{border-radius:50%}
.marcador input:checked{background:var(--accent); border-color:var(--accent)}
.marcador input[type="checkbox"]:checked::after{content:""; width:6px; height:11px; margin-top:-2px; border:solid var(--on-accent); border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}
.marcador input[type="radio"]:checked::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--on-accent)}
.marcador input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.marcador:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}

/* ---------- 8. ESCOLHAS: cartão de opção, pessoas, estrelas, notas, chips ---------- */
.opcoes{display:grid; grid-template-columns:minmax(0,1fr); gap:10px}
.opcoes.duas{grid-template-columns:repeat(2,minmax(0,1fr))}
.opcao{display:flex; align-items:center; gap:14px; width:100%; min-height:58px; padding:14px 16px; text-align:left; color:var(--ink);
       background:var(--surface); border:1.5px solid var(--line2); border-radius:var(--r-lg); font-weight:700; font-size:1.05rem; line-height:1.25;
       box-shadow:var(--sh-1); transition:border-color .15s, background .15s, box-shadow .15s, transform .08s}
.opcao::before{content:""; width:22px; height:22px; flex:0 0 auto; border-radius:50%; border:2px solid var(--muted2); background:var(--surface2);   /* --muted2: 5,4:1 no escuro, 5,1:1 no claro */
               transition:border-color .15s, background .15s, box-shadow .15s}
.opcao:active{transform:scale(.99)}
@media (hover:hover){ .opcao:hover{border-color:var(--accent-soft2)} }
.opcao small{display:block; color:var(--muted); font-size:.88rem; font-weight:600; margin-top:2px}
.opcao:is([aria-checked="true"],[aria-pressed="true"],.on){border-color:var(--accent); background:var(--escolhido-bg-linha); box-shadow:var(--glow-soft)}
.opcao:is([aria-checked="true"],[aria-pressed="true"],.on) small{color:var(--ink2)}   /* sobre o brilho dourado o --muted ficaria abaixo de 4,5:1 */
.opcao:is([aria-checked="true"],[aria-pressed="true"],.on)::before{border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 4px var(--surface)}

.pessoas{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
.pessoa{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px; min-width:0; min-height:44px;
        padding:16px 10px 14px; text-align:center; color:var(--ink); background:var(--surface); border:1.5px solid var(--line2); border-radius:var(--r-lg);
        box-shadow:var(--sh-1); transition:border-color .15s, background .15s, box-shadow .15s, transform .08s}
.pessoa .avatar{--tam:84px}
.pessoa:active{transform:scale(.98)}
@media (hover:hover){ .pessoa:hover{border-color:var(--accent-soft2)} }
.nome-pessoa{display:block; max-width:100%; font-weight:700; font-size:1rem; line-height:1.2; overflow-wrap:anywhere}
.pessoa small{display:block; color:var(--muted); font-size:.82rem; font-weight:600}
.pessoa:is([aria-checked="true"],[aria-pressed="true"],.on){border-color:var(--accent); background:var(--escolhido-bg); box-shadow:var(--glow-soft)}
.pessoa:is([aria-checked="true"],[aria-pressed="true"],.on) small{color:var(--ink2)}
.pessoa:is([aria-checked="true"],[aria-pressed="true"],.on) .avatar{box-shadow:0 0 0 3px var(--accent)}
.pessoa::after{content:""; position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; background:var(--accent);
  opacity:0; transform:scale(.6); transition:opacity .15s, transform .2s var(--spring)}
.pessoa::before{content:""; position:absolute; top:8px; right:8px; z-index:1; width:26px; height:26px; background:var(--on-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 13.5l3.6 3.6 7.4-8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 13.5l3.6 3.6 7.4-8'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0; transform:scale(.6); transition:opacity .15s, transform .2s var(--spring)}
.pessoa:is([aria-checked="true"],[aria-pressed="true"],.on)::before, .pessoa:is([aria-checked="true"],[aria-pressed="true"],.on)::after{opacity:1; transform:none}

.avatar{--tam:48px; display:inline-grid; place-items:center; width:var(--tam); height:var(--tam); flex:0 0 auto; border-radius:50%; overflow:hidden;
        object-fit:cover; background:var(--accent-soft); border:1px solid var(--accent-soft2); color:var(--accent-ink);
        font-family:var(--font); font-weight:700; font-size:calc(var(--tam) * .4); line-height:1; letter-spacing:.02em; user-select:none; -webkit-user-select:none}
img.avatar{display:block; background:var(--surface2)}
.avatar-p{--tam:36px} .avatar-m{--tam:56px} .avatar-g{--tam:84px} .avatar-gg{--tam:120px}

.estrelas{display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px}
.estrela{display:grid; place-items:center; width:48px; height:48px; border-radius:var(--r-md); transition:transform .12s var(--spring)}
.estrela::before{content:""; width:36px; height:36px; background:var(--estrela-vazia);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.84 5.76 6.36.92-4.6 4.49 1.09 6.33L12 17.31l-5.69 2.99 1.09-6.33-4.6-4.49 6.36-.92z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.84 5.76 6.36.92-4.6 4.49 1.09 6.33L12 17.31l-5.69 2.99 1.09-6.33-4.6-4.49 6.36-.92z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.estrela.acesa::before{background:var(--estrela-cheia);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.84 5.76 6.36.92-4.6 4.49 1.09 6.33L12 17.31l-5.69 2.99 1.09-6.33-4.6-4.49 6.36-.92z' fill='%23000' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.84 5.76 6.36.92-4.6 4.49 1.09 6.33L12 17.31l-5.69 2.99 1.09-6.33-4.6-4.49 6.36-.92z' fill='%23000' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E")}
.estrela:active{transform:scale(.9)}
.estrela[aria-checked="true"]{transform:scale(1.06)}
.estrela-rotulo{min-width:5.5em; padding-left:6px; font-weight:700; font-size:.95rem; color:var(--accent-ink)}
.estrela-rotulo:empty{display:none}
.estrelas[aria-disabled="true"] .estrela{opacity:.4}

.notas{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 6px}
.nota-btn{flex:0 0 calc((100% - 30px) / 6); min-width:44px; height:52px; display:grid; place-items:center; border-radius:var(--r-md);
          background:var(--surface2); border:1.5px solid var(--line2); color:var(--ink); font-weight:700; font-size:1.15rem; font-variant-numeric:tabular-nums;
          transition:background .15s, border-color .15s, transform .08s, box-shadow .15s}
.nota-btn:active{transform:scale(.94)}
@media (hover:hover){ .nota-btn:hover{border-color:var(--accent-soft2)} }
.nota-btn:is([aria-checked="true"],[aria-pressed="true"],.on){background:var(--btn-p-bg); border-color:var(--accent); color:var(--on-accent); box-shadow:var(--glow-soft)}
.notas-legenda{display:flex; justify-content:space-between; gap:12px; margin-top:10px; font-size:.85rem; font-weight:600; color:var(--muted); line-height:1.3}
.notas-legenda > :last-child{text-align:right}
/* uma linha só em tela ≥ 600 px: na coluna de 560 px (.pagina) cada botão fica com 44 px — por isso, no computador,
   ponha as notas direto na .pagina, fora de .cartao (dentro do cartão sobram só ~40 px por botão) */
@media (min-width:600px){
  .notas{flex-wrap:nowrap; gap:4px}
  .nota-btn{flex:1 1 0; min-width:0}
}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips.rolar{flex-wrap:nowrap; overflow-x:auto; padding:2px 2px 6px; margin:0 -2px; scrollbar-width:none}
.chips.rolar::-webkit-scrollbar{display:none}
.chip{display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 15px; border-radius:999px; white-space:nowrap; flex:0 0 auto;
      background:var(--surface); border:1px solid var(--line2); color:var(--ink2); font-size:.92rem; font-weight:600; transition:background .15s, border-color .15s, color .15s}
@media (hover:hover){ .chip:hover{border-color:var(--accent-soft2)} }
.chip .n{font-size:.8rem; opacity:.85; font-variant-numeric:tabular-nums}
.chip:is([aria-pressed="true"],[aria-checked="true"],.on){background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.chip.warn:is([aria-pressed="true"],[aria-checked="true"],.on){background:var(--warn-soft); border-color:var(--warn); color:var(--warn)}
.chip.info:is([aria-pressed="true"],[aria-checked="true"],.on){background:var(--info-soft); border-color:var(--info); color:var(--info-ink)}
.chip.ok:is([aria-pressed="true"],[aria-checked="true"],.on){background:var(--ok-soft); border-color:var(--ok); color:var(--ok)}
.chip.crit:is([aria-pressed="true"],[aria-checked="true"],.on){background:var(--crit-soft); border-color:var(--crit); color:var(--crit)}

/* ---------- 9. NÚMEROS E SELOS ---------- */
.selo{display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:4px 9px; border-radius:999px; white-space:nowrap; line-height:1.2;
      font-size:.75rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; background:var(--cinza-soft); color:var(--muted); border:1px solid var(--line2)}
.selo.ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line)}
.selo.warn{background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line)}
.selo.crit{background:var(--crit-soft); color:var(--crit-ink); border-color:var(--crit-line)}
.selo.info{background:var(--info-soft); color:var(--info-ink); border-color:var(--info-line)}
.selo.cinza{background:var(--cinza-soft); color:var(--cinza-ink); border-color:var(--line2)}
.selo.ouro{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-soft2)}
.selo-nota{display:inline-grid; place-items:center; min-width:34px; height:34px; padding:0 6px; border-radius:var(--r-sm); flex:0 0 auto;
           font-weight:700; font-size:1rem; font-variant-numeric:tabular-nums; background:var(--cinza-soft); color:var(--cinza); border:1px solid var(--line2)}
.selo-nota.ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok)}
.selo-nota.cinza{background:var(--cinza-soft); color:var(--cinza); border-color:var(--line2)}
.selo-nota.crit{background:var(--crit-soft); color:var(--crit); border-color:var(--crit)}

.stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0 14px}
.stat{position:relative; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; box-shadow:var(--sh-1)}
.stat.largo{grid-column:1 / -1}
.stat-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.stat .rot{font-size:.85rem; color:var(--muted); font-weight:600; line-height:1.25}
.stat .num{display:block; margin-top:6px; font-size:2rem; line-height:1.05; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.stat .num small{font-size:.5em; font-weight:700; color:var(--muted); margin-left:2px}
.stat .det{display:block; margin-top:6px; font-size:.82rem; color:var(--muted); line-height:1.3}
.stat .selo{margin-top:8px}
.ico{display:grid; place-items:center; width:36px; height:36px; border-radius:var(--r-sm); flex:0 0 auto; background:var(--accent-soft); color:var(--accent-ink)}
.ico .i{width:19px; height:19px}
.ico.ok{background:var(--ok-soft); color:var(--ok)} .ico.warn{background:var(--warn-soft); color:var(--warn)} .ico.crit{background:var(--crit-soft); color:var(--crit)}
.ico.info{background:var(--info-soft); color:var(--info)} .ico.cinza{background:var(--cinza-soft); color:var(--cinza)} .ico.ouro{background:var(--accent-soft); color:var(--accent-ink)}
@media (min-width:640px){ .stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} }

.barra-partes{display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--surface3); gap:2px; margin-top:10px}
.barra-partes > i{display:block; height:100%; min-width:0; background:var(--cinza)}
.barra-partes > i:empty{flex:0 0 auto}
.barra-partes > i.ok{background:var(--ok)} .barra-partes > i.cinza{background:var(--cinza)} .barra-partes > i.crit{background:var(--crit)}
.barra-partes > i.warn{background:var(--warn)} .barra-partes > i.info{background:var(--info)} .barra-partes > i.ouro{background:var(--ouro-grad)}
.legenda{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:.82rem; color:var(--muted); font-weight:600}
.legenda > span{display:inline-flex; align-items:center; gap:6px}
.bolinha{display:inline-block; width:10px; height:10px; border-radius:50%; flex:0 0 auto; background:var(--cinza)}
.bolinha.ok{background:var(--ok)} .bolinha.cinza{background:var(--cinza)} .bolinha.crit{background:var(--crit)} .bolinha.warn{background:var(--warn)}
.bolinha.info{background:var(--info)} .bolinha.ouro{background:var(--accent)}

.progresso{height:8px; border-radius:999px; background:var(--surface3); overflow:hidden}
.progresso > i, .progresso > span{display:block; height:100%; width:0; border-radius:inherit; background:var(--ouro-grad); transition:width .35s var(--ease)}
.progresso.ok > i, .progresso.ok > span{background:var(--ok)}
.progresso.warn > i, .progresso.warn > span{background:var(--warn)}
.progresso.crit > i, .progresso.crit > span{background:var(--crit)}

/* ---------- 10. FOLHA (de baixo) E DIÁLOGO, TOAST ---------- */
.fundo{position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center; padding-top:24px;
       background:var(--fundo-folha); opacity:0; transition:opacity .2s}
.fundo.on{opacity:1}
.folha{position:relative; width:100%; max-width:560px; max-height:92vh; max-height:92dvh; overflow:auto; overscroll-behavior:contain;
       background:var(--surface); border:1px solid var(--line2); border-bottom:0; border-radius:var(--r-xl) var(--r-xl) 0 0;
       padding:14px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow:var(--sh-3); transform:translateY(40px); transition:transform .28s var(--spring)}
.fundo.on .folha{transform:none}
.folha::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--ouro-grad); box-shadow:var(--glow-soft)}
.folha .puxador{width:40px; height:4px; border-radius:2px; background:var(--line2); margin:0 auto 12px}
.folha h2, .folha h3{font-weight:700; font-size:1.25rem; line-height:1.25; margin:0 0 8px; padding-right:44px; overflow-wrap:anywhere}
.folha .sub{color:var(--muted); margin:0 0 14px; font-size:.98rem; line-height:1.45}
.folha .acoes .btn{white-space:normal}
.fechar-folha{position:absolute; top:10px; right:10px; z-index:1; width:44px; height:44px; border-radius:var(--r-md); display:grid; place-items:center;
              color:var(--muted); background:transparent; border:1px solid transparent; font-size:1.6rem; line-height:1}
@media (hover:hover){ .fechar-folha:hover{background:var(--surface2); border-color:var(--line2); color:var(--ink)} }
.fundo.dialogo{align-items:center; padding:16px}
.fundo.dialogo .folha{max-width:420px; border-radius:var(--r-xl); border-bottom:1px solid var(--line2); padding:22px 20px 18px; transform:scale(.96)}
.fundo.dialogo.on .folha{transform:none}
.fundo.dialogo .puxador{display:none}

.toast{position:fixed; left:50%; bottom:calc(var(--toast-acima, 24px) + env(safe-area-inset-bottom)); z-index:70; width:max-content; max-width:calc(100% - 32px);
       transform:translateX(-50%) translateY(20px); padding:12px 16px; border-radius:var(--r-md); background:var(--ink); color:var(--bg);
       font-size:.95rem; font-weight:600; line-height:1.35; text-align:center; box-shadow:var(--sh-3); opacity:0; pointer-events:none;
       transition:opacity .25s var(--ease), transform .25s var(--spring)}
.toast.on{opacity:1; transform:translateX(-50%)}
.toast.erro{background:var(--crit-forte); color:var(--on-crit-forte)}

/* ---------- 11. ESTADOS: vazio, carregando, final, animações ---------- */
.vazio{text-align:center; padding:36px 16px; color:var(--muted)}
.vazio .ilus{width:84px; height:84px; margin:0 auto 12px; border-radius:var(--r-xl); display:grid; place-items:center;
             background:var(--accent-soft); border:1px solid var(--accent-soft2); color:var(--accent-ink); box-shadow:var(--glow-soft)}
.vazio .ilus .i{width:38px; height:38px}
.vazio b{display:block; color:var(--ink); font-size:1.05rem; margin-bottom:4px}
.vazio p{max-width:36ch; margin:0 auto}

.esqueleto{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; margin-bottom:10px}
.esqueleto > i{display:block; height:12px; border-radius:var(--r-xs); margin-bottom:10px;
               background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%); background-size:200% 100%; animation:brilha 1.2s infinite}
.esqueleto > i:last-child{margin-bottom:0}
.esqueleto > i.media{width:65%} .esqueleto > i.curta{width:40%} .esqueleto > i.alta{height:28px}
@keyframes brilha{to{background-position:-200% 0}}

.tela-final{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:40px 8px 24px}
.tela-final .leao{--tam:88px; border-radius:16px; box-shadow:var(--glow-soft)}   /* leão: raio 12–16 (SPEC §1) */
.tela-final h1{font-size:1.5rem; line-height:1.2}
.tela-final p{color:var(--muted); max-width:34ch; font-size:1.02rem}

.anima-entrar{animation:entrar .3s var(--ease) both}
@keyframes entrar{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.anima-treme{animation:treme .35s}
@keyframes treme{20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}}

/* ---------- 12. TELA DE PIN ---------- */
.cartao-pin{position:relative; width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line2); border-radius:var(--r-xl);
            padding:26px 20px 18px; box-shadow:var(--sh-2); overflow:hidden; text-align:center}
.cartao-pin::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--ouro-grad); box-shadow:var(--glow-soft)}
.pontos{display:flex; justify-content:center; gap:12px; margin:4px 0 20px; min-height:18px}
.pontos > i{width:14px; height:14px; border-radius:50%; border:2px solid var(--muted2); transition:all .18s var(--spring)}   /* vazia: ≥ 5:1 nos dois temas (a --line2 dava 1,4:1 no claro) */
.pontos > i.on{background:var(--accent); border-color:var(--accent); transform:scale(1.1); box-shadow:var(--glow-soft)}
.pontos.erro > i{border-color:var(--crit); background:transparent}
.pontos.erro{animation:treme .35s}
.teclado{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.tecla{height:60px; border-radius:var(--r-lg); background:var(--surface2); border:1px solid var(--line); color:var(--ink); font-size:1.45rem; font-weight:600;
       font-variant-numeric:tabular-nums; display:grid; place-items:center; transition:transform .08s, border-color .15s}
@media (hover:hover){ .tecla:hover{border-color:var(--line2)} }
.tecla:active{transform:scale(.94); background:var(--surface3)}
.tecla.fantasma{background:transparent; border-color:transparent}
.tecla.acao{background:var(--btn-p-bg); color:var(--on-accent); font-size:1.1rem; font-weight:700; border:0; box-shadow:var(--glow-soft)}
.tecla.acao:disabled{background:var(--surface3); color:var(--muted); box-shadow:none}   /* igual ao botão principal desabilitado */
.tecla .i{width:24px; height:24px}
.erro-pin{color:var(--crit); font-size:.95rem; font-weight:600; text-align:center; min-height:1.4em; margin-top:12px}

/* ---------- 13. CASCA DO PAINEL: barra de vidro embaixo (celular) e menu lateral (computador ≥ 900 px) ---------- */
.conteudo{display:block; width:100%; padding:0 var(--gutter) calc(104px + env(safe-area-inset-bottom))}
.conteudo-largura{width:100%; max-width:1240px; margin:0 auto}
nav.menu{position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:center; padding:8px 6px calc(8px + env(safe-area-inset-bottom)); pointer-events:none}
.menu-caixa{pointer-events:auto; display:flex; gap:2px; width:100%; max-width:560px; padding:4px; border-radius:var(--r-xl);
            background:var(--nav-bg); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
            border:1px solid var(--glass-line); box-shadow:var(--sh-2)}
.menu-item{position:relative; flex:1 1 0; min-width:0; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
           padding:7px 1px 6px; border-radius:var(--r-lg); color:var(--muted); font-size:clamp(.64rem, 2.8vw, .78rem); font-weight:700; line-height:1.15;
           letter-spacing:-.015em; text-align:center; transition:background .2s, color .2s}
.menu-item > span:not(.bolha){display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.menu-item .i{width:22px; height:22px}
.menu-item:is(.on,[aria-current="page"]){color:var(--accent-ink); background:var(--accent-soft)}
.menu-item:is(.on,[aria-current="page"])::before{content:""; position:absolute; top:0; left:30%; right:30%; height:3px; border-radius:0 0 3px 3px; background:var(--ouro-grad); box-shadow:var(--glow)}
.menu-item .bolha{position:absolute; top:3px; left:50%; margin-left:6px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:grid; place-items:center;
                  background:var(--crit-forte); color:var(--on-crit-forte); font-size:.7rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
.menu-marca, .menu-grupo, nav.menu .so-pc{display:none}
.tem-menu .toast{bottom:calc(96px + env(safe-area-inset-bottom))}
.tem-menu .rodape{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
@media (min-width:900px){
  nav.menu{top:0; right:auto; width:var(--lado); padding:0; justify-content:stretch}
  .menu-caixa{flex-direction:column; gap:4px; max-width:none; height:100%; padding:18px 14px; border-radius:0; border:0; border-right:1px solid var(--glass-line);
              background:var(--lado-bg); overflow-y:auto; box-shadow:none}
  .menu-item{flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:12px; min-height:46px; padding:0 14px; border-radius:var(--r-md);
             color:var(--ink2); font-size:.95rem; font-weight:600; letter-spacing:0; text-align:left}
  .menu-item:hover{background:var(--surface2)}
  .menu-item:is(.on,[aria-current="page"]){color:var(--accent-ink); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-soft2)}
  .menu-item:is(.on,[aria-current="page"])::before{top:10px; bottom:10px; left:0; right:auto; width:3px; height:auto; border-radius:0 3px 3px 0}
  .menu-item .bolha{position:static; margin:0 0 0 auto}
  nav.menu .so-pc{display:flex}
  nav.menu .so-celular{display:none}
  .menu-marca{display:flex; align-items:center; gap:10px; padding:4px 6px 18px}
  .menu-marca .leao{--tam:40px; border-radius:12px}
  .menu-marca .nome-app{display:block; font-weight:700; font-size:1.05rem; line-height:1.2; color:var(--ink)}
  .menu-marca .nbp{display:block; margin-top:3px; font-size:11px}
  .menu-grupo{display:block; margin:14px 14px 4px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
  .tem-menu .conteudo{width:auto; margin-left:var(--lado); padding:8px 32px 48px}
  .tem-menu .rodape{margin-left:var(--lado); width:auto}
  .tem-menu .rodape{max-width:none; padding-bottom:24px}
  .tem-menu .toast{bottom:28px; left:calc(50% + var(--lado) / 2)}
  .fundo{align-items:center; padding:24px}
  .folha{border-radius:var(--r-xl); border-bottom:1px solid var(--line2); max-height:86vh; padding:24px 24px 22px}
  .folha .puxador{display:none}
}
/* telas bem estreitas (≤ 359 px): a barra de baixo aperta um pouco mais */
@media (max-width:359px){
  nav.menu{padding-left:4px; padding-right:4px}
  .menu-caixa{padding:4px; gap:0}
}
/* fora do painel (.so-pc / .so-celular usados em outras partes da página) */
.so-pc{display:none}
@media (min-width:900px){ .so-pc{display:revert} .so-celular{display:none} }

/* ---------- 14. TABELAS ---------- */
.tabela-caixa{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1)}
.tabela{width:100%; border-collapse:collapse; font-size:.92rem}
.tabela th, .tabela td{padding:10px 12px; border-top:1px solid var(--line); text-align:left; vertical-align:middle}
.tabela thead th{border-top:0; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.tabela .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tabela tbody tr.destaque td{background:var(--accent-soft)}
.tabela td.principal{font-weight:700}
.tabela .celula-pessoa{display:flex; align-items:center; gap:10px; min-width:0}
@media (max-width:639px){
  .tabela{font-size:.88rem}
  .tabela th, .tabela td{padding:9px 8px}
  .tabela.empilha thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .tabela.empilha, .tabela.empilha tbody, .tabela.empilha tr, .tabela.empilha td{display:block; width:100%}
  .tabela.empilha tr{padding:10px 14px; border-top:1px solid var(--line)}
  .tabela.empilha tbody tr:first-child{border-top:0}
  .tabela.empilha td{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:3px 0; border:0; text-align:right}
  .tabela.empilha td::before{content:attr(data-rotulo); color:var(--muted); font-size:.82rem; font-weight:600; text-align:left; flex:0 1 auto}
  .tabela.empilha td.principal{justify-content:flex-start; text-align:left; font-size:1rem; padding-bottom:6px}
  .tabela.empilha td.principal::before, .tabela.empilha td:not([data-rotulo])::before{content:none}
  .tabela.empilha tbody tr.destaque{background:var(--accent-soft)}
  .tabela.empilha tbody tr.destaque td{background:transparent}
}

/* ---------- 15. MENOS MOVIMENTO (pedido do aparelho) ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .btn[aria-busy="true"]::before{border-right-color:currentColor; opacity:.6}
}

/* ---------- 16. IMPRESSÃO: sempre papel branco, sem dourado de fundo ---------- */
@media print{
  :root, :root[data-theme="light"]{
    color-scheme:light; --bg:#FFFFFF; --bg2:#FFFFFF; --surface:#FFFFFF; --surface2:#FFFFFF; --surface3:#EEEEEE;
    --ink:#111111; --ink2:#222222; --muted:#444444; --muted2:#555555; --line:#CCCCCC; --line2:#BBBBBB;
    --accent:#6F4F14; --accent-ink:#6F4F14; --accent-soft:#FFFFFF; --accent-soft2:#CCCCCC; --hero-titulo:#111111; --hero-ink:#111111; --hero-muted:#444444;
    --sh-1:none; --sh-2:none; --sh-3:none; --glow:none; --glow-soft:none;
    --escolhido-bg:#FFFFFF; --escolhido-bg-linha:#FFFFFF; --info-ink:#1D4ED8;
  }
  body::before, nav.menu, .toast, .fundo, .btn-tema, .rodape details, .btn{display:none !important}
  .hero{background:#FFFFFF; border:1px solid #CCCCCC}
  .hero::after{display:none}
  .tem-menu .conteudo, .tem-menu .rodape{margin-left:0; padding:0}
  .cartao, .stat, .secao, .item{break-inside:avoid}
  .tabela-caixa{overflow:visible}
}