/* ============================================================
   ArrecadAI — Design System aplicado
   Fonte única de tokens e componentes para backoffice, portal
   do contribuinte e telas de acesso.

   Base: design system KAJEN · ArrecadAI (navy institucional,
   gradiente azul→esmeralda, Montserrat/Public Sans/IBM Plex Mono).

   Regras da casa:
   - Nenhum valor de cor, espaço, raio, sombra ou tamanho de
     fonte fora dos tokens abaixo. Se faltar, cria-se o token.
   - Espaçamento em múltiplos de 4px.
   - Número fiscal (valor, data, documento) em monoespaçada,
     alinhado à direita em tabela.
   - Identidade: friso do gradiente da marca no alto de toda
     superfície navy, e selos de status com aspecto de carimbo.
   - Contraste mínimo AA: os tons de texto semântico são um passo
     mais escuros que os do design system, que os define para
     preenchimento e não para leitura.
   ============================================================ */

:root {
    /* ---- Marca ---- */
    --navy-950: #0C1526;
    --navy-900: #101D35;
    --navy-800: #16264A;
    --navy-700: #1E3260;
    --blue-600: #2456D6;
    --blue-500: #2F6BE4;
    --blue-700: #1E49B8;
    --blue-800: #193D9C;
    --blue-100: #E3EBFB;
    --teal-700: #0E7A6F;
    --teal-600: #12A28A;
    --teal-500: #17B894;
    --teal-400: #22D3A5;
    --teal-100: #DCF3EC;
    --grad-marca: linear-gradient(135deg, #2456D6 0%, #17B894 100%);

    /* ---- Neutros frios ---- */
    --gray-25: #FAFBFC;
    --gray-50: #F5F7FA;
    --gray-100: #ECF0F5;
    --gray-200: #DFE5EE;
    --gray-300: #C6CFDC;
    --gray-400: #9AA7BB;
    --gray-500: #6B7A93;
    --gray-600: #4A5872;
    --gray-700: #33405C;

    /* ---- Cor: estrutura ---- */
    --tinta: #14213D;              /* texto principal */
    --mudo: var(--gray-600);       /* texto secundário — 8:1 sobre branco */
    --mudo-fraco: var(--gray-500); /* texto auxiliar — 4.6:1 sobre branco */
    --papel: var(--gray-50);       /* fundo da aplicação */
    --branco: #ffffff;
    --superficie-2: var(--gray-25);  /* cabeçalho de tabela, faixas internas */
    --superficie-3: var(--gray-100); /* hover de superfície clara */
    --borda: var(--gray-200);
    --borda-forte: var(--gray-300);

    /* ---- Cor: ação e navegação ---- */
    --acao: var(--blue-600);         /* ação primária e link */
    --acao-hover: var(--blue-700);   /* hover: escurece um passo */
    --acao-ativa: var(--blue-800);   /* press: escurece mais um passo */
    --inversa: var(--navy-900);      /* superfície navy: menu, topo, acesso */
    --realce-menu: rgba(47, 107, 228, .25); /* item de menu ativo sobre navy */

    /* Texto sobre a superfície navy */
    --sobre-escuro: var(--gray-300);
    --sobre-escuro-fraco: var(--gray-500);
    --sobre-escuro-etiqueta: var(--teal-500);

    /* ---- Cor: semântica (fundo claro + texto escuro, contraste AA) ---- */
    --ok-texto: #0E7A3E;     --ok-fundo: #DCF5E7;     --ok-borda: #B8E6CD;
    --alerta-texto: #8A5A0F; --alerta-fundo: #FCF0DA; --alerta-borda: #EFD9A8;
    --erro-texto: #AE2E2E;   --erro-fundo: #FBE4E4;   --erro-borda: #F2C4C4;
    --info-texto: var(--blue-600); --info-fundo: var(--blue-100); --info-borda: #C3D5F5;

    /* ---- Espaçamento (múltiplos de 4) ---- */
    --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
    --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; --e12: 48px;

    /* ---- Tipografia ---- */
    --fonte-display: "Montserrat", "Public Sans", system-ui, sans-serif;
    --fonte: "Public Sans", system-ui, "Segoe UI", Roboto, sans-serif;
    --fonte-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --t-display-g: 32px; /* KPI em destaque */
    --t-display: 28px;   /* KPI padrão */
    --t-titulo: 24px;    /* h1 da página */
    --t-destaque: 18px;  /* valor monetário em leitura */
    --t-secao: 17px;     /* h2 — título de seção/cartão */
    --t-corpo: 15px;
    --t-apoio: 13px;     /* labels, texto secundário */
    --t-micro: 12px;     /* texto auxiliar, rodapés */
    --t-etiqueta: 11px;  /* caixa-alta: th, selo, rótulo de KPI */

    /* Duas etiquetas com trabalhos diferentes, e larguras diferentes:
       - marca (Montserrat, .08em): grupo de menu, ETAPA, título de seção.
         Aparece uma vez por bloco e pode gastar espaço.
       - dado (Public Sans, .04em): th, selo, rótulo de KPI e de campo.
         Repete-se em toda coluna de uma tabela de onze colunas, onde cada
         ponto de entrelinha vira largura de tela. É também o que o design
         system usa nesses componentes (`--text-caption`, fonte de corpo). */
    --tracking-etiqueta: .08em;
    --tracking-dado: .04em;

    /* ---- Forma ---- */
    --raio-xs: 4px;
    --raio-sm: 6px;
    --raio: 8px;
    --raio-lg: 12px;
    --raio-pilula: 999px;

    --sombra: 0 1px 2px rgba(16, 29, 53, .06);
    --sombra-md: 0 2px 8px rgba(16, 29, 53, .08);
    --sombra-alta: 0 16px 48px rgba(16, 29, 53, .22);

    --anel-foco: 0 0 0 3px rgba(36, 86, 214, .25);
    --transicao: 120ms ease;

    /* Alturas de controle — botão e campo alinham na mesma linha */
    --altura-controle: 40px;
    --altura-controle-p: 32px;

    --largura-lateral: 248px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; }

/* `hidden` esconde de verdade. O atributo age por `display:none` na folha
   do navegador, e qualquer `display` declarado aqui venceria essa regra —
   um componente com `display:flex` continuaria visível marcado como oculto. */
[hidden] { display: none !important; }

body {
    font-family: var(--fonte);
    font-size: var(--t-corpo);
    line-height: 1.5;
    background: var(--papel);
    color: var(--tinta);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--acao); text-decoration: none; }
a:hover { color: var(--acao-hover); text-decoration: underline; }

h1 { font: 700 var(--t-titulo)/1.25 var(--fonte-display); letter-spacing: -.01em; }
h2 { font: 600 var(--t-secao)/1.35 var(--fonte-display); }
h3 { font: 700 var(--t-apoio)/1.4 var(--fonte); }

/* Dado fiscal em monoespaçada: valor, data e documento alinham em coluna
   e o leitor compara casas decimais sem recontar dígitos. */
.dado, .codigo, td.direita, .kpi .valor, .valor-portal, .valor-guia,
.pagina, .codigo-pareamento {
    font-family: var(--fonte-mono);
    font-variant-numeric: tabular-nums;
}
td, th { font-variant-numeric: tabular-nums; }

/* ---------- Acessibilidade ---------- */
:focus-visible {
    outline: 2px solid var(--acao);
    outline-offset: 2px;
    border-radius: var(--raio-xs);
}

.pular-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--branco); color: var(--acao);
    padding: var(--e2) var(--e4); z-index: 100;
    border-radius: 0 0 var(--raio) 0;
    font-weight: 600;
}
.pular-link:focus { left: 0; }

/* Visível só para leitor de tela */
.so-leitor {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   Marca

   O friso do gradiente é pintado como imagem de fundo de 3px no
   topo da superfície navy: `border-top` não aceita gradiente, e o
   fundo, ao contrário de um pseudo-elemento, não rola junto com o
   conteúdo de uma coluna com rolagem própria.
   ============================================================ */
.friso-marca {
    background-color: var(--inversa);
    background-image: var(--grad-marca);
    background-repeat: no-repeat;
    background-size: 100% 3px;
}

/* Lockup: símbolo oficial + assinatura tipográfica. O "AI" recebe o
   gradiente da marca — é o único texto do sistema que não é chapado. */
.marca-arrecadai {
    display: inline-flex; align-items: center; gap: var(--e3);
    text-decoration: none;
}
.marca-arrecadai img { display: block; height: 28px; width: auto; flex-shrink: 0; }
.marca-arrecadai .assinatura {
    font: 800 20px/1 var(--fonte-display);
    letter-spacing: -.01em; color: var(--branco); white-space: nowrap;
}
.marca-arrecadai .assinatura .ia {
    background: linear-gradient(120deg, var(--blue-500), var(--teal-400));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Em fundo claro a assinatura vira navy; o "AI" mantém o gradiente */
.marca-arrecadai.clara .assinatura { color: var(--tinta); }

/* Etiqueta de contexto sobre navy (ETAPA, MÓDULO, GRUPO DE MENU) */
.etiqueta-marca {
    font: 700 var(--t-etiqueta)/1.3 var(--fonte-display);
    text-transform: uppercase; letter-spacing: var(--tracking-etiqueta);
    color: var(--sobre-escuro-etiqueta);
}

/* ============================================================
   Estrutura: menu lateral (backoffice)
   ============================================================ */
.aplicacao {
    display: grid;
    grid-template-columns: var(--largura-lateral) 1fr;
    min-height: 100vh;
}
aside.lateral {
    background-color: var(--inversa);
    background-image: var(--grad-marca);
    background-repeat: no-repeat;
    background-size: 100% 3px;
    color: var(--branco);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
aside.lateral .marca {
    display: flex; align-items: center;
    padding: var(--e5);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
aside.lateral nav { flex: 1; padding: var(--e3) var(--e3) var(--e4); }
aside.lateral .grupo {
    font: 700 var(--t-etiqueta)/1.3 var(--fonte-display);
    color: var(--sobre-escuro-etiqueta);
    text-transform: uppercase; letter-spacing: var(--tracking-etiqueta);
    padding: var(--e4) var(--e3) var(--e2);
}
aside.lateral nav > .grupo:first-child { padding-top: var(--e1); }
aside.lateral nav a {
    display: block; color: var(--gray-400); text-decoration: none;
    padding: var(--e2) var(--e3); border-radius: var(--raio);
    font: 500 var(--t-apoio)/1.5 var(--fonte);
    margin-bottom: 2px;
    transition: background var(--transicao), color var(--transicao);
}
aside.lateral nav a:hover { background: rgba(255, 255, 255, .06); color: var(--branco); text-decoration: none; }
aside.lateral nav a.ativo, aside.lateral nav a[aria-current="page"] {
    background: var(--realce-menu); color: var(--branco); font-weight: 600;
}
/* Ramo: um assunto do menu com mais de uma visão. O título não navega —
   só as folhas navegam —, e a régua à esquerda mostra o que pertence a quê. */
aside.lateral .ramo { margin-bottom: 2px; }
aside.lateral .ramo-titulo {
    display: block; padding: var(--e2) var(--e3) var(--e1);
    font: 600 var(--t-apoio)/1.5 var(--fonte); color: var(--sobre-escuro);
}
aside.lateral .ramo > a {
    margin-left: var(--e3); padding-left: var(--e3);
    border-left: 1px solid rgba(255, 255, 255, .16);
    border-radius: 0 var(--raio) var(--raio) 0;
}
aside.lateral .ramo > a.ativo,
aside.lateral .ramo > a[aria-current="page"] { border-left: 1px solid var(--teal-500); }

aside.lateral :focus-visible { outline-color: var(--teal-500); }

/* Rodapé do menu: ente e sessão são contextos distintos, separados */
aside.lateral .rodape-lateral {
    padding: var(--e3) var(--e5) var(--e4);
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: var(--t-micro); color: var(--sobre-escuro);
}
aside.lateral .rodape-lateral a { color: var(--branco); }
aside.lateral .rodape-lateral .bloco { padding: var(--e2) 0; }
aside.lateral .rodape-lateral .bloco + .bloco { border-top: 1px solid rgba(255, 255, 255, .08); }
aside.lateral .rodape-lateral .etiqueta {
    display: block; font: 700 var(--t-etiqueta)/1.3 var(--fonte-display);
    color: var(--sobre-escuro-etiqueta);
    text-transform: uppercase; letter-spacing: var(--tracking-etiqueta);
    margin-bottom: 2px;
}
/* Nome em linha própria: colado ao link "Trocar" os dois liam-se como
   uma frase só ("Prefeitura de Rio Verde Trocar"). */
aside.lateral .rodape-lateral .nome { display: block; color: var(--branco); font-weight: 600; }
aside.lateral .rodape-lateral .assinatura-kajen { color: var(--sobre-escuro-fraco); font-size: var(--t-etiqueta); }
.aplicacao > .area-principal { min-width: 0; }

/* ---------- Shell de abas (cada funcionalidade abre em uma aba) ---------- */
.area-principal.shell { display: flex; flex-direction: column; height: 100vh; }
.abas {
    display: flex; align-items: flex-end; gap: 2px;
    background: var(--superficie-3); border-bottom: 1px solid var(--borda);
    padding: var(--e2) var(--e3) 0; overflow-x: auto; scrollbar-width: thin;
    min-height: 42px; flex-shrink: 0;
}
.aba {
    display: inline-flex; align-items: center;
    background: var(--gray-200); border: 1px solid var(--borda); border-bottom: none;
    border-radius: var(--raio) var(--raio) 0 0;
    max-width: 220px; flex-shrink: 0;
    transition: background var(--transicao);
}
.aba:hover { background: var(--gray-100); }
.aba .rotulo {
    background: none; border: none; cursor: pointer;
    font: 600 var(--t-apoio)/1 var(--fonte); color: var(--mudo);
    padding: var(--e2) var(--e1) var(--e2) var(--e3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px;
}
.aba .fechar {
    background: none; border: none; cursor: pointer;
    font-size: var(--t-secao); line-height: 1; color: var(--mudo-fraco);
    padding: var(--e2); border-radius: var(--raio-xs);
}
.aba .fechar:hover { color: var(--erro-texto); background: rgba(16, 29, 53, .06); }
/* Aba ativa: mesma superfície da página, com o friso da marca no topo */
.aba.ativa {
    background-color: var(--papel);
    background-image: var(--grad-marca);
    background-repeat: no-repeat;
    background-size: 100% 2px;
}
.aba.ativa .rotulo { color: var(--tinta); }
.quadros { flex: 1; min-height: 0; }
.quadros iframe { width: 100%; height: 100%; border: 0; display: none; }
.quadros iframe.ativa { display: block; }

/* ---------- Header institucional (portal e telas simples) ---------- */
header.topo {
    background-color: var(--inversa);
    background-image: var(--grad-marca);
    background-repeat: no-repeat;
    background-size: 100% 3px;
    color: var(--branco);
    padding: 0 var(--e6);
    display: flex; align-items: center; gap: var(--e5);
    min-height: 64px; flex-wrap: wrap;
}
header.topo .marca { font-weight: 700; white-space: nowrap; padding: var(--e3) 0; }
/* Nome do canal ao lado da marca: régua fina separa produto de contexto */
header.topo .marca-arrecadai + .marca {
    padding-left: var(--e5); border-left: 1px solid rgba(255, 255, 255, .16);
    font: 600 var(--t-apoio)/1 var(--fonte); color: var(--sobre-escuro);
    align-self: center;
}
header.topo nav {
    display: flex; gap: var(--e1); flex: 1;
    overflow-x: auto; scrollbar-width: none;
}
header.topo nav::-webkit-scrollbar { display: none; }
header.topo nav a {
    color: var(--gray-400); text-decoration: none;
    padding: var(--e2) var(--e3); border-radius: var(--raio);
    font-size: var(--t-apoio); white-space: nowrap;
    transition: background var(--transicao), color var(--transicao);
}
header.topo nav a:hover { background: rgba(255, 255, 255, .06); color: var(--branco); text-decoration: none; }
header.topo nav a.ativo, header.topo nav a[aria-current="page"] {
    background: var(--realce-menu); color: var(--branco); font-weight: 600;
}
header.topo .contexto { font-size: var(--t-micro); color: var(--sobre-escuro); white-space: nowrap; }
header.topo .contexto a { color: var(--branco); }
header.topo :focus-visible { outline-color: var(--teal-500); }

/* ============================================================
   Estrutura da página
   ============================================================ */
main.conteudo { width: 100%; margin: var(--e6) 0; padding: 0 var(--e6); }
@media (min-width: 1600px) { main.conteudo { padding: 0 var(--e8); } }

/* Título da página + ação primária, sempre juntos (proximidade) */
.cabecalho-pagina {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--e4); margin-bottom: var(--e6); flex-wrap: wrap;
}
.cabecalho-pagina .titulo-grupo { min-width: 0; }
/* Status ao lado do título: qualifica o registro sem virar outra linha */
.cabecalho-pagina h1 .selo { margin-left: var(--e3); vertical-align: middle; }
.cabecalho-pagina .subtitulo {
    color: var(--mudo); font-size: var(--t-apoio); margin-top: var(--e1);
    max-width: 72ch;
}
/* Ações do cabeçalho: uma primária, o resto secundário (hierarquia) */
.cabecalho-pagina .acoes {
    display: flex; gap: var(--e2); flex-wrap: wrap; flex-shrink: 0;
}

/* Título de seção — agrupa blocos irmãos sem inventar um card por item */
.secao { margin-bottom: var(--e6); }
/* O apoio fica colado no título, não na borda oposta da tela: separados
   por 1200px eles deixam de se ler como a mesma informação. */
.secao > .cabecalho-secao {
    display: flex; align-items: baseline; justify-content: flex-start;
    gap: var(--e3); margin-bottom: var(--e3); flex-wrap: wrap;
}
.secao > .cabecalho-secao h2 {
    font: 700 var(--t-etiqueta)/1.3 var(--fonte-display);
    text-transform: uppercase; letter-spacing: var(--tracking-etiqueta);
    color: var(--mudo);
}
.secao > .cabecalho-secao .apoio-secao { font-size: var(--t-micro); color: var(--mudo); }

/* ---------- Cartões ---------- */
.cartao {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra);
    padding: var(--e6);
    margin-bottom: var(--e4);
}
.cartao > h2 { margin-bottom: var(--e3); }
/* Cabeçalho interno: título e ações do próprio cartão andam juntos */
.cartao > .cabecalho-cartao {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--e3); margin-bottom: var(--e4); flex-wrap: wrap;
}
.cartao > .cabecalho-cartao h2 { margin-bottom: 0; }
.cartao > .cabecalho-cartao .apoio-cartao {
    color: var(--mudo); font-size: var(--t-micro); margin-top: 2px; max-width: 72ch;
}
/* Rodapé do cartão: ações coladas no conteúdo que modificam */
.cartao > .rodape-cartao {
    display: flex; gap: var(--e2); flex-wrap: wrap;
    margin: var(--e6) calc(var(--e6) * -1) calc(var(--e6) * -1);
    padding: var(--e3) var(--e6); border-top: 1px solid var(--borda);
    background: var(--superficie-2);
    border-radius: 0 0 var(--raio-lg) var(--raio-lg);
}
/* Card de registro em listagem: hierarquia interna previsível */
.cartao.registro { padding: 0; }
.cartao.registro > .topo-registro {
    display: flex; align-items: center; gap: var(--e3);
    padding: var(--e4) var(--e6); flex-wrap: wrap;
    border-bottom: 1px solid var(--borda);
}
.cartao.registro > .topo-registro .principal { font-weight: 600; }
.cartao.registro > .topo-registro .empurra { margin-left: auto; }
.cartao.registro > .corpo-registro { padding: var(--e5) var(--e6); }
.cartao.registro > .corpo-registro > * + * { margin-top: var(--e3); }

/* ---------- KPIs ---------- */
.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--e3);
}
.kpis.principais { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kpi {
    background: var(--branco); border: 1px solid var(--borda);
    border-radius: var(--raio-lg); box-shadow: var(--sombra);
    padding: var(--e5); display: flex; flex-direction: column; gap: var(--e1);
    text-decoration: none; color: inherit;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
a.kpi:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-md); text-decoration: none; }
.kpi .rotulo {
    font: 700 var(--t-etiqueta)/1.3 var(--fonte);
    color: var(--mudo);
    text-transform: uppercase; letter-spacing: var(--tracking-dado);
}
/* A monoespaçada abre demais em corpo grande: o negativo devolve ao número
   a densidade de um valor, sem tirar dele o alinhamento por casa decimal. */
.kpi .valor { font: 600 var(--t-display)/1.1 var(--fonte-mono); letter-spacing: -.02em; }
.kpi .apoio-kpi { font-size: var(--t-micro); color: var(--mudo); }
.kpi.destaque .valor { font-size: var(--t-display-g); }
/* Faixa lateral só quando o número exige ação — não decorativa */
.kpi.ok { border-left: 3px solid var(--ok-texto); }
.kpi.ok .valor { color: var(--ok-texto); }
.kpi.alerta { border-left: 3px solid var(--alerta-texto); }
.kpi.alerta .valor { color: var(--alerta-texto); }
.kpi.erro { border-left: 3px solid var(--erro-texto); }
.kpi.erro .valor { color: var(--erro-texto); }

/* ---------- Lista de dados (leitura, não formulário) ---------- */
.dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--e5);
}
.dados > div { min-width: 0; }
.dados .rotulo {
    display: block; font: 700 var(--t-etiqueta)/1.3 var(--fonte);
    color: var(--mudo);
    text-transform: uppercase; letter-spacing: var(--tracking-dado);
    margin-bottom: var(--e1);
}
.dados .valor {
    display: block; font-weight: 600; overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.dados .valor.forte { font-size: var(--t-destaque); }
.dados .valor.ausente { font-weight: 400; color: var(--mudo-fraco); }
.dados .complemento { display: block; font-size: var(--t-micro); color: var(--mudo); margin-top: 2px; }

/* Rótulo de um bloco que não é um cartão inteiro */
.rotulo-bloco {
    display: block; font: 700 var(--t-etiqueta)/1.3 var(--fonte);
    color: var(--mudo);
    text-transform: uppercase; letter-spacing: var(--tracking-dado);
}
.item-contato { padding: var(--e1) 0; }

/* ---------- Tabelas ---------- */
/* `position: relative` é obrigatório: sem ele, um descendente absoluto
   (o rótulo .so-leitor da coluna de ações) não tem esta caixa como bloco
   de contenção, escapa do recorte e estica a rolagem horizontal da página. */
.rolagem {
    position: relative; overflow-x: auto;
    border: 1px solid var(--borda); border-radius: var(--raio-lg); background: var(--branco);
}
.rolagem > table { border: none; border-radius: 0; }
table {
    width: 100%; border-collapse: collapse;
    background: var(--branco); border: 1px solid var(--borda);
    border-radius: var(--raio-lg); overflow: hidden;
    font-size: var(--t-apoio);
}
th, td { text-align: left; padding: var(--e3); border-bottom: 1px solid var(--borda); vertical-align: top; }
th {
    background: var(--superficie-2);
    font: 700 var(--t-etiqueta)/1.3 var(--fonte);
    text-transform: uppercase; letter-spacing: var(--tracking-dado);
    color: var(--mudo); white-space: nowrap;
}
tbody tr { transition: background var(--transicao); }
tbody tr:hover { background: var(--gray-50); }
tbody tr:last-child td { border-bottom: none; }
/* Alinhamento à direita vale para o dado E para o cabeçalho da coluna.
   Número alinhado à direita nunca quebra: "R$" numa linha e o valor na
   seguinte destrói a coluna de leitura. */
.direita, th.direita { text-align: right; }
td.direita { white-space: nowrap; }
/* Documento, data e valor são unidades atômicas: quebrar 00.407.338/0001-62
   no meio faz o leitor remontar o número de cabeça. */
td.dado { white-space: nowrap; }
/* Coluna de ações por registro, sempre no fim e sem quebrar */
td.acoes, th.acoes { text-align: right; white-space: nowrap; }
td.acoes .btn + .btn { margin-left: var(--e1); }
/* Texto longo não pode destruir o layout */
.truncar { display: block; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.truncar.largo { max-width: 52ch; }
/* Linha que exige atenção: faixa à esquerda, não cor no texto inteiro */
tr.atencao td:first-child { box-shadow: inset 3px 0 0 var(--alerta-texto); }
tr.critico td:first-child { box-shadow: inset 3px 0 0 var(--erro-texto); }
/* Célula que hospeda o estado vazio não deve ganhar padding duplo */
td.celula-vazia { padding: 0; }

/* Cabeçalho ordenável: o alvo de clique é a célula inteira, e a seta só
   ganha cor quando a coluna está de fato ordenando. */
th.ordenavel { padding: 0; }
th.ordenavel .rotulo-ordem {
    display: flex; align-items: center; gap: var(--e1);
    padding: var(--e3); color: inherit; text-decoration: none;
    font: inherit; text-transform: inherit; letter-spacing: inherit;
}
th.ordenavel.direita .rotulo-ordem { justify-content: flex-end; }
th.ordenavel .rotulo-ordem:hover { background: var(--superficie-3); color: var(--tinta); text-decoration: none; }
th.ordenavel .seta { color: var(--borda-forte); font-size: 9px; }
th.ordenavel[aria-sort="ascending"] .rotulo-ordem,
th.ordenavel[aria-sort="descending"] .rotulo-ordem { color: var(--tinta); }
th.ordenavel[aria-sort="ascending"] .seta,
th.ordenavel[aria-sort="descending"] .seta { color: var(--acao); }

/* Coluna de seleção: estreita e sem quebrar */
th.coluna-selecao, td.coluna-selecao { width: 1%; white-space: nowrap; padding-right: 0; }

/* Barra de ação em massa: aparece colada no topo da listagem que ela
   afeta, e só existe enquanto há seleção. */
.barra-selecao {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e3); flex-wrap: wrap;
    background: var(--info-fundo); border: 1px solid var(--info-borda);
    border-bottom: none; padding: var(--e3) var(--e4);
    font-size: var(--t-apoio); color: var(--info-texto);
}
.barra-selecao + .rolagem { border-radius: 0 0 var(--raio-lg) var(--raio-lg); }
.barra-selecao .contagem { font-weight: 700; }
.filtros + .barra-selecao { border-top: none; }

/* ---------- Selos de status (carimbo fiscal em pílula) ---------- */
.selo {
    display: inline-flex; align-items: center;
    padding: 2px var(--e2);
    border-radius: var(--raio-pilula); border: 1px solid transparent;
    font: 700 var(--t-etiqueta)/1.3 var(--fonte);
    text-transform: uppercase; letter-spacing: var(--tracking-dado);
    background: var(--gray-100); color: var(--mudo);
    white-space: nowrap; vertical-align: middle;
}
.selo.ok      { background: var(--ok-fundo);     color: var(--ok-texto);     border-color: var(--ok-borda); }
.selo.alerta  { background: var(--alerta-fundo); color: var(--alerta-texto); border-color: var(--alerta-borda); }
.selo.erro    { background: var(--erro-fundo);   color: var(--erro-texto);   border-color: var(--erro-borda); }
.selo.info    { background: var(--info-fundo);   color: var(--info-texto);   border-color: var(--info-borda); }
.selo.neutro  { background: var(--gray-100);     color: var(--mudo);         border-color: var(--borda); }
/* Marca de contorno: qualifica sem competir com o status */
.selo.contorno { background: transparent; color: var(--mudo); border-color: var(--borda-forte); }

/* ---------- Etiqueta de atributo (texto livre, não é status) ----------
   Para descrever eventos e motivos, onde o carimbo em caixa-alta
   prejudicaria a leitura. */
.etiqueta-dado {
    display: inline-flex; align-items: baseline; gap: var(--e1);
    padding: 2px var(--e2); border-radius: var(--raio-sm);
    border: 1px solid var(--borda); background: var(--superficie-2);
    font-size: var(--t-micro); color: var(--tinta);
}
.etiqueta-dado .chave { color: var(--mudo); font-weight: 600; }

/* ---------- Botões ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
    background: var(--acao); color: var(--branco);
    border: 1px solid transparent; border-radius: var(--raio);
    padding: 0 var(--e4); height: var(--altura-controle);
    font: 600 var(--t-corpo)/1 var(--fonte);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.btn:hover { background: var(--acao-hover); color: var(--branco); text-decoration: none; }
.btn:active { background: var(--acao-ativa); }
.btn:focus-visible { outline: none; box-shadow: var(--anel-foco); }

/* Marca: reservado ao único gesto de marca da tela (entrar no sistema).
   Se aparecer duas vezes na mesma tela, deixou de ser destaque. */
.btn.marca { background: var(--grad-marca); border-color: transparent; }
.btn.marca:hover { background: var(--grad-marca); filter: brightness(.94); }
.btn.marca:active { filter: brightness(.88); }

.btn.secundario { background: var(--branco); color: var(--tinta); border-color: var(--borda-forte); }
.btn.secundario:hover { background: var(--gray-50); color: var(--tinta); }
.btn.secundario:active { background: var(--gray-100); }

/* Terciário: ação de baixa prioridade que não deve pesar na tela */
.btn.terciario { background: transparent; color: var(--acao); border-color: transparent; }
.btn.terciario:hover { background: var(--blue-100); color: var(--acao-hover); }

.btn.perigo { background: var(--branco); color: var(--erro-texto); border-color: var(--erro-borda); }
.btn.perigo:hover { background: var(--erro-fundo); color: var(--erro-texto); }
.btn.perigo:focus-visible { box-shadow: 0 0 0 3px rgba(174, 46, 46, .25); }

.btn.pequeno { height: var(--altura-controle-p); padding: 0 var(--e3); font-size: var(--t-apoio); }
.btn.bloco { width: 100%; }
.btn.grande { height: 48px; padding: 0 var(--e6); font-size: 16px; }

/* Ícone só: atalho de linha de tabela.
   Quadrado e discreto porque se repete em toda linha de uma listagem de
   milhares — com peso de botão, a coluna de ações competiria com o dado.
   O alvo tem 32px de lado, o mínimo confortável para toque. */
.btn.icone-so {
    width: var(--altura-controle-p); height: var(--altura-controle-p);
    padding: 0; background: transparent; color: var(--mudo);
    border-color: transparent;
}
.btn.icone-so:hover { background: var(--gray-100); color: var(--tinta); }
.btn.icone-so:active { background: var(--gray-200); }
.btn.icone-so[aria-disabled="true"]:hover { background: transparent; color: var(--mudo); }
.icone { display: block; flex-shrink: 0; }

/* Edição no lugar: uma linha de contato vira formulário sem sair da ficha.
   Quebra em várias linhas em tela estreita em vez de rolar na horizontal. */
.linha-edicao {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
    padding: var(--e2) 0; border-bottom: 1px solid var(--borda);
}
.linha-edicao:last-of-type { border-bottom: 0; }
.linha-edicao input[type="text"], .linha-edicao input[type="email"] { flex: 1 1 16ch; min-width: 0; }
.linha-edicao input[readonly] { background: var(--superficie-3); color: var(--mudo); }
.linha-edicao .escolha { white-space: nowrap; }

/* Endereço em duas linhas de larguras diferentes: 4 campos na primeira e 5
   na segunda. A grade tem 20 colunas porque 20 é o múltiplo comum de 4 e 5 —
   assim as duas contagens convivem sem grade aninhada. UF fica com o menor
   vão de todos: são dois caracteres.

   O seletor precisa das duas classes: `.grade-form` também declara
   `grid-template-columns`, com a mesma especificidade e mais adiante no
   arquivo — sozinha, `.endereco-edicao` perderia o desempate por ordem. */
.endereco-edicao {
    padding: var(--e3) 0;
    border-bottom: 1px solid var(--borda);
}
.endereco-edicao:last-of-type { border-bottom: 0; }

.grade-form.endereco-edicao { grid-template-columns: repeat(20, minmax(0, 1fr)); }
.endereco-edicao > * { grid-column: span 5; }   /* padrão: 4 por linha */

/* Os hidden de CSRF e _method são filhos do form e ocupariam célula,
   empurrando a primeira linha de campos para baixo. */
.endereco-edicao > input[type="hidden"] { display: none; }

/* Segunda linha: 5 + 4 + 5 + 2 + 4 = 20 */
.endereco-edicao .col-complemento { grid-column: span 5; }
.endereco-edicao .col-cep         { grid-column: span 4; }
.endereco-edicao .col-municipio   { grid-column: span 5; }
.endereco-edicao .col-uf          { grid-column: span 2; }
.endereco-edicao .col-atual       { grid-column: span 4; }

/* A caixa de "endereço atual" não tem rótulo em cima, então subia para a
   linha dos rótulos dos vizinhos. O pseudo-elemento reserva a altura de um
   rótulo, e o min-height igual ao do input centra a caixa no mesmo eixo do
   campo ao lado — em vez de encostá-la no topo da célula. */
.endereco-edicao .col-atual { display: flex; flex-direction: column; }
.endereco-edicao .col-atual::before {
    content: "";
    height: calc(var(--t-apoio) * 1.5);
    margin-bottom: var(--e1);
}
.endereco-edicao .col-atual .escolha { min-height: var(--altura-controle); }
.endereco-edicao .grupo-acoes     { grid-column: 1 / -1; }

/* O corte é medido na largura do conteúdo, não da janela: as telas abrem
   dentro do shell, e o menu lateral come 248px. Em janela de 1280px o
   conteúdo tem ~1032px — com corte em 1100px as colunas nunca apareceriam
   no tamanho de tela mais comum. */
@media (max-width: 900px) {
    .grade-form.endereco-edicao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .endereco-edicao > *,
    .endereco-edicao .col-complemento, .endereco-edicao .col-cep,
    .endereco-edicao .col-municipio, .endereco-edicao .col-uf,
    .endereco-edicao .col-atual { grid-column: span 1; }
}
@media (max-width: 560px) { .grade-form.endereco-edicao { grid-template-columns: 1fr; } }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Estado de envio: o clique responde antes da resposta do servidor */
.btn[data-carregando] { pointer-events: none; opacity: .8; }
.btn[data-carregando]::before {
    content: ""; width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: girar .7s linear infinite; flex-shrink: 0;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Grupo de ações: a primária vem primeiro, na leitura e no destaque */
.grupo-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.grupo-acoes .separador { flex: 1; }

/* ---------- Formulários ---------- */
label { display: block; font-size: var(--t-apoio); font-weight: 600; margin: 0 0 var(--e1); color: var(--mudo); }
label .obrigatorio { color: var(--erro-texto); }
label .opcional { color: var(--mudo-fraco); font-weight: 400; }

input, select, textarea {
    width: 100%; padding: var(--e2) var(--e3);
    border: 1px solid var(--borda-forte); border-radius: var(--raio);
    font: 400 var(--t-corpo)/1.5 var(--fonte); color: var(--tinta); background: var(--branco);
    min-height: var(--altura-controle);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--acao); box-shadow: var(--anel-foco);
}
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
    background: var(--gray-100); color: var(--mudo); cursor: not-allowed;
}
input[readonly] { cursor: text; }
input[type="checkbox"], input[type="radio"] {
    width: 16px; height: 16px; min-height: 0; accent-color: var(--acao);
}
input[type="file"] { padding: var(--e1) var(--e2); }
input::placeholder, textarea::placeholder { color: var(--gray-400); }
/* Erro por campo: cor + texto, nunca só cor */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
    border-color: var(--erro-texto);
}
.erro-campo {
    display: block; font-size: var(--t-micro); color: var(--erro-texto);
    margin-top: var(--e1); font-weight: 600;
}
.ajuda { font-size: var(--t-micro); color: var(--mudo-fraco); margin-top: var(--e1); }

/* Campo: rótulo, controle e ajuda são uma unidade (proximidade) */
.campo { margin-bottom: var(--e5); min-width: 0; }
.campo:last-child { margin-bottom: 0; }
.campo-inline { display: flex; gap: var(--e2); align-items: flex-start; }
.campo-inline > input, .campo-inline > select { flex: 1; min-width: 140px; }
/* Caixa de seleção com o texto do lado, alinhados pela primeira linha */
.escolha {
    display: flex; align-items: center; gap: var(--e2);
    font-size: var(--t-corpo); font-weight: 400; color: var(--tinta); margin: 0;
}
.escolha + .escolha { margin-top: var(--e2); }

.grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e5); }
.grade-form .largura-total { grid-column: 1 / -1; }
/* Campos que não merecem a largura toda */
.grade-form .curto { max-width: 220px; }

.acoes-form {
    display: flex; gap: var(--e2); margin-top: var(--e6); flex-wrap: wrap; align-items: center;
}
/* Ações de um formulário longo ficam ancoradas no rodapé do cartão */
.cartao > form > .acoes-form:last-child { margin-bottom: 0; }

/* ---------- Barra de filtros: colada na listagem que filtra ---------- */
.filtros {
    display: flex; gap: var(--e3); align-items: flex-end; flex-wrap: wrap;
    background: var(--branco); border: 1px solid var(--borda);
    border-radius: var(--raio-lg) var(--raio-lg) 0 0; border-bottom: none;
    padding: var(--e4);
}
.filtros + .rolagem, .filtros + table { border-radius: 0 0 var(--raio-lg) var(--raio-lg); }
.filtros + .rolagem > table { border-radius: 0; }
.filtros .campo { margin-bottom: 0; min-width: 170px; }
.filtros > div { min-width: 170px; }
/* O campo de busca cresce, mas para de crescer: um input de 800px de
   largura não fica mais fácil de usar, só mais longe do botão. */
.filtros .crescer { flex: 1; max-width: 460px; }
/* Filtro de marcar: alinha pela base dos campos, não pelo topo do rótulo */
.filtros .filtro-marcavel { min-width: 0; display: flex; align-items: center; min-height: var(--altura-controle); }
.filtros .filtro-marcavel .escolha { white-space: nowrap; }
/* Botões da barra alinham com a base dos campos, não com o rótulo */
.filtros .grupo-acoes { align-items: flex-end; }
/* Filtros avançados: ocupam a linha inteira da barra, abaixo dos principais */
.filtros .filtros-avancados {
    flex-basis: 100%; order: 10;
    border-top: 1px solid var(--borda); padding-top: var(--e3); margin-top: var(--e1);
}
.filtros .filtros-avancados > summary {
    cursor: pointer; font-size: var(--t-apoio); font-weight: 600;
    color: var(--acao); list-style-position: inside;
    display: flex; align-items: center; gap: var(--e2);
}
.filtros .filtros-avancados > summary::marker { color: var(--mudo-fraco); }
.filtros .filtros-avancados > summary:hover { color: var(--acao-hover); }
.grade-filtros {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--e3); margin-top: var(--e3);
}
.grade-filtros .campo { margin-bottom: 0; min-width: 0; }

/* Resumo do filtro aplicado, junto do que ele filtra */
.filtros-resumo {
    display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap;
    background: var(--branco); border: 1px solid var(--borda); border-top: none; border-bottom: none;
    padding: 0 var(--e4) var(--e3);
    font-size: var(--t-micro); color: var(--mudo);
}

/* ============================================================
   Avisos e estados da interface
   ============================================================ */
.aviso {
    display: flex; gap: var(--e3); align-items: flex-start;
    padding: var(--e3) var(--e4); border-radius: var(--raio);
    margin-bottom: var(--e4); border: 1px solid var(--borda);
    font-size: var(--t-apoio); background: var(--superficie-2);
}
.aviso .titulo-aviso { font-weight: 700; }
.aviso ul { margin: var(--e1) 0 0; padding-left: var(--e5); }
.aviso-ok, .aviso.ok      { background: var(--ok-fundo);     color: var(--ok-texto);     border-color: var(--ok-borda); }
.aviso-erro, .aviso.erro  { background: var(--erro-fundo);   color: var(--erro-texto);   border-color: var(--erro-borda); }
.aviso.alerta             { background: var(--alerta-fundo); color: var(--alerta-texto); border-color: var(--alerta-borda); }
.aviso.info               { background: var(--info-fundo);   color: var(--info-texto);   border-color: var(--info-borda); }
/* Compatibilidade com a marcação antiga */
.aviso-ok, .aviso-erro {
    padding: var(--e3) var(--e4); border-radius: var(--raio);
    margin-bottom: var(--e4); border: 1px solid transparent; font-size: var(--t-apoio);
}

/* ---------- Estado vazio: um só desenho, dentro ou fora de tabela ---------- */
.vazio {
    text-align: center; padding: var(--e10) var(--e5); color: var(--mudo);
    display: flex; flex-direction: column; align-items: center; gap: var(--e2);
}
.vazio .titulo-vazio { color: var(--tinta); font: 600 var(--t-secao)/1.35 var(--fonte-display); }
.vazio p { max-width: 52ch; font-size: var(--t-apoio); }
.vazio .grupo-acoes { margin-top: var(--e2); justify-content: center; }
/* `strong` solto continua funcionando na marcação antiga */
.vazio strong { display: block; color: var(--tinta); }

/* ---------- Diálogo de confirmação ----------
   <dialog> nativo: o navegador cuida de foco, Esc e camada superior.
   A decisão fica em cima do conteúdo que ela afeta, não numa faixa do
   sistema operacional. */
.modal {
    /* `margin: auto` centraliza o dialog nativo — o reset `* { margin: 0 }`
       do topo deste arquivo apaga o valor que o navegador aplica sozinho. */
    margin: auto;
    border: none; padding: 0; background: transparent;
    max-width: min(480px, calc(100vw - var(--e8)));
    color: var(--tinta);
}
.modal::backdrop { background: rgba(16, 29, 53, .5); }
.modal-caixa {
    background: var(--branco); border-radius: var(--raio-lg);
    box-shadow: var(--sombra-alta); padding: var(--e6);
}
.modal-titulo { font: 700 20px/1.3 var(--fonte-display); margin-bottom: var(--e2); }
.modal-texto { font-size: var(--t-corpo); color: var(--mudo); }
.modal-acoes {
    display: flex; gap: var(--e2); justify-content: flex-end;
    margin-top: var(--e6); flex-wrap: wrap;
}
@media (max-width: 480px) {
    .modal-acoes { flex-direction: column-reverse; }
    .modal-acoes .btn { width: 100%; }
}

/* ---------- Carregamento ---------- */
.esqueleto {
    display: block; border-radius: var(--raio-xs);
    background: linear-gradient(90deg, var(--superficie-3) 25%, var(--borda) 37%, var(--superficie-3) 63%);
    background-size: 400% 100%;
    animation: brilho 1.4s ease infinite;
    height: 1em;
}
.esqueleto + .esqueleto { margin-top: var(--e2); }
.esqueleto.linha-curta { width: 40%; }
@keyframes brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============================================================
   Utilitários
   ============================================================ */
.codigo {
    display: block;
    background: var(--papel); border: 1px dashed var(--borda-forte);
    padding: var(--e3); border-radius: var(--raio-sm);
    word-break: break-all; font-size: var(--t-apoio);
}
.mudo { color: var(--mudo); }
.apoio { font-size: var(--t-apoio); }
.micro { font-size: var(--t-micro); color: var(--mudo); }
.forte { font-weight: 600; }
.num { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }
.linha { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.linha.topo { align-items: flex-start; }
.linha.entre { justify-content: space-between; }
.linha.centro { justify-content: center; }
.empurra-direita { flex: 1; }
/* Pilha vertical com espaçamento do sistema — substitui margens avulsas */
.pilha > * + * { margin-top: var(--e3); }
.pilha.densa > * + * { margin-top: var(--e2); }
.pilha.solta > * + * { margin-top: var(--e5); }
/* Lista de itens homogêneos separados por régua (contatos, histórico) */
.lista-linhas > * { padding: var(--e2) 0; }
.lista-linhas > * + * { border-top: 1px solid var(--borda); }
.espaco { margin-top: var(--e4); }

/* ---------- Paginação ---------- */
.paginacao { margin-top: 0; }
.paginas { display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap; }
.pagina {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--altura-controle-p); height: var(--altura-controle-p);
    padding: 0 var(--e2);
    border: 1px solid var(--borda); border-radius: var(--raio-sm);
    background: var(--branco); color: var(--tinta); text-decoration: none;
    font-size: var(--t-apoio); font-weight: 500;
    transition: background var(--transicao), border-color var(--transicao);
}
a.pagina:hover { background: var(--gray-50); border-color: var(--borda-forte); color: var(--tinta); text-decoration: none; }
.pagina.atual { background: var(--acao); border-color: var(--acao); color: var(--branco); }
.pagina.desabilitada { color: var(--mudo-fraco); background: var(--superficie-2); cursor: not-allowed; }
.reticencias { padding: 0 var(--e1); color: var(--mudo-fraco); }
/* Contagem, tamanho de página e paginação respondem à mesma pergunta —
   quanto eu vejo e como eu ando — então ficam na mesma linha. */
.rodape-listagem {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e3); flex-wrap: wrap; margin-top: var(--e4);
}
.controles-listagem { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.controle-por-pagina { display: flex; align-items: center; gap: var(--e2); }
.controle-por-pagina label {
    margin: 0; white-space: nowrap; font-size: var(--t-micro);
    color: var(--mudo); font-weight: 600;
}
.controle-por-pagina select {
    width: auto; min-height: var(--altura-controle-p); height: var(--altura-controle-p);
    padding: 0 var(--e2); font-size: var(--t-apoio); font-weight: 600;
    border-color: var(--borda); border-radius: var(--raio-sm);
}
form.inline { display: inline; }
.texto-ok { color: var(--ok-texto); }
.texto-alerta { color: var(--alerta-texto); }
.texto-erro { color: var(--erro-texto); }

/* Bloco recolhível padronizado (checklist, contestar) */
details.recolhivel {
    border: 1px solid var(--borda); border-radius: var(--raio);
    background: var(--superficie-2);
}
details.recolhivel > summary {
    cursor: pointer; padding: var(--e3);
    font-size: var(--t-apoio); font-weight: 600; color: var(--acao);
    border-radius: var(--raio); list-style-position: inside;
}
details.recolhivel > summary:hover { background: var(--superficie-3); }
details.recolhivel[open] > summary { border-bottom: 1px solid var(--borda); border-radius: var(--raio) var(--raio) 0 0; }
details.recolhivel > .corpo-recolhivel { padding: var(--e4); background: var(--branco); border-radius: 0 0 var(--raio) var(--raio); }

/* Duas decisões concorrentes lado a lado, cada uma com seu próprio
   motivo — empilhadas sem moldura, liam-se como um formulário só. */
.decisoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e3); }
.bloco-decisao {
    border: 1px solid var(--borda); border-radius: var(--raio);
    padding: var(--e4); background: var(--superficie-2);
}
.bloco-decisao .campo { margin-bottom: var(--e3); }

/* Checklist de elegibilidade: aprovado/reprovado por símbolo + cor */
.checklist { list-style: none; padding: 0; font-size: var(--t-apoio); }
.checklist li { display: flex; gap: var(--e2); align-items: baseline; padding: 2px 0; }
.checklist .marca-ok { color: var(--ok-texto); font-weight: 700; }
.checklist .marca-nao { color: var(--erro-texto); font-weight: 700; }

/* ============================================================
   Portal do contribuinte — leitura confortável, centralizado
   ============================================================ */
.portal main.conteudo { max-width: 760px; margin-inline: auto; }
.portal .cartao { padding: var(--e6); }
.portal .cartao.registro { padding: 0; }
.portal .cartao.registro > .topo-registro,
.portal .cartao.registro > .corpo-registro { padding-inline: var(--e6); }
/* Telas de passagem do portal (desafio, expirado, confirmação) */
.caixa-desafio { max-width: 440px; margin-inline: auto; margin-block: var(--e8); }
/* Valor devido: é o dado que o contribuinte veio conferir */
.valor-portal { font-size: var(--t-destaque); font-weight: 600; }
.valor-guia { font-size: var(--t-display); font-weight: 600; }
.bloco-micro { display: block; margin-top: 2px; }
/* Tarefas secundárias do portal, agrupadas longe da lista de débitos */
.rodape-portal { margin-top: var(--e6); background: transparent; box-shadow: none; }
footer.rodape {
    text-align: center; color: var(--mudo-fraco); font-size: var(--t-micro);
    padding: var(--e8) var(--e4); line-height: 1.7;
}
footer.rodape .marca-rodape {
    display: block; margin-bottom: var(--e3);
    font: 700 var(--t-etiqueta)/1.3 var(--fonte-display);
    text-transform: uppercase; letter-spacing: var(--tracking-etiqueta);
    color: var(--mudo);
}

/* ============================================================
   Acesso — login e seleção de ente

   Meia tela institucional e meia tela de trabalho: o painel navy
   diz de quem é o sistema, o formulário fica na coluna clara, com
   o mesmo desenho de campo do resto da aplicação.
   ============================================================ */
.acesso {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: var(--branco);
}

.painel-marca {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: var(--e10); padding: var(--e12);
    color: var(--branco);
    background:
        radial-gradient(ellipse at 85% -10%, rgba(23, 184, 148, .28), transparent 55%),
        radial-gradient(ellipse at -10% 110%, rgba(36, 86, 214, .35), transparent 55%),
        linear-gradient(160deg, var(--navy-950) 20%, var(--navy-800) 100%);
}
/* Pontilhado discreto do material da marca — textura, não ornamento */
.painel-marca::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 24px 24px;
}
.painel-marca > * { position: relative; }
.painel-marca .marca-arrecadai .assinatura { font-size: 26px; }
.painel-marca .marca-arrecadai img { height: 40px; }

.painel-marca .discurso { display: flex; flex-direction: column; gap: var(--e6); max-width: 46ch; }
.painel-marca .discurso .etiqueta-marca {
    align-self: flex-start;
    border: 1px solid rgba(23, 184, 148, .4); border-radius: var(--raio-pilula);
    padding: var(--e2) var(--e4);
}
.painel-marca .discurso h2 {
    font: 600 34px/1.2 var(--fonte-display); color: var(--branco);
    text-wrap: pretty;
}
.painel-marca .capacidades { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e5); }
.painel-marca .capacidades li { display: flex; gap: var(--e3); align-items: flex-start; }
/* Marcador de item: círculo teal com o traço de confirmação */
.painel-marca .capacidades li::before {
    content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px;
    border-radius: 50%; border: 1px solid rgba(23, 184, 148, .5);
    background: rgba(23, 184, 148, .18) center / 12px 12px no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317B894' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.painel-marca .capacidades strong { display: block; font-size: var(--t-corpo); font-weight: 600; }
.painel-marca .capacidades span { display: block; font-size: var(--t-apoio); color: var(--gray-400); margin-top: 2px; }
.painel-marca .rodape-marca {
    display: flex; justify-content: space-between; gap: var(--e4); flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, .1); padding-top: var(--e5);
    font-size: var(--t-apoio); color: var(--gray-400);
}

.acesso .coluna-formulario {
    display: grid; place-items: center;
    padding: var(--e12) var(--e8);
}
.acesso .caixa { width: 100%; max-width: 400px; }
.acesso .caixa h1 { font-size: 26px; }

/* Cabeçalho de uma caixa isolada: título + contexto, uma unidade */
.cabecalho-caixa { margin-bottom: var(--e6); }
.cabecalho-caixa .subtitulo {
    color: var(--mudo); font-size: var(--t-apoio); margin-top: var(--e2);
}
/* Assinatura KAJEN ao pé do formulário, discreta */
.acesso .rodape-acesso {
    margin-top: var(--e8); font-size: var(--t-micro); color: var(--mudo-fraco);
}

/* Em tela estreita o painel vira uma faixa de identificação e o
   formulário sobe: quem entra pelo celular veio para logar, não para
   ler o discurso institucional. */
@media (max-width: 1000px) {
    /* `auto 1fr`: sem isso a grade estica as duas faixas por igual e a
       faixa de marca, que só tem o logotipo, ocupa meia tela. */
    .acesso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .painel-marca {
        gap: var(--e5); padding: var(--e6);
        background:
            radial-gradient(ellipse at 90% -40%, rgba(23, 184, 148, .3), transparent 60%),
            linear-gradient(160deg, var(--navy-950) 20%, var(--navy-800) 100%);
    }
    .painel-marca .discurso, .painel-marca .rodape-marca { display: none; }
    .acesso .coluna-formulario { padding: var(--e8) var(--e5); align-items: start; }
}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 900px) {
    .aplicacao { grid-template-columns: 1fr; }
    aside.lateral { position: static; height: auto; }
    /* Menu vira faixa rolável, mas os grupos continuam legíveis */
    aside.lateral nav {
        display: flex; overflow-x: auto; padding: 0 var(--e3) var(--e3);
        gap: var(--e1); scrollbar-width: none; align-items: center;
    }
    aside.lateral nav::-webkit-scrollbar { display: none; }
    aside.lateral nav a { white-space: nowrap; }
    aside.lateral .grupo {
        padding: 0 var(--e2) 0 var(--e3); white-space: nowrap;
        border-left: 1px solid rgba(255, 255, 255, .16); align-self: stretch;
        display: flex; align-items: center;
    }
    aside.lateral nav > .grupo:first-child { border-left: none; padding-left: 0; padding-top: 0; }
    /* Ramo achata para a mesma linha: no menu horizontal não há indentação */
    aside.lateral .ramo { display: flex; align-items: center; gap: var(--e1); margin-bottom: 0; }
    aside.lateral .ramo-titulo {
        padding: 0 var(--e1) 0 var(--e3); white-space: nowrap;
        border-left: 1px solid rgba(255, 255, 255, .16); align-self: stretch;
        display: flex; align-items: center;
        font: 700 var(--t-etiqueta)/1.3 var(--fonte-display);
        text-transform: uppercase; letter-spacing: var(--tracking-etiqueta);
        color: var(--sobre-escuro-etiqueta);
    }
    aside.lateral .ramo > a { margin-left: 0; padding-left: var(--e3); border-left: none; border-radius: var(--raio); }
    aside.lateral .ramo > a.ativo,
    aside.lateral .ramo > a[aria-current="page"] { border-left: none; }
    aside.lateral .marca { padding: var(--e4); border-bottom: none; }
    aside.lateral .rodape-lateral {
        display: flex; gap: var(--e4); align-items: center;
        padding: var(--e2) var(--e4) var(--e3); border-top: none; flex-wrap: wrap;
    }
    aside.lateral .rodape-lateral .bloco { padding: 0; }
    aside.lateral .rodape-lateral .bloco + .bloco { border-top: none; }
    .area-principal.shell { height: auto; min-height: 60vh; }
}

@media (max-width: 720px) {
    main.conteudo { margin: var(--e4) auto; padding: 0 var(--e4); }
    header.topo { padding: 0 var(--e4); gap: var(--e3); }
    header.topo .contexto { order: 2; }
    header.topo nav { order: 3; flex-basis: 100%; padding-bottom: var(--e2); }
    .cartao { padding: var(--e4); }
    .portal .cartao { padding: var(--e4); }
    .cartao.registro > .topo-registro,
    .cartao.registro > .corpo-registro,
    .portal .cartao.registro > .topo-registro,
    .portal .cartao.registro > .corpo-registro { padding-inline: var(--e4); }
    .cartao > .rodape-cartao { margin-inline: calc(var(--e4) * -1); padding-inline: var(--e4); }
    /* Ação primária ocupa a linha inteira: alvo de toque confortável */
    .cabecalho-pagina .acoes { width: 100%; }
    .cabecalho-pagina .acoes .btn { flex: 1; }
    .filtros > div, .filtros .campo { min-width: 100%; }
    .filtros .grupo-acoes { width: 100%; }
    .filtros .grupo-acoes .btn { flex: 1; }
    .kpi .valor { font-size: var(--t-titulo); }
    .kpi.destaque .valor { font-size: var(--t-display); }
    .truncar, .truncar.largo { max-width: 22ch; }
    th, td { padding: var(--e3); }
}

/* Conexão do WhatsApp: o QR precisa de área de leitura confortável para a
   câmera do celular, e o código de pareamento é digitado — daí a monoespaçada
   com espaçamento entre caracteres. */
.qrcode { width: 264px; height: 264px; image-rendering: pixelated; background: var(--branco); padding: var(--e2); border-radius: var(--raio); }
.codigo-pareamento { font-size: 20px; letter-spacing: .15em; font-weight: 500; }

/* Prévia da mensagem: precisa parecer mensagem, não campo de formulário —
   é lendo o texto no formato em que o contribuinte lê que se percebe erro
   de redação antes do disparo. */
.previa {
    margin-top: var(--e4); padding: var(--e3) var(--e4);
    border-left: 3px solid var(--teal-500); background: var(--superficie-2);
    border-radius: 0 var(--raio) var(--raio) 0;
}
.mensagem-previa { margin: var(--e1) 0; white-space: pre-wrap; }