/*
 * Interface do site de downloads (2026-11-05). A v2 trocou as pecas feitas a mao pelas
 * receitas da norma; a v3 poe todo icone num degrau da escala, em tamanho que fica nitido.
 * A auditoria esta em docs/auditoria-design-system.md.
 *
 * Valor nenhum nasce aqui: cor, raio, tipo e espaco vem de tokens.v1.css, a copia
 * do Design System do omni. As classes `.ds-*` sao as da vitrine da norma.
 *
 * Tres alturas de leitura: computador usa a escala da norma (corpo 14); no celular
 * o site e de consumo, entao o piso sobe (corpo 16, rotulo 12, titulo 22).
 */

:root {
    --topo-h: 64px;
    --gutter: var(--ds-space-24);
    /* A norma nao tem token do alvo de toque: 44px e o piso de B-4.15. */
    --toque: 44px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    background: var(--ds-bg);
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--topo-h) + var(--ds-grid-head-h));
}

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--ds-bg);
    color: var(--ds-text);
    font-family: var(--ds-font);
    font-size: var(--ds-fs-body);
    line-height: var(--ds-lh-body);
}

a { color: inherit; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
[hidden] { display: none !important; }

:focus-visible {
    outline: var(--ds-focus-w) solid var(--ds-focus-color);
    outline-offset: var(--ds-focus-gap);
}

/* Sem JavaScript os controles que dependem dele nao aparecem: botao morto e pior
   que botao ausente. */
html:not(.js) .precisa-js { display: none !important; }
html:not(.js) .ds-ord { pointer-events: none; }
html:not(.js) .ds-ord__g { display: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ico {
    width: var(--ds-ico-sm);
    height: var(--ds-ico-sm);
    flex: none;
}

.ico--md { width: var(--ds-ico-md); height: var(--ds-ico-md); }

.faixa {
    width: 100%;
    max-width: var(--ds-reading-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ── Atalho de teclado ───────────────────────────────────────────────────── */

.pular {
    position: fixed;
    top: var(--ds-space-8);
    left: var(--ds-space-8);
    z-index: var(--ds-z-skip);
    padding: var(--ds-space-8) var(--ds-space-16);
    border-radius: var(--ds-radius-md);
    background: var(--ds-accent);
    color: var(--ds-on-accent);
    font-weight: var(--ds-fw-medium);
    transform: translateY(-200%);
}

.pular:focus { transform: none; }

/* ── Botao e campo: as receitas da vitrine da norma ──────────────────────── */

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-6);
    min-height: var(--ds-btn-h);
    padding: var(--ds-space-8) var(--ds-space-16);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-raised);
    color: var(--ds-text);
    font: inherit;
    font-size: var(--ds-fs-body-sm);
    font-weight: var(--ds-fw-medium);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.ds-btn:hover { border-color: var(--ds-border-hover); }
.ds-btn[disabled] { opacity: .55; cursor: not-allowed; }

.ds-btn--primario {
    background: var(--ds-accent);
    border-color: var(--ds-accent);
    color: var(--ds-on-accent);
}

.ds-btn--primario:hover {
    background: var(--ds-accent-hover);
    border-color: var(--ds-accent-hover);
}

.ds-btn--fantasma {
    background: transparent;
    border-color: transparent;
    color: var(--ds-text-2);
}

.ds-btn--fantasma:hover {
    background: var(--ds-hover);
    border-color: transparent;
    color: var(--ds-text);
}

.ds-btn--compacto {
    min-height: var(--ds-btn-h-compacto);
    padding: var(--ds-space-4) var(--ds-space-10);
    font-size: var(--ds-fs-caption);
}

/* `flex: none`: ao lado de um titulo longo o botao nao encolhe abaixo do alvo de toque. */
.ds-btn--icone {
    flex: none;
    width: var(--ds-btn-h);
    padding: var(--ds-space-8);
}

/* Botao so de icone usa o degrau de botao (20). Em 16 o glifo de copiar perde os
   ombros: os traços finos caem entre dois pixels e parecem quebrados. */
.ds-btn--icone .ico { width: var(--ds-ico-md); height: var(--ds-ico-md); }

/* O balao da casa (B-21.4): o `title` do navegador nao e nome nem rotulo. A cor e
   fixa nos dois temas por contrato. */
.ds-balao {
    position: fixed;
    z-index: var(--ds-z-tooltip);
    max-width: min(280px, calc(100vw - 2 * var(--ds-space-8)));
    padding: var(--ds-space-6) var(--ds-space-8);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-tooltip-bg);
    color: var(--ds-tooltip-text);
    font-size: var(--ds-fs-caption);
    line-height: var(--ds-lh-caption);
    box-shadow: var(--ds-shadow-md);
    pointer-events: none;
}

/* ── Topo ────────────────────────────────────────────────────────────────── */

.topo {
    position: sticky;
    top: 0;
    z-index: var(--ds-z-list-drawer);
    background: var(--ds-surface);
    border-bottom: 1px solid var(--ds-border);
}

.topo__linha {
    display: flex;
    align-items: center;
    gap: var(--ds-space-8);
    height: var(--topo-h);
}

.marca {
    display: inline-flex;
    margin-right: auto;
    border-radius: var(--ds-radius-xs);
}

.marca__arte { display: block; height: var(--ds-mark-sm); width: auto; }

/* Um arquivo por tinta, e um visivel por vez (DS-08). */
.marca__arte--escuro { display: none; }

:root[data-theme="dark"] .marca__arte--claro { display: none; }
:root[data-theme="dark"] .marca__arte--escuro { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .marca__arte--claro { display: none; }
    :root:not([data-theme="light"]) .marca__arte--escuro { display: block; }
}

.menu { display: flex; align-items: center; gap: var(--ds-space-4); }

.menu a {
    display: inline-flex;
    align-items: center;
    min-height: var(--ds-btn-h);
    padding-inline: var(--ds-space-12);
    border-radius: var(--ds-radius-md);
    color: var(--ds-text-2);
    font-size: var(--ds-fs-body-sm);
    font-weight: var(--ds-fw-medium);
    text-decoration: none;
}

.menu a:hover { background: var(--ds-hover); color: var(--ds-text); }
.menu a[aria-current="page"] { color: var(--ds-text); }

/* ── Pagina ──────────────────────────────────────────────────────────────── */

.pagina {
    flex: 1 0 auto;
    padding-block: var(--ds-space-24);
}

.trilha { margin-bottom: var(--ds-space-8); }

.trilha ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--ds-space-2);
    font-size: var(--ds-fs-body-sm);
    line-height: var(--ds-lh-body-sm);
    color: var(--ds-text-2);
}

.trilha li { display: inline-flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }

.trilha li + li::before {
    content: "/";
    margin-inline: var(--ds-space-8);
    color: var(--ds-text-3);
}

.trilha a {
    color: var(--ds-text-2);
    text-decoration: underline;
    text-decoration-color: var(--ds-border-strong);
    text-underline-offset: var(--ds-space-2);
    border-radius: var(--ds-radius-xs);
}

.trilha a:hover { color: var(--ds-text); text-decoration-color: currentColor; }
.trilha [aria-current] { color: var(--ds-text); font-weight: var(--ds-fw-medium); }

.cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ds-space-16);
    margin-bottom: var(--ds-space-20);
}

.cabeca__titulo { min-width: 0; flex: 1 1 280px; }

h1 {
    font-size: var(--ds-fs-display);
    font-weight: var(--ds-fw-bold);
    line-height: var(--ds-lh-display);
    letter-spacing: var(--ds-ls-heading);
    overflow-wrap: anywhere;
}

.resumo {
    margin-top: var(--ds-space-2);
    color: var(--ds-text-2);
    font-size: var(--ds-fs-body-sm);
    line-height: var(--ds-lh-body-sm);
    font-variant-numeric: tabular-nums;
}

.cabeca__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-8);
}

/* A receita `.busca` de componentes.css: a moldura e o campo (B-4.64), e o controle
   dentro dela e nu. So o contorno difere dela: `border-strong`, porque B-4.42 e do
   contrato, e o contrato vence. */
.busca {
    display: flex;
    flex: 0 1 280px;
    align-items: center;
    gap: var(--ds-space-8);
    width: 280px;
    block-size: var(--ds-btn-h);
    padding: var(--ds-space-8) var(--ds-space-10);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    background: var(--ds-input);
    color: var(--ds-text-3);
}

.busca:focus-within {
    border-color: var(--ds-accent);
    outline: var(--ds-focus-w) solid var(--ds-focus-color);
    outline-offset: -1px;
}

.busca__c {
    flex: 1 1 auto;
    min-inline-size: 0;
    border: 0;
    background: none;
    color: var(--ds-text);
    font: inherit;
    font-size: var(--ds-fs-body-sm);
    font-weight: var(--ds-fw-medium);
    outline: none;
}

.busca__c::placeholder { color: var(--ds-text-3); font-weight: var(--ds-fw-regular); }

/* ── Aviso: a nota inline da norma ───────────────────────────────────────── */

.ds-nota {
    display: flex;
    align-items: center;
    gap: var(--ds-space-10);
    margin-bottom: var(--ds-space-16);
    padding: var(--ds-space-10) var(--ds-space-12);
    border: 1px solid var(--ds-info);
    border-radius: var(--ds-radius-md);
    background: var(--ds-info-tint);
    color: var(--ds-text);
    font-size: var(--ds-fs-body-sm);
}

.ds-nota .ico { color: var(--ds-info-text); }
.ds-nota--aviso { background: var(--ds-warning-tint); border-color: var(--ds-warning); }
.ds-nota--aviso .ico { color: var(--ds-warning-text); }
.ds-nota--perigo { background: var(--ds-danger-tint); border-color: var(--ds-danger); }
.ds-nota--perigo .ico { color: var(--ds-danger-text); }

/* ── A lista ─────────────────────────────────────────────────────────────── */

/* `clip` e nao `hidden`: recorta o canto sem virar conteiner de rolagem, e e isso
   que deixa o cabecalho da tabela grudar na janela. */
.cartao {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    overflow: clip;
}

.ds-grade {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ds-fs-body-sm);
}

.ds-grade th {
    position: sticky;
    top: var(--topo-h);
    z-index: var(--ds-z-in-header);
    height: var(--ds-grid-head-h);
    padding: 0 var(--ds-space-10);
    background: var(--ds-surface-sticky);
    border-bottom: 1px solid var(--ds-border);
    color: var(--ds-text-2);
    font-size: var(--ds-fs-label);
    font-weight: var(--ds-fw-bold);
    letter-spacing: var(--ds-ls-label);
    line-height: var(--ds-lh-none);
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.ds-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ds-grade th.ds-num { text-align: right; }

/* O `aria-sort` mora no <th>, como pede a norma da grade; o botao so recebe o clique. */
.ds-ord {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-4);
    min-height: var(--ds-grid-head-h);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.ds-ord:focus-visible { outline-offset: calc(-1 * var(--ds-focus-w)); }
.ds-ord:hover { color: var(--ds-text); }
.ds-ord__g { display: inline-flex; color: var(--ds-text-3); font-size: var(--ds-fs-micro); }
/* Glifo desenhado em 16 nao desce abaixo do menor degrau da escala: a 11px ele borra. */
.ds-ord__g .ico { width: var(--ds-ico-sm); height: var(--ds-ico-sm); }
th[aria-sort] .ds-ord { color: var(--ds-text); }
th[aria-sort] .ds-ord__g { color: var(--ds-accent-text); }

.ds-grade td {
    padding: var(--ds-space-8) var(--ds-space-10);
    border-bottom: 1px solid var(--ds-border);
    vertical-align: middle;
}

.ds-grade tbody tr:last-child td { border-bottom: 0; }

.linha { position: relative; }
.ds-grade tbody tr:hover { background: var(--ds-hover); }

.col-nome { width: 100%; }

td.col-tam, td.col-data {
    color: var(--ds-text-2);
    white-space: nowrap;
}

td.col-acoes { padding-block: var(--ds-space-4); padding-left: 0; }

/* Dois botoes, o espaco entre eles e o respiro da borda direita da celula. */
th.col-acoes {
    min-width: calc(2 * var(--ds-btn-h) + var(--ds-space-4) + var(--ds-space-10));
    padding-left: 0;
}

.acoes {
    position: relative;
    z-index: var(--ds-z-in-sticky);
    display: flex;
    justify-content: flex-end;
    gap: var(--ds-space-4);
}

.nome {
    display: flex;
    align-items: center;
    gap: var(--ds-space-12);
    min-height: var(--ds-btn-h);
}

.ico--tipo { width: var(--ds-ico-md); height: var(--ds-ico-md); color: var(--ds-text-3); }
.ico--pasta { color: var(--ds-accent-text); }

.nome__texto { min-width: 0; overflow-wrap: anywhere; }

/* A linha inteira e o alvo; as acoes ficam por cima dela. */
.nome__link {
    color: var(--ds-text);
    font-size: var(--ds-fs-body);
    font-weight: var(--ds-fw-medium);
    text-decoration: none;
}

.nome__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.nome__link:focus-visible { outline: 2px solid transparent; }

.nome__link:focus-visible::after {
    outline: var(--ds-focus-w) solid var(--ds-focus-color);
    outline-offset: calc(-1 * var(--ds-focus-w));
}

.linha:hover .nome__link { text-decoration: underline; text-underline-offset: var(--ds-space-2); }
.linha--voltar .nome__link { color: var(--ds-text-2); font-weight: var(--ds-fw-regular); }
.linha--voltar .ico--tipo { color: var(--ds-text-3); }

/* Selo de estado: o texto ja diz o que e, entao a cor nao carrega sozinha (B-4.46). */
.ds-selo {
    display: inline-block;
    margin-left: var(--ds-space-8);
    padding: var(--ds-space-2) var(--ds-space-6);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-success-tint);
    color: var(--ds-success-text);
    font-size: var(--ds-fs-label);
    font-weight: var(--ds-fw-bold);
    letter-spacing: var(--ds-ls-label);
    white-space: nowrap;
}

/* Tamanho e data moram nas colunas; no celular descem para baixo do nome. */
.meta { display: none; }

/* ── Estados de lista: a mesma anatomia (B-21.28) ────────────────────────── */

.ds-est {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-8);
    padding: var(--ds-space-24) var(--ds-space-16);
    text-align: center;
}

.ds-est__ico {
    display: grid;
    place-items: center;
    width: var(--ds-ico-2xl);
    height: var(--ds-ico-2xl);
    border-radius: var(--ds-radius-circle);
    background: var(--ds-raised-2);
    color: var(--ds-text-3);
}

.ds-est__t { font-weight: var(--ds-fw-medium); }

.ds-est__m {
    max-width: 46ch;
    color: var(--ds-text-2);
    font-size: var(--ds-fs-caption);
    overflow-wrap: anywhere;
}

/* ── Rodape: tambem e onde o contato mora ────────────────────────────────── */

.rodape {
    flex-shrink: 0;
    background: var(--ds-surface);
    border-top: 1px solid var(--ds-border);
    color: var(--ds-text-2);
    font-size: var(--ds-fs-body-sm);
    line-height: var(--ds-lh-body-sm);
}

.rodape__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-8) var(--ds-space-24);
    padding-block: var(--ds-space-16);
}

.rodape a { color: var(--ds-text-2); }
.rodape a:hover { color: var(--ds-text); }
.rodape__direitos a { color: var(--ds-text); font-weight: var(--ds-fw-medium); }

.rodape__contato {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-4) var(--ds-space-20);
}

.rodape__contato a {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-6);
    min-height: var(--ds-field-h-compacto);
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* ── Detalhes do arquivo ─────────────────────────────────────────────────── */

.detalhes {
    width: min(640px, calc(100vw - 2 * var(--ds-space-16)));
    max-height: min(720px, calc(100dvh - 2 * var(--ds-space-16)));
    padding: 0;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-modal-radius);
    background: var(--ds-surface);
    color: var(--ds-text);
    box-shadow: var(--ds-modal-shadow);
    overflow: hidden;
}

.detalhes[open] { display: flex; flex-direction: column; }
.detalhes::backdrop { background: var(--ds-scrim); }

.detalhes__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-12);
    padding: var(--ds-space-16) var(--ds-space-12) var(--ds-space-12) var(--ds-space-20);
    border-bottom: 1px solid var(--ds-border);
}

.detalhes h2 {
    padding-block: var(--ds-space-8);
    font-size: var(--ds-fs-headline);
    font-weight: var(--ds-fw-bold);
    line-height: var(--ds-lh-headline);
    overflow-wrap: anywhere;
}

.detalhes__corpo {
    display: grid;
    gap: var(--ds-space-20);
    padding: var(--ds-space-20);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.detalhes__corpo:focus-visible { outline-offset: calc(-1 * var(--ds-focus-w)); }

.fatos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--ds-space-12);
}

dt, .soma__nome {
    color: var(--ds-text-2);
    font-size: var(--ds-fs-label);
    font-weight: var(--ds-fw-bold);
    letter-spacing: var(--ds-ls-label);
    line-height: var(--ds-lh-caption);
    text-transform: uppercase;
}

dd { font-variant-numeric: tabular-nums; }

.detalhes h3 {
    font-size: var(--ds-fs-title);
    font-weight: var(--ds-fw-medium);
    line-height: var(--ds-lh-title);
}

.somas__ajuda {
    margin-block: var(--ds-space-2) var(--ds-space-10);
    color: var(--ds-text-2);
    font-size: var(--ds-fs-body-sm);
    line-height: var(--ds-lh-body-sm);
}

.soma {
    display: grid;
    grid-template-columns: 8ch minmax(0, 1fr) var(--ds-btn-h);
    align-items: center;
    gap: var(--ds-space-8);
    min-height: var(--ds-btn-h);
    padding-block: var(--ds-space-2);
    border-top: 1px solid var(--ds-border);
}

.soma__valor {
    font-family: var(--ds-mono);
    font-size: var(--ds-fs-mono);
    line-height: var(--ds-lh-body);
    overflow-wrap: anywhere;
    user-select: all;
}

.soma--sem .soma__valor {
    color: var(--ds-text-2);
    font-family: var(--ds-font);
    user-select: auto;
}

.novidades__texto {
    margin-top: var(--ds-space-6);
    padding: var(--ds-space-12);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-raised);
    color: var(--ds-text-2);
    font-size: var(--ds-fs-body-sm);
    line-height: var(--ds-lh-body-sm);
    overflow-wrap: anywhere;
}

.detalhes__rodape {
    display: flex;
    justify-content: flex-end;
    padding: var(--ds-space-12) var(--ds-space-20);
    border-top: 1px solid var(--ds-border);
}

/* ── Toque: vale para celular E para tablet, que passa da largura do celular ─ */

@media (max-width: 719px), (pointer: coarse) {

    /* O degrau redefine o TOKEN (B-4.15), e quem o consome acompanha. */
    :root { --ds-btn-h: var(--toque); --ds-btn-h-compacto: var(--toque); }

    /* 16px no campo: abaixo disso o celular da zoom ao receber foco. */
    .busca__c { font-size: var(--ds-fs-form-touch); }

    .ds-ord, .rodape__contato a { min-height: var(--toque); }
    .ds-btn, .menu a { font-size: var(--ds-fs-body); }
    .trilha a { display: inline-block; padding-block: var(--ds-space-4); }
}

/* ── Celular ─────────────────────────────────────────────────────────────── */

@media (max-width: 719px) {

    :root {
        /* O topo deixa de grudar: no celular a altura vale mais que ele. */
        --topo-h: 0px;
        --gutter: var(--ds-space-16);
    }

    html { scroll-padding-top: var(--ds-grid-head-h); }

    .topo { position: static; }
    .topo__linha { height: 56px; }
    .pagina { padding-block: var(--ds-space-16); }

    .cabeca { margin-bottom: var(--ds-space-16); }
    .cabeca__titulo { flex-basis: 100%; }
    .cabeca__acoes { width: 100%; }
    .cabeca__acoes .ds-btn { flex: 1 1 100%; }
    .busca { flex: 1 1 100%; width: auto; }

    body { font-size: 1rem; }
    .nome__link { font-size: 1rem; }

    /* A tabela vira pilha, e os papeis escritos no HTML (role) e que mantem o
       sentido de tabela para o leitor de tela. As colunas viram uma barra de
       ordem: os tres botoes continuam ao alcance. */
    .ds-grade, .ds-grade thead, .ds-grade tbody { display: block; }
    .ds-grade thead { position: sticky; top: 0; z-index: var(--ds-z-in-header); }
    .ds-grade thead tr { display: flex; background: var(--ds-surface-sticky); }
    .linha { display: flex; align-items: center; border-bottom: 1px solid var(--ds-border); }
    .ds-grade tbody .linha:last-child { border-bottom: 0; }
    .ds-grade td { border-bottom: 0; }
    .ds-grade td.col-nome { flex: 1 1 auto; min-width: 0; width: auto; }
    .linha--voltar .nome { align-items: center; min-height: 0; }
    .linha--voltar .ico--tipo { margin-top: 0; }
    .linha--voltar td.col-acoes { display: none; }
    .ds-grade th, .ds-grade th.col-tam, .ds-grade th.col-data {
        position: static;
        height: var(--toque);
        padding: 0;
        background: none;
        font-size: var(--ds-fs-caption);
        letter-spacing: 0;
        text-align: left;
        text-transform: none;
    }
    .ds-grade th { border-bottom: 0; }
    .ds-grade thead tr { border-bottom: 1px solid var(--ds-border); padding-inline: var(--ds-space-14); gap: var(--ds-space-16); }
    .ds-grade th.col-nome { width: auto; }
    .ds-grade th.col-acoes { display: none; }

    td.col-tam, td.col-data { display: none; }
    .ds-grade td { padding: var(--ds-space-10) var(--ds-space-14); }
    .ds-grade td.col-nome { padding-right: var(--ds-space-4); }
    td.col-acoes { padding-block: var(--ds-space-4); padding-left: 0; padding-right: var(--ds-space-8); }
    .acoes { gap: 0; }
    .nome { align-items: flex-start; }
    .ico--tipo { margin-top: var(--ds-space-2); }

    .meta {
        display: block;
        margin-top: var(--ds-space-2);
        color: var(--ds-text-2);
        font-size: var(--ds-fs-body-sm);
        line-height: var(--ds-lh-body-sm);
        font-variant-numeric: tabular-nums;
    }

    .ds-selo { margin-left: 0; display: block; width: fit-content; margin-top: var(--ds-space-4); font-size: var(--ds-fs-caption); }

    .rodape__linha { flex-direction: column; align-items: flex-start; }
    .rodape__contato { flex-direction: column; }
    .rodape { font-size: 1rem; }

    .detalhes {
        width: 100vw;
        max-width: 100vw;
        max-height: 92dvh;
        margin: auto 0 0;
        border-width: 1px 0 0;
        border-radius: var(--ds-modal-radius) var(--ds-modal-radius) 0 0;
    }

    .soma { grid-template-columns: minmax(0, 1fr) var(--ds-btn-h); }
    .soma__nome { grid-column: 1 / -1; padding-top: var(--ds-space-8); font-size: var(--ds-fs-caption); }
    dt { font-size: var(--ds-fs-caption); }
    .soma__valor { font-size: var(--ds-fs-body-sm); }
    .detalhes__rodape .ds-btn { flex: 1; }
}

/* ── Movimento e alto contraste ──────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    .ds-btn, .menu a, .linha { transition: background-color .12s ease, border-color .12s ease; }
}

@media (forced-colors: active) {
    .ds-btn, .busca, .cartao, .detalhes, .ds-nota, .ds-balao { border-color: CanvasText; }
    .linha:hover { outline: 1px solid Highlight; outline-offset: -1px; }
    th[aria-sort] .ds-ord { text-decoration: underline; }
    .ds-selo { outline: 1px solid CanvasText; }
    .nome__link:focus-visible::after { outline-color: Highlight; }
}