/* ============================================================
   unix.ia Code - Painel de Retaguarda
   CSS 100% local: sem CDN, sem fontes externas, sem imagens
   remotas. Os icones sao SVG embutidos no HTML ou caracteres.
   Tema claro e escuro (segue a preferencia do sistema).

   Sumario:
     1. Tokens de cor e medida
     2. Base e tipografia
     3. Estrutura (lateral, topo, conteudo, rodape)
     4. Cartoes e cabecalhos de secao
     5. Barra de ferramentas / filtros
     6. Botoes
     7. Tabelas (com quebra de linha e modo cartao no celular)
     8. Etiquetas
     9. Formularios
    10. Avisos
    11. Cartoes de numero
    12. Paginacao
    13. Utilitarios
    14. Tela de login
    15. Graficos
    16. Secoes recolhiveis
    17. Telas pequenas
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* superficie */
    --fundo:           #f4f6fb;
    --superficie:      #ffffff;
    --superficie-2:    #f8fafc;
    --superficie-3:    #eef1f7;
    --borda:           #e3e8f0;
    --borda-forte:     #cfd8e6;

    /* texto */
    --texto:           #16202f;
    --texto-suave:     #5b6779;

    /* marca e estados */
    --primaria:        #4f46e5;
    --primaria-escura: #4338ca;
    --primaria-suave:  #eef2ff;
    --primaria-texto:  #4338ca;

    --sucesso:         #0f9d58;
    --sucesso-suave:   #e7f7ee;
    --sucesso-texto:   #0a6f3f;

    --perigo:          #dc2626;
    --perigo-suave:    #fdecec;
    --perigo-texto:    #b3181d;

    --atencao:         #d97706;
    --atencao-suave:   #fff6e5;
    --atencao-texto:   #8a5a00;
    --atencao-borda:   #f0d9a8;

    /* lateral */
    --lateral:         #131a2b;
    --lateral-2:       #1b2440;
    --lateral-texto:   #b3bed6;

    --sombra:       0 1px 2px rgba(16, 24, 40, .05), 0 4px 16px rgba(16, 24, 40, .06);
    --sombra-forte: 0 10px 34px rgba(16, 24, 40, .16);
    --anel:         0 0 0 3px rgba(79, 70, 229, .30);
    --raio:         14px;
    --raio-p:       9px;
    --raio-mini:    7px;

    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Liberation Sans", "DejaVu Sans", Arial, sans-serif;
    --fonte-mono: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;

    /* --- apelidos usados por estilos embutidos nas paginas --- */
    --cor-fundo:        var(--fundo);
    --cor-superficie:   var(--superficie);
    --cor-borda:        var(--borda);
    --cor-texto:        var(--texto);
    --cor-texto-suave:  var(--texto-suave);
    --cor-primaria:     var(--primaria);
    --cor-primaria-esc: var(--primaria-escura);
    --cor-perigo:       var(--perigo-texto);
    --cor-perigo-esc:   #b91c1c;
    --cor-sucesso:      var(--sucesso-texto);
    --cor-cabecalho:    var(--lateral);
}

@media (prefers-color-scheme: dark) {
    :root {
        --fundo:           #0e1320;
        --superficie:      #161d2e;
        --superficie-2:    #1b2436;
        --superficie-3:    #212b40;
        --borda:           #26314a;
        --borda-forte:     #3a4767;

        --texto:           #e8edf7;
        --texto-suave:     #a3b0c7;

        --primaria:        #6d68f0;
        --primaria-escura: #5a55e0;
        --primaria-suave:  #232a4d;
        --primaria-texto:  #b7b4ff;

        --sucesso:         #34d399;
        --sucesso-suave:   #12301f;
        --sucesso-texto:   #4ade9f;

        --perigo:          #f87171;
        --perigo-suave:    #3a1414;
        --perigo-texto:    #fca5a5;

        --atencao:         #fbbf24;
        --atencao-suave:   #33260c;
        --atencao-texto:   #fcd34d;
        --atencao-borda:   #5c4416;

        --lateral:         #0b1020;
        --lateral-2:       #141c33;
        --lateral-texto:   #b0bcd6;

        --sombra:       0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
        --sombra-forte: 0 12px 36px rgba(0, 0, 0, .55);
        --anel:         0 0 0 3px rgba(109, 104, 240, .45);

        --cor-perigo-esc:   #ef4444;
    }
}

/* ============================================================
   2. BASE E TIPOGRAFIA
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--fonte);
    background: var(--fundo);
    color: var(--texto);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    /* nada na pagina pode empurrar a largura para fora da tela */
    overflow-x: hidden;
}

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

h1, h2, h3, h4 { line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
h3 { font-size: 0.98rem; font-weight: 650; }
h4 { font-size: 0.86rem; font-weight: 650; color: var(--texto-suave); }

/* Foco visivel e consistente em tudo que recebe teclado. */
:focus-visible {
    outline: 2px solid var(--primaria);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--primaria); color: #fff; }

/* ============================================================
   3. ESTRUTURA
   ============================================================ */
.app { display: flex; min-height: 100vh; }

/* Link "pular para o conteudo" - so aparece com o teclado. */
.pular-conteudo {
    position: absolute; left: -9999px; top: 0; z-index: 50;
    background: var(--primaria); color: #fff;
    padding: 10px 16px; border-radius: 0 0 var(--raio-p) 0;
    font-weight: 600; text-decoration: none;
}
.pular-conteudo:focus { left: 0; }

.lateral {
    width: 236px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--lateral) 0%, var(--lateral-2) 100%);
    color: var(--lateral-texto);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.marca {
    padding: 22px 20px 18px;
    font-size: 1.06rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.marca > span { min-width: 0; overflow-wrap: anywhere; }
.marca .ponto {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: grid; place-items: center;
    font-size: 0.8rem; font-weight: 800; color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, .45);
    flex-shrink: 0;
}
.marca small {
    display: block; font-size: 0.66rem; font-weight: 500;
    color: var(--lateral-texto); letter-spacing: 0.07em; text-transform: uppercase;
}

.menu { padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu a {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px;
    border-radius: var(--raio-p);
    color: var(--lateral-texto);
    text-decoration: none;
    font-size: 0.9rem; font-weight: 500;
    transition: background .15s, color .15s;
}
.menu a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.menu a.ativo { background: var(--primaria); color: #fff; box-shadow: 0 6px 16px rgba(79, 70, 229, .38); }
.menu a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.menu a svg { width: 18px; height: 18px; flex-shrink: 0; }
.menu a .rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.usuario-lateral {
    margin: 12px; padding: 12px;
    background: rgba(255, 255, 255, .06);
    border-radius: var(--raio-p);
    font-size: 0.8rem;
    min-width: 0;
}
.usuario-lateral .nome {
    color: #fff; font-weight: 600; display: block;
    overflow-wrap: anywhere;
}
.usuario-lateral .papel {
    color: var(--lateral-texto); font-size: 0.68rem;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.usuario-lateral a {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 9px; color: #ff9d9d; text-decoration: none; font-weight: 600;
}
.usuario-lateral a svg { width: 15px; height: 15px; }
.usuario-lateral a:hover { text-decoration: underline; }
/* O "Sair" e um BOTAO dentro de um formulario POST (para levar o token
   anti-CSRF), mas continua com cara de link, igual ao que era antes. */
.usuario-lateral form { margin: 0; }
.usuario-lateral button.sair {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 9px; padding: 0; border: 0; background: none;
    font: inherit; font-weight: 600; color: #ff9d9d; cursor: pointer;
}
.usuario-lateral button.sair svg { width: 15px; height: 15px; }
.usuario-lateral button.sair:hover { text-decoration: underline; }

.area { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    padding: 14px 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: sticky; top: 0; z-index: 5;
}
.topo h1 { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.015em; min-width: 0; }
.topo .servidor {
    font-size: 0.76rem; color: var(--texto-suave);
    display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.topo .bolinha {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--sucesso); box-shadow: 0 0 0 3px var(--sucesso-suave);
}

.conteudo {
    padding: 24px 28px 48px;
    max-width: 1320px;
    width: 100%;
    min-width: 0;   /* deixa o filho encolher em vez de esticar a pagina */
    flex: 1;
}

/* ============================================================
   4. CARTOES
   ============================================================ */
.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 22px;
    box-shadow: var(--sombra);
    min-width: 0;
}
/* Cartoes em sequencia ja vem espacados: dispensa style="margin-top". */
.cartao + .cartao { margin-top: 20px; }

.cabecalho-secao {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    margin-bottom: 18px; padding-bottom: 14px;
    border-bottom: 1px solid var(--borda);
}
.cabecalho-secao h2 {
    font-size: 1.13rem; font-weight: 650; letter-spacing: -0.015em;
    display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
    min-width: 0;
}
/* Complemento discreto ao lado do titulo (contagem, intervalo, etc.). */
.cabecalho-secao h2 .complemento,
.subtitulo-secao {
    font-size: 0.8rem; font-weight: 500; color: var(--texto-suave); letter-spacing: 0;
}
.subtitulo-secao { display: block; margin: -8px 0 16px; }

/* ============================================================
   5. BARRA DE FERRAMENTAS / FILTROS
   ============================================================ */
.barra-ferramentas {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    min-width: 0;
}
.barra-ferramentas + .barra-ferramentas,
.barra-ferramentas.espacada { margin-bottom: 16px; }

/* Formulario de filtro: campos pequenos, alinhados, que quebram sozinhos. */
.filtros {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    min-width: 0;
}
.filtros input[type="search"],
.filtros input[type="text"],
.filtros input[type="date"],
.filtros input[type="number"],
.filtros select {
    padding: 8px 11px;
    font-size: 0.84rem;
    border-radius: var(--raio-mini);
    width: auto;
    min-width: 0;
}
.filtros input[type="search"] { min-width: 220px; flex: 1 1 220px; max-width: 340px; }
.filtros label {
    font-size: 0.78rem; font-weight: 600; color: var(--texto-suave);
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.filtros input[type="checkbox"] { width: auto; accent-color: var(--primaria); }
.filtros .separador { color: var(--borda-forte); }

/* Empurra o elemento para a direita dentro de uma barra flexivel. */
.empurrar { margin-left: auto; }

/* ============================================================
   6. BOTOES
   ============================================================ */
.botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--raio-p);
    font-size: 0.87rem; font-weight: 600;
    font-family: inherit; line-height: 1.2;
    cursor: pointer; text-decoration: none;
    color: #fff; background: var(--primaria);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
    transition: background .15s, transform .06s, box-shadow .15s, border-color .15s;
    white-space: nowrap;
}
.botao:hover { background: var(--primaria-escura); box-shadow: 0 4px 12px rgba(79, 70, 229, .3); }
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.botao svg { width: 16px; height: 16px; flex-shrink: 0; }

.botao-neutro {
    background: var(--superficie); color: var(--texto);
    border-color: var(--borda-forte); box-shadow: none;
}
.botao-neutro:hover { background: var(--superficie-2); border-color: var(--texto-suave); box-shadow: none; color: var(--texto); }

.botao-perigo { background: var(--perigo); }
.botao-perigo:hover { background: var(--cor-perigo-esc); box-shadow: 0 4px 12px rgba(220, 38, 38, .3); }

/* Contorno vermelho: acao destrutiva secundaria (dentro de uma linha). */
.botao-perigo-claro {
    background: var(--superficie); color: var(--perigo-texto);
    border-color: var(--perigo); box-shadow: none;
}
.botao-perigo-claro:hover { background: var(--perigo-suave); color: var(--perigo-texto); box-shadow: none; }

.botao-mini { padding: 5px 10px; font-size: 0.77rem; border-radius: var(--raio-mini); gap: 5px; }
.botao-mini svg { width: 14px; height: 14px; }

.botao-largo { width: 100%; }

/* Estado desligado - use em vez de style="opacity:.45; pointer-events:none". */
.botao:disabled,
.botao.desativado,
.botao[aria-disabled="true"] {
    opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none;
}

/* ============================================================
   7. TABELAS
   ============================================================ */
.tabela-envolucro {
    overflow-x: auto;               /* a rolagem lateral fica AQUI, nunca na pagina */
    overflow-y: hidden;
    max-width: 100%;
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
    background: var(--superficie);
    -webkit-overflow-scrolling: touch;
}
/* Variacao com cabecalho fixo para listas longas. */
.tabela-envolucro.tabela-fixa { overflow-y: auto; max-height: 70vh; }
.tabela-envolucro.tabela-fixa thead th { position: sticky; top: 0; z-index: 2; }

table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }

/* Por padrao a celula QUEBRA A LINHA (nome, e-mail, modelo, descricao).
   Quem nao pode quebrar (numero, data, acoes) usa as classes .col-* abaixo. */
th, td {
    text-align: left;
    padding: 11px 14px;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
th {
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
    vertical-align: bottom;
}
tbody tr { border-top: 1px solid var(--borda); }
tbody tr:first-child { border-top: none; }
tbody tr:nth-child(even) > td { background: var(--superficie-2); }
tbody tr:hover > td { background: var(--primaria-suave); }
td strong { font-variant-numeric: tabular-nums; }
td a { text-decoration: none; }
td a:hover { text-decoration: underline; }
tfoot td { font-weight: 700; background: var(--superficie-2); border-top: 2px solid var(--borda-forte); }

/* --- larguras e alinhamentos por tipo de coluna --- */
.col-cod   { white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.col-num   { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
th.col-num { text-align: right; }
.col-data  { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--texto-suave); }
/* Sem nowrap: esta coluna costuma ter DUAS etiquetas (situacao + tipo) e,
   proibidas de empilhar, elas sozinhas pediam 212px e faziam a tabela
   estourar a largura da tela em 1280px - a queixa original do dono. */
.col-etiqueta { white-space: normal; width: 1%; }
.col-acoes { white-space: nowrap; width: 1%; text-align: right; }
.col-larga { min-width: 190px; }
/* Nome de modelo e TEXTO longo, nao rotulo curto: dentro da coluna media ele
   pode quebrar. Sem isto, "deepseek/deepseek-v4-flash" sozinho reservava
   189px e mantinha a rolagem lateral. */
.col-media .etiqueta { white-space: normal; overflow-wrap: anywhere; }
.col-media { min-width: 130px; }

/* Grupo de botoes dentro da coluna de acoes. */
.acoes-linha {
    display: flex; gap: 6px; flex-wrap: wrap;
    align-items: center; justify-content: flex-end;
}
.acoes-linha form { display: inline-flex; }
td .botao-mini + .botao-mini { margin-left: 0; }

/* Linha de "nada encontrado". */
.tabela-vazia td {
    text-align: center; color: var(--texto-suave);
    padding: 30px 14px; font-size: 0.88rem;
}

/* Texto secundario dentro da celula (ex.: e-mail abaixo do nome). */
.celula-titulo { font-weight: 600; display: block; }
.celula-apoio  { display: block; font-size: 0.78rem; color: var(--texto-suave); }

/* ============================================================
   8. ETIQUETAS
   ============================================================ */
.etiqueta {
    display: inline-block; padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.etiqueta-sim     { background: var(--sucesso-suave);  color: var(--sucesso-texto);  border-color: rgba(15, 157, 88, .28); }
.etiqueta-nao     { background: var(--perigo-suave);   color: var(--perigo-texto);   border-color: rgba(220, 38, 38, .28); }
.etiqueta-info    { background: var(--primaria-suave); color: var(--primaria-texto); border-color: rgba(79, 70, 229, .25); }
.etiqueta-atencao { background: var(--atencao-suave);  color: var(--atencao-texto);  border-color: var(--atencao-borda); }
.etiqueta-neutra  { background: var(--superficie-3);   color: var(--texto-suave);    border-color: var(--borda); }

/* ============================================================
   9. FORMULARIOS
   ============================================================ */
.grade-formulario {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label {
    font-size: 0.78rem; font-weight: 650;
    color: var(--texto-suave); letter-spacing: 0.02em;
}
.campo label .obrigatorio { color: var(--perigo-texto); font-weight: 700; }
/* Campo que ocupa a linha inteira da grade. */
.campo-largo { grid-column: 1 / -1; }
/* Explicacao curta abaixo do campo. */
.dica { font-size: 0.76rem; color: var(--texto-suave); line-height: 1.45; }

/* Aparencia dos controles em qualquer lugar da pagina. A LARGURA fica
   por conta do contexto: dentro de .campo ocupa a linha toda; solto numa
   barra de filtros acompanha o conteudo. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
select,
textarea {
    padding: 10px 12px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p);
    font-size: 0.89rem; font-family: inherit; line-height: 1.4;
    background: var(--superficie); color: var(--texto);
    transition: border-color .15s, box-shadow .15s;
    max-width: 100%;
}
.campo input:not([type="checkbox"]):not([type="radio"]),
.campo select,
.campo textarea,
.largura-total { width: 100%; }
textarea { line-height: 1.55; resize: vertical; }
select { cursor: pointer; }

input:hover:not([type="checkbox"]):not([type="radio"]),
select:hover,
textarea:hover { border-color: var(--texto-suave); }

input:focus:not([type="checkbox"]):not([type="radio"]),
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primaria);
    box-shadow: var(--anel);
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--primaria); }
input:disabled, select:disabled, textarea:disabled {
    background: var(--superficie-2); color: var(--texto-suave); cursor: not-allowed;
}
input::placeholder, textarea::placeholder { color: var(--texto-suave); opacity: .75; }

/* Campo de texto longo / area tecnica. */
.campo-mono {
    font-family: var(--fonte-mono);
    font-size: 0.83rem;
    line-height: 1.5;
}

.acoes-formulario {
    margin-top: 22px; padding-top: 18px;
    border-top: 1px solid var(--borda);
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}

/* ============================================================
   10. AVISOS
   ============================================================ */
.aviso {
    padding: 13px 16px;
    border-radius: var(--raio-p);
    margin-bottom: 18px;
    font-size: 0.87rem;
    line-height: 1.5;
    border: 1px solid var(--borda);
    background: var(--superficie-2);
    color: var(--texto);
}
.aviso strong { font-weight: 700; }
.aviso :last-child { margin-bottom: 0; }
.aviso-erro    { background: var(--perigo-suave);   color: var(--perigo-texto);   border-color: rgba(220, 38, 38, .3); }
.aviso-sucesso { background: var(--sucesso-suave);  color: var(--sucesso-texto);  border-color: rgba(15, 157, 88, .3); }
.aviso-atencao { background: var(--atencao-suave);  color: var(--atencao-texto);  border-color: var(--atencao-borda); }
.aviso-info    { background: var(--primaria-suave); color: var(--primaria-texto); border-color: rgba(79, 70, 229, .28); }
/* Botoes dentro de um aviso. */
.aviso .acoes-aviso { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   11. CARTOES DE NUMERO
   ============================================================ */
.grade-totais {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.painel-total {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 15px 18px 15px 21px;
    display: flex; flex-direction: column; gap: 2px;
    position: relative; overflow: hidden;
    box-shadow: var(--sombra);
    min-width: 0;
}
.painel-total::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
}
.painel-total .rotulo-total {
    font-size: 0.69rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--texto-suave);
}
.painel-total .valor-total {
    font-size: 1.55rem; font-weight: 700;
    letter-spacing: -0.02em; color: var(--texto);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
/* Linha de apoio abaixo do numero. */
.painel-total .apoio-total,
.apoio-total { font-size: 0.78rem; color: var(--texto-suave); }
.painel-total .valor-total .fracao { font-size: 0.9rem; font-weight: 600; color: var(--texto-suave); }

/* ============================================================
   12. PAGINACAO
   ============================================================ */
.paginacao {
    margin-top: 16px;
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.paginacao .reticencias { color: var(--texto-suave); padding: 0 2px; }
.paginacao .info-pagina { margin-left: 6px; font-size: 0.8rem; color: var(--texto-suave); }

/* ============================================================
   13. UTILITARIOS
   ============================================================ */
.texto-suave  { color: var(--texto-suave); }
.texto-mini   { font-size: 0.78rem; }
.num          { font-variant-numeric: tabular-nums; }
.mono         { font-family: var(--fonte-mono); font-size: 0.86em; }
.sem-quebra   { white-space: nowrap; }
.quebrar      { overflow-wrap: anywhere; word-break: break-word; }
.valor-positivo { color: var(--sucesso-texto); }
.valor-negativo { color: var(--perigo-texto); }
/* Saldo ZERO nao e lucro nem divida: e o caso mais comum logo depois de o
   cliente gastar o que comprou. Pintar de verde (como o painel fazia) ou de
   vermelho (como as outras telas) mente nas duas direcoes. */
.valor-neutro { color: var(--texto-suave); font-weight: 600; }
.texto-direita  { text-align: right; }
.texto-centro   { text-align: center; }
.pilha { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.espaco-acima { margin-top: 20px; }
.espaco-abaixo { margin-bottom: 16px; }
/* Visivel apenas para leitores de tela. */
.oculto-visual {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================
   14. TELA DE LOGIN
   ============================================================ */
.tela-login {
    min-height: 100vh;
    display: grid; place-items: center;
    padding: 24px;
    background:
        radial-gradient(900px 500px at 15% -10%, rgba(109, 104, 240, .35), transparent 60%),
        radial-gradient(800px 500px at 110% 110%, rgba(139, 92, 246, .28), transparent 55%),
        linear-gradient(160deg, #0b1020, #16203a);
}
.caixa-login {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 18px;
    padding: 34px 30px;
    width: 100%; max-width: 390px;
    box-shadow: var(--sombra-forte);
}
.caixa-login .marca-login { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.caixa-login .marca-login .ponto {
    width: 38px; height: 38px; border-radius: 11px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: grid; place-items: center;
    color: #fff; font-weight: 800; font-size: 0.92rem;
    box-shadow: 0 6px 16px rgba(99, 102, 241, .4);
    flex-shrink: 0;
}
.caixa-login h1 { font-size: 1.14rem; font-weight: 700; letter-spacing: -0.02em; }
.caixa-login p.subtitulo { color: var(--texto-suave); font-size: 0.82rem; margin-bottom: 20px; }
.caixa-login .marca-login .subtitulo { margin: 0; }
.caixa-login .campo { margin-bottom: 14px; }
.caixa-login .botao { width: 100%; justify-content: center; margin-top: 6px; padding: 11px; }
.rodape-login { margin-top: 18px; text-align: center; font-size: 0.74rem; color: var(--texto-suave); line-height: 1.7; }
.rodape-login a { color: inherit; }

/* ============================================================
   15. GRAFICOS (SVG gerado no PHP)
   Paleta validada: separacao boa para daltonismo e contraste
   suficiente contra a superficie, nos dois temas.
   ============================================================ */
:root {
    --graf-1: #4f46e5;   /* serie A - tokens de entrada */
    --graf-2: #0d9488;   /* serie B - tokens de saida  */
    --graf-trilho: #eef1f6;
}
@media (prefers-color-scheme: dark) {
    :root {
        --graf-1: #6d68f0;
        --graf-2: #17a89b;
        --graf-trilho: #202a40;
    }
}

.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .serie-a { fill: var(--graf-1); }
.grafico .serie-b { fill: var(--graf-2); }
.grafico .trilho  { fill: var(--graf-trilho); }
.grafico .grade   { stroke: var(--borda); stroke-width: 1; }
.grafico .grade-forte { fill: var(--borda-forte); }
.grafico .eixo {
    fill: var(--texto-suave);
    font-size: 11px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}
.grafico .rotulo-barra { fill: var(--texto); font-size: 12.5px; font-family: inherit; font-weight: 500; }
.grafico .valor-barra  {
    fill: var(--texto-suave); font-size: 12px; font-family: inherit;
    font-variant-numeric: tabular-nums; font-weight: 600;
}
.grafico g:hover .serie-a,
.grafico g:hover .serie-b { filter: brightness(1.12); }
.grafico g { cursor: default; }

.grafico-vazio {
    color: var(--texto-suave);
    font-size: 0.87rem;
    padding: 26px 0;
    text-align: center;
    border: 1px dashed var(--borda);
    border-radius: var(--raio-p);
}

.legenda {
    display: flex; gap: 18px; flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 0.8rem; color: var(--texto-suave); font-weight: 600;
}
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.marca-serie { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.serie-a-cor { background: var(--graf-1); }
.serie-b-cor { background: var(--graf-2); }

.grade-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* ---------------- Rodape do sistema ---------------- */
.rodape-sistema {
    margin-top: auto;
    padding: 16px 28px;
    border-top: 1px solid var(--borda);
    background: var(--superficie);
    color: var(--texto-suave);
    font-size: 0.78rem;
    display: flex; gap: 14px;
    align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.rodape-sistema a { color: var(--texto-suave); text-decoration: none; }
.rodape-sistema a:hover { color: var(--primaria); text-decoration: underline; }

/* ============================================================
   16. SECOES RECOLHIVEIS (configuracoes)
   ============================================================ */
.secao-config {
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
    margin-bottom: 14px;
    background: var(--superficie-2);
    overflow: hidden;
}
.secao-config > summary {
    cursor: pointer;
    padding: 13px 16px;
    display: flex; align-items: center; gap: 11px;
    list-style: none;
    user-select: none;
}
.secao-config > summary::-webkit-details-marker { display: none; }
.secao-config > summary::after {
    content: "\25B8"; margin-left: auto; color: var(--texto-suave);
    transition: transform .15s;
}
.secao-config[open] > summary::after { transform: rotate(90deg); }
.secao-config[open] > summary { background: var(--superficie-3); }
.secao-config > summary:hover { background: var(--primaria-suave); }
.secao-config > summary:focus-visible { outline: 2px solid var(--primaria); outline-offset: -2px; }
.secao-config > summary .ico { font-size: 1.05rem; flex-shrink: 0; }
.secao-config > summary .texto-summary { min-width: 0; }
.secao-config > summary strong { display: block; font-size: 0.93rem; }
.secao-config > summary small { color: var(--texto-suave); font-size: 0.78rem; display: block; }
.secao-config > .grade-formulario {
    padding: 14px 16px 18px;
    background: var(--superficie);
    border-top: 1px solid var(--borda);
}

/* ============================================================
   17. TELAS PEQUENAS
   ============================================================ */

/* Notebook estreito: menos respiro nas laterais. */
@media (max-width: 1100px) {
    .conteudo { padding: 20px 20px 40px; }
    .topo { padding: 13px 20px; }
    .rodape-sistema { padding: 14px 20px; }
    .lateral { width: 208px; }
}

/* Tablet / celular deitado: a lateral vira barra horizontal. */
@media (max-width: 860px) {
    /* Sem flex-shrink:0 a marca era espremida pelo menu (flex:1) e, com o
       overflow-wrap:anywhere herdado, quebrava UMA LETRA POR LINHA: em 380px
       o cabecalho virava uma coluna de 310px de altura. */
    .marca { flex-shrink: 0; }
    .marca > span { overflow-wrap: normal; white-space: nowrap; }
    .app { flex-direction: column; }
    .lateral {
        width: 100%; height: auto; position: sticky; top: 0; z-index: 6;
        flex-direction: row; align-items: center;
        overflow-x: auto; gap: 8px; padding-right: 8px;
        border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .marca { padding: 12px 14px; }
    .marca small { display: none; }
    .menu { flex-direction: row; padding: 8px; flex: 1; }
    .menu a span.rotulo { display: none; }
    .menu a { padding: 9px 11px; }
    .usuario-lateral { margin: 8px; padding: 8px 10px; flex-shrink: 0; }
    .usuario-lateral .papel, .usuario-lateral .nome { display: none; }
    .conteudo { padding: 16px 14px 36px; }
    .cartao { padding: 18px 16px; border-radius: var(--raio-p); }
    .topo { padding: 12px 16px; position: static; }
    .topo .servidor { display: none; }
    .rodape-sistema { padding: 14px 16px; }
    .grade-graficos { grid-template-columns: 1fr; }
    .filtros input[type="search"] { max-width: none; }
}

/* Celular em pe: a tabela marcada com .tabela-cartoes vira uma lista
   de cartoes - cada linha empilhada, com o rotulo da coluna na frente.
   Exige data-rotulo="Nome da coluna" em cada <td>. */
@media (max-width: 640px) {
    body { font-size: 14.5px; }
    .conteudo { padding: 14px 11px 32px; }
    .cabecalho-secao { align-items: flex-start; flex-direction: column; }
    .barra-ferramentas, .filtros { width: 100%; }
    .filtros > * { flex: 1 1 140px; }
    .filtros .botao { flex: 0 0 auto; }
    .empurrar { margin-left: 0; }
    .grade-totais { grid-template-columns: 1fr 1fr; gap: 10px; }
    .painel-total { padding: 12px 12px 12px 16px; }
    .painel-total .valor-total { font-size: 1.3rem; }
    .acoes-formulario .botao { flex: 1 1 auto; }

    .tabela-envolucro:has(.tabela-cartoes) {
        border: none; border-radius: 0; overflow: visible; background: none;
    }
    .tabela-cartoes,
    .tabela-cartoes tbody,
    .tabela-cartoes tr,
    .tabela-cartoes td { display: block; width: 100%; }
    .tabela-cartoes thead { display: none; }
    .tabela-cartoes tbody tr {
        border: 1px solid var(--borda);
        border-radius: var(--raio-p);
        background: var(--superficie);
        margin-bottom: 12px;
        padding: 4px 0;
        box-shadow: var(--sombra);
        overflow: hidden;
    }
    .tabela-cartoes tbody tr:nth-child(even) > td,
    .tabela-cartoes tbody tr:hover > td { background: transparent; }
    .tabela-cartoes tbody td {
        display: grid;
        grid-template-columns: 38% 1fr;
        gap: 10px; align-items: baseline;
    }
    /* O ::before do rotulo ocupa a coluna 1 e o PRIMEIRO filho a coluna 2;
       do segundo em diante o navegador comecava de novo na coluna 1, ou seja,
       embaixo do rotulo - era o "campos fora de ordem" no celular. Prender
       todos na coluna 2 tambem impede a etiqueta de ser esticada. */
    .tabela-cartoes tbody td > * {
        grid-column: 2;
        justify-self: start;
        padding: 7px 14px;
        text-align: left;
        white-space: normal;
        width: auto;
    }
    .tabela-cartoes tbody td::before {
        content: attr(data-rotulo);
        font-size: 0.67rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.05em;
        color: var(--texto-suave);
    }
    .tabela-cartoes tbody td:empty { display: none; }
    .tabela-cartoes tbody td.col-acoes {
        display: block; border-top: 1px solid var(--borda);
        margin-top: 4px; padding-top: 10px; background: var(--superficie-2);
    }
    .tabela-cartoes tbody td.col-acoes::before { content: none; }
    .tabela-cartoes tbody td.col-acoes .acoes-linha { justify-content: flex-start; }
    .tabela-cartoes tbody .tabela-vazia td { display: block; }
    .tabela-cartoes tbody .tabela-vazia td::before { content: none; }
}

/* Respeita quem pediu menos animacao no sistema. */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Impressao: so o conteudo. */
@media print {
    .lateral, .topo, .rodape-sistema, .paginacao, .barra-ferramentas, .acoes-formulario, .col-acoes { display: none !important; }
    body { background: #fff; color: #000; }
    .cartao { box-shadow: none; border-color: #999; }
    .conteudo { padding: 0; max-width: none; }
}