/* ============================================================
   Design System — Cobrança de Dívida Ativa
   Fonte única de tokens e componentes para backoffice, portal
   do contribuinte e telas de autenticação.

   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.
   - Numerais tabulares em todo dado fiscal (valor, data, doc).
   - Identidade: friso dourado institucional e selos de status
     com aspecto de carimbo.
   ============================================================ */

:root {
    /* ---- Cor: estrutura ---- */
    --tinta: #1c2b3a;          /* texto principal */
    --mudo: #5c6b7a;           /* texto secundário — 4.9:1 sobre branco */
    --papel: #f5f6f8;          /* fundo da aplicação */
    --branco: #ffffff;
    --superficie-2: #f9fafb;   /* cabeçalho de tabela, faixas internas */
    --superficie-3: #f2f4f6;   /* hover de superfície clara */
    --borda: #dbe1e8;
    --borda-forte: #b9c3cd;

    /* ---- Cor: marca institucional ---- */
    --marinho: #16324f;        /* ação primária, navegação */
    --marinho-2: #24466b;      /* hover primário, links */
    --marinho-escuro: #10263c; /* header e menu lateral */
    --ouro: #c8a24b;           /* friso institucional — só no timbre */

    /* Texto sobre o marinho escuro */
    --sobre-escuro: #c3d0dd;
    --sobre-escuro-fraco: #7e93a8;

    /* ---- Cor: semântica (fundo claro + texto escuro, contraste AA) ---- */
    --ok-texto: #166b45;     --ok-fundo: #ddf3e7;     --ok-borda: #b7e2c9;
    --alerta-texto: #7a5200; --alerta-fundo: #fcf0d0; --alerta-borda: #ecd9a0;
    --erro-texto: #a92e26;   --erro-fundo: #fbe4e2;   --erro-borda: #f0c1bd;
    --info-texto: #175f8f;   --info-fundo: #e2eff9;   --info-borda: #bcd9ec;

    /* ---- 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: system-ui, "Segoe UI", Roboto, sans-serif;
    --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --t-display-g: 28px; /* KPI em destaque */
    --t-display: 24px;   /* KPI padrão */
    --t-destaque: 18px;  /* valor monetário em leitura */
    --t-titulo: 20px;    /* h1 da página */
    --t-secao: 15px;     /* h2 — título de seção/cartão */
    --t-corpo: 14px;
    --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 */

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

    --sombra: 0 1px 2px rgba(16, 38, 60, .06);
    --sombra-md: 0 2px 8px rgba(16, 38, 60, .08);
    --sombra-alta: 0 12px 32px rgba(0, 0, 0, .28);

    --anel-foco: 0 0 0 3px rgba(36, 70, 107, .30);
    --transicao: 120ms ease;

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

/* ---------- 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(--marinho-2); }
a:hover { color: var(--marinho); }

h1 { font-size: var(--t-titulo); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: var(--t-secao); font-weight: 650; }
h3 { font-size: var(--t-apoio); font-weight: 700; }

/* Dados fiscais: valores, datas e documentos alinham em coluna */
td, th, .kpi .valor, .dado, .codigo { font-variant-numeric: tabular-nums; }

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

.pular-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--branco); color: var(--marinho);
    padding: var(--e2) var(--e4); z-index: 100;
    border-radius: 0 0 var(--raio) 0;
}
.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;
    }
}

/* ============================================================
   Estrutura: menu lateral (backoffice)
   ============================================================ */
.aplicacao {
    display: grid;
    grid-template-columns: 232px 1fr;
    min-height: 100vh;
}
aside.lateral {
    background: var(--marinho-escuro);
    border-top: 3px solid var(--ouro); /* friso: timbre institucional */
    color: #fff;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
aside.lateral .marca {
    font-weight: 700; font-size: var(--t-secao); color: #fff;
    padding: var(--e5) var(--e5) var(--e4);
    letter-spacing: -.01em;
}
aside.lateral nav { flex: 1; padding: 0 var(--e3) var(--e4); }
aside.lateral .grupo {
    font-size: var(--t-etiqueta); color: var(--sobre-escuro-fraco);
    text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
    padding: var(--e4) var(--e3) var(--e1);
}
aside.lateral nav a {
    display: block; color: var(--sobre-escuro); text-decoration: none;
    padding: var(--e2) var(--e3); border-radius: var(--raio-sm);
    font-size: var(--t-apoio); border-left: 3px solid transparent;
    margin-bottom: 2px; transition: background var(--transicao), color var(--transicao);
}
aside.lateral nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
aside.lateral nav a.ativo, aside.lateral nav a[aria-current="page"] {
    background: var(--marinho-2); color: #fff; font-weight: 600;
    border-left-color: var(--ouro);
}
/* 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-size: var(--t-apoio); font-weight: 600; 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-sm) var(--raio-sm) 0;
}
aside.lateral .ramo > a.ativo,
aside.lateral .ramo > a[aria-current="page"] { border-left-color: var(--ouro); border-left-width: 3px; }

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

/* 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,.12);
    font-size: var(--t-micro); color: var(--sobre-escuro);
}
aside.lateral .rodape-lateral a { color: #fff; }
aside.lateral .rodape-lateral .bloco { padding: var(--e2) 0; }
aside.lateral .rodape-lateral .bloco + .bloco { border-top: 1px solid rgba(255,255,255,.09); }
aside.lateral .rodape-lateral .etiqueta {
    display: block; font-size: var(--t-etiqueta); color: var(--sobre-escuro-fraco);
    text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
    margin-bottom: 2px;
}
aside.lateral .rodape-lateral .nome { color: #fff; font-weight: 600; }
.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: #e9edf1; 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: #dde3e9; 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: #e4e9ee; }
.aba .rotulo {
    background: none; border: none; cursor: pointer;
    font: 600 var(--t-apoio) 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);
    padding: var(--e2); border-radius: var(--raio-xs);
}
.aba .fechar:hover { color: var(--erro-texto); background: rgba(0,0,0,.06); }
.aba.ativa { background: var(--papel); border-top: 2px solid var(--ouro); }
.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: var(--marinho-escuro);
    border-top: 3px solid var(--ouro); /* friso: timbre institucional */
    color: #fff;
    padding: 0 var(--e6);
    display: flex; align-items: center; gap: var(--e5);
    min-height: 56px; flex-wrap: wrap;
}
header.topo .marca { font-weight: 700; white-space: nowrap; padding: var(--e3) 0; }
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(--sobre-escuro); text-decoration: none;
    padding: var(--e2) var(--e3); border-radius: var(--raio-sm);
    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,.09); color: #fff; }
header.topo nav a.ativo, header.topo nav a[aria-current="page"] {
    background: var(--marinho-2); color: #fff; font-weight: 600;
}
header.topo .contexto { font-size: var(--t-micro); color: var(--sobre-escuro); white-space: nowrap; }
header.topo .contexto a { color: #fff; }
header.topo :focus-visible { outline-color: var(--ouro); }

/* ============================================================
   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(--e5); 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(--e2); 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(--e5); }
/* 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-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: .07em;
    color: var(--mudo); font-weight: 700;
}
.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);
    box-shadow: var(--sombra);
    padding: var(--e5);
    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(--e3); 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: var(--e1); 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(--e5) calc(var(--e5) * -1) calc(var(--e5) * -1);
    padding: var(--e3) var(--e5); border-top: 1px solid var(--borda);
    background: var(--superficie-2);
    border-radius: 0 0 var(--raio) var(--raio);
}
/* 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(--e3) var(--e5); flex-wrap: wrap;
    border-bottom: 1px solid var(--borda);
}
.cartao.registro > .topo-registro .principal { font-weight: 650; }
.cartao.registro > .topo-registro .empurra { margin-left: auto; }
.cartao.registro > .corpo-registro { padding: var(--e4) var(--e5); }
.cartao.registro > .corpo-registro > * + * { margin-top: var(--e3); }

/* ---------- KPIs ---------- */
.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 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); box-shadow: var(--sombra);
    padding: var(--e4); 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); }
.kpi .rotulo {
    font-size: var(--t-etiqueta); color: var(--mudo);
    text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.kpi .valor { font-size: var(--t-display); font-weight: 700; line-height: 1.2; }
.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(--e4);
}
.dados > div { min-width: 0; }
.dados .rotulo {
    display: block; font-size: var(--t-etiqueta); color: var(--mudo);
    text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
    margin-bottom: 2px;
}
.dados .valor {
    display: block; font-weight: 650; 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); }
.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-size: var(--t-etiqueta); color: var(--mudo);
    text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.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); 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); 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-size: var(--t-etiqueta);
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--mudo); font-weight: 600; white-space: nowrap;
}
tbody tr { transition: background var(--transicao); }
tbody tr:hover { background: #f7f9fb; }
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); }
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(--marinho); }

/* 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(--e2) var(--e4);
    font-size: var(--t-apoio); color: var(--info-texto);
}
.barra-selecao + .rolagem { border-radius: 0 0 var(--raio) var(--raio); }
.barra-selecao .contagem { font-weight: 600; }
.filtros + .barra-selecao { border-top: none; }

/* ---------- Selos de status (carimbo fiscal) ---------- */
.selo {
    display: inline-block; padding: 2px var(--e2);
    border-radius: var(--raio-xs); border: 1px solid var(--borda);
    font-size: var(--t-etiqueta); font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    background: #edf0f3; 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: #edf0f3;             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); font-weight: 600; }

/* ---------- 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-xs);
    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(--marinho); color: #fff;
    border: 1px solid transparent; border-radius: var(--raio);
    padding: 0 var(--e4); height: var(--altura-controle);
    font: 600 var(--t-corpo) 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(--marinho-2); color: #fff; }
.btn:active { background: var(--marinho-escuro); }
.btn:focus-visible { outline: 2px solid var(--marinho-2); outline-offset: 2px; box-shadow: var(--anel-foco); }

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

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

.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 { outline-color: var(--erro-texto); box-shadow: 0 0 0 3px rgba(169, 46, 38, .25); }

.btn.pequeno { height: var(--altura-controle-p); padding: 0 var(--e3); font-size: var(--t-apoio); }
.btn.bloco { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; 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); }
label .obrigatorio { color: var(--erro-texto); }
label .opcional { color: var(--mudo); font-weight: 400; }

input, select, textarea {
    width: 100%; padding: var(--e2) var(--e3);
    border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
    font: var(--t-corpo) 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: 72px; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--marinho-2); box-shadow: var(--anel-foco);
}
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
    background: var(--superficie-2); color: var(--mudo); cursor: not-allowed;
}
input[readonly] { cursor: text; }
input[type="checkbox"], input[type="radio"] {
    width: auto; min-height: 0; accent-color: var(--marinho);
    width: 16px; height: 16px;
}
input[type="file"] { padding: var(--e1) var(--e2); }
/* 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); margin-top: var(--e1); }

/* Campo: rótulo, controle e ajuda são uma unidade (proximidade) */
.campo { margin-bottom: var(--e4); 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; margin: 0;
}
.escolha + .escolha { margin-top: var(--e2); }

.grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e4); }
.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(--e5); 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) var(--raio) 0 0; border-bottom: none;
    padding: var(--e4);
}
.filtros + .rolagem, .filtros + table { border-radius: 0 0 var(--raio) var(--raio); }
.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(--marinho-2); list-style-position: inside;
    display: flex; align-items: center; gap: var(--e2);
}
.filtros .filtros-avancados > summary::marker { color: var(--mudo); }
.filtros .filtros-avancados > summary:hover { color: var(--marinho); }
.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-weight: 650; font-size: var(--t-secao); }
.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(440px, calc(100vw - var(--e8)));
    color: var(--tinta);
}
.modal::backdrop { background: rgba(16, 38, 60, .45); }
.modal-caixa {
    background: var(--branco); border-radius: var(--raio-lg);
    box-shadow: var(--sombra-alta); padding: var(--e6);
}
.modal-titulo { font-size: var(--t-secao); font-weight: 700; margin-bottom: var(--e2); }
.modal-texto { font-size: var(--t-corpo); color: var(--tinta); }
.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;
    font-family: var(--fonte-mono);
    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: 650; }
.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: 600; font-variant-numeric: tabular-nums;
    transition: background var(--transicao), border-color var(--transicao);
}
a.pagina:hover { background: var(--superficie-3); border-color: var(--borda-forte); color: var(--tinta); }
.pagina.atual { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.pagina.desabilitada { color: var(--mudo); background: var(--superficie-2); cursor: not-allowed; }
.reticencias { padding: 0 var(--e1); color: var(--mudo); }
/* 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(--e2) var(--e3);
    font-size: var(--t-apoio); font-weight: 600; color: var(--marinho-2);
    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(--e3); 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(--e3); 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); }
.valor-guia { font-size: var(--t-display); }
.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); font-size: var(--t-micro);
    padding: var(--e6) var(--e4); line-height: 1.7;
}

/* ============================================================
   Autenticação e telas de passagem
   ============================================================ */
.pagina-central {
    min-height: 100vh; display: grid; place-items: center;
    background: var(--marinho-escuro); border-top: 3px solid var(--ouro);
    padding: var(--e4);
}
.pagina-central .caixa {
    background: var(--branco); border-radius: var(--raio-lg);
    box-shadow: var(--sombra-alta);
    padding: var(--e8); width: 100%; max-width: 400px;
}
.pagina-central .caixa h1 { font-size: var(--t-secao); }
.pagina-central .caixa .campo { margin-bottom: var(--e3); }

/* Cabeçalho de uma caixa isolada: título + contexto, uma unidade */
.cabecalho-caixa { margin-bottom: var(--e5); }
.cabecalho-caixa .subtitulo {
    color: var(--mudo); font-size: var(--t-apoio); margin-top: var(--e1);
}

/* ============================================================
   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; border-left: none; }
    aside.lateral nav a.ativo, aside.lateral nav a[aria-current="page"] { border-left: none; }
    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; }
    /* 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-size: var(--t-etiqueta);
        text-transform: uppercase; letter-spacing: .06em; color: var(--sobre-escuro-fraco);
    }
    aside.lateral .ramo > a { margin-left: 0; padding-left: var(--e3); border-left: none; border-radius: var(--raio-sm); }
    aside.lateral .ramo > a.ativo,
    aside.lateral .ramo > a[aria-current="page"] { border-left: none; }
    aside.lateral .marca { padding: var(--e3) var(--e4) var(--e2); }
    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; }
    /* Cabeçalho fixo de tabela atrapalha em tela curta */
}