/* Regra que precisa vir antes de tudo.
 *
 * `hidden` esconde por meio de `display: none`, e QUALQUER `display` declarado
 * em CSS vence esse padrão — o elemento reaparece com o atributo ainda posto.
 * Já custou duas vezes: a caixa da espera na conversa, que ficava visível o
 * tempo todo, e o filtro da lista de consultas, que no celular não escondia
 * linha nenhuma porque ali `tr` vira `display: block`.
 *
 * Com o `!important` aqui, esconder passa a funcionar em toda a aplicação sem
 * depender de lembrar deste detalhe em cada regra nova. */
[hidden] { display: none !important; }

:root {
    /* ===== Modo CLARO (padrão) ======================================== *
     * Paleta do Registro.br, escolhida pelo Adalberto em 26/10/2026 ("mais
     * leve, melhor para escrever durante bastante tempo"), medida pixel a pixel:
     * neutros (branco, #f6f6f6, #dddddd, texto #212121) com o verde #408933 só
     * onde há ação, e barra de menu #212121. Substituiu, no mesmo dia, a do
     * azul-petróleo #0d8da0, que não agradou. O modo escuro está logo abaixo,
     * em [data-tema="escuro"]. Quem escolhe é cada pessoa (lib/tema.php);
     * acabaram os temas e as cores definidos no painel para todo o sistema. */
    --fundo: #f6f6f6;
    --superficie: #ffffff;
    --borda: #dddddd;
    /* Tons de apoio: blocos de ajuda, cabeçalho de tabela (2); código,
       trilhos, realces (3). */
    --superficie-2: #f6f6f6;
    --superficie-3: #efefef;
    --branco: #ffffff;         /* o que precisa ser branco nos dois modos */
    --sobre-primaria: #ffffff;
    --link: #1e7832;
    --texto: #212121;
    --texto-suave: #6f6f6f;
    --primaria: #408933;
    --primaria-clara: #1e7832;  /* passar o mouse, item escolhido */
    /* Verde como LETRA (títulos, números, botões de contorno). No claro é o
       mesmo dos botões; no escuro, mais claro — o #408933 dos botões, como
       texto sobre fundo escuro, ficava apagado. */
    --primaria-texto: #408933;
    --destaque: #1251c3;
    --sobre-destaque: #ffffff;
    /* Âmbar só do caminho do token (pedir, validar, recarregar): pedido do
       Adalberto em 26/10/2026 manter ali a cor de antes da paleta nova, para o
       percurso de acesso continuar saltando aos olhos. */
    --ambar: #f0a02a;
    --sobre-ambar: #3a2a06;
    --ambar-texto: #b86f00;    /* âmbar legível como letra sobre fundo claro */
    --erro: #b3261e;
    --ok: #1f7a4d;
    --raio: 10px;
    --sombra: 0 1px 2px rgba(0, 0, 0, .06);

    /* Cabeçalho: barra clara com texto escuro, como na referência — antes era
       uma faixa cheia na cor principal. */
    --topo-fundo: #212121;
    --topo-texto: #ffffff;
    --topo-borda: #3a3a3a;

    /* Fundos de recado. Eram cores fixas espalhadas pelo arquivo: no modo
       escuro virariam manchas claras com letra ilegível. */
    --erro-fundo: #fdeceb;
    --erro-borda: #f5c6c3;
    --ok-fundo: #eaf5e7;
    --ok-borda: #c3e1bb;
    --alerta-fundo: #fdf6e8;
    --alerta-fundo-forte: #fbeed0;
    --alerta-borda: #f0dfc0;
    --alerta-borda-forte: #e0940f;
    --alerta-texto: #8a5a06;
    --info-fundo: #eef3fc;
    --info-borda: #c9d8f3;
    --info-forte: #1251c3;
    --info-texto: #0e3f99;
    --vivo-fundo: #fdf3f2;
    --topo-marca: #5faf46;
}

/* ===== Modo ESCURO ==================================================== */
[data-tema="escuro"] {
    color-scheme: dark;        /* barras de rolagem e campos nativos escuros */
    --fundo: #121212;
    --superficie: #1e1e1e;
    --borda: #333333;
    --superficie-2: #181818;
    --superficie-3: #2a2a2a;
    --sobre-primaria: #ffffff;
    --link: #7cc96a;
    --texto: #e8e8e8;
    --texto-suave: #a6a6a6;
    --primaria: #408933;
    --primaria-clara: #7cc96a;
    --primaria-texto: #6cc35a;
    --destaque: #4d86f0;
    --sobre-destaque: #ffffff;
    --ambar-texto: #f0a02a;
    --erro: #f2867e;
    --ok: #5cc995;
    --sombra: 0 1px 3px rgba(0, 0, 0, .5);

    --topo-fundo: #000000;
    --topo-texto: #ffffff;
    --topo-borda: #2e2e2e;

    --erro-fundo: #3a1d1f;
    --erro-borda: #6b2c2a;
    --ok-fundo: #17301a;
    --ok-borda: #2f5a33;
    --alerta-fundo: #2e2410;
    --alerta-fundo-forte: #3d3013;
    --alerta-borda: #5c4a1f;
    --alerta-borda-forte: #c58a1f;
    --alerta-texto: #f3c86b;
    --info-fundo: #15233a;
    --info-borda: #2a426b;
    --info-forte: #8fb1f5;
    --info-texto: #a9c4f7;
    --vivo-fundo: #3a1d1f;
    --topo-marca: #5faf46;
}

* { box-sizing: border-box; }

a { color: var(--link); }
/* Só os links "soltos" do texto mudam de cor ao passar o mouse. Componentes que
   são links — a marca do cabeçalho, os botões — trazem a cor deles e não podem
   ser atropelados aqui: `a:hover` é mais específico que `.marca`, e pintava o
   texto de `--primaria-clara`. Com uma cor principal escolhida no painel, clara
   e escura são a mesma cor, e o texto sumia dentro do próprio fundo. */
a:not([class]):hover { color: var(--primaria-clara); }
.link-discreto:hover, .consent-corpo a:hover,
.documento-publico a:hover { color: var(--primaria-clara); }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    /* Barra clara (ou preta, no escuro) com texto, como na referência; antes
       era uma faixa cheia na cor principal com letra branca. */
    background: var(--topo-fundo);
    color: var(--topo-texto);
    border-bottom: 1px solid var(--topo-borda);
}

.marca { text-decoration: none; color: var(--topo-texto); display: flex; flex-direction: column; line-height: 1.2; }
.marca:hover, .marca:focus { color: var(--topo-texto); }
.marca-nome { font-weight: 650; font-size: 18px; color: var(--topo-marca); }
.marca-sub { font-size: 12px; opacity: .75; }

.topo nav { display: flex; align-items: center; gap: 18px; }
.topo nav a { color: var(--topo-texto); text-decoration: none; font-size: 14px; opacity: .9; }
/* A cor precisa ser repetida no hover: `a:not([class]):hover` é mais específico
   que `.topo nav a` e pintava estes links de `--primaria-clara` — a mesma cor do
   fundo do cabeçalho quando há cor principal escolhida no painel. */
.topo nav a:hover,
.topo nav a:focus { opacity: 1; text-decoration: underline; color: var(--topo-marca); }

/* Botão de modo claro/escuro: discreto, no fim do cabeçalho, com o ícone do
   modo para onde ele leva (lua no claro, sol no escuro). */
.botao-tema {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    color: var(--topo-texto);
    border: 1px solid var(--topo-borda);
    border-radius: 999px;
    padding: 5px 12px;
    font: inherit; font-size: 13px;
    cursor: pointer;
}
.botao-tema:hover, .botao-tema:focus-visible { border-color: var(--topo-marca); color: var(--topo-marca); }
.tema-icone { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.tema-icone-lua { fill: currentColor; stroke: none; }
.tema-icone-sol { display: none; }
[data-tema="escuro"] .tema-icone-lua { display: none; }
[data-tema="escuro"] .tema-icone-sol { display: inline; }
/* Nas telas sem cabeçalho (login, cadastro, verificação…) o botão flutua no
   canto, sobre o fundo da página — então com as cores da página, e não as da
   barra escura do cabeçalho, que ali deixariam a letra branca invisível. */
.tema-flutuante { position: absolute; top: 14px; right: 16px; z-index: 5; }
.tema-flutuante .botao-tema {
    color: var(--texto);
    border-color: var(--borda);
    background: var(--superficie);
}
.tema-flutuante .botao-tema:hover,
.tema-flutuante .botao-tema:focus-visible { border-color: var(--primaria); color: var(--primaria-texto); }

@media (max-width: 600px) {
    /* No celular o cabeçalho é apertado: fica só o ícone, e o rótulo vai para
       o leitor de tela pelo título do botão. */
    .botao-tema .tema-rotulo { display: none; }
    .botao-tema { padding: 6px 8px; }
}
.usuario { font-size: 14px; opacity: .75; display: inline-flex; align-items: center; gap: 6px; }
/* Traçado, não preenchimento: o ícone acompanha a cor do texto do cabeçalho em
   qualquer tema, sem precisar de uma variável só para ele. */
.usuario-icone {
    width: 15px;
    height: 15px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
}

.conteudo { max-width: 1100px; margin: 0 auto; padding: 24px; }

.rodape {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 24px 36px;
    display: flex;
    /* Sobrou um único item no rodapé: centralizado fica melhor que jogado num canto. */
    justify-content: center;
    color: var(--texto-suave);
    font-size: 13px;
}
/* Rodapé em itálico: assinatura e versão são nota de rodapé no sentido literal
   — informam quem responde pelo sistema e em que estado ele está, sem competir
   com o conteúdo da página. */
.powered { opacity: .8; font-style: italic; }
.powered .separador { margin: 0 4px; opacity: .6; }

/* ---------- blocos ---------- */

.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 22px;
    margin-bottom: 22px;
}

.cartao.estreito { max-width: 520px; margin: 40px auto; }

h1 { font-size: 24px; margin: 0 0 6px; }
h2 { font-size: 17px; margin: 0 0 14px; color: var(--primaria-texto); }

.cabecalho-secao {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
}

.ajuda { color: var(--texto-suave); font-size: 14px; }
.link-discreto { color: var(--texto-suave); font-size: 14px; }

/* ---------- abertura ---------- */

.abertura {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: start;
}
.abertura-texto h1 { font-size: 34px; color: var(--primaria-texto); }

/* Texto de abertura justificado, sem hifenização: palavra partida no fim da
   linha foi vetada, então as palavras longas passam inteiras para a linha
   seguinte. */
.abertura-texto > p {
    text-align: justify;
    hyphens: none;
}

/* A frase de destaque é curta e fica centrada sob a logo. Justificada, ela
   esticaria a primeira linha para alcançar a margem. O seletor repete o pai
   porque a regra de justificar acima é mais específica que `.tagline` sozinha. */
.tagline { font-size: 18px; font-weight: 700; color: var(--primaria-clara); margin: 0 0 18px; }
.abertura-texto > p.tagline { text-align: center; }
/* Nota de escopo na abertura: menor que o corpo, mas ainda legível — é ressalva,
   não letra miúda. Fica alinhada à esquerda porque a justificação do parágrafo
   acima herdaria para ela. */
.abertura-texto > p.escopo {
    text-align: left;
    border-left: 3px solid var(--borda);
    padding-left: 12px;
    margin-top: -4px;
}

.assinatura { color: var(--texto-suave); font-size: 14px; margin-top: 24px; }

@media (max-width: 860px) {
    .abertura { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
}

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

label { display: block; margin-bottom: 14px; font-size: 14px; color: var(--texto-suave); }

input, select, textarea {
    width: 100%;
    margin-top: 5px;
    padding: 9px 11px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    font: inherit;
    color: var(--texto);
    background: var(--superficie);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--primaria-clara);
    outline-offset: -1px;
}

.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.linha-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}
.linha-form label { margin-bottom: 0; }
.linha-form .cresce { flex: 1 1 220px; }

.botao {
    background: var(--primaria);
    color: var(--sobre-primaria);
    border: 0;
    border-radius: 7px;
    padding: 10px 20px;
    font: inherit;
    font-weight: 550;
    cursor: pointer;
    /* O mesmo estilo serve para <button> e <a>; sem isto o link fica sublinhado. */
    text-decoration: none;
    display: inline-block;
}
/* O `color` precisa ser repetido no hover por causa de `a:hover` lá em cima, que
   é mais específico que `.botao` e pintava o texto do link-botão de
   `--primaria-clara`. Com uma primária escolhida no painel, clara e escura são a
   mesma cor — e o texto sumia dentro do próprio botão.

   O clareamento vem de `filter`, e não de trocar a cor de fundo, pelo mesmo
   motivo: quando as duas variáveis são iguais, trocar o fundo não muda nada e o
   botão fica sem resposta ao mouse. */
.botao:hover,
.botao:focus {
    text-decoration: none;
    color: var(--sobre-primaria);
    filter: brightness(1.12);
}
.botao.secundario { background: var(--destaque); color: var(--sobre-destaque); }
.botao.secundario:hover,
.botao.secundario:focus { color: var(--sobre-destaque); filter: brightness(1.06); }
/* Botões do caminho do token (Pedir token, Validar), em âmbar. */
.botao.ambar { background: var(--ambar); color: var(--sobre-ambar); }
.botao.ambar:hover,
.botao.ambar:focus { color: var(--sobre-ambar); filter: brightness(1.06); }
.cartao.cartao-acesso > h2 { color: var(--ambar-texto); }
/* Botão de segunda ação: mesmo tamanho e forma do principal, contornado em vez
   de preenchido. Duas ações reais no mesmo bloco, com uma hierarquia visível —
   dois botões preenchidos brigariam, e um link solto desapareceria. */
.botao.botao-contorno {
    background: transparent;
    color: var(--primaria-texto);
    border: 1px solid var(--primaria);
}
.botao.botao-contorno:hover,
.botao.botao-contorno:focus {
    /* A cor precisa ser repetida: a regra genérica de link é mais específica que
       a da classe, e o texto sumiria no próprio fundo. */
    color: var(--primaria-texto);
    background: color-mix(in srgb, var(--primaria) 8%, transparent);
}

.botao:disabled:hover { filter: none; }
.botao:disabled { opacity: .5; cursor: not-allowed; }

.botao-mini {
    background: transparent;
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
    color: var(--texto-suave);
}
.botao-mini:hover { border-color: var(--erro); color: var(--erro); }

/* ---------- mensagens ---------- */

.erro, .aviso {
    padding: 10px 14px;
    border-radius: 7px;
    font-size: 14px;
    margin: 0 0 14px;
}
.erro  { background: var(--erro-fundo); color: var(--erro);  border: 1px solid var(--erro-borda); }
.aviso { background: var(--ok-fundo); color: var(--ok);    border: 1px solid var(--ok-borda); }

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

.rolagem { overflow-x: auto; }

/* ---------- fundo animado da tela de entrada ----------
   `fixed` e não `absolute`: a rede é cenário, e cenário não rola junto com o
   conteúdo. `pointer-events: none` porque ela cobre a tela inteira e engoliria
   todo clique da página. */
#rede-neural {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    /* A tela de entrada tem fundo claro e o desenho é feito de linhas escuras
       ralas; sem esta suavização, ele competiria com o texto. */
    opacity: .85;
}
/* O conteúdo sobe um degrau para ficar por cima do cenário. */
.abertura-coluna { position: relative; z-index: 1; }

/* ---------- procurar e ordenar na lista de consultas ---------- */

.busca-consultas { display: inline-flex; align-items: center; gap: 8px; }
.botao-lupa { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; }
.botao-lupa svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}
.campo-busca { width: 230px; max-width: 100%; }

/* O cabeçalho vira controle: precisa parecer clicável antes de alguém
   descobrir por acidente que é. */
th.ordenavel { cursor: pointer; user-select: none; white-space: nowrap; }
th.ordenavel:hover { color: var(--primaria-texto); }
th.ordenavel::after {
    content: '↕';
    margin-left: 6px;
    font-size: 11px;
    opacity: .35;
}
th.ordenavel.ordenada::after { content: '↑'; opacity: 1; }
th.ordenavel.ordenada.desc::after { content: '↓'; }

/* Só existe no celular, onde o cabeçalho da tabela não é exibido. */
.ordenar-celular { display: none; align-items: center; gap: 10px; margin-bottom: 14px; }
.ordenar-celular label { font-size: 13px; color: var(--texto-suave); }
.ordenar-celular select { flex: 1; }

/* Listas que crescem sem limite (tokens, usuários): rolam dentro do próprio
   quadro em vez de esticar a página. O cabeçalho fica fixo no topo do quadro —
   sem isso, rolar 40 linhas deixa o leitor sem saber que coluna está vendo.
   O 'collapse' some com a borda do thead quando ele gruda, daí o box-shadow. */
.rolagem-alta {
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--borda);
    border-radius: 8px;
}
.rolagem-alta table { font-size: 13.5px; }

/* As colunas têm a largura do conteúdo, e a tabela rola para o lado quando não
   cabe. Antes, `width: 100%` espremia tudo na largura da tela: um e-mail virava
   seis linhas de três letras e a linha inteira crescia junto. Rolar de lado
   custa um gesto; ler "adalb / erto.b / otezel" custa a leitura. */
.rolagem-alta td,
.rolagem-alta th { white-space: nowrap; padding: 10px 14px; }

/* A observação é texto livre e pode ser longa: essa quebra, com teto de
   largura, para não empurrar o resto da tabela sozinha. */
.rolagem-alta td[data-rotulo="Observação"] { white-space: normal; max-width: 220px; }
.rolagem-alta thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--superficie);
    box-shadow: inset 0 -1px 0 var(--borda);
    border-bottom: 0;
}
.rolagem-alta th:first-child, .rolagem-alta td:first-child { padding-left: 14px; }
.rolagem-alta th:last-child,  .rolagem-alta td:last-child  { padding-right: 14px; }
.rolagem-alta tbody tr:last-child td { border-bottom: 0; }

/* No celular, altura em proporção da tela: 420px fixos ocupariam quase tudo num
   aparelho pequeno e sobrariam num grande. */
@media (max-width: 720px) {
    .rolagem-alta { max-height: 62vh; }
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
th { color: var(--texto-suave); font-weight: 600; font-size: 13px; }
td form { margin: 0; }
.vazio { color: var(--texto-suave); text-align: center; padding: 22px; }

.codigo {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: var(--superficie-3);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 13px;
    letter-spacing: .5px;
}

.tag {
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 20px;
    font-weight: 600;
    /* Sem isto, "na tela" e "em andamento" quebram no meio quando a coluna
       aperta, e a etiqueta vira duas linhas tortas. */
    white-space: nowrap;
    display: inline-block;
}
.tag-ok  { background: var(--ok-fundo); color: var(--ok); }
.tag-off { background: var(--superficie-3); color: var(--texto-suave); }
.tag-erro { background: var(--erro-fundo); color: var(--erro); }
.tag-on  { background: var(--alerta-fundo); color: var(--alerta-texto); }

.metricas { display: flex; flex-wrap: wrap; gap: 32px; }
.metricas div { display: flex; flex-direction: column; }
.metricas strong { font-size: 24px; color: var(--primaria-texto); }
.metricas span { font-size: 13px; color: var(--texto-suave); }

/* ---------- chat ---------- */

.chat-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.chat-acoes { display: flex; align-items: center; gap: 14px; }

.chat-area {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 18px;
    margin-bottom: 22px;
}

/* A etapa cresce com o conteúdo: altura fixa devolveria o scroll interno,
   e o diagnóstico final é longo demais para caber numa caixa. */
.etapa { margin-bottom: 4px; }
.etapa .msg:last-child { margin-bottom: 0; }

.msg { margin-bottom: 20px; }
.msg-autor {
    /* Três colunas: quem falou à esquerda, a etapa no centro real da linha, e a
       terceira vazia só para o centro ser centro. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--texto-suave);
    margin-bottom: 5px;
}
.msg-corpo { font-size: 15px; }
.msg-corpo p { margin: 0 0 10px; }
.msg-corpo h3, .msg-corpo h4, .msg-corpo h5 { margin: 16px 0 8px; font-size: 15px; color: var(--primaria-texto); }
.msg-corpo ul, .msg-corpo ol { margin: 0 0 10px; padding-left: 22px; }
.msg-corpo li { margin-bottom: 4px; }
.msg-corpo code { background: var(--superficie-3); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

.msg-user .msg-corpo {
    background: var(--superficie-3);
    border-left: 3px solid var(--primaria-clara);
    padding: 10px 14px;
    border-radius: 0 8px 8px 0;
}
.msg-assistant .msg-corpo { padding-left: 2px; }



.chat-entrada textarea { resize: vertical; font-size: 15px; }

.chat-barra {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.chat-barra .dica { flex: 1; font-size: 13px; }
.anexar { cursor: pointer; }

.anexos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip {
    background: var(--superficie-3);
    border: 1px solid var(--borda);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 13px;
    color: var(--texto-suave);
}

.status-chat { color: var(--texto-suave); font-size: 13px; min-height: 18px; margin: 10px 0 0; }

.lista-docs { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.lista-docs li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--borda);
}
.lista-docs li:last-child { border-bottom: 0; }

.doc-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: var(--texto);
}
.doc-link:hover .doc-nome { text-decoration: underline; }

.doc-icone {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--primaria-texto);
    background: var(--superficie-3);
    border: 1px solid var(--borda);
    border-radius: 4px;
    padding: 3px 6px;
}
.doc-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-tamanho { color: var(--texto-suave); font-size: 12px; flex-shrink: 0; }
.lista-docs .botao-mini { text-decoration: none; flex-shrink: 0; }

@media (max-width: 600px) {
    .lista-docs li { flex-wrap: wrap; }
    .doc-tamanho { display: none; }
}

.vazio-estado { text-align: center; padding: 44px 22px; }
.vazio-estado .ajuda { max-width: 520px; margin: 0 auto 18px; }

.tipo-cliente { border: 1px solid var(--borda); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; }
.tipo-cliente legend { font-size: 13px; color: var(--texto-suave); padding: 0 6px; }
.radio { display: inline-flex; align-items: center; gap: 7px; margin: 0 18px 0 0; }
.radio input { width: auto; margin: 0; }

/* Botões em linha, e a célula continua sendo célula de tabela. Com `display:
   flex` no próprio <td> ele deixa de esticar até a altura da linha, e a borda
   inferior fica num degrau em relação às outras colunas — era a linha de
   separação quebrada entre um cliente e outro. O alinhamento vertical vem do
   inline-block, não do flex. */
.acoes { white-space: nowrap; }
.acoes form { display: inline; }
.acoes .botao-mini {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    margin-left: 8px;
}
.acoes > .botao-mini:first-child { margin-left: 0; }

/* ---------- vitrine de exemplos (tela de entrada) ---------- */

.vitrine { margin-top: 30px; }

.vitrine-cab {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--texto-suave);
    margin-bottom: 12px;
}
.vitrine-nota {
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    background: var(--superficie-3);
    color: var(--texto-suave);
    padding: 1px 8px;
    border-radius: 20px;
}

/* Todos os cartões na MESMA célula do grid: a altura da célula passa a ser a do
   cartão mais alto, calculada pelo navegador em qualquer largura de tela. */
.vitrine-palco { display: grid; }
.vitrine-item {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--destaque);
    border-radius: 8px;
    padding: 14px 16px;
}
.vitrine-item.ativo {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity .45s ease .25s, transform .45s ease .25s;
}

.vitrine-autor {
    font-size: 13px;
    font-weight: 650;
    color: var(--primaria-texto);
    margin-bottom: 6px;
}
.vitrine-autor span { font-weight: 400; color: var(--texto-suave); }
.vitrine-autor span::before { content: " · "; }

.vitrine-corpo { position: relative; }

.vitrine-espaco, .vitrine-texto {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--texto);
}
/* Reserva o espaço do texto completo sem aparecer. */
.vitrine-espaco { visibility: hidden; }
.vitrine-texto  { position: absolute; top: 0; left: 0; right: 0; }

.vitrine-texto::before { content: '"'; }
.vitrine-texto::after  { content: '"'; }

.vitrine-pontos { display: flex; gap: 7px; margin-top: 12px; }
.vitrine-pontos button {
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--borda);
    cursor: pointer;
    transition: background .3s, width .3s;
}
.vitrine-pontos button.ativo { background: var(--destaque); width: 18px; border-radius: 4px; }

/* Cursor de digitação: só enquanto o texto está sendo escrito. */
.vitrine-palco.digitando .vitrine-item.ativo .vitrine-texto::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    background: var(--destaque);
    vertical-align: -2px;
    animation: piscaCursor .9s steps(1) infinite;
}
@keyframes piscaCursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .vitrine-item { transition: none; }
}

/* ---------- telas pequenas (celular) ---------- */

@media (max-width: 600px) {
    .conteudo { padding: 16px 14px; }
    .topo { padding: 10px 14px; gap: 10px; }
    .topo nav { gap: 12px; }
    /* O cabeçalho estreito não cabe nome mais os três links. Atenção: fora da
       tela de Perfil o nome não aparece em nenhum outro lugar da página, então
       no celular não há como saber qual conta está em uso. Aceito por ora. */
    .usuario { display: none; }

    h1 { font-size: 21px; }
    .abertura { padding: 20px 14px; }
    .abertura-texto h1 { font-size: 27px; }
    .tagline { font-size: 16px; }

    .cartao { padding: 16px; }
    .cartao.estreito { margin: 16px auto; }

    /* Campos lado a lado não cabem: viram um por linha. */
    .duas-colunas { grid-template-columns: 1fr; gap: 0; }

    .cabecalho-secao { flex-direction: column; align-items: stretch; gap: 12px; }
    .cabecalho-secao .botao { text-align: center; }

    .chat-cabecalho { gap: 10px; }
    .chat-acoes { flex-wrap: wrap; gap: 10px; }
    .conversa { max-height: 52vh; }
    .chat-barra { gap: 10px; }
    .chat-barra .dica { flex-basis: 100%; order: 3; }
    .chat-barra .botao { flex: 1; }

    .linha-form { gap: 10px; }
    .linha-form label, .linha-form .cresce { flex: 1 1 100%; }
    .linha-form .botao { width: 100%; }

    .metricas { gap: 18px; }
    .metricas div { flex: 1 1 40%; }
    .metricas strong { font-size: 20px; }

    /* Em coluna, o `justify-content: center` do bloco passa a valer no eixo
       vertical e deixa de centralizar o texto; sem `align-items`, o item ainda
       estica e o texto encosta à esquerda. Daí os dois: centraliza a caixa e as
       linhas que quebram dentro dela. */
    .rodape {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
        padding: 14px;
    }
}

/* Botões de toque decentes: alvo mínimo confortável no celular. */
@media (pointer: coarse) {
    .botao { padding: 12px 20px; }
    .botao-mini { padding: 8px 12px; }
    .vitrine-pontos button { height: 10px; width: 10px; }
    .vitrine-pontos button.ativo { width: 22px; }
}

/* No celular a coluna de texto vira uma pilha só, e os exemplos passam para
   DEPOIS dos formulários — senão quem só quer entrar precisa rolar a tela toda. */
@media (max-width: 860px) {
    /* gap: 0 porque com display:contents o espaçamento do grid passaria a valer
       entre cada parágrafo do texto, e não só entre os blocos. */
    .abertura { display: flex; flex-direction: column; gap: 0; }
    .abertura-texto { display: contents; }
    .abertura-texto > * { order: 1; }
    .abertura-caixas { order: 2; display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
    .vitrine { order: 3; margin-top: 26px; }
}

/* No celular a lista de consultas vira cartões: tabela de 6 colunas só rolaria
   para o lado, escondendo justamente a situação e os botões. */
@media (max-width: 600px) {
    .tabela-consultas thead, .tabela-cartoes thead { display: none; }
    .tabela-consultas, .tabela-consultas tbody, .tabela-consultas tr, .tabela-consultas td,
    .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; }

    .tabela-consultas tr, .tabela-cartoes tr {
        border: 1px solid var(--borda);
        border-radius: 8px;
        padding: 12px 14px;
        margin-bottom: 12px;
    }

    .tabela-consultas td, .tabela-cartoes td {
        border: 0;
        padding: 3px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        /* E-mail, IP e a impressão do texto não têm espaço onde quebrar, e num
           item de flex o tamanho mínimo é o da maior palavra — o valor
           empurrava o cartão para fora da tela à direita. 'anywhere' também
           reduz esse mínimo, que é o que destrava o encolhimento. */
        overflow-wrap: anywhere;
        min-width: 0;
    }
    /* O valor fica à direita do rótulo e é ele que precisa ceder espaço. */
    .tabela-consultas td > *, .tabela-cartoes td > * { min-width: 0; }
    .tabela-consultas td::before, .tabela-cartoes td::before {
        content: attr(data-rotulo);
        color: var(--texto-suave);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .4px;
        flex-shrink: 0;
    }
    /* O nome do cliente vira o título do cartão, sem rótulo ao lado. */
    .tabela-consultas td:first-child { display: block; font-size: 16px; margin-bottom: 6px; }
    .tabela-consultas td:first-child::before { content: none; }

    /* Sem cabeçalho de tabela não há onde clicar para ordenar: entra o seletor. */
    .ordenar-celular { display: flex; }
    /* Aberta, a busca ocupa a linha inteira — é o campo que se está usando. */
    .busca-consultas { flex: 1; }
    .campo-busca { width: 100%; }

    /* A célula de ações do painel também empilha, e a linha vazia de um cartão
       (coluna sem valor naquela linha) some em vez de virar um rótulo solto. */
    .tabela-cartoes td.acoes-linha {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--borda);
    }
    .tabela-cartoes td.acoes-linha::before { content: none; }
    .tabela-cartoes td.acoes-linha form { display: contents; }
    .tabela-cartoes td.acoes-linha .botao-mini { flex: 1; margin-left: 0; text-align: center; padding: 8px; }
    .tabela-cartoes td:empty { display: none; }
    .tabela-cartoes td.vazio { display: block; text-align: center; }
    .tabela-cartoes td.vazio::before { content: none; }

    /* Cartão não rola para o lado. A altura já foi livre aqui, com a ideia de que
       limitar numa tela estreita atrapalharia; na prática, listas que só crescem
       (consentimentos, avaliações) transformavam a página num rolo sem fim. O
       teto em viewport dá quase a tela inteira a cada lista e ainda assim
       mantém o resto do painel alcançável. */
    .rolagem-alta { max-height: 75vh; overflow-y: auto; overflow-x: hidden; border: 0; border-radius: 0; }
    .rolagem-alta table { font-size: 14px; }
    /* Em modo cartão o texto volta a quebrar: não há colunas para alinhar, e
       nowrap faria cada cartão rolar para o lado sozinho. */
    .rolagem-alta td, .rolagem-alta th { white-space: normal; padding: 3px 0; }
    .rolagem-alta td[data-rotulo="Observação"] { max-width: none; }


    /* No celular os botões vão para uma grade de duas colunas, embaixo dos dados
       do cliente. Em fila única eles espremiam os nomes ("Exportar conversa",
       "Relatório final") até estourar a largura do cartão — e encurtar os nomes
       custaria a clareza que eles ganharam. De quebra, os dados do cliente
       passam a ter a linha inteira. */
    .tabela-consultas td.acoes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--borda);
    }
    .tabela-consultas td.acoes::before { content: none; }
    .tabela-consultas td.acoes form { display: contents; }
    .tabela-consultas td.acoes .botao-mini {
        margin-left: 0;
        width: 100%;
        text-align: center;
        padding: 9px 8px;   /* alvo de toque confortável */
        white-space: normal;
    }
}

/* Só nas telas realmente estreitas cada botão ocupa a própria linha. Em 360 px
   as duas colunas ainda cabem sem quebrar os nomes, e poupam metade da altura
   do cartão — com quatro botões empilhados, uma consulta já toma a tela toda. */
@media (max-width: 339px) {
    .tabela-consultas td.acoes { grid-template-columns: 1fr; }
}

/* Campo "Consultas liberadas" na geração de tokens */
.consultas-liberadas {
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 8px 14px 12px;
    margin: 0;
    flex: 1 1 320px;
}
.consultas-liberadas legend { font-size: 13px; color: var(--texto-suave); padding: 0 6px; }
.consultas-liberadas .radio { display: inline-flex; align-items: center; gap: 7px; margin: 0 16px 0 0; }
.campo-curto { width: 72px; margin-top: 0; }

/* Blocos explicativos das telas de administração */
.ajuda-bloco {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--texto-suave);
}
.ajuda-bloco p { margin: 0 0 9px; }
.ajuda-bloco p:last-child { margin-bottom: 0; }
.ajuda-bloco strong { color: var(--texto); }
.ajuda-bloco ul { margin: 0 0 9px; padding-left: 20px; }
.ajuda-bloco li { margin-bottom: 6px; }

.destaque-custo {
    margin: 14px 0 0;
    font-size: 15px;
    color: var(--texto);
}
.destaque-custo strong { color: var(--primaria-texto); font-size: 17px; }

/* Logomarca do produto na tela de entrada */
/* A logo fica centrada na coluna, na mesma linha de eixo do enfeite e do texto
   justificado logo abaixo. */
.marca-produto {
    margin: 0 0 14px;
    line-height: 0;
    display: flex;
    justify-content: center;
    /* Mesmo motivo do `.selo-espera`: sem largura inteira, o bloco encolhe até a
       imagem quando vira item do flex da abertura, no celular. */
    width: 100%;
}
/* A largura mora no invólucro, não na imagem: os pontos de luz são posicionados
   em % por cima dela, e só acertam o lugar se o invólucro tiver exatamente o
   tamanho do desenho. */
.logo-ligada {
    position: relative;
    width: 480px;
    max-width: 100%;
}
/* A logo tem letras e contornos verde-escuros, que sumiriam sobre o fundo
   escuro. No modo escuro ela ganha um cartão claro de cantos arredondados,
   assumido. A margem do cartão é uma sombra sólida, e não padding: padding mudaria a
   geometria da imagem e tiraria do lugar os pontos de luz, posicionados em %. */
[data-tema="escuro"] .logo-ligada img { background: #f6f6f6; border-radius: 12px; box-shadow: 0 0 0 12px #f6f6f6, 0 6px 26px 12px rgba(0, 0, 0, .45); }
.logo-ligada img {
    display: block;
    width: 100%;
    height: auto;
}

/* "Como se estivesse ligada": piscadas de luz sobre o que, no desenho, seria
   aceso de verdade — visor da bateria, orbe solar, chips, LEDs. Uma de cada
   vez, espaçadas, e entre elas nada se mexe: a rede neural do fundo saiu por
   disputar a atenção de quem vem só entrar. `screen` só clareia — nunca
   escurece o desenho. Posição e tamanho em % da largura da logo; a cor vem de
   cada ponto. */
.brilho {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--r, 6%);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    /* Núcleo branco que vira a cor do ponto, como um LED: só a cor, sobre um
       desenho já claro e saturado, passava despercebida. `closest-side` deixa
       a % relativa ao raio do círculo (o padrão mede até o canto do quadrado). */
    background: radial-gradient(circle closest-side,
                #fff 0%, var(--cor) 30%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
}
/* Uma piscada só: acende de uma vez e se apaga. Quem decide QUANDO é o script
   da página (sorteio por ponto, a cada 10–25 s) — o CSS só repetiria um ciclo
   fixo, e o pedido foi aleatório e espaçado. Histórico: pulso lento de 3 s
   passava despercebido; rajada dupla em ciclos de 5–9 s ficou agitada. */
.brilho.pisca {
    animation: brilho-pisca .8s ease-out;
}
@keyframes brilho-pisca {
    0%   { opacity: 0; scale: .5; }
    15%  { opacity: 1; scale: 1.15; }
    100% { opacity: 0; scale: .8; }
}
@media (prefers-reduced-motion: reduce) {
    .brilho { display: none; }
}

@media (max-width: 600px) {
    .logo-ligada { width: 240px; }
    .marca-produto { margin-bottom: 10px; }
}

/* Carimbo de credibilidade: fica abaixo dos formulários,
   do lado da decisão de entrar. */
.carimbo {
    display: block;
    width: 100%;
    height: auto;
    margin: 4px auto 0;
    filter: drop-shadow(0 4px 14px rgba(15, 61, 82, .2));
}
.carimbo-link { display: block; }

/* As classes de animação (.anim-raio e companhia) trocam o display para
   inline-block, e aí o elo encolhe até a imagem e encosta à esquerda da coluna —
   o carimbo saía do eixo do cartão logo acima. O seletor repete o pai para
   vencer aquelas classes, que vêm depois no arquivo. */
.abertura-caixas > .carimbo-link {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 860px) {
    /* A largura escolhida no painel vale para o desktop; no celular o limite é
       a tela, e por isso o !important — o style inline viria antes. */
    .carimbo { max-width: 250px !important; margin-top: 2px; }
}

/* Logomarca do operador na coluna esquerda, alinhada com o carimbo da direita. */
/* Faixa de logomarcas: a de quem opera e as de quem patrocinar. Uma sozinha
   ocupa a largura do carimbo ao lado; várias dividem o espaço e encolhem. */
.faixa-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 60px auto 0;
}
.logo-parceira {
    display: block;
    width: 100%;
    max-width: 290px;   /* valor de partida; cada logo traz o seu do painel */
    height: auto;
}

@media (max-width: 860px) {
    /* order 4 para cair depois da vitrine — sem isso, o display:contents da
       coluna de texto jogaria as logos para antes dos formulários. */
    .faixa-logos { order: 4; margin: 26px auto 0; gap: 20px; }
    .logo-parceira { max-width: 240px; }
}

/* ---------- página pública de verificação de documento ---------- */

.verificacao-publica { text-align: left; }
.marca-verificacao { display: block; width: 190px; max-width: 60%; height: auto; margin: 0 0 18px; }

.selo-autentico {
    font-size: 16px;
    font-weight: 650;
    display: flex;
    align-items: center;
    gap: 9px;
}
.selo-autentico::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--ok);
    color: var(--sobre-primaria);
    font-size: 14px;
    flex-shrink: 0;
}

.dados-verificacao { width: 100%; border-collapse: collapse; margin: 16px 0 18px; }
.dados-verificacao th {
    text-align: left;
    font-weight: 400;
    color: var(--texto-suave);
    width: 45%;
    padding: 7px 0;
    border-bottom: 1px solid var(--borda);
    font-size: 14px;
}
.dados-verificacao td {
    padding: 7px 0;
    border-bottom: 1px solid var(--borda);
    font-size: 14px;
}

.form-verificacao { margin-top: 16px; }
.form-verificacao input { text-transform: uppercase; letter-spacing: 1px; }

/* Chama atenção para campos opcionais que valem a pena preencher. */
.reforco {
    font-style: italic;
    color: var(--primaria-clara);
    font-weight: 500;
}

/* ---------- perfis de atendimento ---------- */

.escolha-perfil {
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 12px 14px 14px;
    margin: 0 0 18px;
}
.escolha-perfil legend { font-size: 13px; color: var(--texto-suave); padding: 0 6px; }
.escolha-perfil .ajuda { margin: 0 0 12px; font-size: 13px; }

.perfis { display: flex; gap: 10px; flex-wrap: wrap; }

.perfil-card { flex: 1 1 140px; margin: 0; cursor: pointer; }
.perfil-card input { position: absolute; opacity: 0; width: 0; height: 0; }

.perfil-conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 10px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    text-align: center;
    position: relative;
    transition: border-color .15s, background .15s, opacity .15s;
}
/* O escolhido tem que saltar aos olhos: borda e fundo levemente diferentes
   passavam despercebidos, e uma consulta "com o Bruno" foi aberta com o Murilo,
   que vem marcado por padrão (21/10/2026). Agora: borda grossa na cor da casa,
   fundo tingido, selo de "escolhido" e os outros cards esmaecidos. A borda
   grossa é sombra interna, para o card não mudar de tamanho ao ser marcado. */
.perfil-card input:checked + .perfil-conteudo {
    border-color: var(--primaria);
    background: color-mix(in srgb, var(--primaria) 10%, var(--superficie, #fff));
    box-shadow: inset 0 0 0 2px var(--primaria);
}
.perfil-card input:checked + .perfil-conteudo::after {
    content: "✓";
    position: absolute;
    top: 7px; right: 8px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--primaria);
    color: var(--sobre-primaria);
    font-size: 12px; font-weight: 700; line-height: 20px;
}
.perfil-card input:checked + .perfil-conteudo .perfil-nome { color: var(--primaria-texto); }
.perfis:has(input:checked) .perfil-card input:not(:checked) + .perfil-conteudo { opacity: .55; }
.perfil-card:hover input:not(:checked) + .perfil-conteudo { opacity: .85; border-color: var(--primaria-clara); }
.perfil-card input:focus-visible + .perfil-conteudo { outline: 2px solid var(--primaria-clara); }

.perfil-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--primaria);
    color: var(--sobre-primaria);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    margin-bottom: 3px;
}
.perfil-nome { font-weight: 650; color: var(--texto); font-size: 15px; }
.perfil-estilo { font-size: 12.5px; color: var(--texto-suave); }

/* seletor no topo do chat */
.troca-perfil { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; }
.troca-perfil select { width: auto; margin-top: 0; padding: 6px 9px; font-size: 13px; }

/* formulário de edição no admin */
.perfil-form {
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.perfil-cabecalho { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.perfil-cabecalho label { margin-bottom: 10px; flex: 1 1 150px; }
.perfil-cabecalho .radio { flex: 0 0 auto; }
.perfil-form textarea { font-size: 13.5px; line-height: 1.5; resize: vertical; }
.perfil-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

@media (max-width: 600px) {
    .perfis { flex-direction: column; }
    .troca-perfil { width: 100%; }
    .troca-perfil select { flex: 1; }
}

/* ---------- indicador de completude da consulta ---------- */

.progresso-consulta {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 14px 16px;
    margin-bottom: 10px;
}

.progresso-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.progresso-titulo { font-size: 13px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .5px; }
.progresso-valor { font-size: 16px; font-weight: 700; color: var(--primaria-texto); }

.progresso-trilho {
    height: 8px;
    background: var(--superficie-3);
    border-radius: 20px;
    overflow: hidden;
}
.progresso-barra {
    height: 100%;
    width: 0;
    border-radius: 20px;
    background: var(--destaque);
    transition: width .5s ease, background .3s ease;
}
.progresso-consulta[data-nivel="baixo"] .progresso-barra { background: #d9803a; }
.progresso-consulta[data-nivel="medio"] .progresso-barra { background: var(--destaque); }
.progresso-consulta[data-nivel="alto"]  .progresso-barra { background: var(--ok); }

.progresso-faltam { margin: 9px 0 0; font-size: 13px; color: var(--texto-suave); line-height: 1.5; }
.progresso-consulta .botao-mini { margin-top: 11px; }

/* ---------- navegação entre etapas ---------- */

/* Progresso + navegação num bloco só, grudado no topo. Antes a navegação vinha
   DEPOIS do texto da etapa: como cada resposta tem um tamanho, os botões
   trocavam de altura a cada clique e era preciso reposicionar o mouse toda vez.
   Aqui eles ficam parados, na mesma coordenada da tela o tempo inteiro. */
.barra-conversa {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--fundo);
    padding-top: 6px;
    margin-bottom: 14px;
}

.navegacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: 0 2px 10px rgba(15, 61, 82, .06);
}

.navegacao-posicao {
    font-size: 13px;
    color: var(--texto-suave);
    font-weight: 600;
    text-align: center;
    flex: 1;
}
/* Revendo etapa antiga: o rótulo muda de cor para não confundir com o ao vivo. */
.navegacao-posicao.revendo { color: var(--destaque); }

/* Habilitados, usam a cor do botão Enviar: apagados, passavam despercebidos
   e a navegação entre etapas é a ação principal desta tela. */
.navegacao .botao-mini {
    min-width: 104px;
    background: var(--primaria);
    border-color: var(--primaria);
    color: var(--sobre-primaria);
    font-weight: 550;
    padding: 8px 14px;
}
.navegacao .botao-mini:hover {
    background: var(--primaria-clara);
    border-color: var(--primaria-clara);
    color: var(--sobre-primaria);
}

/* Desabilitado volta a ser discreto, para o contraste indicar o que dá para fazer. */
.navegacao .botao-mini:disabled {
    background: transparent;
    border-color: var(--borda);
    color: var(--texto-suave);
    opacity: .45;
    cursor: default;
}
.navegacao .botao-mini:disabled:hover {
    background: transparent;
    border-color: var(--borda);
    color: var(--texto-suave);
}

@media (max-width: 600px) {
    .navegacao .botao-mini { min-width: 0; flex: 0 0 auto; padding: 8px 12px; }
    .navegacao-posicao { font-size: 12px; }
}

/* Ação destrutiva: discreta até o mouse chegar, para não convidar ao clique. */
.botao-mini.perigo:hover { border-color: var(--erro); color: var(--erro); background: var(--erro-fundo); }

.nota-revisao {
    background: var(--alerta-fundo);
    border: 1px solid var(--alerta-borda);
    border-radius: 7px;
    padding: 10px 13px;
    margin-top: 12px;
}

/* Consulta concluída: a conversa fica em leitura até ser reaberta de propósito. */
.consulta-fechada {
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 4px;
}
.consulta-fechada p { margin: 0 0 10px; font-size: 14px; color: var(--texto-suave); line-height: 1.5; }
.consulta-fechada strong { color: var(--texto); }

/* Prompt técnico na tela de instruções: texto literal, não formatado.
   Mostrar exatamente o que vai à IA vale mais que um render aproximado. */
.prompt-texto {
    margin: 14px 0 0;
    padding: 16px;
    max-height: 60vh;
    overflow: auto;
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--texto);
    white-space: pre-wrap;   /* preserva os parágrafos e ainda quebra no celular */
    overflow-wrap: anywhere;
}
#diretrizes {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
}

/* Exclusão de usuário: a tela mostra o estrago antes de deixar confirmar. */
.confirmacao-perigo { border-color: var(--erro); }
.confirmacao-perigo h2 { color: var(--erro); }
.botao.perigo { background: var(--erro); }
.botao.perigo:hover { filter: brightness(0.93); }

.tabela-estrago { width: auto; margin-top: 12px; font-size: 14px; }
.tabela-estrago th { font-weight: 500; padding-right: 22px; }
.tabela-estrago td { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Duas ações por linha sem uma empurrar a outra para baixo. */
.acoes-linha { white-space: nowrap; }
.acoes-linha form { display: inline-block; margin: 0 0 0 6px; }
.acoes-linha form:first-child { margin-left: 0; }

/* Usuário sem acesso continua na lista, mas não disputa a atenção. */
.linha-inativa td { opacity: 0.55; }
/* Só as duas últimas células ficam vivas: a situação e o botão de reativar,
   que é justamente o que se procura nessa linha. */
.linha-inativa td:nth-last-child(-n+2) { opacity: 1; }

/* Janela de contatos da tela de entrada */
.janela-contatos {
    width: min(420px, calc(100vw - 32px));
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: 0 10px 40px rgba(15, 61, 82, .22);
    padding: 22px;
    color: var(--texto);
}
.janela-contatos::backdrop { background: rgba(15, 61, 82, .45); }
.janela-fechar { display: flex; justify-content: flex-end; margin: -8px -8px 0 0; }
.janela-fechar .botao-mini { border: 0; font-size: 20px; line-height: 1; padding: 2px 8px; }

/* ---------- janela "Como funciona a tecnologia" ----------
   Herda a moldura da janela de contatos; só a largura muda, porque quatro
   cartões em duas colunas não cabem nos 420px daquela. */
.janela-tecnologia { width: min(760px, calc(100vw - 32px)); }
.janela-tecnologia h2 { margin: 0 0 14px; font-size: 20px; text-wrap: balance; }

/* Aspas tipográficas pelo CSS, não digitadas no texto: assim o conteúdo do HTML
   continua sendo a frase limpa, que é o que um leitor de tela deve ouvir. */
.tec-epigrafe {
    margin: 0 0 18px;
    padding: 2px 0 2px 16px;
    border-left: 2px solid var(--borda);
    font-size: 16.5px;
    font-style: italic;
    line-height: 1.5;
    color: var(--primaria-texto);
    text-wrap: balance;
}
.tec-epigrafe::before { content: '“'; }
.tec-epigrafe::after  { content: '”'; }

.tec-abertura {
    margin: 0 0 20px;
    color: var(--texto-suave);
    font-size: 14.5px;
    line-height: 1.65;
}

.tec-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.tec-card {
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 16px;
    background: var(--superficie);
}
/* O cartão da objeção atravessa as duas colunas. Numa coluna só (celular) a
   regra não faz diferença, e por isso não precisa de exceção na media query. */
.tec-card-largo { grid-column: 1 / -1; }

.tec-card h3 {
    margin: 10px 0 6px;
    font-size: 15px;
    font-weight: 650;
    color: var(--primaria-texto);
}
.tec-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--texto-suave);
}

/* Traço e não preenchimento, mesma espessura nos quatro: é o que faz ícones de
   desenhos diferentes parecerem de um conjunto só. */
.tec-icone {
    width: 26px;
    height: 26px;
    display: block;
    fill: none;
    stroke: var(--primaria);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* O fecho não é mais um cartão: é a conclusão, e precisa se distinguir dos
   quatro sem virar um banner de propaganda. Faixa suave e um traço na cor de
   destaque à esquerda bastam. */
.tec-fecho {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 18px 0 0;
    padding: 15px 16px;
    background: var(--superficie-2);
    border-left: 3px solid var(--destaque);
    border-radius: 0 8px 8px 0;
    font-size: 13.5px;
    line-height: 1.6;
}
.tec-icone-fecho {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 1px;
    fill: none;
    stroke: var(--destaque);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

/* Link discreto ao lado da frase de abertura da página. */
.saiba-mais {
    font-weight: 500;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 620px) {
    /* Empilhado: dois cartões lado a lado numa tela estreita deixam três
       palavras por linha. */
    .tec-grade { grid-template-columns: 1fr; }
    .janela-tecnologia { padding: 16px; }
    .janela-tecnologia h2 { font-size: 18px; }
}

.lista-contatos { list-style: none; margin: 16px 0 0; padding: 0; }
.lista-contatos li { margin-bottom: 14px; }
.lista-contatos li:last-child { margin-bottom: 0; }
.lista-contatos .ajuda { display: block; margin-top: 4px; font-size: 12.5px; }

.contato {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    text-decoration: none;
    color: var(--texto);
}
.contato:hover { border-color: var(--primaria-clara); background: var(--superficie-2); }
.contato-rotulo { font-size: 12px; font-weight: 650; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .4px; }
.contato-texto { font-size: 15px; }
/* O WhatsApp é o caminho que responde mais rápido: ganha a cor da marca do app. */
.contato-whatsapp { border-color: var(--ok-borda); background: var(--ok-fundo); }
.contato-whatsapp:hover { border-color: #25a55a; background: var(--ok-fundo); }

/* Miniatura das logomarcas na lista do painel */
.logo-miniatura { display: block; width: 84px; height: auto; max-height: 40px; object-fit: contain; }

/* Interruptor de ocultar valores (demonstrações) */
.cabecalho-uso { align-items: center; margin-bottom: 16px; }
.cabecalho-uso h2 { margin: 0; }

.interruptor { display: inline-flex; align-items: center; gap: 9px; margin: 0; cursor: pointer; user-select: none; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.interruptor-trilho {
    width: 40px;
    height: 22px;
    border-radius: 20px;
    background: var(--borda);
    padding: 3px;
    transition: background .18s ease;
    flex: 0 0 auto;
}
.interruptor-bola {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--superficie);
    box-shadow: 0 1px 2px rgba(15, 61, 82, .3);
    transition: transform .18s ease;
}
.interruptor input:checked + .interruptor-trilho { background: var(--primaria-clara); }
.interruptor input:checked + .interruptor-trilho .interruptor-bola { transform: translateX(18px); }
.interruptor input:focus-visible + .interruptor-trilho { outline: 2px solid var(--primaria-clara); outline-offset: 2px; }
.interruptor-texto { font-size: 13px; color: var(--texto-suave); }

/* Valor escondido: mesma caixa, mesmo peso — some o número, não o layout. */
.esta-oculto { color: var(--texto-suave); letter-spacing: 2px; }
.destaque-custo .esta-oculto, .metricas .esta-oculto { opacity: .65; }

.em-reais { font-size: 15px; color: var(--primaria-clara); font-weight: 600; margin-top: 2px; }
.nota-cotacao { margin-top: 8px; }

/* Aviso de campo inválido, ao lado do próprio campo */
.aviso-campo { display: block; margin-top: 5px; font-size: 13px; color: var(--erro); }
.campo-com-erro { border-color: var(--erro); }

/* ---------- consulta concluída ---------- */

.consulta-fechada {
    background: linear-gradient(180deg, var(--ok-fundo), var(--ok-fundo));
    border: 1px solid var(--ok-borda);
    text-align: center;
    padding: 20px 18px;
}
/* Seletor com a classe do pai porque `.consulta-fechada p` (definido acima)
   tem especificidade maior que uma classe sozinha e venceria em cor e tamanho. */
.consulta-fechada .fechada-titulo {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 700;
    color: var(--ok);
}
.consulta-fechada .fechada-instrucao { margin: 0 0 14px; font-size: 15px; color: var(--texto); }
.consulta-fechada .fechada-nota { margin: 14px 0 12px; font-size: 13px; color: var(--texto-suave); }

.botao.botao-destaque {
    /* Verde fixo, não var(--ok): no modo escuro o --ok é claro (para texto
       sobre fundo escuro) e deixava a letra branca do botão ilegível. */
    background: #1f7a4d;
    font-size: 16px;
    padding: 12px 26px;
    box-shadow: 0 2px 10px rgba(31, 122, 77, .3);
}
.botao.botao-destaque:hover { background: #196340; }

/* A segunda ação vai para a linha de baixo, centrada. Sem isto os dois botões
   são inline e ficam lado a lado numa tela larga — o que os deixa parecendo
   alternativas equivalentes, quando uma é claramente a principal. */
.consulta-fechada .botao-contorno {
    display: block;
    width: fit-content;
    margin: 10px auto 0;
}

/* Botão de atualizar a cotação, na mesma linha da nota */
.form-inline-cotacao { display: inline; margin-left: 6px; }
.form-inline-cotacao .botao-mini { padding: 2px 9px; font-size: 12px; }

/* Senha provisória, mostrada uma única vez */
.senha-gerada { border-color: var(--destaque); }
.senha-valor {
    margin: 12px 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--primaria-texto);
    background: var(--alerta-fundo);
    border: 1px dashed var(--alerta-borda);
    border-radius: 8px;
    padding: 14px 18px;
    text-align: center;
    user-select: all;   /* um clique seleciona tudo, para copiar sem erro */
}

/* Consulta que a IA encerrou por falta de informação: mesmo formato da
   concluída, sem o verde de quem chegou a um resultado. */
.consulta-encerrada { background: var(--superficie-2); border-color: var(--borda); }
.consulta-encerrada .fechada-titulo { color: var(--texto-suave); }

/* Consentimento LGPD e documentos públicos (política de privacidade) */
.consentimento { max-width: 640px; }
.consent-corpo {
    margin: 16px 0;
    max-height: 46vh;
    overflow-y: auto;
    padding: 16px 18px;
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--texto);
}
.consent-corpo p { margin: 0 0 12px; }
.consent-corpo p:last-child { margin-bottom: 0; }
.consent-corpo h3 { font-size: 15px; color: var(--primaria-texto); margin: 18px 0 8px; }
.consent-corpo ul { margin: 0 0 12px; padding-left: 20px; }
.consent-corpo li { margin-bottom: 5px; }

.consent-caixa { align-items: flex-start; gap: 10px; margin: 18px 0 6px; font-size: 14px; color: var(--texto); }
.consent-caixa input { width: auto; margin-top: 3px; flex: 0 0 auto; }

.consent-acoes { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }

/* A política é lida fora do sistema, sem barra de navegação em volta. */
.documento-publico { max-width: 760px; margin: 28px auto; }
.documento-publico .consent-corpo { max-height: none; overflow: visible; background: transparent; border: 0; padding: 0; }

/* Formulários de texto legal no painel */
.form-texto-lgpd { margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--borda); }
.form-texto-lgpd h3 { font-size: 15px; color: var(--primaria-texto); margin: 18px 0 10px; display: flex; align-items: center; gap: 10px; }
.form-texto-lgpd textarea { font-size: 13.5px; line-height: 1.55; }

/* Painel no celular: cabeçalho de seção com ação ao lado empilha à esquerda,
   em vez de espremer o título contra o interruptor. Precisa vir depois da
   regra base de .cabecalho-uso, que tem a mesma especificidade. */
@media (max-width: 600px) {
    .cabecalho-uso { flex-direction: column; align-items: flex-start; gap: 10px; }
    .metricas { gap: 18px 24px; }
    .destaque-custo { line-height: 1.9; }
}

/* Campo de código de verificação: dígitos grandes e espaçados, porque quem
   digita está copiando do e-mail, olhando de uma tela para a outra. */
.campo-codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 26px;
    letter-spacing: 10px;
    text-align: center;
    padding: 12px;
}
.esqueci { margin: 12px 0 0; text-align: right; }

/* Atalhos das seções da administração */
.menu-admin {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding: 12px 14px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    /* Acompanha a rolagem: com a página longa, voltar ao topo para trocar de
       seção anulava boa parte do ganho. */
    position: sticky;
    top: 0;
    z-index: 6;
}
/* Menu das Instruções: são dezenove títulos, contra doze do painel. Sem teto de
   altura, a barra grudada no topo tomaria metade da tela e atrapalharia mais do
   que ajuda — com ele, a própria barra rola quando não cabe. */
.menu-instrucoes { max-height: 32vh; overflow-y: auto; }

/* As seções do prompt são subordinadas ao bloco "Prompt técnico": mesmo menu,
   peso visual menor, para a lista se ler como sumário e não como quinze itens
   de igual importância. */
.menu-instrucoes .do-prompt {
    font-size: 12.5px;
    opacity: .82;
}
.menu-instrucoes .do-prompt.atual { opacity: 1; }

.menu-admin a {
    padding: 6px 12px;
    border: 1px solid var(--borda);
    border-radius: 20px;
    font-size: 13px;
    color: var(--texto-suave);
    text-decoration: none;
    white-space: nowrap;
}
.menu-admin a:hover { border-color: var(--primaria-clara); color: var(--primaria-texto); background: var(--superficie-3); }
.menu-admin a.atual { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }

/* O alvo do atalho para abaixo do menu grudado, e não atrás dele. */
.conteudo section[id] { scroll-margin-top: 78px; }

@media (max-width: 600px) {
    .menu-admin {
        gap: 6px;
        padding: 10px;
        /* Uma faixa só, que corre para o lado: empilhado, o menu tomaria
           meia tela antes de qualquer conteúdo aparecer. */
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .menu-admin::-webkit-scrollbar { display: none; }
    .conteudo section[id] { scroll-margin-top: 64px; }
}

/* Código clicável: parece o texto de antes, mas se comporta como botão */
.codigo-copiar {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: var(--superficie-3);
    border: 1px solid transparent;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 13px;
    letter-spacing: .5px;
    color: var(--texto);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.codigo-copiar:hover { background: var(--superficie-3); border-color: var(--primaria-clara); }
.codigo-copiar:active { transform: translateY(1px); }
.codigo-copiar.copiado { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok); }
.codigo-copiar.copiar-falhou { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro); }

/* A senha provisória herda o tamanho grande do parágrafo em que está. */
.senha-copiar {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 6px 14px;
    background: transparent;
    color: var(--primaria-texto);
}
.senha-copiar:hover { background: var(--superficie); }

/* Explicação no lugar de célula de ações vazia */
.sem-acao { font-size: 12.5px; font-style: italic; white-space: nowrap; }

/* Link para o painel da Anthropic, na seção de uso */
.painel-anthropic { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--borda); }

/* ---------- avaliação da consulta ---------- */

/* Botão realçado só enquanto não houve avaliação: depois ele vira o registro
   da nota dada e não precisa mais chamar atenção. */
.botao-mini.avaliar.destaque {
    border-color: var(--destaque);
    color: var(--alerta-texto);
    background: var(--alerta-fundo);
    font-weight: 600;
}
.botao-mini.avaliar.destaque:hover { background: var(--alerta-fundo-forte); border-color: var(--alerta-borda-forte); color: var(--alerta-texto); }
.botao-mini.avaliar.avaliada { color: var(--ambar); letter-spacing: 1px; }
.botao-mini.avaliar.avaliada:hover { border-color: var(--ambar); color: var(--alerta-texto); }

.agradecimento { font-size: 15px; }
.agradecimento strong { display: inline-block; margin-right: 4px; }

/* Estrelas: radios de verdade por baixo, para funcionar no teclado e sem JS. */
.estrelas { border: 0; padding: 0; margin: 0 0 18px; }
.estrelas legend { font-size: 14px; color: var(--texto-suave); padding: 0; margin-bottom: 6px; }

.estrelas-campo {
    display: inline-flex;
    flex-direction: row-reverse;   /* pinta da escolhida para trás */
    gap: 4px;
}
.estrelas-campo input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.estrelas-campo label {
    margin: 0;
    font-size: 38px;
    line-height: 1;
    color: var(--borda);
    cursor: pointer;
    transition: color .12s, transform .12s;
}
.estrelas-campo label:hover,
.estrelas-campo label:hover ~ label,
.estrelas-campo input:checked ~ label { color: var(--ambar); }
.estrelas-campo label:hover { transform: scale(1.08); }
.estrelas-campo input:focus-visible + label { outline: 2px solid var(--primaria-clara); outline-offset: 3px; }

.estrelas-legenda { margin: 6px 0 0; font-size: 12.5px; }

/* Texto só para leitor de tela: a estrela sozinha não diz o que significa. */
.sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Painel de avaliações */
.aval-resumo { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; margin-bottom: 18px; }
.aval-media { display: flex; flex-direction: column; gap: 2px; }
.aval-media strong { font-size: 40px; line-height: 1; color: var(--destaque); }   /* nota em azul */
.aval-estrelas { color: var(--ambar); font-size: 18px; letter-spacing: 2px; }

.aval-barras { flex: 1 1 260px; min-width: 240px; }
.aval-linha { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; font-size: 13px; }
.aval-rotulo { width: 26px; color: var(--texto-suave); }
.aval-trilho { flex: 1; height: 8px; background: var(--superficie-3); border-radius: 4px; overflow: hidden; }
.aval-barra { display: block; height: 100%; background: var(--ambar); border-radius: 4px; }
.aval-qtd { width: 26px; text-align: right; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

.aval-titulo { font-size: 15px; color: var(--primaria-texto); margin: 20px 0 10px; }
.aval-item { padding: 12px 14px; border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 10px; }
.aval-cabecalho { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.aval-nota { color: var(--ambar); letter-spacing: 1px; }
.aval-texto { margin: 0; font-size: 14px; line-height: 1.55; }

/* Indicador de atualização no menu do painel */
.menu-atualizar { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
.menu-atualizar .ajuda { font-size: 12px; }
.menu-atualizar .envelhecido { color: var(--alerta-texto); }
@media (max-width: 600px) {
    /* Na faixa que corre para o lado, o indicador vai no fim da fila. */
    .menu-atualizar { margin-left: 4px; }
}

/* ---------- escolha de aparência ---------- */

.temas { border: 0; padding: 0; margin: 0 0 18px; }
.temas legend, .cores legend { font-size: 14px; color: var(--texto-suave); padding: 0; margin-bottom: 10px; }

.temas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }

.tema-opcao {
    display: block;
    margin: 0;
    padding: 12px;
    border: 2px solid var(--borda);
    border-radius: var(--raio);
    cursor: pointer;
}
.tema-opcao:hover { border-color: var(--primaria-clara); }
.tema-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* Selecionado: o :has responde ao clique na hora; a classe vem do servidor e
   cobre navegador antigo e o carregamento inicial. */
.tema-opcao.escolhido,
.tema-opcao:has(input:checked) {
    border-color: var(--primaria);
    background: var(--superficie-2);
    box-shadow: 0 0 0 3px rgba(26, 93, 122, .18);
}

/* Marca de conferido no canto, para a escolha não depender só da borda —
   quem enxerga pouco pode não distinguir duas bordas parecidas. */
.tema-opcao { position: relative; }
.tema-opcao.escolhido::after,
.tema-opcao:has(input:checked)::after {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 10px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primaria);
    color: var(--sobre-primaria);
    font-size: 13px;
    font-weight: 700;
}
.tema-opcao:focus-within { outline: 2px solid var(--primaria-clara); outline-offset: 2px; }

/* Miniatura da tela, montada com as cores do próprio tema */
.tema-amostra {
    display: block;
    border: 1px solid;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
.tema-barra { display: block; height: 14px; }
.tema-caixa { display: block; margin: 8px; padding: 8px; border: 1px solid; border-radius: 4px; }
.tema-linha { display: block; height: 5px; border-radius: 3px; opacity: .75; margin-bottom: 5px; }
.tema-linha.curta { width: 60%; opacity: .45; }
.tema-botao { display: block; height: 10px; width: 42%; border-radius: 3px; margin-top: 8px; }

.tema-nome { display: block; font-size: 14px; font-weight: 600; color: var(--texto); }
.tema-desc { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; }

.cores { border: 0; padding: 0; margin: 0 0 8px; }
.cor-linha { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cor-linha input[type="color"] {
    width: 52px; height: 32px; padding: 2px; margin: 0;
    border: 1px solid var(--borda); border-radius: 6px; cursor: pointer;
}
.cor-linha input[type="checkbox"] { width: auto; margin: 0; }

/* Seletor de estilo travado depois que a conversa começa */
.troca-perfil.travada select { opacity: .6; cursor: not-allowed; }
.trava-nota { font-size: 12px; font-style: italic; }

/* Horário de cada fala na conversa */
.msg-hora {
    font-weight: 400;
    font-size: 11.5px;
    /* Azul do sistema: o horário é informação de registro, e em cinza sobre
       cinza ele desaparecia dentro do nome de quem falou. */
    color: var(--primaria-clara);
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
    margin-left: 8px;
}

/* Edição rápida de cada logomarca na lista */
.form-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.form-logo select, .form-logo input { margin: 0; width: auto; font-size: 13px; padding: 5px 8px; }
.form-logo input[type="number"] { width: 78px; }
.form-logo .campo-link { width: 150px; }

/* A lista de logomarcas tem um formulário inteiro dentro de uma célula. Antes a
   tabela se obrigava a caber na tela (`table-layout: fixed` com larguras em
   porcentagem), e a conta fechava espremendo o campo de link até 50 px — largura
   em que nenhum endereço se lê. Agora a tabela toma a largura de que precisa e
   rola para o lado. */
#logos table { table-layout: auto; width: auto; min-width: 100%; }
#logos td, #logos th { white-space: nowrap; }
#logos th:first-child,  #logos td:first-child  { width: 90px; }
#logos th:nth-child(4), #logos td:nth-child(4) { text-align: center; }
/* Os dois botões somados passam de 160 px; com menos que isto o "Excluir"
   fica cortado na borda da tabela. */
#logos th:last-child,   #logos td:last-child   { width: 185px; }
#logos td.acoes-linha { white-space: nowrap; }

/* Os campos dividem a coluna do meio em vez de transbordar. */
#logos .form-logo { flex-wrap: nowrap; }
#logos .form-logo select { flex: 0 0 82px; }
#logos .form-logo select[name="animacao"] { flex: 0 0 104px; }
#logos .form-logo input[type="number"] { flex: 0 0 68px; width: 68px; }
/* Largura de um endereço curto inteiro; os longos rolam dentro do campo, mas
   agora dá para ler o suficiente para reconhecer qual é. */
#logos .form-logo .campo-link { flex: 0 0 300px; width: 300px; min-width: 300px; }
#logos .form-logo .botao-mini { flex: 0 0 auto; }

@media (max-width: 600px) {
    /* Em cartões não há colunas para alinhar: o formulário volta a quebrar e o
       campo de link ocupa a largura do cartão. */
    #logos table { width: 100%; min-width: 0; }
    #logos td, #logos th { white-space: normal; }
    #logos .form-logo { flex-wrap: wrap; }
    #logos .form-logo .campo-link { flex: 1 1 100%; width: 100%; min-width: 0; }
}

/* Estado do código de verificação */
.estado-codigo {
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: 8px;
}
.estado-linha { margin: 0 0 6px; font-size: 14px; }
.estado-linha .link-discreto { margin-left: 8px; }
.estado-codigo .ajuda { margin: 0; }
.estado-codigo .erro { margin: 6px 0 0; }
.form-reenviar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
#conta-expira.expirando { color: var(--alerta-texto); font-weight: 600; }
#conta-expira.expirado { color: var(--erro); font-weight: 600; }

/* ---------- efeitos das logomarcas da tela de entrada ---------- */

/* Cada efeito é uma classe; a escolha vem do painel, por logomarca. Tudo em
   transform e opacity de propósito: são as duas propriedades que o navegador
   anima sem recalcular o layout, então nada disso trava a rolagem. */

.anim-fade    { animation: logo-fade 1.2s ease-out both; }
.anim-subir   { animation: logo-subir 1s cubic-bezier(.2, .8, .3, 1) both; }
.anim-flutuar { animation: logo-fade 1s ease-out both, logo-flutuar 5s ease-in-out 1s infinite; }
.anim-girar   { animation: logo-fade 1s ease-out both, logo-girar 9s linear 1s infinite; }
.anim-onda    { animation: logo-fade 1s ease-out both, logo-onda 4.5s ease-in-out 1s infinite; }
.anim-pulsar  { animation: logo-fade 1s ease-out both, logo-pulsar 4s ease-in-out 1s infinite; }

/* O brilho precisa de um invólucro para a faixa de luz correr por cima. */
.anim-brilho { position: relative; overflow: hidden; display: inline-block; }
.anim-brilho::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
    animation: logo-brilho 4.5s ease-in-out 1.5s infinite;
    pointer-events: none;
}

@keyframes logo-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes logo-subir {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
@keyframes logo-flutuar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
@keyframes logo-girar {
    /* Pausa nas pontas: girar sem parar cansa, e o selo precisa ficar legível
       a maior parte do tempo. */
    0%, 25%   { transform: perspective(600px) rotateY(0deg); }
    50%, 75%  { transform: perspective(600px) rotateY(360deg); }
    100%      { transform: perspective(600px) rotateY(360deg); }
}
@keyframes logo-onda {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(2.2deg); }
    75%      { transform: rotate(-2.2deg); }
}
@keyframes logo-pulsar {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}
@keyframes logo-brilho {
    0%        { left: -60%; }
    45%, 100% { left: 130%; }
}

/* Quem pediu menos movimento no sistema recebe as imagens paradas: efeito
   contínuo incomoda de verdade parte das pessoas, e isto é a tela de entrada. */
@media (prefers-reduced-motion: reduce) {
    .anim-fade, .anim-subir, .anim-flutuar, .anim-girar, .anim-onda, .anim-pulsar {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .anim-brilho::after { animation: none; display: none; }
}

/* A miniatura do painel também roda o efeito, para a escolha ser conferida ali
   mesmo. O invólucro precisa de dimensão própria, senão o giro e o brilho não
   têm onde acontecer. */
#logos td:first-child > span { display: inline-block; }

/* ---------- efeitos com clima ---------- */

/* Raio e trovão: dois clarões curtos e um tremor, com longa espera entre um
   ciclo e outro. O intervalo é o que faz parecer tempestade em vez de pisca-
   pisca — clarão frequente vira defeito de tela. */
.anim-raio {
    display: inline-block;
    animation: logo-fade 1s ease-out both, logo-raio 9s ease-out 1.5s infinite;
}
@keyframes logo-raio {
    0%, 6%     { filter: none; transform: none; }
    7%         { filter: brightness(2.6) contrast(1.15); transform: translateX(-2px); }
    8%         { filter: none; transform: translateX(2px); }
    9%         { filter: brightness(2.2); transform: translateX(-1px); }
    10%        { filter: none; transform: translateX(1px); }
    11%, 13%   { transform: translateX(-.5px); }
    12%, 100%  { filter: none; transform: none; }
}

/* Senoidal: desenha uma onda no ar. O segredo é o eixo vertical completar dois
   ciclos enquanto o horizontal completa um — sem isso o caminho vira círculo. */
.anim-senoidal {
    display: inline-block;
    animation: logo-fade 1s ease-out both, logo-senoidal-x 7s ease-in-out 1s infinite;
}
.anim-senoidal img { animation: logo-senoidal-y 3.5s ease-in-out 1s infinite; }
@keyframes logo-senoidal-x {
    0%, 100% { transform: translateX(-10px); }
    50%      { transform: translateX(10px); }
}
@keyframes logo-senoidal-y {
    0%, 100% { transform: translateY(0); }
    25%      { transform: translateY(-8px); }
    75%      { transform: translateY(8px); }
}

/* Água: ondulação lenta com inclinação e achatamento alternados, mais o
   espelho embaixo. Dá a impressão de imagem vista através de superfície
   d'água em movimento. */
.anim-agua {
    display: inline-block;
    -webkit-box-reflect: below 1px linear-gradient(transparent 55%, rgba(255, 255, 255, .28));
    animation: logo-fade 1.2s ease-out both, logo-agua 6s ease-in-out 1s infinite;
}
@keyframes logo-agua {
    0%, 100% { transform: skewX(0deg) scaleY(1); }
    25%      { transform: skewX(1.4deg) scaleY(.985); }
    50%      { transform: skewX(0deg) scaleY(1.015); }
    75%      { transform: skewX(-1.4deg) scaleY(.985); }
}

/* Reflexo: espelho fixo embaixo e um brilho que atravessa devagar, como luz
   correndo numa superfície polida. */
.anim-reflexo {
    display: inline-block;
    position: relative;
    -webkit-box-reflect: below 2px linear-gradient(transparent 45%, rgba(255, 255, 255, .35));
    animation: logo-fade 1.2s ease-out both;
}
.anim-reflexo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
    background-size: 280% 100%;
    animation: logo-reflexo 6s linear 1.5s infinite;
    pointer-events: none;
}
@keyframes logo-reflexo {
    0%        { background-position: 140% 0; }
    55%, 100% { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .anim-raio, .anim-senoidal, .anim-agua, .anim-reflexo {
        animation: none;
        filter: none;
        transform: none;
        opacity: 1;
    }
    .anim-senoidal img { animation: none; transform: none; }
    .anim-reflexo::after { animation: none; display: none; }
}

/* Vídeo ocupa o mesmo lugar da imagem na tela de entrada */
video.logo-parceira, video.carimbo, video.logo-miniatura {
    display: block;
    width: 100%;
    height: auto;
}
#logos .form-logo .laco { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; white-space: nowrap; }
#logos .form-logo .laco input { width: auto; margin: 0; }
.laco-novo { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.laco-novo input { width: auto; margin: 0; }

/* ---------- espera da resposta: cérebro, órbitas e raios ---------- */

.spinner-ia {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Alinhado ao topo, e não centrado: centrado, o conjunto inteiro se
       reposiciona quando a frase passa de uma linha para duas, e o desenho sobe
       junto. Ancorado no topo, o que cresce empurra só para baixo. */
    justify-content: flex-start;
    gap: 14px;
    padding: 26px 0 18px;
    min-height: 190px;   /* altura reservada, para o bloco não encolher entre frases */
}

.spinner-palco { position: relative; width: 96px; height: 96px; }

.spinner-centro {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spinner-cerebro {
    width: 30px;
    height: 30px;
    color: var(--primaria-texto);
    display: block;
}
/* O cérebro pulsa só enquanto dispara: fora disso fica parado, e a pulsação
   passa a significar alguma coisa em vez de ser um batimento de fundo. A
   duração acompanha o voo dos raios, marcada em dois tempos. */
.spinner-cerebro.descarregando { animation: spinner-descarga 1.5s ease-in-out; }

/* Cada órbita gira num plano inclinado diferente; o invólucro de escala é o que
   o raio altera ao acertar, aproximando ou afastando aquele elétron. */
.spinner-escala { position: absolute; inset: 4px; transition: transform .8s cubic-bezier(.34, 1.1, .4, 1); }
.spinner-orbita { position: absolute; inset: 0; border-radius: 50%; }
.spinner-orbita.o1 { transform: rotateZ(0deg)   rotateX(62deg); animation: spinner-gira1 2.2s linear infinite; }
.spinner-orbita.o2 { transform: rotateZ(58deg)  rotateX(74deg); animation: spinner-gira2 2.6s linear infinite reverse; }
.spinner-orbita.o3 { transform: rotateZ(122deg) rotateX(50deg); animation: spinner-gira3 3.1s linear infinite; }

.eletron {
    position: absolute;
    top: 0;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
/* Cores próprias, de propósito fora do tema: os elétrons trocam de cor ao serem
   acertados por um raio, e uma cor sorteada não combinaria com a paleta escolhida
   no painel de qualquer forma. A transição suaviza a troca feita pelo script. */
.eletron { transition: background-color .45s ease; }
.eletron.e1 { background: #38bdf8; }
.eletron.e2 { background: #34d399; }
.eletron.e3 { background: #fbbf24; }

.spinner-raio {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    opacity: 0;
    pointer-events: none;
    transform-origin: center;
}
.spinner-raio svg { width: 100%; height: 100%; display: block; }
.spinner-raio path { fill: var(--ambar); }   /* âmbar, como antes da paleta nova (26/10/2026) */

.spinner-frase {
    margin: 0;
    max-width: 30rem;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--texto-suave);
    /* Espaço de duas linhas sempre reservado, com a frase centrada dentro dele:
       assim a de uma linha e a de duas ocupam a mesma caixa, e a troca a cada
       2,6 s não mexe em nada ao redor. */
    min-height: calc(2 * 1.5 * 14px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.spinner-frase.entrando { animation: spinner-frase-entra .5s ease both; }

@keyframes spinner-gira1 { to { transform: rotateZ(0deg)   rotateX(62deg) rotate(360deg); } }
@keyframes spinner-gira2 { to { transform: rotateZ(58deg)  rotateX(74deg) rotate(360deg); } }
@keyframes spinner-gira3 { to { transform: rotateZ(122deg) rotateX(50deg) rotate(360deg); } }
@keyframes spinner-descarga {
    0%           { transform: scale(1);    opacity: 1;  }
    18%          { transform: scale(1.3);  opacity: .8; }
    38%          { transform: scale(1.02); opacity: 1;  }
    58%          { transform: scale(1.18); opacity: .85;}
    100%         { transform: scale(1);    opacity: 1;  }
}
@keyframes spinner-frase-entra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .spinner-cerebro, .spinner-orbita { animation: none; }
    .spinner-frase.entrando { animation: none; }
    /* Sem giro, os elétrons parados em cima uns dos outros não dizem nada. */
    .spinner-escala { display: none; }
}

/* Edição das frases da espera, com a prévia ao lado */
.espera-lado-a-lado { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: start; }
.espera-form textarea { font-size: 13.5px; line-height: 1.6; }
/* Contagem e interruptor andam juntos à esquerda; o botão fica na outra ponta. */
.espera-controles { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.espera-previa .chat-area { margin: 8px 0; }
.espera-previa .ajuda { margin: 0; }

@media (max-width: 860px) {
    /* Lado a lado em coluna estreita esmaga os dois; a prévia vai para baixo. */
    .espera-lado-a-lado { grid-template-columns: 1fr; }
}

/* O desenho da espera como enfeite na tela de entrada, logo abaixo da logo do
   produto e centrado na coluna dela. Sem frases e com o espaçamento do bloco
   anulado, para não abrir um degrau entre a logo e a frase de apresentação. */
.selo-espera {
    display: flex;
    justify-content: center;
    /* Largura inteira de propósito: no celular a coluna de texto vira
       `display: contents`, e o bloco passa a ser item do flex da abertura, que
       tem `align-items: start`. Sem isto ele encolhe até o tamanho do desenho e
       o "centro" vira o canto esquerdo. */
    width: 100%;
    margin: 0 0 14px;
}
.spinner-ia.spinner-enfeite {
    padding: 0;
    gap: 0;
    /* A altura reservada existe na conversa para o texto não pular quando a
       frase troca de tamanho. Sem frase, ela só abriria um vão no rodapé. */
    min-height: 0;
}
/* Menor só na tela de entrada. A classe `spinner-enfeite` quer dizer apenas
   "sem frases", e a conversa com as frases desligadas mantém o tamanho cheio. */
.selo-espera .spinner-palco { width: 86px; height: 86px; }
.selo-espera .spinner-cerebro { width: 27px; height: 27px; }
.selo-espera .eletron { width: 6px; height: 6px; }

@media (max-width: 600px) {
    .selo-espera { margin-bottom: 8px; }
    .selo-espera .spinner-palco { width: 68px; height: 68px; }
    .selo-espera .spinner-cerebro { width: 21px; height: 21px; }
}

/* ---------- seções editáveis do prompt técnico ---------- */

.secao-prompt {
    border-top: 1px solid var(--borda);
    padding-top: 18px;
    margin-top: 22px;
}
.secao-prompt-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.secao-prompt-cab h3 { margin: 0; font-size: 16px; }

/* Monoespaçada como o bloco de leitura: aqui se escreve markdown, e o
   alinhamento das listas e dos exemplos importa mais que a beleza do texto. */
.campo-secao {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.6;
}
.secao-prompt .prompt-texto { max-height: 40vh; }
.secao-botoes { display: flex; align-items: center; gap: 10px; }

/* Rótulo que existe só para o leitor de tela: a seção já tem título visível,
   e repeti-lo acima do campo poluiria a tela sem informar ninguém. */
.oculto-visual {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Botão de leitura em voz alta. Fica discreto até começar a falar: aí precisa
   ser achado de relance, porque é ele que interrompe. */
.ler-voz.lendo {
    background: var(--primaria);
    color: var(--sobre-primaria);
    border-color: var(--primaria);
}
/* Enquanto o servidor gera o áudio de um texto recém-editado. Não fica igual ao
   estado "lendo": ali já sai som, aqui ainda não, e o botão precisa dizer qual
   dos dois é — senão parece travado. */
.ler-voz.preparando {
    opacity: .7;
    cursor: progress;
}
.secao-botoes p, p.secao-botoes { margin: 10px 0 0; }

/* Linha da versão do documento com o botão de ouvir na outra ponta. */
.linha-ouvir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Miniatura da logomarca escolhida na tela de nova consulta. O xadrez de fundo
   revela fundo transparente — logo em PNG sem fundo some no branco do relatório,
   e é justamente isso que convém perceber antes de gerar o laudo. */
.previa-logo {
    margin: -6px 0 14px;
    padding: 10px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background-color: var(--superficie-2);
    background-image:
        linear-gradient(45deg, rgba(128,128,128,.12) 25%, transparent 25%, transparent 75%, rgba(128,128,128,.12) 75%),
        linear-gradient(45deg, rgba(128,128,128,.12) 25%, transparent 25%, transparent 75%, rgba(128,128,128,.12) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}
.previa-logo img {
    display: block;
    max-width: 220px;
    max-height: 90px;
    width: auto;
    height: auto;
}
.previa-logo figcaption { margin-top: 8px; }

/* Marcador ao lado do rótulo do campo: diz, sem explicação em prosa, como aquele
   dado é chamado dentro dos textos do sistema. */
.marcador {
    font-size: 11px;
    font-weight: 400;
    color: var(--texto-suave);
    background: var(--superficie-3);
    padding: 1px 5px;
    border-radius: 4px;
}

/* Entrada do painel: verde enquanto a senha está liberada. O sinal é para quem
   acabou de armar — sem ele não há como saber se a janela ainda está aberta. */
.entrada-admin { transition: border-color .25s ease, box-shadow .25s ease; }
.entrada-admin.armado {
    border-color: var(--ok);
    box-shadow: 0 0 0 3px rgba(31, 122, 77, .18), var(--sombra);
}
.entrada-admin.armado h1 { color: var(--ok); }
.aviso-armado { border-left-color: var(--ok); }

/* Campo com o botão de mostrar/ocultar encostado nele */
.campo-com-olho { display: flex; align-items: stretch; gap: 6px; }
.campo-com-olho input { flex: 1; }
.olho {
    flex: 0 0 auto;
    margin-top: 5px;
    padding: 0 10px;
    font: inherit;
    font-size: 12.5px;
    color: var(--texto-suave);
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: 7px;
    cursor: pointer;
}
.olho:hover { border-color: var(--primaria-clara); color: var(--primaria-texto); }
.olho[aria-pressed="true"] { background: var(--superficie-3); }

/* Impressão do texto na lista de consentimentos: o comeco em destaque e o resto
   esmaecido. Oito caracteres bastam para conferir de relance entre linhas; os
   64 saem no clique, que copia tudo. */
.impressao { letter-spacing: .3px; white-space: nowrap; }
.impressao .impressao-resto { opacity: .45; }

/* Vários e-mails na mesma célula: um por linha, inteiros. */
.email-usuario { display: block; font-size: 13px; }
.email-usuario + .email-usuario { margin-top: 3px; }

/* ---------- tela de atividade ---------- */

.trilha { margin-bottom: 14px; }
.trilha a { color: var(--link); }

/* Sinal de transmissão ao vivo — o vermelho da luz de gravação, que todo mundo
   reconhece sem legenda. O anel que pulsa existe para o estado ser percebido de
   relance numa lista parada; quem pediu menos movimento fica só com o ponto. */
.sinal-vivo {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d93025;
    box-shadow: 0 0 0 0 rgba(217, 48, 37, .5);
    animation: pulso-vivo 2s ease-out infinite;
}
@keyframes pulso-vivo {
    0%   { box-shadow: 0 0 0 0 rgba(217, 48, 37, .5); }
    70%  { box-shadow: 0 0 0 7px rgba(217, 48, 37, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 48, 37, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .sinal-vivo { animation: none; }
}

.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover { background: var(--superficie-2); }
tr.esta-vivo td { background: var(--vivo-fundo); }

.bloco-nome { display: block; font-size: 12.5px; }

.lista-relatorios { list-style: none; padding: 0; margin: 10px 0 0; }
.lista-relatorios li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--borda); }
.lista-relatorios li:last-child { border-bottom: 0; }

/* Registro da conversa: as duas vozes distintas, sem imitar a tela do chat —
   aqui se lê um histórico, não se conversa. */
.msg-registro { padding: 12px 14px; border-left: 3px solid var(--borda); margin-bottom: 12px; background: var(--superficie-2); border-radius: 0 8px 8px 0; }
.msg-registro.de-usuario { border-left-color: var(--primaria-clara); background: var(--superficie-3); }
.msg-registro.de-ia { border-left-color: var(--ok); }
.msg-registro-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.msg-registro-corpo { font-size: 14px; line-height: 1.6; }
.msg-registro-corpo p:first-child { margin-top: 0; }
.msg-registro-corpo p:last-child { margin-bottom: 0; }

/* Coluna do sinal: o título em vermelho dispensa legenda para o ponto abaixo. */
.col-ao-vivo { color: #d93025; text-align: center; }
th.col-ao-vivo { white-space: nowrap; }

/* "Não tem um token?" — a segunda saída do cartão de acesso, para quem chega
   sem nada na mão. Separada por uma linha do formulário acima: são dois
   caminhos, não um formulário com um adendo. */
.sem-token {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--borda);
    font-size: 14px;
    color: var(--texto-suave);
}
/* Realce contido: peso e a cor de destaque na borda, sem virar um segundo botão
   principal disputando com "Validar token". */
.botao-mini.destaque {
    font-weight: 600;
    color: var(--primaria-texto);
    border-color: var(--destaque);
    background: var(--alerta-fundo);
}
.botao-mini.destaque:hover {
    color: var(--primaria-texto);
    border-color: var(--alerta-borda-forte);
    background: var(--alerta-fundo-forte);
}

/* Aviso de que dá para pausar. Azul próprio, de nenhuma outra peça do sistema:
   em cinza ele se misturava aos textos de ajuda em volta e desaparecia; em verde
   ou âmbar seria confundido com sucesso ou alerta. Azul, aqui, só informa. */
.aviso-pausa {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 10px 0 0;
    padding: 10px 13px;
    background: var(--info-fundo);
    border: 1px solid var(--info-borda);
    border-left: 3px solid var(--info-forte);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--info-texto);
}
.aviso-pausa strong { color: var(--info-texto); }
.aviso-pausa a { color: var(--info-texto); }

.icone-pausa {
    flex: 0 0 auto;
    width: 12px;
    height: 14px;
    margin-top: 2px;
    fill: var(--info-forte);
}

/* ---------- janela "O que ter em mãos" ---------- */

.janela-checklist { max-width: 620px; }
.acoes-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.checklist-abas { display: flex; gap: 8px; margin: 14px 0 6px; }
.checklist-abas .atual {
    background: var(--primaria);
    border-color: var(--primaria);
    color: var(--sobre-primaria);
}
.checklist-abas .atual:hover { color: var(--sobre-primaria); border-color: var(--primaria); }

.checklist-lista h3 { font-size: 14px; margin: 16px 0 6px; color: var(--primaria-texto); }
.checklist-itens { list-style: none; padding: 0; margin: 0; }
.checklist-itens li { margin-bottom: 2px; }
/* A linha inteira é clicável: numa lista que se marca de pé, com o celular na
   mão, acertar a caixa de 14 px é o que mais custa. */
.checklist-itens label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 5px 6px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--texto);
    cursor: pointer;
}
.checklist-itens label:hover { background: var(--superficie-2); }
.checklist-itens input { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
/* Item já reunido sai do caminho visual, sem sumir. */
.checklist-itens input:checked + span { color: var(--texto-suave); text-decoration: line-through; }

.checklist-rodape { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--borda); }

/* Aviso de consequência, antes de uma edição que pode desencontrar documentos
   já entregues. Âmbar: não é erro, é cuidado. */
.aviso-atencao {
    margin: 14px 0;
    padding: 11px 14px;
    background: var(--alerta-fundo);
    border: 1px solid var(--alerta-borda);
    border-left: 3px solid var(--destaque);
    border-radius: 0 6px 6px 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--alerta-texto);
}
.aviso-atencao strong { display: block; margin-bottom: 3px; }

/* A lista de consultas sofria do mesmo aperto das tabelas do painel: `width:100%`
   obrigava tudo a caber na tela, e como a célula de ações tem cinco botões que
   não quebram, quem encolhia era o nome do cliente e a aplicação recomendada.
   Aqui também vale rolar de lado em vez de espremer.

   Em min-width, e não solto no arquivo, porque abaixo de 600px a tabela vira
   cartões empilhados — ali o texto precisa quebrar. */
@media (min-width: 601px) {
    .tabela-consultas td,
    .tabela-consultas th { white-space: nowrap; padding: 11px 14px; }

    /* Nome do cliente é o que mais varia de tamanho: ganha uma faixa em que se
       acomodar. O mínimo evita a coluna espremida quando os nomes são curtos —
       era o que fazia "Metalúrgica Trevo" virar três linhas ao lado de uma
       tabela com espaço sobrando; o teto impede que uma razão social longa
       empurre o resto para fora da tela. */
    .tabela-consultas td:first-child,
    .tabela-consultas th:first-child { white-space: normal; min-width: 220px; max-width: 340px; }
}

/* ---------- tela de entrada em coluna única ---------- */

/* Uma coluna estreita e centrada, na ordem em que se lê: marca, frase, o que é,
   ressalva, entrar, pedir acesso, logomarcas. A largura é a de leitura
   confortável — mais que isso e a linha fica longa demais para um texto curto. */
.abertura-coluna {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 20px 8px;
    text-align: center;
}
/* Uma linha inteira separando a frase de destaque do texto que a explica: elas
   são duas ideias, não uma continuação. */
/* O desenho encosta na logo: as órbitas são um círculo largo dentro de uma caixa
   quadrada, então sobra ar em volta delas. A margem negativa recupera esse ar e
   faz a órbita de cima tocar a base da marca, sem cobrir letra nenhuma. */
.abertura-coluna .selo-espera { margin-top: -18px; }
/* Título curto, maior que o texto e em linha única na maioria das telas: é o
   contraste de tamanho que cria a hierarquia, não a cor. */
/* Sem teto próprio: os textos acompanham a largura dos cartões abaixo, e a
   coluna inteira passa a ter uma só medida. */
.abertura-coluna .tagline {
    /* 20px é o maior corpo em que a frase inteira cabe numa linha só dentro da
       largura dos cartões: mede 496px dos 520 disponíveis. Em 21px ela quebra em
       duas linhas curtas, que era o desalinho de antes. */
    font-size: 20px;
    line-height: 1.35;
    margin: 0 auto 20px;
    text-wrap: balance;
}
/* Centralizado: são duas linhas curtas, e justificá-las abria vãos entre as
   palavras para alcançar a margem — a justificação só compensa em blocos com
   várias linhas cheias. */
.abertura-resumo {
    margin: 0 auto 26px;
    line-height: 1.7;
    text-align: center;
    color: var(--texto-suave);
    /* Equilibra as linhas em vez de encher a primeira e largar uma palavra órfã
       na segunda. O navegador testa onde quebrar para as linhas ficarem
       parecidas; quem não conhece a propriedade simplesmente quebra como antes. */
    text-wrap: balance;
}
/* A afirmação em destaque dentro do parágrafo: mesma cor do texto principal,
   contra o cinza da frase que a antecede. */
.abertura-resumo strong { color: var(--texto); font-weight: 600; }

/* A afirmação sozinha, centrada e um pouco menor que o título: é o argumento da
   página, e ganha mais ficando isolada do que ficando em negrito no meio de um
   parágrafo. O filete curto acima marca a pausa sem virar mais uma linha de
   texto. */
.abertura-afirmacao {
    position: relative;
    max-width: 440px;
    margin: 0 auto 24px;
    padding-top: 18px;
    text-align: center;
    text-wrap: balance;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.55;
    /* Cor do texto comum, e não a da marca: com o título logo acima já em verde,
       dois verdes empilhados era justamente o que fazia os dois blocos brigarem.
       O filete âmbar dá o contraste de cor sem repetir o tom do título. */
    color: var(--texto);
}
.abertura-afirmacao::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 2px;
    background: var(--destaque);
    border-radius: 2px;
}
.abertura-coluna .escopo {
    /* O traço à esquerda marca a nota como ressalva, e não como continuação do
       texto de cima — vale a assimetria numa coluna centrada. */
    text-align: justify;
    hyphens: none;
    border: 0;
    border-left: 3px solid var(--borda);
    padding: 2px 0 2px 14px;
    margin: 6px auto 4px;
}
.abertura-coluna .cartao { text-align: left; margin-bottom: 18px; }
.abertura-coluna .faixa-logos { margin: 34px auto 10px; gap: 30px; }
.abertura-coluna .vitrine { margin-top: 30px; text-align: left; }

/* O carimbo, que antes ficava sozinho embaixo dos formulários, agora divide a
   linha com as outras marcas: sem a largura cheia e sem o bloco próprio. */
.abertura-coluna .faixa-logos .carimbo { width: auto; margin: 0; }

/* Lado a lado mesmo quando as larguras escolhidas no painel somam mais que a
   coluna: em vez de quebrar a linha, cada marca encolhe proporcionalmente. O
   `min-width: 0` é o que autoriza o encolhimento — sem ele, o conteúdo segura a
   largura e a linha quebra assim mesmo. */
.abertura-coluna .faixa-logos { flex-wrap: nowrap; align-items: center; }
.abertura-coluna .faixa-logos > * { min-width: 0; flex: 0 1 auto; }
.abertura-coluna .faixa-logos img,
.abertura-coluna .faixa-logos video { max-width: 100%; height: auto; }

@media (max-width: 600px) {
    .abertura-coluna { padding: 22px 14px 4px; }
    .abertura-coluna .faixa-logos { gap: 20px; margin-top: 26px; }
}

/* ---------- passos para obter acesso ---------- */

.passos-acesso {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    counter-reset: passo;
}
.passos-acesso li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--borda);
}
.passos-acesso li:last-child { border-bottom: 0; padding-bottom: 4px; }

/* O número na cor de destaque, como os botões: é o fio que liga os três passos
   e diz, sem texto, que há uma sequência. */
.passo-numero {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ambar);
    color: var(--sobre-ambar);
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
}
.passo-corpo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.passo-corpo > strong { font-size: 15px; }
.passo-nota { font-size: 13.5px; color: var(--texto-suave); }
/* O "Pronto" dentro da frase ganha a cor do texto comum: em cinza, negrito não
   se destaca o suficiente para marcar o fim do percurso. */
.passo-nota strong { color: var(--texto); font-size: 15px; }

/* Campo e botão na mesma linha do passo 2: o rótulo virou o próprio texto do
   passo, então o campo não precisa repetir "Token" acima dele. */
.form-token { display: flex; gap: 8px; flex: 1; min-width: 200px; margin: 0; }
.form-token input { margin: 0; flex: 1; min-width: 120px; }
.form-token .botao { flex: 0 0 auto; }

/* "Validar novo token" para quem já tem conta (painel e Nova consulta). Mesmo
   campo + botão laranja do passo 2 da página inicial, que a pessoa já conhece;
   a faixa à esquerda na cor de destaque liga um ao outro. Saldo zerado vira
   cartão com fundo tingido — é o único caminho, não pode passar batido. */
.novo-token {
    border-left: 3px solid var(--ambar);
    padding: 10px 14px;
    margin: 0 0 16px;
    background: var(--superficie);
    border-radius: 6px;
}
.novo-token-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.novo-token-linha > strong { font-size: 15px; white-space: nowrap; }
.novo-token-destaque {
    background: color-mix(in srgb, var(--ambar) 12%, var(--superficie));
    border: 1px solid color-mix(in srgb, var(--ambar) 45%, var(--superficie));
    border-left: 4px solid var(--ambar);
    padding: 14px 16px;
}
.novo-token-destaque > p { margin: 0 0 10px; }

@media (max-width: 480px) {
    /* No celular o campo ocupa a linha inteira e o botão desce: lado a lado, o
       campo ficaria com menos de 120px e o placeholder sumiria. */
    .passo-corpo > strong,
    .novo-token-linha > strong { flex: 1 1 100%; }
    .form-token { flex-wrap: wrap; }
    .form-token input { flex: 1 1 100%; }
    .form-token .botao { flex: 1 1 100%; }
}

/* Nenhum campo abaixo de 16px no celular.
   O Safari do iPhone dá zoom sozinho ao focar um campo com letra menor que isso,
   e a página fica maior que a tela: solta, deslocando na horizontal e com as
   laterais cortadas. Não há como desligar esse zoom sem também proibir a pessoa
   de ampliar a página com os dedos — o que seria pior. A saída é a letra. */
@media (max-width: 860px) {
    input, select, textarea { font-size: 16px; }
}

/* ---------- conversa: cabeçalho compacto ---------- */

.chat-identidade { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat-identidade h1 { margin: 0; font-size: 22px; line-height: 1.2; }

/* Medidor de completude: um anel com a porcentagem no meio, no lugar da barra
   com título, valor, trilho e lista do que falta — quatro linhas viraram 44px
   num canto. O que falta continua acessível na dica do mouse. */
.medidor { position: relative; flex: 0 0 auto; width: 44px; height: 44px; }
.medidor svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.medidor circle { fill: none; stroke-width: 3.6; }
/* O trilho precisa ser visível: sem o círculo completo atrás, um arco de 15%
   parece um risco solto em vez de um medidor. */
.medidor-trilho { stroke: var(--borda); }
.medidor-arco {
    stroke: var(--ok);
    stroke-linecap: round;
    /* Sem valor inicial o anel nasce cheio e encolhe: o JS escreve os dois na
       primeira atualização, que acontece no carregamento. */
    stroke-dasharray: 97.4;
    stroke-dashoffset: 97.4;
    transition: stroke-dashoffset .6s ease, stroke .3s ease;
}
.medidor[data-nivel="baixo"] .medidor-arco { stroke: var(--erro); }
.medidor[data-nivel="medio"] .medidor-arco { stroke: var(--destaque); }
.medidor-valor {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--texto-suave);
}

/* Botão de pausar: estreito, na cor do aviso azul que ele substituiu — o rótulo
   diz o que o aviso dizia em quatro linhas. */
.botao-pausar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--info-borda);
    border-radius: 7px;
    background: var(--info-fundo);
    color: var(--info-texto);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.botao-pausar:hover { background: var(--info-fundo); border-color: var(--info-forte); color: var(--info-texto); }
.botao-pausar svg { width: 9px; height: 11px; fill: currentColor; flex: 0 0 auto; }

/* A etapa passou para dentro da conversa, no centro da linha. Só a cor da letra,
   sem fundo: a etiqueta pesava demais para um dado de referência. */
.msg-etapa {
    justify-self: center;
    color: var(--destaque);
    font-size: 11.5px;
    letter-spacing: .4px;
    white-space: nowrap;
}

.autor-quem { white-space: nowrap; }




/* A conversa sobe: a barra que ficava entre o cabeçalho e ela foi embora, e o
   que restou dela só aparece quando há algo a mostrar. */
.barra-conversa:empty { display: none; }
.chat-area { margin-top: 10px; }

@media (max-width: 600px) {
    .chat-identidade h1 { font-size: 18px; }
    .medidor, .medidor svg { width: 38px; height: 38px; }
    .botao-pausar { padding: 6px 10px; font-size: 12.5px; }
}

/* Espera dentro da área de escrita: o desenho cobre o campo enquanto a resposta
   não chega, centrado, e some quando ela chega. */
/* `display` declarado aqui vence o `hidden` do HTML, que só funciona porque o
   navegador aplica `display: none` — e regra de autor ganha da do navegador.
   Sem a linha do `[hidden]` abaixo, a caixa da espera fica visível o tempo todo,
   como um retângulo vazio sobre o campo. */
.area-espera[hidden] { display: none; }
/* A espera flutua por cima da tela, presa ao centro da janela.
   Fora do fluxo do layout: nada é escondido, nada muda de lugar e nada pisca
   quando a resposta chega — trocar o campo pelo desenho tirava o foco de quem
   estava lendo. `pointer-events: none` deixa o clique passar direto para o que
   está embaixo, então a conversa continua rolável durante a espera. */
/* Presa ao centro da janela: some a dependência do campo, e a peça aparece
   sempre no mesmo lugar, independentemente de onde a página está rolada. */
.area-espera {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    pointer-events: none;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    /* Largura FIXA, não máxima: com `max-width` a caixa encolhia nas frases
       curtas e crescia nas longas, e o spinner escorregava para os lados a cada
       troca de frase. O que não muda de tamanho não dança. */
    width: min(300px, 80vw);
    box-sizing: border-box;

    /* Quadro branco opaco, sem borda: quem separa a peça do texto atrás é a
       sombra, que sugere altura em vez de desenhar um contorno. Nada é
       escondido — o quadro flutua acima da página e o clique atravessa. */
    background: var(--superficie);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(15, 61, 82, .18);
}
.area-espera .spinner-ia { min-height: 0; padding: 0; gap: 8px; }
.area-espera .spinner-palco { width: 56px; height: 56px; }
.area-espera .spinner-cerebro { width: 18px; height: 18px; }
.area-espera .eletron { width: 5px; height: 5px; }
/* Duas linhas sempre reservadas, mesmo quando a frase ocupa uma.
   A regra geral do spinner já fazia isso; aqui um `min-height: 0` a anulava, e a
   caixa pulava de altura a cada troca — que é o que se via como "dançando".
   O cálculo acompanha o corpo e a entrelinha desta tela, não os da outra. */
.area-espera .spinner-frase {
    font-size: 12.5px;
    min-height: calc(2 * 1.5 * 12.5px);
    color: var(--texto-suave);
}



/* ---------- barra de ações da conversa ----------
   Os três controles (anexar, navegar, enviar) tinham medidas próprias e ficavam
   desalinhados. Aqui eles compartilham altura, raio e tipografia; o que muda
   entre eles é só a cor, que é o que deve distinguir ação principal de apoio. */

.chat-barra { gap: 10px; }

.chat-barra .botao-mini,
.chat-barra .botao {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    line-height: 1;
}

/* Anexar: contorno âmbar sobre fundo claro — ação de apoio, mas convidativa. */
.chat-barra .botao-mini.anexar {
    border-color: var(--destaque);
    background: var(--alerta-fundo);
    color: var(--alerta-texto);
}
.chat-barra .botao-mini.anexar:hover { background: var(--alerta-fundo-forte); border-color: var(--alerta-borda-forte); color: var(--alerta-texto); }

/* Desligado: nada de fundo cinza, que parecia sujeira ao lado dos coloridos.
   Só o contorno tracejado e a letra apagada — lê-se "existe, mas não agora". */
.chat-barra .botao-mini.anexar.desligado {
    border: 1px dashed var(--borda);
    background: transparent;
    color: var(--texto-suave);
    opacity: .6;
    cursor: default;
    pointer-events: none;
}

/* Setas: quadradas, na mesma altura, coladas uma na outra. */
.navegacao-par { display: inline-flex; }
.chat-barra .navegacao-par .botao-mini {
    width: 38px;
    padding: 0;
    border-color: var(--borda);
    color: var(--primaria-texto);
    background: var(--superficie);
}
.navegacao-par .botao-mini:first-child { border-radius: 8px 0 0 8px; }
.navegacao-par .botao-mini:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.chat-barra .navegacao-par .botao-mini:hover:not(:disabled) {
    border-color: var(--primaria-clara);
    background: var(--superficie-2);
    z-index: 1;
}
.chat-barra .navegacao-par .botao-mini:disabled {
    color: var(--borda);
    background: var(--superficie);
    cursor: default;
    opacity: 1;   /* a cor já diz o estado; opacidade por cima apagaria a seta */
}

.seta svg { width: 16px; height: 16px; display: block; }
.seta svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Enviar: a única ação preenchida da barra. */
.chat-barra .botao-enviar { padding: 0 22px; }

/* O anexar empurra os outros dois para a direita, que é onde a mão espera
   encontrar quem faz a conversa andar. */
.chat-barra .anexar { margin-right: auto; }

/* O limite de tamanho abaixo do botão de anexar: letra miúda, para informar sem
   competir com a ação. */
.anexar-grupo { display: inline-flex; flex-direction: column; gap: 3px; margin-right: auto; }
.anexar-limite { font-size: 11.5px; color: var(--texto-suave); white-space: nowrap; }
/* O empurrão para a direita passou para o grupo. */
.chat-barra .anexar { margin-right: 0; }

/* Cursor da digitação da resposta: um traço vertical que pisca, como o de um
   editor de texto. Some sozinho quando o texto termina. */
.cursor-digita {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: var(--primaria-clara);
    animation: pisca-cursor 1s steps(2, start) infinite;
}
@keyframes pisca-cursor { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor-digita { display: none; } }

/* Acréscimo de consultas na linha do usuário (painel de administração). */
.form-acrescentar { display: inline-flex; align-items: center; gap: 4px; }
.form-acrescentar input[type="number"] { width: 4.2em; margin: 0; padding: 4px 6px; font-size: 13px; }
@media (max-width: 600px) {
    .form-acrescentar input[type="number"] { font-size: 16px; } /* sem zoom no iPhone */
}

/* Uso acumulado por fornecedor (painel). Números alinhados à direita, em
   algarismos de largura igual, para comparar coluna a coluna; a linha Total
   em negrito e separada. */
.tabela-uso th.num, .tabela-uso td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-uso tr.total td { font-weight: 700; border-top: 2px solid var(--borda); }
.tabela-uso .em-reais { font-size: 12.5px; color: var(--texto-suave); font-weight: 400; }
.tabela-uso { margin-bottom: 14px; }

/* Parâmetros da IA: lembrete do padrão de produção (27/10/2026) */
.padrao-ia {
    margin: 0; align-self: center;
    font-size: 13px; color: var(--texto-suave);
    padding: 6px 10px; border-radius: 6px;
    border: 1px solid var(--borda);
}
.padrao-ia strong { color: var(--texto); }
.padrao-ia.fora {
    background: var(--alerta-fundo); border-color: var(--alerta-borda-forte); color: var(--alerta-texto);
}
.padrao-ia.fora strong { color: var(--alerta-texto); }
.padrao-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.padrao-acoes form { margin: 0; }
.tabela-uso td.vazio { text-align: center; font-size: 12.5px; color: var(--texto-suave); font-style: italic; white-space: normal; }
/* Com a coluna de tempo, os títulos inteiros numa linha empurravam a última
   coluna para fora; quebrando, a tabela cabe sem rolagem lateral. */
.tabela-uso th.num { white-space: normal; vertical-align: bottom; }
.tabela-uso td:first-child { min-width: 9.5em; }

/* Botão "Gerar PDF" no fim da janela "Saiba mais" (28/10/2026). */
.tec-pdf { margin: 18px 0 0; text-align: center; }
.tec-pdf .botao { display: inline-block; text-decoration: none; }