/* Painel G5 — folha única, sem framework externo.
   Sem CDN de propósito: a página carrega igual se a VPS estiver sem saída pra internet,
   e não há dependência de terceiro servindo arquivo no navegador de quem acessa. */

:root {
    --fundo: #f6f7f9;
    --superficie: #ffffff;
    --borda: #e3e6ea;
    --texto: #1c2126;
    --texto-apoio: #6b7480;
    --acento: #1f5fa9;

    /* Tom claro para fundo de destaque e um azul mais fechado para o texto sobre ele:
       o próprio --acento sobre --acento-fundo não alcançaria contraste suficiente. */
    --acento-fundo: #eaf1fa;
    --acento-texto: #17457c;

    /* Cores de severidade validadas com o verificador de paleta do projeto (OKLab):
       faixa de luminosidade, piso de croma, separação sob daltonismo (deuteranopia,
       protanopia, tritanopia) e contraste com a superfície. Não altere por gosto sem
       revalidar — a versão anterior tinha Aviso e Erro a ΔE 0.5 em deuteranopia e 7.9 em
       visão normal, ou seja, indistinguíveis até para quem vê todas as cores.

       ERRO É VIOLETA de propósito, e não laranja. No domínio deste painel, "Erro" significa
       "não consegui verificar" — uma lacuna de observabilidade, diferente em NATUREZA dos
       outros, não em grau. Empilhar quatro níveis em amarelo→laranja→vermelho colocava três
       deles em hues vizinhos; tirar o Erro dessa sequência resolveu a separação e ficou mais
       honesto com o significado. */
    --critico: #a8261a;
    --critico-fundo: #fbeae8;
    --erro: #6b4fa8;
    --erro-fundo: #f0ecf9;
    --aviso: #a8871f;
    --aviso-fundo: #f9f2df;
    --ok: #12876f;
    --ok-fundo: #e6f4f1;

    /* --- Identidade G5 -----------------------------------------------------
       Cores tiradas do próprio logotipo: verde #8dab49 e cinza #57565a.

       O verde da marca NÃO é usado como cor de estado, e isso não é cautela
       exagerada — foi medido. Nenhum tom derivado dele alcança a separação
       mínima contra a paleta de severidade sob daltonismo: os claros colidem
       com Aviso (ΔE 3–6 em deuteranopia) e os escuros com Crítico e Erro
       (ΔE 0,7–7,8), contra um piso real de ~12, que é o que as próprias
       severidades mantêm entre si.

       Então o verde fica onde a cor é IDENTIDADE e não INFORMAÇÃO: régua do
       topo, logotipo, seção ativa do menu, botão principal e anel de foco. Em
       nenhum desses casos alguém precisa ler a cor para saber o que a coisa é —
       o botão tem rótulo, a aba tem nome, o foco tem posição.

       A linha do gráfico de tendência continua AZUL de propósito: ali o traço é
       dado, dividindo a tela com marcadores de severidade, e é o único lugar do
       painel em que a cor carrega informação sozinha. */
    --marca-verde: #8dab49;

    /* Verde escurecido até passar 4,5:1 com texto branco em cima (4,73:1). */
    --marca-botao: #657b34;
    --marca-botao-texto: #ffffff;
    --marca-botao-hover: #5c702f;

    /* Usado no anel de foco: 4,73:1 contra a superfície, acima dos 3:1 que a
       WCAG pede para elemento de interface. */
    --marca-foco: #657b34;

    --marca-cinza: #57565a;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fundo: #14181d;
        --superficie: #1b2027;
        --borda: #2b323b;
        --texto: #e8ebee;
        --texto-apoio: #98a2ae;
        --acento: #6aa9e9;
        --acento-fundo: #17273a;
        --acento-texto: #a9cef4;

        /* Modo escuro é uma ESCOLHA validada contra a superfície escura, não a inversão
           automática do claro. A faixa de luminosidade aceitável aqui (L 0.48–0.67) é mais
           estreita e mais baixa que a do tema claro (0.43–0.77): as cores "claras" que eu
           havia escolhido antes ficavam fora dela. */
        --critico: #c4483a;
        --critico-fundo: #331916;
        --erro: #9878dc;
        --erro-fundo: #241f38;
        --aviso: #b08e24;
        --aviso-fundo: #2e2712;
        --ok: #0f9a86;
        --ok-fundo: #0e2a26;

        /* Identidade no tema escuro: o verde clareia para continuar visível, e o
           botão inverte — verde claro com texto escuro (7,95:1), porque texto
           branco sobre verde escuro não alcançaria contraste aqui. */
        --marca-verde: #9ab855;
        --marca-botao: #9ab855;
        --marca-botao-texto: #14181d;
        --marca-botao-hover: #a7c463;
        --marca-foco: #9ab855;
        --marca-cinza: #b9bcc2;
    }
}

* { box-sizing: border-box; }

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

    /* Coluna da altura da janela: é o que permite ao rodapé descer até o fim da tela em
       página curta, com um margin-top automático, sem posição fixa. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Estrutura ------------------------------------------------------------ */

/* Régua verde no alto da página: é o gesto de identidade mais forte que cabe sem
   competir com nada — área grande, nenhuma informação dependendo dela. */
.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 60px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    border-top: 3px solid var(--marca-verde);
}

.marca {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--texto);
    text-decoration: none;
}

/* Separado do logotipo por um traço fino: deixa claro que "Painel" é o nome do sistema
   e não parte da marca, sem precisar de mais texto para explicar. */
.marca-texto {
    font-weight: 600;
    font-size: 15px;
    padding-left: 11px;
    border-left: 1px solid var(--borda);
    color: var(--marca-cinza);
}


/* --- Logotipo --------------------------------------------------------------

   São DOIS arquivos, e a razão é aritmética. Na arte vertical, a palavra "SOLUÇÕES" ocupa
   9,3% da altura do logotipo. Numa barra de 60px, com o logotipo em 36px, isso dá 3,3px de
   letra — nada que alguém leia, e ainda por cima uma mancha borrada embaixo da marca. Era o
   mesmo problema da arte horizontal, só que por outro caminho: lá a palavra é pequena porque
   a proporção é larga; aqui seria pequena porque a barra é baixa.

   Então cada lugar recebe a peça que cabe nele:

   * `marca-g5.png` — só o G5, na barra do topo. Aparado do arquivo vertical, sem a palavra.
     Quem é a empresa continua dito no `alt` e no rodapé de toda tela.
   * `logotipo.png` — o lockup inteiro, grande, na tela de login. Ali há altura sobrando, e a
     palavra sai com uns 13px: legível como a marca foi desenhada para ser.

   Os dois são recortes do MESMO arquivo original (`logotipo-g5-v.png` do Marketing), então
   não há duas versões da marca podendo divergir com o tempo. Se a arte for trocada, os
   recortes precisam ser refeitos juntos — as proporções abaixo vêm deles.

   Nos dois casos o fundo é transparente e o "5" é cinza escuro, que sumiria contra a
   superfície do tema escuro. Ali a arte ganha uma placa clara atrás — solução comum, e que
   preserva o logotipo como a marca o define em vez de recolori-lo por conta própria. */

.marca-g5 {
    height: 36px;
    width: auto;
    display: block;
}

.logotipo {
    height: auto;
    max-width: 100%;
    display: block;
}

.cartao-login .logotipo {
    width: 180px;
    margin: 0 auto 20px;
}

@media (prefers-color-scheme: dark) {
    .marca-g5,
    .logotipo {
        background: #fff;
        padding: 5px 9px;
        border-radius: 8px;
    }
}

/* O `margin-inline: auto` é o que centraliza o conteúdo no espaço que sobra ao lado do menu.
   Sem ele — como ficou quando a barra horizontal virou lateral — o conteúdo cola na lateral e
   deixa todo o vazio à direita, o que numa tela larga faz a página parecer torta. */
.conteudo {
    flex: 1;
    min-width: 0;
    max-width: 1180px;
    margin-inline: auto;
    padding: 28px 28px 60px;
}

/* --- Rodapé ---------------------------------------------------------------
   Atravessa a página inteira, abaixo do menu e do conteúdo, e por isso o centro dele é o
   centro da tela — não o centro do que sobrou ao lado da lateral.

   `margin-top: auto` dentro de uma coluna que ocupa a altura da janela: em página curta ele
   desce até o fim da tela em vez de flutuar no meio, e em página longa fica depois do
   conteúdo, como rodapé de documento. Sem posição fixa, que roubaria altura útil em toda
   tela para repetir uma informação que ninguém precisa ler duas vezes. */
.rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 18px 24px;
    border-top: 1px solid var(--borda);
    background: var(--superficie);
    color: var(--texto-apoio);
    font-size: 12.5px;
    text-align: center;
}

.rodape strong { color: var(--marca-cinza); font-weight: 650; }
.rodape-separador { opacity: .5; }

h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 650;
}

.apoio { color: var(--texto-apoio); font-size: 13px; }

code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 12.5px;
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: 4px;
    padding: 1px 5px;
}

/* --- Navegação ------------------------------------------------------------ */

.trilha { margin-bottom: 14px; font-size: 13px; color: var(--texto-apoio); }
.trilha a { color: var(--acento); text-decoration: none; }
.trilha a:hover { text-decoration: underline; }

.link-forte { color: var(--texto); font-weight: 600; text-decoration: none; }
.link-forte:hover { color: var(--acento); text-decoration: underline; }

.filtros { display: flex; gap: 8px; margin: 18px 0 14px; flex-wrap: wrap; }

.filtro {
    padding: 5px 12px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto-apoio);
    font-size: 13px;
    text-decoration: none;
}

.filtro:hover { color: var(--texto); }

.filtro.ativo {
    background: var(--acento);
    border-color: var(--acento);
    color: #fff;
}

/* --- Tabela --------------------------------------------------------------- */

.tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 10px;
    overflow: hidden;
    font-size: 14px;
}

.tabela th {
    text-align: left;
    padding: 10px 14px;
    background: var(--fundo);
    border-bottom: 1px solid var(--borda);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-apoio);
}

.tabela td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--borda);
    vertical-align: top;
}

.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--fundo); }

.linha-silenciosa { background: var(--critico-fundo); }
.linha-silenciosa:hover { background: var(--critico-fundo); }

/* Detalhe e nome de objeto podem ser longos (mensagem de event log, DN do AD).
   Sem limite, uma linha só espalha a tabela inteira e some com as demais colunas. */
.celula-detalhe { max-width: 420px; }
.celula-item { max-width: 260px; word-break: break-word; }

.celula-item .apoio {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* --- Etiquetas de severidade ---------------------------------------------- */

.etiqueta {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.sev-critico { background: var(--critico-fundo); color: var(--critico); }
.sev-erro    { background: var(--erro-fundo);    color: var(--erro); }
.sev-aviso   { background: var(--aviso-fundo);   color: var(--aviso); }
.sev-ok      { background: var(--ok-fundo);      color: var(--ok); }

.sev-critico-texto { color: var(--critico); font-weight: 600; }
.sev-erro-texto    { color: var(--erro);    font-weight: 600; }
.sev-aviso-texto   { color: var(--aviso);   font-weight: 600; }

/* Etiquetas de ESTADO, que é coisa diferente de severidade: "Ativo", "Revogado", "Concluída",
   "não confirmado". Reaproveitam a paleta da severidade porque a leitura é a mesma — verde
   passou, amarelo pede atenção, vermelho falhou — mas mantêm nome próprio, senão um dia alguém
   mexe na cor de severidade e muda junto o significado de "Pausado".

   Existiam sendo usadas em oito telas SEM estar definidas aqui: renderizavam como pílula cinza,
   sem cor nenhuma. A informação nunca se perdeu porque toda etiqueta carrega texto — que é
   exatamente a razão de a regra de nunca depender só de cor existir. */

.etiqueta-ok      { background: var(--ok-fundo);      color: var(--ok); }
.etiqueta-aviso   { background: var(--aviso-fundo);   color: var(--aviso); }
.etiqueta-critico { background: var(--critico-fundo); color: var(--critico); }

.etiqueta-neutra {
    background: var(--fundo);
    color: var(--texto-apoio);
    border: 1px solid var(--borda);
}

.etiqueta-simulacao {
    background: var(--fundo);
    color: var(--texto-apoio);
    border: 1px dashed var(--borda);
}

.celula-execucao {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    text-decoration: none;
    color: inherit;
}

.contagens { display: flex; gap: 8px; font-size: 12.5px; }

/* --- Blocos --------------------------------------------------------------- */

.ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 18px 0;
    padding: 16px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 10px;
}

.ficha dt { font-size: 12px; color: var(--texto-apoio); margin-bottom: 3px; }
.ficha dd { margin: 0; font-size: 14px; }

.alerta {
    padding: 11px 14px;
    border-radius: 8px;
    margin: 14px 0;
    font-size: 14px;
}

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

/* --- Cabeçalho com usuário ------------------------------------------------- */

.topo-esquerda, .topo-direita { display: flex; align-items: center; gap: 18px; }

.usuario-atual {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-decoration: none;
    color: var(--texto);
    font-size: 13.5px;
}

.usuario-atual:hover { color: var(--acento); }

/* Atalho de teclado: primeiro elemento focável da página, visível só ao receber foco.
   Sem ele, quem navega por teclado percorre o menu inteiro a cada troca de página. */
.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 10px 16px;
    background: var(--acento);
    color: #fff;
    z-index: 10;
}

.pular-para-conteudo:focus { left: 0; }

/* --- Formulários ----------------------------------------------------------- */

.formulario-linha {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 14px 0;
    padding: 16px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 10px;
}

.formulario-linha label,
.ficha-edicao label,
.cartao-login label {
    display: block;
    font-size: 13px;
    color: var(--texto-apoio);
    margin-bottom: 5px;
}

.formulario-linha input,
.formulario-linha select,
.ficha-edicao input,
.ficha-edicao select {
    padding: 9px 11px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo);
    color: var(--texto);
    font-size: 14px;
    min-width: 200px;
}

.ficha-edicao {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 16px 0;
    padding: 18px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 10px;
}

.campo-checkbox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.campo-checkbox label { margin: 0; color: var(--texto); font-size: 14px; }
.campo-checkbox input { min-width: 0; width: 16px; height: 16px; }
.campo-checkbox .apoio { flex-basis: 100%; margin: 2px 0 0; }

.carteira {
    margin: 16px 0;
    padding: 18px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 10px;
}

.carteira legend { font-size: 13px; color: var(--texto-apoio); padding: 0 6px; }

.lista-checkbox {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.botao-auto { width: auto; padding: 10px 22px; }

h2 { font-size: 17px; font-weight: 650; margin: 28px 0 8px; }

.explicacao-perfis {
    max-width: 780px;
    line-height: 1.6;
    margin-top: -4px;
}

/* Senha provisória: monoespaçada e selecionável com um duplo clique, porque ela vai ser
   copiada e repassada à pessoa uma única vez. */
.senha-provisoria {
    font-size: 15px;
    padding: 3px 8px;
    user-select: all;
}

.linha-inativa { opacity: .55; }

/* --- Situação da ocorrência ------------------------------------------------- */
/* Cores distintas das de severidade de propósito: são duas dimensões diferentes
   ("quão grave é" x "em que ponto do fluxo está") e confundi-las engana o leitor.
   Toda etiqueta traz texto — cor nunca é o único portador da informação. */

.sit-aberta     { background: var(--critico-fundo); color: var(--critico); }
.sit-tratamento { background: var(--acento-fundo);  color: var(--acento-texto); }
.sit-validacao  { background: var(--aviso-fundo);   color: var(--aviso); }
.sit-validada   { background: var(--ok-fundo);      color: var(--ok); }
.sit-devolvida  { background: var(--erro-fundo);    color: var(--erro); }
.sit-resolvida  { background: var(--fundo);         color: var(--texto-apoio);
                  border: 1px solid var(--borda); }

.contador {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    margin-left: 5px;
    border-radius: 999px;
    background: var(--aviso);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* --- Orientação para o técnico ---------------------------------------------- */

.orientacao {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.orientacao-bloco {
    padding: 16px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 10px;
}

.orientacao-bloco h2 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-apoio);
}

.orientacao-bloco p { margin: 0; line-height: 1.55; }

/* O próximo passo é o que o analista precisa ler primeiro: recebe destaque estrutural,
   não só de cor, para continuar evidente em impressão e em leitor de tela. */
.orientacao-bloco.destaque {
    border-left: 4px solid var(--acento);
    background: var(--acento-fundo);
}

.orientacao-bloco.destaque h2 { color: var(--acento-texto); }

.alerta-cuidado {
    background: var(--erro-fundo);
    color: var(--erro);
    border-left: 4px solid var(--erro);
}

.detalhe-tecnico {
    margin: 8px 0 0;
    padding: 14px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 10px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Ações e histórico ------------------------------------------------------ */

.caixa-acao {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px;
    margin: 12px 0;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 10px;
}

.caixa-acao label {
    display: block;
    font-size: 13px;
    color: var(--texto-apoio);
    margin-bottom: 5px;
}

.caixa-acao textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo);
    color: var(--texto);
    font: inherit;
    font-size: 14px;
    resize: vertical;
}

.caixa-acao .apoio { margin: 4px 0 8px; }

.historico {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    border-left: 2px solid var(--borda);
}

.historico li {
    position: relative;
    padding: 0 0 18px 18px;
}

.historico li::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--borda);
}

.historico-cabecalho {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
}

/* --- Gráfico de tendência --------------------------------------------------- */

.grafico {
    margin: 12px 0 0;
    padding: 16px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 10px;
}

.grafico-svg { width: 100%; height: auto; display: block; }

/* Grade e eixos recessivos: orientam a leitura sem competir com os dados. */
.grafico-grade { stroke: var(--borda); stroke-width: 1; }

.grafico-rotulo-eixo {
    fill: var(--texto-apoio);
    font-size: 11px;
    font-family: system-ui, sans-serif;
}

.grafico-linha {
    fill: none;
    stroke: var(--acento);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Anel na cor da superfície: separa marcadores que se sobrepõem quando duas medições
   caem quase no mesmo valor. */
.grafico-marcador-anel { fill: var(--superficie); }

.grafico-marcador.sev-critico { fill: var(--critico); }
.grafico-marcador.sev-erro    { fill: var(--erro); }
.grafico-marcador.sev-aviso   { fill: var(--aviso); }
.grafico-marcador.sev-ok      { fill: var(--ok); }

/* Rótulo veste cor de texto, nunca a cor da série: quem carrega a identidade é o marcador
   ao lado. */
.grafico-rotulo-valor {
    fill: var(--texto);
    font-size: 12px;
    font-weight: 650;
    font-family: system-ui, sans-serif;
}

.grafico figcaption { margin-top: 10px; font-size: 13px; }

.grafico-tabela { margin-top: 12px; }

.grafico-tabela summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--acento);
    padding: 4px 0;
}

.grafico-tabela .tabela { margin-top: 8px; }

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

/* Ação destrutiva sinalizada por texto e por cor, e sem destaque visual que a torne o
   caminho mais fácil da tela. */
.botao-discreto.perigo { color: var(--critico); border-color: var(--critico); }
.botao-discreto.perigo:hover { background: var(--critico-fundo); color: var(--critico); }

.sev-ok-texto { color: var(--ok); font-weight: 600; }

.historico-comentario {
    margin: 5px 0 0;
    padding: 9px 12px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 8px;
    white-space: pre-wrap;
}

.vazio {
    padding: 40px 20px;
    text-align: center;
    background: var(--superficie);
    border: 1px dashed var(--borda);
    border-radius: 10px;
    color: var(--texto-apoio);
}

/* --- Login ---------------------------------------------------------------- */

/* A área das telas de entrada (login e segundo fator). Sem barra de topo, o cartão precisa se
   centrar sozinho — na horizontal e na vertical.

   `justify-content: center` com `padding` em cima e embaixo, e não altura fixa: em janela
   baixa, ou com o teclado do celular aberto, o cartão simplesmente rola em vez de ficar com o
   botão de entrar escondido fora da tela. */
.entrada {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

/* A margem automática é para o mesmo cartão usado DENTRO do sistema (trocar senha, cadastrar
   segundo fator), onde ele fica num bloco comum e precisa se centrar por conta própria. */
.cartao-login {
    width: 100%;
    max-width: 360px;
    margin: 60px auto;
    padding: 28px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 12px;
}

/* Nas telas de entrada quem centraliza é o flex do `.entrada`, então a margem sai — senão ela
   se soma à centralização e empurra o cartão para baixo do meio. */
.entrada .cartao-login {
    margin: 0;

    /* A régua verde da identidade some junto com a barra do topo, então ela reaparece aqui: é
       o mesmo gesto de marca, no único elemento que a tela tem. */
    border-top: 3px solid var(--marca-verde);
}

.cartao-login h1 {
    justify-content: center;
    margin-bottom: 2px;
    font-size: 17px;
    color: var(--texto-apoio);
    font-weight: 600;
}
.cartao-login .apoio { text-align: center; margin-bottom: 20px; }

.cartao-login label {
    display: block;
    font-size: 13px;
    color: var(--texto-apoio);
    margin-bottom: 5px;
}

.cartao-login input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo);
    color: var(--texto);
    font-size: 14px;
    margin-bottom: 16px;
}

.cartao-login input:focus {
    outline: 2px solid var(--marca-foco);
    outline-offset: -1px;
}

.botao {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 7px;
    background: var(--marca-botao);
    color: var(--marca-botao-texto);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.botao:hover { background: var(--marca-botao-hover); }

.botao-discreto {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: transparent;
    color: var(--texto-apoio);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.botao-discreto:hover { color: var(--texto); }
.botao-discreto .icone { width: 16px; height: 16px; }

/* --- Selo do segundo fator ------------------------------------------------
   Só o ícone, porque o texto ocupava espaço no topo todo dia para dizer uma coisa que muda
   uma vez na vida da conta.

   Ícone sozinho, porém, precisa de três coisas para não virar adivinhação:
   o DESENHO muda (visto = ativo, exclamação = inativo), a COR muda, e o rótulo continua
   existindo em aria-label/title. Quem não distingue verde de vermelho lê o desenho; quem usa
   leitor de tela ouve a frase inteira. Cor sozinha nunca carrega informação neste projeto. */

.selo-2f {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 50%;
}

.selo-2f .icone { width: 19px; height: 19px; }

.selo-2f.ativo {
    color: var(--ok);
    background: var(--ok-fundo);
    border-color: var(--ok);
}

.selo-2f.inativo {
    color: var(--critico);
    background: var(--critico-fundo);
    border-color: var(--critico);
}

.selo-2f:hover { filter: brightness(.94); }
.selo-2f:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

@media (max-width: 720px) {
    .conteudo { padding: 20px 14px 40px; }
    .tabela { font-size: 13px; }
    .tabela th, .tabela td { padding: 8px 10px; }
    .celula-detalhe, .celula-item { max-width: none; }
}
/* --- Menu lateral ---------------------------------------------------------
   Dezesseis itens não cabem numa barra horizontal, e não cabiam mesmo com submenus: a barra
   tem largura fixa e o menu cresce. Menu que cresce precisa crescer para BAIXO.

   Submenu suspenso foi descartado por outra razão também: ele esconde onde a pessoa está.
   Na lateral, o item ativo fica visível junto com os vizinhos dele o tempo todo — e para
   quem não usa o sistema todo dia, isso é orientação, não enfeite. */

.corpo {
    display: flex;
    align-items: flex-start;

    /* Ocupa o que sobra entre o topo e o rodapé. Antes tinha altura mínima própria de uma
       tela inteira, o que somado ao cabeçalho empurrava o rodapé para fora da janela em
       toda página curta. */
    flex: 1;
}

.lateral {
    flex: 0 0 232px;
    width: 232px;
    padding: 16px 12px 40px;
    border-right: 1px solid var(--borda);
    background: var(--superficie);

    /* Acompanha a rolagem: com dezesseis itens, o menu não pode sumir quando a pessoa desce
       numa lista longa de ocorrências. */
    position: sticky;
    top: 60px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

.grupo-menu + .grupo-menu { margin-top: 20px; }

.titulo-grupo {
    margin: 0 0 6px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texto-apoio);
}

.item-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 1px;
    border-radius: 7px;
    color: var(--texto);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.3;
}

.item-menu:hover { background: var(--fundo); }

/* O item ativo é marcado por TRÊS coisas: barra verde, fundo e peso da fonte. Cor sozinha não
   transmite informação neste projeto — quem não distingue o verde ainda vê onde está. */
.item-menu[aria-current="page"] {
    background: var(--fundo);
    font-weight: 650;
    box-shadow: inset 3px 0 0 var(--marca-verde);
}

.item-menu[aria-current="page"] .icone { color: var(--marca-botao); }

.icone {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--texto-apoio);
}

.item-menu:hover .icone { color: var(--texto); }

.rotulo-menu {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.botao-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: transparent;
    color: var(--texto-apoio);
    cursor: pointer;
}

.botao-menu:hover { color: var(--texto); border-color: var(--marca-verde); }
.botao-menu .icone { width: 18px; height: 18px; }

/* --- Recolhido: só os ícones ---------------------------------------------
   A classe vive no <html> e é escrita pelo servidor a partir do cookie, ANTES da primeira
   pintura. Aplicá-la por script depois faria o menu aparecer largo e encolher na frente da
   pessoa a cada troca de página — que é como um detalhe pequeno vira irritação diária. */

html.menu-recolhido .lateral {
    flex-basis: 56px;
    width: 56px;
    padding-left: 8px;
    padding-right: 8px;
}

html.menu-recolhido .rotulo-menu,
html.menu-recolhido .titulo-grupo { display: none; }

html.menu-recolhido .item-menu { justify-content: center; padding-left: 8px; padding-right: 8px; }

/* Sem o rótulo, o contador não teria onde ficar sem empurrar o ícone. Vira um ponto no canto,
   e o title do link continua dizendo quantos são. */
html.menu-recolhido .contador {
    position: absolute;
    transform: translate(12px, -10px);
    min-width: 16px;
    padding: 0 4px;
    font-size: 10px;
}

html.menu-recolhido .item-menu { position: relative; }
html.menu-recolhido .grupo-menu + .grupo-menu {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--borda);
}

/* --- Tela estreita -------------------------------------------------------
   No celular a lateral vira uma faixa de ícones no topo, rolável na horizontal. Esconder o
   menu atrás de um botão obrigaria a abrir e fechar a cada navegação. */
@media (max-width: 860px) {
    .corpo { display: block; }

    .lateral {
        width: auto;
        max-height: none;
        position: static;
        display: flex;
        gap: 4px;
        overflow-x: auto;
        padding: 8px 12px;
        border-right: none;
        border-bottom: 1px solid var(--borda);
    }

    .grupo-menu { display: flex; gap: 4px; }
    .grupo-menu + .grupo-menu { margin-top: 0; }
    .titulo-grupo { display: none; }
    .rotulo-menu { display: none; }
    .item-menu { padding: 8px 10px; }
    .botao-menu { display: none; }
}


/* --- Grupo de caixas de seleção -------------------------------------------
   Usado onde uma coisa tem várias marcações ao mesmo tempo (as funções de um servidor).
   O rótulo envolve a caixa, então clicar no texto marca — numa lista de oito, acertar só o
   quadradinho de 13px é o tipo de detalhe que faz a tela parecer travada. */

.grupo-caixas {
    margin: 16px 0;
    padding: 14px 16px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--superficie);
}

.grupo-caixas legend {
    padding: 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-apoio);
}

.grupo-caixas .caixa {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 5px 0;
    cursor: pointer;
}

.grupo-caixas .caixa input { margin: 0; flex: 0 0 auto; }
.grupo-caixas .caixa .apoio { margin-left: 4px; }

.grupo-caixas > label[for] { display: block; margin-top: 10px; font-size: 13px; color: var(--texto-apoio); }

.grupo-caixas input[type="text"] {
    width: 100%;
    padding: 8px 11px;
    margin-top: 4px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo);
    color: var(--texto);
}

/* --- Cabeçalho com ação -----------------------------------------------------
   Título à esquerda, ação à direita. Usado onde a tela é uma lista e existe UMA coisa a
   fazer com ela — cadastrar cliente, por exemplo.

   `flex-wrap` porque em tela estreita o botão desce em vez de espremer o título até quebrar
   no meio da palavra. */
.cabecalho-com-acao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.cabecalho-com-acao h1 { margin-bottom: 0; }

/* Botão principal e escape, lado a lado. O "cancelar" é discreto de propósito: ele não é uma
   escolha equivalente, é a saída. */
.acoes-formulario {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

/* Campo que ocupa a linha inteira dentro de uma ficha de edição em colunas. O <select> de
   "o que medir" tem rótulos longos ("Espaço livre no volume (% livre)"), e numa coluna
   estreita eles saem cortados justamente na parte que distingue um alvo do outro. */
.campo-largo { grid-column: 1 / -1; }

/* --- Zona de risco ---------------------------------------------------------
   O bloco da exclusão de cliente. Moldura vermelha e fundo próprio para que ninguém chegue
   nele por acidente rolando a página — e o botão continua sendo o discreto de perigo, não o
   botão principal: o principal é verde e convida ao clique, que é o oposto do que se quer.

   A confirmação por nome digitado é o que segura de verdade; isto aqui só faz o olho parar. */
.zona-de-risco {
    margin: 12px 0 8px;
    padding: 18px;
    border: 1px solid var(--critico);
    border-radius: 10px;
    background: var(--critico-fundo);
}

.zona-de-risco label { display: block; margin: 16px 0 6px; font-size: 13px; }

.zona-de-risco input[type="text"] {
    width: 100%;
    max-width: 360px;
    padding: 9px 11px;
    margin-bottom: 12px;
    border: 1px solid var(--critico);
    border-radius: 7px;
    background: var(--superficie);
    color: var(--texto);
}

.lista-exclusao { margin: 6px 0 12px; padding-left: 22px; font-size: 13.5px; }
.lista-exclusao li { margin-bottom: 3px; }

/* ===========================================================================
   RELATÓRIOS IMPRESSOS
   ===========================================================================

   Impressão pelo navegador, sem gerador de PDF. É a mesma decisão do resto do projeto: sem
   dependência que dê para escrever à mão, e a página carrega igual com a VPS sem saída para a
   internet. Imprimir para PDF é um passo do navegador, não uma biblioteca a acompanhar.

   As páginas de relatório são páginas NORMAIS: dá para ler na tela, compartilhar por link e
   imprimir. O que muda na impressão é o que se esconde. */

.folha {
    max-width: 210mm;
    margin: 0 auto;
    background: var(--superficie);
    padding: 24px 28px 36px;
    border: 1px solid var(--borda);
    border-radius: 10px;
}

/* Cabeçalho do relatório: logotipo à esquerda, identificação à direita.
   A régua verde é a mesma da barra do topo do sistema — é o gesto de identidade que atravessa
   tela e papel sem depender de cor de estado. */
.cabecalho-relatorio {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 3px solid var(--marca-verde);
}

.cabecalho-relatorio .logotipo { width: 120px; }
.cabecalho-relatorio h1 { margin: 0 0 2px; font-size: 19px; }

.identificacao-relatorio { text-align: right; font-size: 12.5px; color: var(--texto-apoio); }
.identificacao-relatorio strong { color: var(--texto); font-size: 14px; }

/* Painel de números do topo — o resumo que se lê em três segundos. */
.numeros-relatorio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin: 18px 0 24px;
}

.numero-caixa {
    padding: 12px 14px;
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--marca-verde);
    border-radius: 6px;
}

.numero-caixa .valor { display: block; font-size: 26px; font-weight: 650; line-height: 1.1; }
.numero-caixa .rotulo { font-size: 11.5px; color: var(--texto-apoio); }

.assinatura-relatorio {
    margin-top: 36px;
    padding-top: 14px;
    border-top: 1px solid var(--borda);
    font-size: 11.5px;
    color: var(--texto-apoio);
}

.acoes-relatorio { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }

@media print {
    /* Papel A4 com margem que cabe em impressora doméstica e de escritório. A margem de cima
       é maior na primeira página por causa do cabeçalho do relatório. */
    @page { size: A4; margin: 14mm 12mm 16mm; }

    /* O papel é branco. O tema escuro do navegador não pode atravessar para a impressão —
       gastaria tinta e sairia ilegível. Aqui os tokens são reafirmados em claro, e é por isso
       que nenhuma cor deste projeto vive só dentro de um bloco de tema. */
    :root {
        --fundo: #ffffff;
        --superficie: #ffffff;
        --borda: #c9ced5;
        --texto: #101418;
        --texto-apoio: #4a5058;
        --critico: #8f2015;
        --critico-fundo: #f6e3e0;
        --erro: #55408a;
        --erro-fundo: #eae5f5;
        --aviso: #7e660f;
        --aviso-fundo: #f6efdb;
        --ok: #0d6b58;
        --ok-fundo: #e2f1ee;
        --marca-verde: #8dab49;
        --marca-cinza: #57565a;
    }

    /* Some tudo que é navegação: em papel, link não clica e menu não serve. */
    .topo, .lateral, .rodape, .acoes-relatorio, .pular-para-conteudo, .filtros { display: none !important; }

    body { display: block; }
    .corpo { display: block; }
    .conteudo { max-width: none; padding: 0; margin: 0; }

    .folha {
        max-width: none;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
    }

    /* Fundo de etiqueta e de caixa só sai impresso com isto — por padrão o navegador remove
       cor de fundo para economizar tinta, e aí a severidade perderia metade do sinal. O texto
       continua junto da cor, então mesmo sem isso a informação sobrevive. */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Linha de tabela não pode partir entre páginas: meia linha no fim de uma folha e metade
       na seguinte é o defeito clássico de relatório impresso. */
    tr, .numero-caixa, .bloco-achado { break-inside: avoid; page-break-inside: avoid; }
    h2, h3 { break-after: avoid; page-break-after: avoid; }

    /* O cabeçalho da tabela repete no alto de cada página. Sem isso, da segunda folha em diante
       o leitor não sabe mais o que é cada coluna. */
    thead { display: table-header-group; }

    .tabela { font-size: 10.5px; }
    .tabela th, .tabela td { padding: 5px 7px; }
    body { font-size: 11.5px; }

    a { color: var(--texto); text-decoration: none; }
}

/* Cartões da tela de relatórios: um por cliente, com os três destinos. */
.lista-relatorios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.cartao-relatorio {
    padding: 14px 16px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--marca-verde);
    border-radius: 8px;
}

.cartao-relatorio h3 { margin: 0 0 8px; font-size: 15px; }
.cartao-relatorio p { margin: 4px 0; }
.cartao-relatorio .apoio { display: block; }

/* Lista de conferência da implantação. O marcador vem do CSS e não do texto: assim o estado
   fica na classe, e leitor de tela não lê um caractere solto antes de cada linha. */
.conferencia { list-style: none; margin: 10px 0; padding: 0; }

.conferencia li {
    position: relative;
    padding: 4px 0 4px 26px;
    line-height: 1.45;
}

.conferencia li::before {
    position: absolute;
    left: 0;
    font-weight: 700;
}

.conferencia .feito::before { content: "✓"; color: var(--ok); }
.conferencia .feito { color: var(--texto-apoio); }

/* Falta não é erro: é etapa que ainda não aconteceu numa implantação em curso. Por isso o
   marcador é neutro e não vermelho — vermelho aqui ensinaria a equipe a ver alarme onde só há
   trabalho pela frente. */
.conferencia .falta::before { content: "○"; color: var(--texto-apoio); }