/* ============================================================
   Portal de Documentos — Direção A ("Institucional Refinada")
   Evolução da topbar azul que já existia: menu agrupado por ordem de
   dependência, mais respiro, hierarquia tipográfica. Paleta institucional
   mantida (P-06): azul #1B4F8A / âmbar #E8A020.

   AVISO DE ESPECIFICIDADE (bug já cometido no mockup, não repetir):
   NÃO declarar um seletor genérico do tipo `.algo a { color: … }`. Ele tem
   especificidade 0-1-1 (classe + tipo) e vence QUALQUER classe de componente
   (0-1-0) — foi assim que botões que são <a href> saíram com texto azul sobre
   fundo azul, enquanto os <button> passavam ilesos. Cor de link é declarada
   elemento a elemento.

   CONTRASTE (DoD §4.5 item 6): o mockup pintava a marca de âmbar sobre azul e
   o selo de azul sobre âmbar — ambos 3,74:1, REPROVAM o AA (4,5:1). Aqui a
   marca é branca sobre azul (8,29:1) e o selo tem letras azul-escuro sobre
   âmbar (5,43:1). O âmbar segue sendo o acento, sem carregar texto pequeno.
   ============================================================ */

:root {
    --azul: #1B4F8A;
    --azul-esc: #163F6F;
    --azul-cla: #EEF4FB;
    --ambar: #E8A020;
    --texto: #1f2733;
    /* #6b7480 (o cinza antigo) passa no branco por 4,74:1 mas REPROVA sobre a
       superfície clara do filtro e dos tiles (#f7f9fc): 4,49:1, um centésimo
       abaixo do AA. É o motivo de o DoD exigir a conferência no ELEMENTO
       RENDERIZADO, e não na paleta em tese. Este tom passa nos três fundos
       (branco 5,23 · #f7f9fc 4,96 · #fbfcfd 5,09). */
    --muted: #656d79;
    --borda: #d9dee6;
    --cinza-bg: #f4f6f9;
    --superficie: #f7f9fc;
    --raio: 10px;
    --raio-sm: 7px;
    --sombra: 0 1px 3px rgba(0, 0, 0, .05);

    /* Tons de PAREAMENTO do dashboard: ligam cada card à sua seção. São só isso —
       identidade visual do par, nunca estado.

       Três regras que os escolheram, e que não são estética:
       1. A cor é REDUNDANTE. O rótulo e o link já levam o usuário à seção; ela só
          reforça. Quem não distingue cores não perde nada (mesma lição da hachura
          no segmento pendente do gráfico).
       2. NENHUMA cor semântica reaproveitada com outro sentido. Nada de verde
          (= "ok" nos selos) nem vermelho (= perigo). O âmbar aparece SÓ no par
          "Pendentes → Atenção", onde ele já significa pendência: ali ele reforça,
          em qualquer outro card ele mentiria.
       3. Usados como FAIXA, jamais como fundo do card. Tingir a superfície mudaria
          o contraste do texto que já foi validado no elemento renderizado. */
    --tom-clientes: #1B4F8A;      /* azul institucional  — 8,3:1 no branco */
    --tom-documentos: #2A7B7B;    /* verde-petróleo      — 4,3:1 */
    --tom-atencao: #C97F10;       /* âmbar do "pendente" — 3,1:1 (só faixa, não texto) */
    --tom-envios: #5B57A6;        /* índigo              — 6,0:1 */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--texto);
    background: var(--cinza-bg);
    line-height: 1.5;
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.6rem 1.5rem 2.5rem;
}

h1 {
    margin-top: 0;
    color: var(--azul);
    font-size: 1.35rem;
    letter-spacing: -.015em;
}
h2 { font-size: 1.05rem; }

.muted { color: var(--muted); }

/* ---------- Barra superior ---------- */

.topbar { background: var(--azul); color: #fff; }

.topbar__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1120px;
    margin: 0 auto;
    padding: .8rem 1.5rem;
}

/* Marca: texto BRANCO (8,29:1). O âmbar fica no selo, como fundo. */
.topbar__marca {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -.01em;
}
.topbar__selo {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 6px;
    background: var(--ambar);
    color: #123761;              /* 5,43:1 sobre o âmbar */
    display: grid;
    place-items: center;
    font-size: .8rem;
    font-weight: 800;
}

.topbar__usuario {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .9rem;
    color: #cfe0f2;
}
.inline { display: inline; margin: 0; }

/* Botão com cara de link. A cor padrão é a de CONTEÚDO (azul sobre branco): a
   classe é usada nas tabelas ("Desativar"/"Ativar"), e ali o tom claro da
   topbar dava ~1,3:1 — texto quase invisível. O tom claro só vale DENTRO da
   topbar, onde o fundo é azul (seletor .topbar .link-btn, 0-2-0, vence). */
.link-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--azul);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}
.link-btn:hover { color: var(--azul-esc); }
.link-btn:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.topbar .link-btn { color: #cfe0f2; }
.topbar .link-btn:hover { color: #fff; }
.topbar .link-btn:focus-visible { outline-color: var(--ambar); }

.topbar__link { color: #cfe0f2; text-decoration: underline; }
.topbar__link:hover { color: #fff; }

/* Sanduíche: só aparece no celular (media query no fim). */
.burger {
    display: none;
    background: none;
    border: 1px solid #4a7cb0;
    border-radius: 6px;
    padding: .3rem .55rem;
    color: #fff;
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.burger:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }

/* ---------- Menu: 4 grupos na ordem de dependência (RN-045) ----------
   Os grupos ficam SEMPRE visíveis — é a ordem que a navegação precisa ensinar.
   Os submenus nascem RECOLHIDOS (atributo hidden) e abrem no clique, um de cada
   vez (accordion). Estado controlado por <button aria-expanded> no app.js —
   nunca por :hover (mataria teclado e toque) nem por onclick inline (a CSP
   estrita da RN-033 proíbe). */

.nav {
    background: var(--azul-esc);
    display: flex;
    gap: .35rem;
    padding: 0 1.5rem;
    max-width: 1120px;
    margin: 0 auto;
}
.nav__grupo { position: relative; }

.nav__botao {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem .8rem;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    color: #dce8f4;             /* 8,55:1 sobre o azul-escuro */
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
}
.nav__botao:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.nav__botao:focus-visible { outline: 2px solid var(--ambar); outline-offset: -2px; }
.nav__botao[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .1); }

/* Marcação e expansão são coisas diferentes: o grupo da página atual é marcado
   com o traço âmbar, mas continua RECOLHIDO ao carregar. */
.nav__grupo--atual .nav__botao {
    color: #fff;
    font-weight: 600;
    border-bottom-color: var(--ambar);
}

.nav__n {
    width: 17px;
    height: 17px;
    flex: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, .14);
    color: #cfe0f2;
    display: grid;
    place-items: center;
    font-size: .65rem;
    font-weight: 700;
}
.nav__seta { font-size: .6rem; opacity: .8; transition: transform .15s ease; }
.nav__botao[aria-expanded="true"] .nav__seta { transform: rotate(180deg); }

.nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 13rem;
    display: flex;
    flex-direction: column;
    padding: .35rem;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.nav__sub[hidden] { display: none; }
.nav__sub a {
    padding: .5rem .65rem;
    border-radius: 5px;
    color: var(--texto);
    text-decoration: none;
    font-size: .9rem;
}
.nav__sub a:hover { background: var(--azul-cla); color: var(--azul); }
.nav__sub a:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.nav__sub a[aria-current] { background: var(--azul-cla); color: var(--azul); font-weight: 600; }

/* Destinatário: navegação de um item só — o redesign não complica o lado de
   quem só baixa. */
.nav__unico {
    display: flex;
    align-items: center;
    padding: .7rem .8rem;
    color: #dce8f4;
    text-decoration: none;
    font-size: .88rem;
    border-bottom: 3px solid transparent;
}
.nav__unico:hover { color: #fff; }
.nav__unico[aria-current] { color: #fff; font-weight: 600; border-bottom-color: var(--ambar); }
.nav__unico:focus-visible { outline: 2px solid var(--ambar); outline-offset: -2px; }

/* ---------- Cards ---------- */

.card {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1.4rem;
    box-shadow: var(--sombra);
}
.card + .card { margin-top: 1.2rem; }

.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.card__head h1 { margin: 0; }
.card__head p { margin: .15rem 0 0; font-size: .88rem; color: var(--muted); }

.card--form { max-width: 560px; }

/* Cartão centrado das telas não autenticadas que não são o login (redefinir
   senha, link inválido). */
.card--auth { max-width: 26rem; margin: 2.5rem auto 0; }

/* ---------- Botões ---------- */

.btn {
    display: inline-block;
    padding: .55rem 1.1rem;
    border: 0;
    border-radius: var(--raio-sm);
    font: inherit;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    cursor: pointer;
}
.btn:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* Cor declarada nos dois estados e valendo tanto para <button> quanto para
   <a class="btn">, de propósito (DoD item 6). */
.btn--primario, .btn--primario:hover, .btn--primario:visited { color: #fff; }
.btn--primario { background: var(--azul); }
.btn--primario:hover { background: var(--azul-esc); }

.btn--secundario, .btn--secundario:hover, .btn--secundario:visited { color: var(--azul); }
.btn--secundario { background: #fff; border: 1px solid var(--azul); }
.btn--secundario:hover { background: var(--azul-cla); }

/* Botão de ação destrutiva (remover em lote). Existe como CLASSE PRÓPRIA: antes
   isso era `btn btn--secundario link-btn--perigo`, e o vermelho só vencia o azul
   porque `.link-btn--perigo` estava declarado depois no arquivo — as duas regras
   têm a mesma especificidade (0-1-0). Reordenar o CSS teria pintado o botão de
   azul, calado. */
.btn--perigo, .btn--perigo:hover, .btn--perigo:visited { color: #9b1c17; }
.btn--perigo { background: #fff; border: 1px solid #e3b3b1; }
.btn--perigo:hover { background: #fdecea; border-color: #9b1c17; }

.btn--sm { padding: .3rem .7rem; font-size: .83rem; }

.link { color: var(--azul); text-decoration: none; }
.link:hover { text-decoration: underline; }
.link-btn--perigo { color: #9b1c17; }
.link-btn--perigo:hover { color: #6f130f; }

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

label { display: block; margin: 1rem 0 .3rem; font-weight: 600; font-size: .85rem; }

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    font: inherit;
    background: #fff;
}
textarea { resize: vertical; min-height: 4rem; }
input[type="file"] {
    width: 100%;
    padding: .5rem;
    border: 1px dashed var(--borda);
    border-radius: var(--raio-sm);
    background: #fafbfc;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; }

/* Nota explicativa dentro de um card (abaixo das abas, acima da tabela).
   Existe como CLASSE porque atributo style inline é barrado pela CSP estrita
   (style-src 'self') — a RN-033 não é decorativa. */
.nota { margin: 1rem 0 0; font-size: .9rem; }

.uf-input { text-transform: uppercase; max-width: 6rem; }
.erro-campo { color: #9b1c17; font-size: .85rem; margin: .25rem 0 0; }

.form-acoes { display: flex; gap: .6rem; align-items: center; margin-top: 1.5rem; flex-wrap: wrap; }
/* Ações dentro do cabeçalho do card (ex.: publicar competência): já há respiro
   ali, não precisam do empurrão de cima. */
.form-acoes--topo { margin-top: 0; }
.linha-dupla { display: flex; gap: 1rem; flex-wrap: wrap; }
.linha-dupla > div { flex: 1 1 12rem; }

/* Carteira do suporte (RN-052): lista de clientes ativos no cadastro de usuário.
   Uma coluna, e não os chips em linha do filtro de tipos: aqui o nome do cliente
   é longo ("Município de ..."), e em linha eles quebram no meio. */
.carteira {
    margin: 1rem 0 0;
    padding: .75rem 1rem 1rem;
    border: 1px solid var(--borda);
    border-radius: 6px;
}
.carteira legend { font-size: .82rem; color: var(--muted); padding: 0 .35rem; }
.carteira__item {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .4rem;
    font-weight: 400;
    font-size: .92rem;
}
.carteira__item input { width: 1.05rem; height: 1.05rem; cursor: pointer; }

/* ---------- Login (dois painéis: arte + formulário) ---------- */

.login {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: calc(100vh - 0px);
}
.login__arte {
    background: linear-gradient(160deg, #1B4F8A 0%, #123761 100%);
    color: #fff;
    padding: 3rem 2.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login__arte h2 {
    margin: 0 0 .8rem;
    font-size: 1.85rem;
    line-height: 1.25;
    letter-spacing: -.02em;
}
.login__arte p { margin: 0 0 2rem; max-width: 30ch; color: #b9d0e8; font-size: .98rem; }
.login__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.login__lista li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: #dce8f4; }
.login__lista i {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 5px;
    background: rgba(232, 160, 32, .22);
    color: var(--ambar);
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: .7rem;
    font-weight: 800;
}

.login__form {
    background: #fff;
    padding: 3rem 2.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login__caixa { width: 100%; max-width: 24rem; margin: 0 auto; }
.login__form h1 { margin: 0 0 .3rem; font-size: 1.5rem; }
.login__form > .login__caixa > p { margin: 0 0 1.6rem; color: var(--muted); font-size: .92rem; }
.login__form .btn { width: 100%; margin-top: 1.2rem; padding: .7rem; }
.login__ajuda { margin: 1.1rem 0 0; font-size: .88rem; text-align: center; }
.login__ajuda a { color: var(--azul); }

/* Flash nas telas de largura total (login): sem container, precisa do próprio
   respiro. */
.flash-topo { max-width: 1120px; margin: 0 auto; padding: 1rem 1.5rem 0; }
.flash-topo .alerta { margin: 0; }

/* ---------- Alertas ---------- */

.alerta {
    margin: 0 0 1.2rem;
    padding: .75rem .9rem;
    border-radius: var(--raio-sm);
    font-size: .93rem;
}
.alerta--erro    { background: #fdecea; border: 1px solid #f5c2c0; color: #9b1c17; }
.alerta--sucesso { background: #e7f6ec; border: 1px solid #b7e0c4; color: #1c6b3a; }

/* Aviso (âmbar): não é erro — é "pense antes". Usado ao criar um SUPORTE, que
   administra o portal inteiro. Antes isso reusava o vermelho de erro. */
.alerta--aviso   { background: #fdf1dc; border: 1px solid var(--ambar); color: #8a5a09; }

/* ---------- Tabelas ---------- */

.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th, .tabela td {
    text-align: left;
    padding: .65rem .55rem;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}
.tabela th {
    background: #fbfcfd;
    color: var(--muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.tabela tbody tr:hover { background: var(--superficie); }
.tabela code { background: #f0f3f7; padding: .1rem .35rem; border-radius: 4px; font-size: .9em; }
.col-acoes { width: 1%; white-space: nowrap; }
.col-check { width: 1%; text-align: center; white-space: nowrap; }
.col-check input { width: 1.05rem; height: 1.05rem; cursor: pointer; }
/* A célula de ações NÃO pode ser flex: `display: flex` num <td> o tira do
   layout de tabela — a célula deixa de esticar até a altura da linha e a borda
   inferior dela desalinha das outras colunas (degrau visível na grade). O
   espaçamento sai do fluxo inline, com a célula continuando table-cell. */
.acoes { white-space: nowrap; }
.acoes > * { display: inline-block; vertical-align: middle; }
.acoes > * + * { margin-left: .75rem; }
.linha-vigente { background: #eef6ee; }

/* Grade de permissões: cliente (linha) × tipo (coluna) */
.tabela--grade th, .tabela--grade td { text-align: center; }
.tabela--grade .grade__cliente,
.tabela--grade .grade__canto {
    text-align: left;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
    font-size: .95rem;
    color: inherit;
    background: none;
}
.tabela--grade .grade__cliente .muted { font-weight: 400; }
.tabela--grade .grade__cel input { width: 1.1rem; height: 1.1rem; cursor: pointer; }

/* ---------- Selos ---------- */

.badge {
    display: inline-block;
    padding: .12rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge--ok       { background: #e7f6ec; color: #1c6b3a; }
.badge--off      { background: #eceff3; color: #5c6470; }
.badge--rascunho { background: #e8f0fa; color: var(--azul); }

/* Selo âmbar de formato não padrão (RN-017/RN-034): visível e TEXTUAL —
   nunca vira só um ícone colorido. */
.badge--alerta { background: #fdf1dc; color: #8a5a09; border: 1px solid var(--ambar); }
.tabela .badge--alerta { margin-left: .4rem; }

/* ---------- Breadcrumb ---------- */

.breadcrumb { margin: 0 0 .9rem; font-size: .85rem; color: var(--muted); }
.breadcrumb a { color: var(--azul); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 .35rem; color: #b0b8c2; }

/* ---------- Painel: atalhos agrupados na ordem de dependência ----------
   Um card por GRUPO (os mesmos 4 do menu), e dentro dele os atalhos. O painel
   deixa de ser um punhado de botões espalhados e passa a ensinar a mesma ordem
   que o menu ensina. */

.grupo__cabeca {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin-bottom: .2rem;
}
.grupo__n {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--azul-cla);
    color: var(--azul);
    display: grid;
    place-items: center;
    font-size: .82rem;
    font-weight: 800;
}
.grupo__titulo {
    margin: 0;
    font-size: 1.05rem;
    color: var(--azul);
    letter-spacing: -.01em;
}
.grupo__resumo { margin: .1rem 0 0; font-size: .88rem; color: var(--muted); }

.atalhos {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .8rem;
}
/* O atalho vive DENTRO do card do grupo, então usa a superfície clara em vez de
   branco sobre branco (que sumiria). */
.atalho {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    height: 100%;
    padding: .9rem 1rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    text-decoration: none;
    color: var(--texto);
}
.atalho:hover { border-color: var(--azul); background: var(--azul-cla); }
.atalho:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.atalho__titulo { font-size: .98rem; font-weight: 600; color: var(--azul); }
.atalho__desc { font-size: .85rem; color: var(--muted); }

/* ---------- Filtro ---------- */

.filtro {
    margin-bottom: 1.2rem;
    padding: 1rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 8px;
}
.filtro__linha { display: flex; flex-wrap: wrap; gap: 1rem; }
.filtro__linha label {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: 0;
    font-size: .82rem;
    color: var(--muted);
}
.filtro__linha select { min-width: 11rem; }
.filtro__tipos {
    margin: 1rem 0 0;
    padding: .75rem 1rem;
    border: 1px solid var(--borda);
    border-radius: 6px;
}
.filtro__tipos legend { font-size: .82rem; color: var(--muted); padding: 0 .35rem; }
.filtro__tipo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-right: 1.25rem;
    font-size: .92rem;
}
.filtro .form-acoes { margin-top: 1rem; }

/* ---------- Resultado do upload ---------- */

.resultado-upload { margin: 1rem 0 1.5rem; }
.resultado-upload h2 { font-size: 1rem; margin: 0 0 .5rem; }
.lista-resultado { list-style: none; padding: 0; margin: 0; }
.lista-resultado li {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    padding: .5rem .7rem;
    margin-bottom: .4rem;
    border-radius: 6px;
    font-size: .93rem;
}
.res-ok   { background: #e7f6ec; color: #1c6b3a; }
.res-erro { background: #fdecea; color: #9b1c17; }
.res-badge { font-weight: 700; }

/* ---------- Abas e paginação ---------- */

.tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.tab {
    padding: .35rem .8rem;
    border: 1px solid var(--borda);
    border-radius: 6px;
    color: var(--azul);
    text-decoration: none;
    font-size: .88rem;
}
.tab:hover { background: var(--azul-cla); }
.tab--ativa, .tab--ativa:hover { background: var(--azul); color: #fff; border-color: var(--azul); }

.pager { display: flex; gap: .75rem; margin-top: 1rem; }

/* ---------- Listagem: paginação + ordenação (v1.4) ---------- */

/* Cabeçalho ordenável: um <a> de verdade (RN-069), sem JS — a CSP estrita segue
   valendo e a ordenação funciona por teclado e com o botão de voltar. Herda o
   visual do <th> (maiúsculas, muted); escurece no hover; a coluna ativa fica azul
   e a célula recebe um fundo suave, ecoando o aria-sort para quem enxerga. */
.tabela th .th-ord {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: inherit;
    text-decoration: none;
    letter-spacing: inherit;
    text-transform: inherit;
}
.tabela th .th-ord:hover { color: var(--azul); text-decoration: underline; }
.tabela th .th-ord--ativa { color: var(--azul); }
.tabela th[aria-sort="ascending"],
.tabela th[aria-sort="descending"] { background: var(--azul-cla); }

/* A barra: total à esquerda, itens-por-página no meio, pager à direita. Igual em
   todas as listagens. */
.listagem-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-top: 1rem;
}
.listagem-barra__total { margin: 0; }
.listagem-barra .pager { margin-top: 0; }
/* Todos os controles da barra na MESMA escala compacta: sem isto, os botões
   Anterior/Próxima (.btn cheio) ficam maiores que o "Aplicar". */
.listagem-barra .btn { padding: .32rem .7rem; font-size: .83rem; }

.por-pagina { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .85rem; }
.por-pagina__rot { color: var(--muted); }
.por-pagina__op { color: var(--azul); text-decoration: none; padding: .2rem .45rem; border-radius: var(--raio-sm); line-height: 1.2; }
.por-pagina__op:hover { background: var(--azul-cla); }
.por-pagina__ativo { padding: .2rem .45rem; border-radius: var(--raio-sm); background: var(--azul); color: #fff; line-height: 1.2; }
.por-pagina__livre { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 0 .35rem; }
/* O <label> global é display:block com margin de 1rem — dentro da barra isso
   quebrava a linha e desalinhava o campo. Aqui ele volta a ser inline e sem margem. */
.por-pagina__livre label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-weight: 400; color: var(--muted); }
.por-pagina__livre input[type="number"] { width: 4rem; padding: .32rem .45rem; font-size: .83rem; }

/* No celular os três blocos empilham (a barra é flex-wrap, mas forçar coluna
   evita o pager espremido ao lado do seletor num aparelho estreito). */
@media (max-width: 620px) {
    .listagem-barra { flex-direction: column; align-items: stretch; }
    .listagem-barra .pager { flex-direction: column; }
}

/* ---------- Diversos ---------- */

pre.json {
    margin: .5rem 0 0;
    padding: .5rem .6rem;
    background: #f0f3f7;
    border-radius: 6px;
    max-width: 40rem;
    max-height: 16rem;
    overflow: auto;
    font-size: .8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.resumo { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1.25rem; }
.resumo dt { color: var(--muted); font-size: .88rem; }
.resumo dd { margin: 0; }

/* ---------- Dashboard (UC-11/12/13) ----------
   Os tiles se acomodam sozinhos: auto-fit + minmax dispensa media query. */

.tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}
.tile {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
/* Card clicável (RN-059): é um <a href="#secao"> de verdade — navega por teclado,
   entra no histórico e funciona com o botão de voltar. Nada de onclick: a CSP
   estrita (RN-033) barra script inline, e um card que só responde ao mouse seria
   inacessível.

   `color: inherit` porque o <a> herdaria o azul de link e pintaria também o
   rótulo e a nota — o azul aqui pertence ao NÚMERO (.tile__valor), não ao card. */
.tile--link {
    color: inherit;
    text-decoration: none;
    height: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tile--link:hover {
    border-color: var(--azul);
    box-shadow: 0 2px 10px rgba(27, 79, 138, .12);
}
.tile--link:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ---------- Pareamento card ↔ seção (dashboard) ----------
   O card leva uma faixa no topo; a seção de destino leva a mesma cor numa barra
   ao lado do título. É reforço do link, não informação nova: quem não vê a cor
   continua tendo o rótulo do card e o texto do título.

   `--tom` é definido pela classe do par (.par--clientes etc.), e tanto o card
   quanto a seção o consomem — assim a cor do card e a do título NUNCA divergem:
   trocar o tom num lugar só é impossível por construção. */
.tile--link { border-top: 3px solid var(--tom, var(--borda)); }

.card--par > h2 {
    border-left: 4px solid var(--tom, var(--borda));
    padding-left: .6rem;
    /* O h2 nasce com margem de bloco; sem isto a barra fica "solta" do texto. */
    line-height: 1.25;
}

.par--clientes   { --tom: var(--tom-clientes); }
.par--documentos { --tom: var(--tom-documentos); }
.par--atencao    { --tom: var(--tom-atencao); }
.par--envios     { --tom: var(--tom-envios); }

.tile__valor {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--azul);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.tile__rotulo { font-size: .9rem; color: var(--texto); }

/* A nota é o que impede o número de enganar (RN-028/RN-032): discreta, mas
   sempre visível — não é tooltip, não é "saiba mais". */
.tile__nota { font-size: .75rem; color: var(--muted); line-height: 1.35; }

.grafico { margin: 0 0 1rem; }
.grafico__legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: .5rem;
    font-size: .85rem;
    color: var(--texto);
}
.grafico__item { display: inline-flex; align-items: center; gap: .4rem; }
.grafico__amostra { width: 14px; height: 14px; flex: 0 0 auto; }
.grafico__item--nota { color: var(--muted); font-size: .8rem; }

/* O viewBox faz o trabalho de escala; o SVG só precisa ocupar a largura. */
.grafico__svg { width: 100%; height: auto; display: block; }

.grafico__dados { margin-top: .5rem; }
.grafico__dados summary {
    cursor: pointer;
    font-size: .9rem;
    color: var(--azul);
    padding: .25rem 0;
}
.grafico__dados summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.grafico__dados .tabela-wrap { margin-top: .75rem; }

.lista-baixas { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.lista-baixas li { padding: .1rem 0; }

/* ============================================================
   Celular — o menu inteiro vai para trás do sanduíche; os 4 grupos
   aparecem empilhados e o submenu abre INLINE (não flutua), continuando
   recolhido por padrão. Mesmo comportamento, outra geometria.
   (A responsividade das demais telas entra na Etapa 5.)
   ============================================================ */

@media (max-width: 620px) {
    .burger { display: block; }
    .topbar__inner { padding: .7rem 1rem; }
    .topbar__usuario span.topbar__nome { display: none; }

    .nav { display: none; }
    .nav--aberto {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: .2rem 1rem .8rem;
    }
    .nav--aberto .nav__grupo { border-top: 1px solid #2a5a92; }
    .nav--aberto .nav__botao {
        width: 100%;
        justify-content: flex-start;
        padding: .8rem .2rem;
        border-bottom: 0;
        border-left: 3px solid transparent;
    }
    .nav--aberto .nav__grupo--atual .nav__botao {
        border-left-color: var(--ambar);
        padding-left: .5rem;
    }
    .nav--aberto .nav__seta { margin-left: auto; }
    .nav--aberto .nav__sub {
        position: static;
        min-width: 0;
        padding: .2rem .2rem .5rem;
        background: rgba(0, 0, 0, .16);
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .nav--aberto .nav__sub a { color: #dce8f4; padding: .6rem .8rem; }
    .nav--aberto .nav__sub a:hover,
    .nav--aberto .nav__sub a[aria-current] { background: rgba(255, 255, 255, .1); color: #fff; }
    .nav--aberto .nav__unico { padding: .8rem .2rem; border-top: 1px solid #2a5a92; }

    .container { padding: 1.1rem 1rem 2rem; }
    .card { padding: 1.1rem; }

    .login { grid-template-columns: 1fr; min-height: 0; }
    .login__arte { display: none; }
    .login__form { padding: 2rem 1.3rem; min-height: 100vh; }
}

@media (max-width: 900px) and (min-width: 621px) {
    .login { grid-template-columns: 1fr; min-height: 0; }
    .login__arte { padding: 2rem 1.6rem; }
    .login__arte h2 { font-size: 1.4rem; }
    .login__form { padding: 2.4rem 1.6rem; }
}

/* ============================================================
   RESPONSIVIDADE DAS TELAS (Etapa 5)

   Tablet (≤ 900px): o layout já é fluido — só o que tem largura fixa aperta.
   Celular (≤ 620px): a tabela deixa de ser tabela e vira uma LISTA DE CARTÕES,
   um por linha, com o cabeçalho da coluna vindo do atributo data-rot de cada
   célula. Sem isso, uma tabela de 9 colunas (a da competência) obriga a rolagem
   lateral num aparelho de 360px, e ninguém lê.

   A EXCEÇÃO É A GRADE DE PERMISSÕES (.tabela--grade): ela é uma MATRIZ
   cliente × tipo — a informação ESTÁ no cruzamento de linha e coluna. Quebrá-la
   em cartões destruiria justamente o que ela comunica. Ela continua tabela e
   rola lateralmente, que é o comportamento correto para uma matriz.
   ============================================================ */

@media (max-width: 900px) {
    .filtro__linha { gap: .75rem; }
    .filtro__linha label { flex: 1 1 12rem; }
    .filtro__linha select { min-width: 0; width: 100%; }
    .tiles { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
    .container { padding: 1.3rem 1.2rem 2rem; }
}

@media (max-width: 620px) {
    /* Cabeçalho do card: título e ação empilham, e o botão ocupa a linha —
       alvo de toque decente em vez de um botão espremido no canto. */
    .card__head { flex-direction: column; align-items: stretch; }
    .card__head .btn { width: 100%; text-align: center; }
    .card__head .form-acoes { flex-direction: column; align-items: stretch; }
    .card__head .form-acoes .btn { width: 100%; }

    .form-acoes { flex-direction: column; align-items: stretch; }
    .form-acoes .btn { width: 100%; text-align: center; }

    .filtro__linha { flex-direction: column; gap: .8rem; }
    /* `flex: 1 1 12rem` (regra do tablet) precisa ser DESFEITA aqui: com
       flex-direction: column, o flex-basis deixa de ser largura e vira ALTURA —
       cada campo do filtro ganhava 12rem de altura de base, abrindo um vão
       enorme entre "Usuário" e "Ação". Em coluna, o campo tem a altura do seu
       conteúdo. */
    .filtro__linha label { flex: 0 0 auto; width: 100%; }
    .filtro__tipo { display: flex; margin: 0 0 .5rem; }

    .tiles { grid-template-columns: 1fr; }
    .breadcrumb { line-height: 1.8; }
    .resumo { grid-template-columns: 1fr; gap: 0 0; }
    .resumo dt { margin-top: .6rem; }
    .tabs { width: 100%; }
    .tab { flex: 1; text-align: center; }
    .pager { flex-direction: column; }
    .pager .btn { width: 100%; text-align: center; }

    /* --- Tabela → lista de cartões (exceto a grade de permissões) --- */
    .tabela:not(.tabela--grade) thead { display: none; }
    .tabela:not(.tabela--grade),
    .tabela:not(.tabela--grade) tbody,
    .tabela:not(.tabela--grade) tr,
    .tabela:not(.tabela--grade) td,
    .tabela:not(.tabela--grade) tbody th {
        display: block;
        width: 100%;
    }
    .tabela:not(.tabela--grade) tr {
        border: 1px solid var(--borda);
        border-radius: 8px;
        padding: .7rem .85rem;
        margin-bottom: .7rem;
        background: #fff;
    }
    .tabela:not(.tabela--grade) tbody tr:hover { background: #fff; }
    .tabela:not(.tabela--grade) td,
    .tabela:not(.tabela--grade) tbody th {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: .25rem 0;
        border: 0;
        text-align: left;
    }
    /* O rótulo da coluna passa a viver na célula (data-rot), já que o thead
       sumiu. Célula com data-rot="" (checkbox, ações) não recebe rótulo. */
    .tabela:not(.tabela--grade) td::before,
    .tabela:not(.tabela--grade) tbody th::before {
        content: attr(data-rot);
        flex: none;
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--muted);
    }
    .tabela:not(.tabela--grade) td[data-rot=""]::before,
    .tabela:not(.tabela--grade) td:not([data-rot])::before { display: none; }

    /* Ações dentro do cartão: viram botões de largura cheia, empilhados. */
    .tabela:not(.tabela--grade) td.acoes {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
        margin-top: .6rem;
        white-space: normal;
    }
    .tabela:not(.tabela--grade) td.acoes > * { display: block; margin-left: 0; text-align: center; }
    .tabela:not(.tabela--grade) td.acoes .btn { width: 100%; }
    .tabela:not(.tabela--grade) td.acoes .link,
    .tabela:not(.tabela--grade) td.acoes .link-btn {
        padding: .45rem 0;
        border: 1px solid var(--borda);
        border-radius: var(--raio-sm);
        text-decoration: none;
        width: 100%;
    }
    .tabela:not(.tabela--grade) td.col-check { justify-content: flex-start; }
    .tabela:not(.tabela--grade) pre.json { max-width: 100%; }

    /* A grade de permissões continua sendo matriz: rola lateralmente. */
    .tabela--grade { font-size: .85rem; }
    .tabela--grade th, .tabela--grade td { padding: .5rem .4rem; }
}

/* ============================================================
   Ajuda (v1.5) — manual por perfil em /ajuda

   As seções são <details> nativos: sem JS, logo sem atrito com a CSP estrita
   (RN-033), e operáveis por teclado sem aria escrito à mão.

   Cor: só o azul institucional e os neutros. Âmbar, verde e vermelho ficam de
   FORA de propósito — no portal eles já significam pendência, ok e perigo
   (armadilha de CSS nº 6), e uma nota de manual não é nenhum desses estados.

   Especificidade: nada de `.ajuda a { … }` (0-1-1 venceria as classes de
   componente, 0-1-0 — o bug registrado no topo deste arquivo). Cor de link é
   declarada nos dois lugares onde ela existe aqui, e só neles.
   ============================================================ */

.ajuda__indice ol {
    margin: 0;
    padding-left: 1.25rem;
    columns: 2;
    column-gap: 2rem;
}
.ajuda__indice li { margin: .3rem 0; break-inside: avoid; }
.ajuda__indice ol a { color: var(--azul); text-decoration: none; }
.ajuda__indice ol a:hover,
.ajuda__indice ol a:focus-visible { text-decoration: underline; }

.ajuda__secao { padding: 0; }

/* O <summary> é o alvo de clique da seção inteira: precisa de área generosa. */
.ajuda__titulo {
    cursor: pointer;
    padding: 1rem 1.25rem;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--azul-esc);
    list-style: none;              /* Firefox/Chrome: some o triângulo padrão */
    display: flex;
    align-items: center;
    gap: .6rem;
}
.ajuda__titulo::-webkit-details-marker { display: none; }   /* Safari */
.ajuda__titulo::before {
    content: "▸";
    color: var(--muted);
    font-size: .9em;
    transition: transform .15s ease;
    flex: 0 0 auto;
}
.ajuda__secao[open] > .ajuda__titulo::before { transform: rotate(90deg); }
.ajuda__titulo:hover { background: var(--azul-cla); }
.ajuda__titulo:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

.ajuda__corpo {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid var(--borda);
    padding-top: 1rem;
}
.ajuda__corpo p { margin: 0 0 .85rem; line-height: 1.6; max-width: 74ch; }
.ajuda__corpo code {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 4px;
    padding: .05rem .3rem;
    font-size: .92em;
}

.ajuda__lista, .ajuda__passos { margin: 0 0 .9rem; padding-left: 1.4rem; max-width: 74ch; }
.ajuda__lista li, .ajuda__passos li { margin: .4rem 0; line-height: 1.6; }
.ajuda__passos li { padding-left: .2rem; }

/* Nota: faixa lateral, nunca fundo tingido de cor semântica. */
.ajuda__nota {
    background: var(--azul-cla);
    border-left: 4px solid var(--azul);
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
    padding: .75rem 1rem;
    margin: 0 0 1rem;
}

.ajuda__tabela { margin-bottom: 1rem; }
.ajuda__tabela td { vertical-align: top; line-height: 1.55; }

.ajuda__topo { margin: 1.2rem 0 0; font-size: .9rem; }
.ajuda__topo a { color: var(--muted); text-decoration: none; }
.ajuda__topo a:hover,
.ajuda__topo a:focus-visible { color: var(--azul); text-decoration: underline; }

@media (max-width: 720px) {
    .ajuda__indice ol { columns: 1; }
    .ajuda__titulo { padding: .85rem 1rem; font-size: 1rem; }
    .ajuda__corpo { padding: .9rem 1rem 1rem; }
}

/* Impressão: o manual vira folha/PDF para entregar a quem está começando.
   As seções já nascem abertas — CSS não consegue abrir <details> fechado, e é
   por isso que o padrão é `open` (ver o comentário da view). */
@media print {
    .topbar, .nav, .ajuda__topo, .flash-topo, .alerta { display: none !important; }
    .card, .ajuda__secao {
        box-shadow: none !important;
        border: none !important;
        padding-left: 0;
        padding-right: 0;
        break-inside: auto;
    }
    .ajuda__titulo { padding-left: 0; break-after: avoid; }
    .ajuda__titulo::before { display: none; }
    .ajuda__corpo { padding-left: 0; padding-right: 0; }
    .ajuda__nota { background: none; border-left: 3px solid #000; }
    .ajuda__indice { break-after: page; }
    .ajuda__corpo p, .ajuda__lista, .ajuda__passos { max-width: none; }
}