/* ================= tokens — os mesmos da landing ================= */
:root {
  --fundo:      #070B18;
  --fundo-2:    #0B1124;
  --superficie: #101A38;
  --tinta:      #EAEFFF;
  --tinta-mid:  #99A5D0;
  --linha:      #1E2A52;
  --linha-forte:#2E3D6E;
  --coral:      #FF6B5A;
  --coral-luz:  #FF8E7F;
  --azul:       #7C8CFF;
  --azul-fundo: #2B3A8F;
  --ciano:      #4FD8E8;
  --sol:        #FFB443;
  --grade: radial-gradient(circle, color-mix(in srgb, var(--azul) 26%, transparent) .9px, transparent .9px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --fundo:      #EDF1FD;
    --fundo-2:    #DEE6FB;
    --superficie: #FFFFFF;
    --tinta:      #050B22;
    --tinta-mid:  #3E4B7E;
    --linha:      #C6D2F0;
    --linha-forte:#9EAFE0;
    --coral:      #D93A22;
    --coral-luz:  #EE5236;
    --azul:       #2C3DB4;
    --azul-fundo: #B2BFF3;
    --ciano:      #04697F;
    --sol:        #B36A00;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --fundo:      #EDF1FD;
  --fundo-2:    #DEE6FB;
  --superficie: #FFFFFF;
  --tinta:      #050B22;
  --tinta-mid:  #3E4B7E;
  --linha:      #C6D2F0;
  --linha-forte:#9EAFE0;
  --coral:      #D93A22;
  --coral-luz:  #EE5236;
  --azul:       #2C3DB4;
  --azul-fundo: #B2BFF3;
  --ciano:      #04697F;
  --sol:        #B36A00;
  color-scheme: light;
}

/* ================= base ================= */
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  background: var(--grade) 0 0 / 30px 30px, var(--fundo);
  color: var(--tinta);
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2 {
  font-family: "Bricolage Grotesque", Archivo, ui-sans-serif, sans-serif;
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; margin: 0; text-wrap: balance;
}
p { margin: 0; max-width: 68ch; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
/* fieldset nasce com min-width: min-content e input com largura intrínseca: os dois impedem a coluna de encolher no celular */
fieldset, input, select, textarea { min-width: 0; }
/* no celular não existe arrastar e "escolher pasta" não funciona no iOS: a área vira botão */
.so-toque { display: none; }
.rot { display: none; }
@media (hover: none) and (pointer: coarse) {
  .so-mouse { display: none; }
  .so-toque { display: inline; }
  .solta { cursor: pointer; }
}
:focus-visible { outline: 2px solid var(--ciano); outline-offset: 4px; border-radius: 3px; }
.env { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
[hidden] { display: none !important; }

/* ================= topo ================= */
body > header {
  position: sticky; top: 0; z-index: 10; padding: .7rem 0;
  background: color-mix(in srgb, var(--fundo) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha);
}
.barra { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.marca { display: flex; align-items: center; gap: .9rem; text-decoration: none; }
.marca img { height: 40px; width: auto; }
.marca img.so-escuro { display: block; }
.marca img.so-claro  { display: none; }
:root[data-theme="light"] .marca img.so-claro  { display: block; }
:root[data-theme="light"] .marca img.so-escuro { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .marca img.so-claro  { display: block; }
  :root:not([data-theme="dark"]) .marca img.so-escuro { display: none; }
}
.marca small { padding-left: .9rem; border-left: 1px solid var(--linha-forte); font-size: .88rem; color: var(--tinta-mid); }
nav { display: flex; align-items: center; gap: 1.2rem; }
nav a.item { text-decoration: none; color: var(--tinta-mid); font-size: .93rem; font-weight: 500; }
nav a.item:hover { color: var(--tinta); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.3rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--coral); color: #FFF4F1;
  font: 600 .95rem/1 Archivo, sans-serif; text-decoration: none;
  box-shadow: 0 8px 30px -12px var(--coral);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -14px var(--coral); }
.btn.discreto { background: transparent; color: var(--tinta); border: 1px solid var(--linha-forte); box-shadow: none; }
.btn.discreto:hover { border-color: var(--ciano); color: var(--ciano); }
.btn.mini { padding: .5rem .95rem; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }

.tema { width: 36px; height: 36px; display: grid; place-items: center; background: transparent; border: 1px solid var(--linha-forte); border-radius: 999px; color: var(--tinta-mid); cursor: pointer; transition: color .25s, border-color .25s; }
.tema:hover { color: var(--ciano); border-color: var(--ciano); }
.tema svg { width: 16px; height: 16px; }
.tema .lua { display: block; }
.tema .sol { display: none; }
:root[data-theme="light"] .tema .lua { display: none; }
:root[data-theme="light"] .tema .sol { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tema .lua { display: none; }
  :root:not([data-theme="dark"]) .tema .sol { display: block; }
}

/* ================= abertura: o texto e a entrada ================= */
/* no celular a entrada sobe e o painel desce: a ação vem antes da explicação */
.abertura { padding: 4.5rem 0 3rem; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "texto aside" "solta solta"; gap: 2.8rem 4rem; align-items: center; }
.abertura__grade { display: contents; }
.abertura__texto { grid-area: texto; }
.entra-sai { grid-area: aside; }
.abertura .solta { grid-area: solta; margin-top: 0; }
.abertura h1 { font-size: clamp(2.2rem, 5.6vw, 4.2rem); max-width: 18ch; }
.lead { margin-top: 1.5rem; font-size: 1.12rem; color: var(--tinta-mid); max-width: 58ch; }

.local {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.6rem;
  padding: .5rem .95rem .5rem .7rem; border: 1px solid var(--linha-forte); border-radius: 999px;
  font-size: .86rem; color: var(--tinta-mid); background: color-mix(in srgb, var(--superficie) 55%, transparent);
}
.local svg { width: 15px; height: 15px; color: var(--ciano); flex: none; }
.local b { color: var(--tinta); font-weight: 600; }

/* entra → sai: a mesma leitura do fluxo da landing, em miniatura */
.entra-sai { display: grid; gap: .5rem; }
.entra-sai > div { padding: 1.1rem 1.3rem 1.2rem; border: 1px solid var(--linha); border-radius: 14px; background: color-mix(in srgb, var(--superficie) 40%, transparent); }
.entra-sai .rotulo { display: block; margin-bottom: .5rem; font: 600 .7rem/1.3 "JetBrains Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.entra-sai .entra .rotulo { color: var(--ciano); }
.entra-sai .sai .rotulo { color: var(--sol); }
.entra-sai ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; font-size: .93rem; color: var(--tinta-mid); }
.entra-sai li { position: relative; padding-left: 1.05rem; }
.entra-sai li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ciano); }
.entra-sai .sai li::before { background: var(--sol); }
.entra-sai .sai li { color: var(--tinta); }
.entra-sai .seta { justify-self: center; display: grid; place-items: center; width: 26px; height: 26px; margin: -.2rem 0; color: var(--coral); }
.entra-sai .seta svg { width: 16px; height: 16px; }

/* ================= área de soltar ================= */
.solta {
  position: relative; margin-top: 2.8rem; padding: 3.4rem 2rem 2.6rem; text-align: center;
  border: 1.5px dashed var(--linha-forte); border-radius: 20px;
  background: color-mix(in srgb, var(--superficie) 32%, transparent);
  transition: border-color .25s, background .25s;
}
.solta.sobre { border-color: var(--ciano); border-style: solid; background: color-mix(in srgb, var(--ciano) 9%, var(--superficie) 40%); }
.solta.lendo { border-style: solid; border-color: var(--azul); }
.solta > svg { width: 54px; height: 54px; color: var(--azul); }
.solta.sobre > svg { color: var(--ciano); }
.solta h2 { margin-top: 1rem; font-size: clamp(1.25rem, 2.6vw, 1.7rem); letter-spacing: -0.02em; }
.solta p { margin-inline: auto; }
.solta .ou { margin-top: .7rem; color: var(--tinta-mid); font-size: .98rem; }
.solta .ou button { background: none; border: 0; padding: 0; color: var(--tinta); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ciano); cursor: pointer; }
.solta .ou button:hover { color: var(--ciano); }
.solta .aceita { margin-top: 1rem; max-width: 60ch; font-size: .8rem; color: var(--tinta-mid); }
.solta .andamento { margin-top: 1rem; font-size: .9rem; color: var(--ciano); }
.solta .andamento.erro { color: var(--sol); }
.solta .exemplo { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1.2rem; color: var(--tinta-mid); font-size: .98rem; }

/* ================= resultado ================= */
.resultado { padding: 2.2rem 0 0; animation: entra .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes entra { from { opacity: 0; transform: translateY(12px); } }
@keyframes cresce { from { transform: scaleX(0); } }

.lida {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem;
  padding: .85rem 1.2rem; border: 1px solid var(--linha); border-radius: 12px;
  background: color-mix(in srgb, var(--superficie) 40%, transparent);
  font-size: .92rem; color: var(--tinta-mid);
}
.lida b { color: var(--tinta); font-weight: 600; }
.lida .avisos { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.lida .avisos span::before { content: "·"; margin-right: .6rem; color: var(--linha-forte); }
.lida .avisos span:first-child::before { content: none; }

.aviso-vazio { margin-top: 1.4rem; padding: 1.1rem 1.3rem; border: 1px solid var(--coral); border-radius: 12px; color: var(--tinta); font-size: .98rem; }

/* resumo em duas colunas: a frase e a régua */
.painel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem 4rem; align-items: center; margin-top: 3rem; }
.painel .resumo, .painel .regua { margin-top: 0; }
.painel .regua__legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.resumo { margin-top: 3rem; font-size: clamp(1.45rem, 3.2vw, 2.25rem); max-width: 28ch; }
.resumo .valor { color: var(--coral); }
.resumo small { display: block; margin-top: .6rem; font: 500 .95rem/1.45 Archivo, sans-serif; letter-spacing: 0; color: var(--tinta-mid); max-width: 60ch; }

/* régua: a cor de cada faixa entra por --cor no [data-faixa], que cada demo define */
.regua { margin-top: 2.2rem; --cor: var(--linha-forte); }
.regua__barra { display: flex; gap: 3px; height: 12px; }
.regua__barra i { display: block; flex: 0 0 auto; min-width: 4px; border-radius: 3px; background: var(--cor); transform-origin: left; animation: cresce .7s cubic-bezier(.2,.7,.3,1) both; }
.regua__legenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 1.5rem; margin-top: 1rem; }
.regua__legenda div { padding-top: .8rem; border-top: 1px solid var(--linha); font-size: .86rem; color: var(--tinta-mid); }
.regua__legenda div::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: .5rem; border-radius: 2px; background: var(--cor); vertical-align: 0; }
.regua__legenda b { display: block; margin-top: .25rem; color: var(--tinta); font-size: 1.12rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.regua__legenda small { display: block; font-size: .8rem; }

/* cartões de número */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .9rem; margin-top: 2.4rem; }
.kpi { padding: 1rem 1.2rem 1.1rem; border: 1px solid var(--linha); border-radius: 14px; background: color-mix(in srgb, var(--superficie) 40%, transparent); font-size: .86rem; color: var(--tinta-mid); }
.kpi b { display: block; margin-top: .3rem; font-size: 1.55rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--tinta); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi small { display: block; margin-top: .25rem; font-size: .78rem; color: var(--tinta-mid); }

/* ================= ferramentas ================= */
.ferramentas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 1.5rem; margin: 2.8rem 0 1.2rem; }
.busca { position: relative; flex: 1 1 16rem; max-width: 24rem; }
.busca input {
  width: 100%; padding: .65rem .95rem .65rem 2.3rem; border-radius: 10px;
  border: 1px solid var(--linha-forte); background: color-mix(in srgb, var(--superficie) 60%, transparent);
  color: var(--tinta); font: 400 .95rem/1.4 Archivo, sans-serif;
}
.busca input:focus { outline: none; border-color: var(--ciano); }
.busca svg { position: absolute; left: .8rem; top: 50%; translate: 0 -50%; width: 15px; height: 15px; color: var(--tinta-mid); pointer-events: none; }
.exportar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.exportar .btn { padding: .62rem 1.05rem; font-size: .88rem; }
.exportar .btn svg { width: 14px; height: 14px; }
.copiado { font-size: .85rem; color: var(--ciano); }

.filtros { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtros button { padding: .5rem .95rem; border: 1px solid var(--linha-forte); border-radius: 999px; background: transparent; color: var(--tinta-mid); font-size: .88rem; font-weight: 500; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.filtros button:hover { color: var(--tinta); border-color: var(--ciano); }
.filtros button[aria-pressed="true"] { background: var(--azul-fundo); color: var(--tinta); border-color: var(--azul-fundo); }

/* ================= tabela ================= */
.rolagem { overflow-x: auto; margin-inline: -1.25rem; padding-inline: 1.25rem; }
table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .95rem; }
table.fixa { table-layout: fixed; }
th {
  padding: .7rem .8rem; text-align: left; font-size: .78rem; font-weight: 600; color: var(--tinta-mid);
  border-bottom: 1px solid var(--linha-forte); white-space: nowrap;
}
th[data-col] { cursor: pointer; user-select: none; }
th[data-col]:hover { color: var(--tinta); }
th .ordem { display: inline-block; width: .9em; margin-left: .2rem; color: var(--ciano); font-size: .7em; }
th.num, td.num { text-align: right; }
td { padding: .72rem .8rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
td.num { font-variant-numeric: tabular-nums; }
td.doc { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .86rem; color: var(--tinta-mid); white-space: nowrap; }
td.titulo { font-weight: 500; }
td.titulo small { display: block; font-weight: 400; font-size: .8rem; color: var(--tinta-mid); }
tbody tr.linha { transition: background .15s; animation: entra .4s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--i, 0) * 28ms); }
tbody tr.linha[aria-expanded] { cursor: pointer; }
tbody tr.linha:hover { background: color-mix(in srgb, var(--superficie) 55%, transparent); }
tbody tr.linha[aria-expanded="true"] { background: color-mix(in srgb, var(--superficie) 70%, transparent); }
tbody tr.linha[aria-expanded="true"] td { border-bottom-color: transparent; }
tr.detalhe td { padding: 0 .8rem 1.3rem 1.1rem; background: color-mix(in srgb, var(--fundo-2) 55%, transparent); }
.detalhe__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.4rem 2.5rem; padding-top: .3rem; font-size: .9rem; }
.detalhe h3 { margin: 0 0 .5rem; font: 600 .76rem/1.4 Archivo, sans-serif; color: var(--ciano); }
.meta { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.2rem; color: var(--tinta-mid); }
.meta dt { margin: 0; }
.meta dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }
.meta dd.mono { font-size: .82rem; }
.nada { padding: 2.5rem 1rem; text-align: center; color: var(--tinta-mid); }
tfoot td { padding-top: .9rem; font-weight: 600; border-bottom: 0; }
tfoot td.num { font-size: 1.05rem; }
tfoot small { font-weight: 400; color: var(--tinta-mid); }

.tag { display: inline-block; padding: .1rem .55rem; border: 1px solid currentColor; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; vertical-align: 1px; }
.tag.ok { color: var(--ciano); }
.tag.alerta { color: var(--sol); }
.tag.erro { color: var(--coral); }

/* ================= cartão de grupo ================= */
.grupo { border: 1px solid var(--linha); border-radius: 14px; background: color-mix(in srgb, var(--superficie) 38%, transparent); overflow: hidden; animation: entra .4s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--i, 0) * 30ms); }
.grupo__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--linha); font-size: .86rem; color: var(--tinta-mid); }
.grupo__cabeca b { color: var(--tinta); font-weight: 600; }
.grupo__corpo { padding: 1.1rem 1.2rem 1.2rem; }
.grupo > h3 { margin: 0 0 1rem; font: 600 .78rem/1.4 Archivo, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--ciano); display: flex; justify-content: space-between; gap: 1rem; }
.grupo > h3 small { font: 400 .78rem/1.4 Archivo, sans-serif; letter-spacing: 0; text-transform: none; color: var(--tinta-mid); }

/* ================= ajuste de colunas ================= */
.mapa { margin-top: 2.2rem; border: 1px solid var(--linha); border-radius: 12px; background: color-mix(in srgb, var(--superficie) 30%, transparent); }
.mapa summary { list-style: none; cursor: pointer; padding: .9rem 1.2rem; font-size: .92rem; color: var(--tinta-mid); display: flex; justify-content: space-between; gap: 1rem; }
.mapa summary::-webkit-details-marker { display: none; }
.mapa summary b { color: var(--tinta); font-weight: 600; }
.mapa summary > span:last-child::after { content: "ajustar ▾"; color: var(--ciano); font-size: .84rem; }
.mapa[open] summary span::after { content: "fechar ▴"; }
.mapa__corpo { padding: 0 1.2rem 1.1rem; display: grid; gap: .9rem; }
.mapa__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; align-items: end; padding-top: .9rem; border-top: 1px solid var(--linha); }
.mapa__grade:first-child { border-top: 0; padding-top: 0; }
.mapa label { display: grid; gap: .25rem; font-size: .74rem; color: var(--tinta-mid); }
.mapa select, .mapa input {
  width: 100%; padding: .45rem .5rem; border-radius: 8px;
  border: 1px solid var(--linha-forte); background: color-mix(in srgb, var(--superficie) 60%, transparent);
  color: var(--tinta); font-size: .86rem;
}
.mapa select.vazio { color: var(--tinta-mid); }

/* ================= o que ficou de fora ================= */
.descartados { margin-top: 1.8rem; font-size: .92rem; }
.descartados summary { cursor: pointer; list-style: none; color: var(--tinta-mid); }
.descartados summary::-webkit-details-marker { display: none; }
.descartados summary::before { content: "▸"; display: inline-block; margin-right: .5rem; color: var(--ciano); transition: transform .2s; }
.descartados[open] summary::before { transform: rotate(90deg); }
.descartados ul { margin: .8rem 0 0; padding: 0; list-style: none; }
.descartados li { padding: .5rem 0; border-top: 1px solid var(--linha); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.5rem; }
.descartados li span:first-child { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .8rem; color: var(--tinta-mid); overflow-wrap: anywhere; }

/* ================= formulários ================= */
fieldset { padding: 1.3rem; margin: 0; border: 1px solid var(--linha); border-radius: 14px; background: color-mix(in srgb, var(--superficie) 40%, transparent); }
legend { padding: 0 .45rem; font: 600 .78rem/1.4 Archivo, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--ciano); }
.campos { display: grid; gap: .9rem; }
.campos.dupla { grid-template-columns: 1fr 1fr; }
.campo { display: grid; gap: .3rem; }
.campo.larga { grid-column: 1 / -1; }
.campo label { font-size: .84rem; color: var(--tinta-mid); }
.campo label b { color: var(--coral); font-weight: 600; }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: .62rem .8rem; border-radius: 9px;
  border: 1px solid var(--linha-forte); background: color-mix(in srgb, var(--superficie) 60%, transparent);
  color: var(--tinta); font-size: .95rem; line-height: 1.4;
  transition: border-color .2s;
}
.campo textarea { resize: vertical; min-height: 4.2rem; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--coral); }
.campo input::placeholder, .campo textarea::placeholder { color: color-mix(in srgb, var(--tinta-mid) 60%, transparent); }
.campo input.num { text-align: right; font-variant-numeric: tabular-nums; }
form .linha, fieldset .linha, .formulario .linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .45rem .5rem; align-items: end; padding: .7rem 0; border-top: 1px solid var(--linha); }
form .linha:first-child, fieldset .linha:first-child, .formulario .linha:first-child { border-top: 0; padding-top: 0; }
form .linha .larga, fieldset .linha .larga, .formulario .linha .larga { grid-column: 1 / -1; }

/* ================= fecho ================= */
.fecho { margin-top: 5.5rem; padding: 4rem 0 5rem; border-top: 1px solid var(--linha-forte); }
.fecho h2 { font-size: clamp(1.8rem, 4.4vw, 2.9rem); max-width: 20ch; }
.fecho p { margin-top: 1.3rem; font-size: 1.1rem; color: var(--tinta-mid); }
.fecho .btn { margin-top: 2.2rem; padding: 1rem 1.9rem; font-size: 1.02rem; }
.fecho__grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem 4rem; align-items: center; }
.outras { display: grid; gap: .6rem; }
.outras .rotulo { font: 600 .7rem/1.3 "JetBrains Mono", monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-mid); margin-bottom: .2rem; }
.outras a { display: block; padding: 1.1rem 1.3rem; border: 1px solid var(--linha); border-radius: 14px; background: color-mix(in srgb, var(--superficie) 40%, transparent); text-decoration: none; transition: border-color .25s, transform .25s; }
.outras a:hover { border-color: var(--ciano); transform: translateY(-2px); }
.outras a b { display: block; font-weight: 600; margin-bottom: .15rem; }
.outras a span { display: block; font-size: .92rem; color: var(--tinta-mid); }
.outras a i { display: block; margin-top: .5rem; font-style: normal; font-size: .84rem; font-weight: 600; color: var(--ciano); }

footer { padding: 2rem 0 2.5rem; border-top: 1px solid var(--linha); font-size: .86rem; color: var(--tinta-mid); }
.rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.rodape .marca img { height: 30px; }

/* ================= responsivo ================= */
@media (max-width: 900px) {
  .abertura { grid-template-columns: 1fr; grid-template-areas: "texto" "solta" "aside"; gap: 2rem; }
  .painel, .fecho__grade { grid-template-columns: 1fr; gap: 2rem; }
  .painel .regua__legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  .abertura { padding-top: 3rem; }
  .marca small, nav .item { display: none; }
  .solta { padding: 2.4rem 1.2rem 2rem; }
  .regua__legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detalhe__grade { grid-template-columns: 1fr; }
  .descartados li { grid-template-columns: 1fr; gap: .2rem; }
  .campos.dupla { grid-template-columns: 1fr; }
  .fecho { margin-top: 3.5rem; padding: 3rem 0; }
}
@media (max-width: 640px) {
  .abertura { padding: 2.6rem 0 2rem; }
  .abertura h1 { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .lead { font-size: 1rem; }
  .barra { gap: .8rem; }
  .marca img { height: 32px; }
  nav { gap: .6rem; }
  nav .btn { padding: .55rem .9rem; font-size: .84rem; white-space: nowrap; }
  .local { border-radius: 14px; align-items: flex-start; }
  .local svg { margin-top: .25rem; }
  .solta { padding: 2rem 1rem 1.6rem; }
  .solta h2 { font-size: 1.2rem; }
  .solta .exemplo { flex-direction: column; }
  .lida { padding: .8rem 1rem; }
  .lida .avisos span::before { content: none; }
  .resumo { font-size: 1.45rem; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; }
  .kpi { padding: .8rem .9rem .9rem; }
  .kpi b { font-size: 1.25rem; }
  .ferramentas { margin-top: 2.2rem; }
  .busca { max-width: none; }
  .exportar { width: 100%; }
  .exportar .btn { flex: 1 1 auto; }
  .fecho h2 { font-size: 1.7rem; }
  /* a tabela vira cartão por linha: nada de rolagem lateral — menos a table.fixa, que rola de propósito */
  .rolagem { margin: 0; padding: 0; }
  table:not(.fixa) { min-width: 0; }
  table:not(.fixa) thead, table:not(.fixa) colgroup { display: none; }
  table:not(.fixa) tbody, table:not(.fixa) tfoot, table:not(.fixa) tbody tr, table:not(.fixa) tfoot tr, table:not(.fixa) td { display: block; }
  table:not(.fixa) tbody tr.linha { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--linha); }
  table:not(.fixa) tbody tr.linha td { border: 0; padding: 0; }
  table:not(.fixa) tbody tr.linha[aria-expanded="true"] { border-bottom-color: transparent; }
  table:not(.fixa) td.titulo { grid-column: 1 / -1; font-size: 1rem; }
  table:not(.fixa) td.doc { grid-column: 1 / -1; font-size: .82rem; }
  table:not(.fixa) td.num { text-align: right; }
  table:not(.fixa) .rot { display: inline; margin-right: .35rem; font: 400 .76rem/1.4 Archivo, sans-serif; color: var(--tinta-mid); }
  table:not(.fixa) tr.detalhe td { padding: .4rem 0 1rem; }
  table:not(.fixa) tfoot tr { display: flex; justify-content: space-between; gap: 1rem; padding-top: .9rem; }
  table:not(.fixa) tfoot td { padding: 0; }
}
/* sem !important: os mesmos seletores, no fim do arquivo, vencem por ordem */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .tema, .solta, .resultado, .regua__barra i, .filtros button,
  .campo input, .campo textarea, .campo select, .grupo, .outras a, .outras a:hover,
  .descartados summary::before, tbody tr.linha {
    animation: none; transition: none; transform: none;
  }
}