/* Folha unica do portal Next.
 *
 * Estava embutida em `server._style()` (81 linhas, tres @media, zero tokens) e
 * dividia espaco com ~108 atributos `style="..."` espalhados pelos `render_*`.
 * O resultado media-se na tela: larguras fixas que vazavam no celular, cards de
 * alturas diferentes, e nenhuma forma de mudar uma cor sem catar string.
 *
 * Agora: um arquivo, servido por `/static/portal.css?v=<hash>` (CSP `'self'`),
 * com tokens em `:root` e tres larguras -- >=1100, 700..1099, <=699.
 * REGRA: nenhum `style="..."` volta para o Python. Ha teste que conta.
 */

:root {
  /* ---- cor: a marca que ja existia, agora nomeada ---- */
  --creme: #f7f3ec;
  --papel: #fffdf9;
  --branco: #ffffff;
  --tinta: #1c1917;
  --tinta-2: #44403c;
  --tinta-3: #57534e;
  --linha: #d6cfc4;
  --linha-forte: #b9b0a1;
  --acento: #9a3412;
  --acento-escuro: #7c2d12;
  --acento-fraco: #f3e3d8;
  --ok: #14532d;
  --alerta: #7f1d1d;
  --neutro-selo: #e7e0d5;

  /* ---- espacamento em escala ---- */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;

  /* ---- tipografia em escala unica ---- */
  --t-corpo: 15px;
  --t-peq: 13px;
  --t-rotulo: 11px;
  --t-h3: 17px;
  --t-h2: 20px;
  --t-h1: 26px;
  --t-num: 26px;
  --t-num-movel: 22px;
  --t-hero: 36px;

  /* ---- raio e sombra: uma de cada, discretas ---- */
  --r1: 10px;
  --r2: 14px;
  --r3: 20px;
  --sombra: 0 1px 2px rgba(28, 25, 23, 0.04), 0 6px 20px rgba(28, 25, 23, 0.05);

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, Consolas, "Cascadia Mono", "SFMono-Regular", monospace;

  --lateral-larg: 248px;
  --altura-botao: 36px;
  --altura-linha-tabela: 44px;
  --gap-bloco: var(--e3);
}

/* ------------------------------------------------------------------ base */

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-corpo);
  line-height: 1.55;
  overflow-wrap: break-word;
  /* A Manrope tem alternativa CONTEXTUAL que transforma `--` em travessao. O
     resultado na tela era `claude 3version`, que nao roda em terminal
     nenhum -- e o texto no catalogo estava certo o tempo todo (`--version`).
     Desligar so o `calt` mantem kerning e ligaduras normais. */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "dlig" 0;
}

a { color: var(--acento); }
a:hover { color: var(--acento-escuro); }

img, svg, canvas, video { max-width: 100%; }
img { height: auto; }

/* Nenhum bloco de codigo pode estourar a borda do cartao -- era o defeito do
   `curl -X POST https://mcp...` cortado na pagina /conectar. */
pre, code, samp, kbd {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

h1, h2, h3, h4 { overflow-wrap: anywhere; }
main h1 { margin: 0; font-size: var(--t-h1); line-height: 1.12; }

.serif { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
.suave { color: var(--tinta-3); }
.nota { color: var(--tinta-3); font-size: var(--t-corpo); margin: 0; }
.sem-margem { margin: 0; }
.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;
}

/* --------------------------------------------------------------- layout */

.pagina {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--creme);
}

.secao { padding: var(--e6) 0; min-width: 0; width: 100%; }
.regra { height: 1px; background: var(--linha); margin: 0; border: 0; }

.topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e5) 0; gap: var(--e5); flex-wrap: wrap;
}
.topo-acoes {
  display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap;
}
.topo > a, .lateral > a { color: inherit; text-decoration: none; }
.marca { font-family: var(--serif); font-size: var(--t-h1); letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 10px; }
/* O icone da marca (fonte unica em /static/marca/) antes do wordmark: um so
   simbolo no cabecalho, no favicon e no MCP. background, nao <img>, para nao
   entrar nas contagens de imagem da pagina. */
.marca::before { content: ""; width: 26px; height: 26px; flex: none;
  background: url("/static/marca/marca.svg") center / contain no-repeat; }
.marca em { font-style: italic; color: var(--acento); }

.idioma {
  display: flex; gap: var(--e3); font-size: var(--t-peq); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3);
}
.idioma a { color: var(--tinta-3); text-decoration: none; }
.idioma .ativo { color: var(--tinta); border-bottom: 2px solid var(--tinta); }

.link-topo { font-weight: 700; text-decoration: none; }

.rodape {
  margin-top: auto; padding: var(--e5) 0; border-top: 1px solid var(--linha);
  display: flex; gap: var(--e4); flex-wrap: wrap;
  color: var(--tinta-3); font-size: var(--t-peq);
}
.rodape-fase { font-weight: 700; color: var(--acento); }

/* Selo de conformidade na landing (autodeclaracao; linka para /conformidade). */
.selo-conformidade { margin: var(--e3) 0 0; font-size: var(--t-peq); }
.selo-conformidade a {
  display: inline-block; padding: var(--e1) var(--e3); border-radius: 999px;
  border: 1px solid var(--linha-forte); color: var(--tinta-2);
  text-decoration: none; font-weight: 600;
}
.selo-conformidade a::before { content: "\2713\00a0"; color: var(--acento); }
.selo-conformidade a:hover { border-color: var(--tinta); color: var(--tinta); }

/* --------------------------------------------------------------- botoes */

/* Escala 2026-09-05: o dono viu botoes-pilula de ~56px. Altura agora e
   CONTROLADA (line-height fixo + padding), nao herdada do corpo em 1.55 --
   primario 36-38px, secundario igual, terciario um degrau abaixo. */
.botao, button.botao {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 0; min-height: var(--altura-botao);
  background: var(--tinta); color: var(--creme);
  padding: 9px 18px; font-weight: 700; font-size: var(--t-corpo); line-height: 1.2;
  text-decoration: none; cursor: pointer; font-family: inherit;
  text-align: center;
}
.botao:hover { color: var(--creme); background: #000; }
.botao.compacto { padding: 7px 16px; font-size: var(--t-peq); }
.botao.grande { font-size: var(--t-corpo); padding: 10px 24px; }
.botao.perigo { background: var(--alerta); color: #fff; }
.botao.perigo:hover { background: #8f1f1f; color: #fff; }
.botao.secundario {
  background: transparent; color: var(--tinta);
  border: 1.5px solid var(--tinta); padding: 9px 18px; font-size: var(--t-peq);
}
.botao.secundario:hover { color: var(--tinta); background: var(--acento-fraco); }
/* `.botao-claro` era um segundo botao de contorno com OUTRA altura (~30px) ao
   lado do `.botao.secundario` (~36px) -- os "padroes diferentes" que o dono
   apontou. Agora ele COMPARTILHA o contrato do secundario: mesma altura,
   padding, raio, fonte e peso. Um sistema so. */
.botao-claro {
  display: inline-block; border-radius: 999px; border: 1.5px solid var(--tinta);
  color: var(--tinta); padding: 9px 18px; font-weight: 700; line-height: 1.2;
  font-size: var(--t-peq); text-decoration: none; background: transparent;
  cursor: pointer; font-family: inherit; text-align: center;
}
.botao-claro:hover { color: var(--tinta); background: var(--acento-fraco); }
/* Acao de TABELA: botao pequeno, lado a lado, sem pilula preta. O `Remover`
   fica em tom de perigo discreto (contorno, nao fundo solido) -- ver a regra
   do dono: "os botoes rebaixar e remover estao muito grande tambem". */
.botao-mini {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--linha-forte);
  background: var(--branco); color: var(--tinta-2);
  padding: 4px 10px; font-size: var(--t-peq); font-weight: 600; line-height: 1.2;
  min-height: 28px; text-decoration: none; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.botao-mini:hover { border-color: var(--tinta); color: var(--tinta); background: var(--papel); }
.botao-mini.perigo { color: var(--alerta); border-color: #e6c4c4; }
.botao-mini.perigo:hover { color: var(--alerta); border-color: var(--alerta); background: #f6dada; }
/* A celula de acoes da tabela e `nowrap` (dados numa linha, a tabela rola). Mas
   o form de confirmacao dentro deste <details> tem um ROTULO em frase e um
   input: ali o texto precisa QUEBRAR, senao a frase vira uma tira de 254px que
   vaza da celula estreita (gate: form.pilha-4 / label.miudo 254 > 69 em /admin).
   `white-space: normal` e herdado pelos filhos e devolve a quebra so aqui. */
.acao-perigo { white-space: normal; }
.acoes-tabela { display: flex; gap: var(--e2); flex-wrap: nowrap; align-items: center; white-space: nowrap; }
.acoes-tabela form { margin: 0; }
.acoes-chave { display: flex; flex-direction: column; gap: var(--e2); align-items: stretch; }
.acoes-chave form { margin: 0; }
@media (min-width: 768px) { .acoes-chave { align-items: flex-end; } }
/* Limite por pessoa (fatia D): campo GB curto + Salvar, lado a lado. */
.form-limite { display: flex; gap: var(--e2); align-items: center; margin: 0; }
.entrada.num-gb {
  width: 76px; min-height: 28px; padding: 4px var(--e2); font-size: var(--t-peq);
}
form.form {
  display: grid;
  gap: var(--gap-bloco);
}
.inicio { justify-self: start; }
.pilha-4 > :is(.botao, .botao-claro, .botao-mini, button):not(:first-child),
[data-copiar].inicio {
  margin-top: var(--gap-bloco);
}
.acoes-tabela .pilha-4 > :is(.botao, .botao-claro, .botao-mini, button):not(:first-child) {
  margin-top: var(--gap-bloco);
}

/* ------------------------------------------------------------- cartoes */

.cartao {
  border: 1px solid var(--linha); border-radius: var(--r2);
  background: var(--papel); padding: var(--e4) var(--e5); display: grid; gap: var(--e3);
  min-width: 0;
}
.cartao > h2, .cartao > h3 { margin: 0; }
.cartao.compacto { padding: var(--e4) var(--e5); }
.cartao.destaque { border-color: var(--acento); }
.cartao.form { padding: var(--e5); gap: var(--e4); }
.cartao.form-fino { padding: var(--e4) var(--e5); gap: var(--e3); }
.cartao.contato-sob-medida-form { padding: var(--e3); gap: var(--e1); }
.contato-sob-medida-form.pilha-4 > .botao:not(:first-child) { margin-top: 0; }

.kit {
  border: 1px solid var(--linha); border-radius: var(--r2);
  background: var(--branco); padding: 18px; display: grid; gap: var(--e2);
  min-width: 0; align-content: start;
}
.kit h3 { margin: 0; font-size: var(--t-h3); }
.kit a { overflow-wrap: anywhere; min-width: 0; }
.kit-topo {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--e2); flex-wrap: wrap; min-width: 0;
}

/* Card de PLUGIN: altura igual na linha da grade, com o rodape (comando +
   Copiar) preso embaixo. Assim o botao Copiar fica no MESMO nivel em todos os
   cards -- era o "cada um um botao em uma posicao" que o dono apontou. A
   descricao curta do catalogo ganha clamp de 3 linhas para nao empurrar o
   layout. `height:100%` faz o card ocupar a altura que a grade ja estica. */
.kit-plugin {
  display: flex; flex-direction: column; gap: var(--e2); height: 100%;
}
.kit-plugin .kit-desc {
  margin: 0; color: var(--tinta-3); font-size: var(--t-peq);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
/* O rodape desce ate o fim; o botao Copiar e o ultimo filho, entao seu topo
   fica identico em todos os cards de mesma altura (ha teste de Playwright). */
.kit-plugin .kit-rodape {
  margin-top: auto; display: grid; gap: var(--e2); min-width: 0;
}
.kit-plugin .kit-rodape .botao-claro { justify-self: start; }

.selo {
  display: inline-block; border-radius: 999px; padding: 3px 10px;
  font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; background: var(--neutro-selo); color: var(--tinta-2);
}
.selo.ok { background: #dcf0e2; color: var(--ok); }
.selo.espera { background: #f6ead2; color: #7c4a03; }
.selo.recusa { background: #f6dada; color: var(--alerta); }
.estado-pessoa { display: inline-flex; gap: var(--e2); align-items: center; flex-wrap: wrap; margin-top: var(--e1); }

.valor-tecnico {
  display: inline-flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  max-width: 100%; min-width: 0; vertical-align: middle;
}
.valor-tecnico code {
  font-family: var(--mono); font-size: var(--t-peq);
  overflow-wrap: anywhere; word-break: break-word;
}
.valor-tecnico-completo {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: pre-wrap;
}
.dialog-tecnico {
  border: 1px solid var(--linha); border-radius: var(--r2);
  padding: var(--e5); max-width: min(860px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px)); color: var(--tinta);
  background: var(--papel);
}
.dialog-tecnico::backdrop { background: rgb(0 0 0 / 0.32); }
.dialog-tecnico .fechar { float: right; }
.dialog-tecnico pre, .valor-tecnico-fallback pre {
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto;
}
.valor-tecnico-fallback { flex-basis: 100%; }
html.js .valor-tecnico-fallback { display: none; }
.pedido-texto .valor-tecnico code[aria-hidden="true"] {
  display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.details-resumo {
  border: 1px solid var(--linha); border-radius: var(--r2);
  background: var(--papel); padding: var(--e3) var(--e4); min-width: 0;
}
.details-resumo summary {
  cursor: pointer; font-weight: 800; color: var(--tinta-2);
}
.details-resumo > *:not(summary) { margin-top: var(--e3); }
.bloco-infra-fechado > .bloco-infra { margin-top: var(--e3); }
details:not([open]) > *:not(summary) { display: none; }

/* ------------------------------------------------------------ formulario */

.campo { display: grid; gap: 6px; min-width: 0; }
.campo label, .rotulo {
  font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-2);
}
.entrada, input.entrada {
  border: 1px solid var(--linha); border-radius: var(--r1);
  background: var(--branco); padding: 8px var(--e3); color: var(--tinta);
  min-height: 40px; box-sizing: border-box; width: 100%; max-width: 100%;
  /* `min-width: 0` quebra a largura INTRINSECA do controle (~254px, o default
     de `size=20`): sem ela o input contribui 254px de min-content, e numa
     celula estreita (a coluna "acoes" da tabela de clientes, medida a 69px) o
     form vaza -- gate: form.pilha-4 254 > 69 em /admin. Com ela o input encolhe
     ate a caixa. */
  min-width: 0;
  font: inherit; line-height: 1.3;
}
input.entrada:focus, select.entrada:focus { border-color: var(--acento); outline: none; }
.erro { color: var(--alerta); font-size: var(--t-peq); }
.aviso { color: var(--ok); font-size: var(--t-peq); }
.hp { position: absolute; left: -10000px; }

.codigo-campo { gap: 8px; }
.codigo-grade {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px; width: 100%;
}
.codigo-digito {
  min-height: 54px; padding: 0; text-align: center;
  font-size: var(--t-num); font-weight: 800; line-height: 1;
}
.codigo-digito:focus {
  border-color: var(--acento);
  outline: 3px solid color-mix(in srgb, var(--acento) 28%, transparent);
  outline-offset: 2px;
}
.botao[data-login-resend][aria-disabled="true"] {
  opacity: 0.65; cursor: wait;
}

@media (max-width: 420px) {
  .codigo-grade { gap: 6px; }
  .codigo-digito { min-height: 50px; font-size: var(--t-num-movel); }
}

.opcao {
  border: 1px solid var(--linha); border-radius: var(--r3);
  padding: var(--e3) var(--e4); display: grid; gap: 2px;
  background: var(--branco); cursor: pointer; min-width: 0;
}
.opcao input { margin: 0 var(--e2) 0 0; accent-color: var(--tinta); }
.opcao:has(input:checked) {
  border-color: var(--tinta); background: var(--papel);
  box-shadow: 0 0 0 1px var(--tinta) inset;
}
.aceite { display: flex; gap: var(--e3); align-items: flex-start; }

/* --------------------------------------------------------------- grades */

.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.grade-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4); }
.grade-larga { gap: var(--e4); }
.linha-opcoes { display: flex; gap: var(--e3); flex-wrap: wrap; }
/* `minmax(0, 1fr)` na coluna: sem ela a coluna implicita e `auto`, que cresce
   ate o MIN-CONTENT do filho mais largo -- um `<input class="entrada">` direto
   (largura default ~254px) vaza da pilha quando o contentor e estreito (medido
   no gate: form.pilha-4 254 > 69 em /admin). Com `minmax(0,1fr)` a coluna
   encolhe a 0 e o filho `width:100%` cabe. Visualmente identico (pilha e de uma
   coluna so). */
.pilha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); min-width: 0; }
.pilha-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); min-width: 0; }
.pilha-4 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e1); min-width: 0; }
.pilha-larga { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e5); min-width: 0; }

/* Base geral (PARTE B): arvore de pastas com caixa por pasta e por documento.
   Tudo com `min-width:0`/`overflow-wrap` para os caminhos longos caberem a
   390 px sem vazar. */
.arvore-base { min-width: 0; }
.pasta-base { border: 1px solid var(--linha); border-radius: var(--r1);
  padding: var(--e2) var(--e3); min-width: 0; }
.pasta-base > summary { cursor: pointer; display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--e2) var(--e3); min-width: 0; }
.pasta-toggle { display: inline-flex; align-items: center; gap: var(--e2);
  min-width: 0; overflow-wrap: anywhere; }
.docs-base { padding: var(--e2) 0 0 var(--e4); min-width: 0; }
.linha-doc { display: flex; align-items: center; gap: var(--e2) var(--e3);
  flex-wrap: wrap; padding: 2px 0; min-width: 0; }
.doc-titulo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.entre {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--e3); flex-wrap: wrap; min-width: 0;
}
.par-acao {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--e4);
}

/* -------------------------------------------------------------- tipografia */

/* Escala 2026-09-05: titulos de pagina cabiam em ~72px na tela do dono. Agora
   o teto e 30-34px (titulo), com o corpo em 15px -- ver a meta numerica do
   pedido. A serifa e a paleta continuam; muda so o tamanho. */
.h-pagina { margin: 0; font-size: var(--t-h1); line-height: 1.12; }
.h-secao { margin: 0; font-size: var(--t-h2); line-height: 1.15; }
.h-hero { margin: 0; font-size: var(--t-h1); line-height: 1.1; }
.lead-pagina { margin: 6px 0 0; font-size: var(--t-corpo); color: var(--tinta-3); max-width: 60ch; }
.lead-grande { font-size: var(--t-corpo); color: var(--tinta-2); margin: 0; max-width: 60ch; }
.eyebrow {
  font-size: var(--t-peq); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-3);
}
.miudo { font-size: var(--t-peq); }
.miudo-15 { font-size: var(--t-corpo); }
.numero-grande {
  font-family: var(--serif); font-size: var(--t-num);
  line-height: 1.05; margin: 0;
}
.numero-medio { font-size: var(--t-h3); margin: 6px 0 0; }

/* -------------------------------------------------------- shell logada */

.shell {
  width: 100%; max-width: 1280px; margin: 0 auto; min-height: 100vh;
  display: grid; grid-template-columns: var(--lateral-larg) minmax(0, 1fr);
  background: var(--creme);
}
.shell main {
  min-width: 0; padding: var(--e6) var(--e6); display: grid; gap: var(--e4);
  align-content: start;
}
.shell main > * { min-width: 0; max-width: 100%; }

.lateral {
  padding: var(--e5) 20px; display: flex; flex-direction: column; gap: var(--e5);
  border-right: 1px solid var(--linha); min-width: 0;
}
.lateral nav { display: grid; gap: var(--e1); }
.nav-titulo {
  margin: 0 0 6px var(--e3); font-size: var(--t-rotulo); font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3);
}
.nav-item {
  display: flex; align-items: center; min-height: 40px; border-radius: 999px;
  color: var(--tinta-2); padding: var(--e2) var(--e3); font-size: var(--t-corpo);
  font-weight: 500; text-decoration: none; min-width: 0;
}
.nav-item:hover { color: var(--tinta); background: var(--acento-fraco); }
.nav-item.ativo { background: var(--tinta); color: var(--creme); font-weight: 700; }
.nav-item.ativo:hover { background: var(--tinta); color: var(--creme); }

.lateral-rodape { margin-top: auto; display: grid; gap: var(--e3); min-width: 0; }
/* O e-mail longo (`fernando_canelas@msn.com`) transbordava a `aside`: sem
   `min-width:0` a caixa de grade nao encolhe abaixo do conteudo. */
.pessoa-bloco {
  padding: 0 var(--e3); display: grid; gap: 2px; min-width: 0;
  overflow-wrap: anywhere;
}
.pessoa-nome { font-weight: 700; color: var(--tinta); }
.pessoa-email { font-size: var(--t-peq); color: var(--tinta-3); overflow-wrap: anywhere; }
.pessoa-espaco {
  font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-3);
}
.form-sair { margin: 0; }
.botao-sair {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit;
}

.titulo-pagina-logada {
  display: flex; justify-content: space-between; gap: var(--e5);
  align-items: start; flex-wrap: wrap; min-width: 0;
}
.titulo-pagina-logada > div { min-width: 0; }

/* Barra superior do celular: so aparece abaixo de 700px (ver @media). */
.barra-movel { display: none; }
.menu-alavanca { position: absolute; left: -10000px; }
.menu-botao {
  display: inline-flex; align-items: center; gap: var(--e2);
  border: 1.5px solid var(--tinta); border-radius: 999px;
  padding: 6px var(--e3); font-size: var(--t-peq); font-weight: 700; cursor: pointer;
}

/* --------------------------------------------------------------- codigo */

.codigo {
  font-family: var(--mono); font-size: var(--t-peq); background: var(--tinta);
  color: var(--creme); border-radius: var(--e2); padding: var(--e3) var(--e3);
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5;
  margin: 0; max-width: 100%; min-width: 0;
}

.shell-tabs {
  display: inline-flex; gap: var(--e2); padding: var(--e1);
  border: 1px solid var(--linha); border-radius: 999px; background: var(--creme);
  justify-self: start; max-width: 100%; flex-wrap: wrap;
}
.shell-tab {
  border: 0; border-radius: 999px; background: transparent; color: var(--tinta-3);
  padding: 7px var(--e3); font: inherit; font-size: var(--t-peq); font-weight: 800;
  cursor: pointer;
}
.shell-tab.ativo { background: var(--tinta); color: var(--creme); }
.grupo-shell { display: grid; gap: var(--e2); min-width: 0; }
/* `display:grid` de autor vencia o `[hidden]` do navegador: os DOIS paineis de
   shell apareciam ao mesmo tempo (PowerShell e bash), com `npm install`
   duplicado na tela. O `style="display:grid"` saiu do HTML; esta regra fecha a
   porta para sempre. */
.painel-shell { display: grid; gap: var(--e2); min-width: 0; }
.painel-shell[hidden], .envios[hidden], [hidden] { display: none !important; }

/* --------------------------------------------------------------- tabelas */

.tabela-caixa { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }
.tabela {
  width: 100%; border-collapse: collapse; border-spacing: 0; min-width: 0;
  font-size: var(--t-corpo);
}
.tabela th, .tabela td {
  text-align: left; padding: 4px var(--e3);
  border-bottom: 1px solid var(--linha); vertical-align: middle;
}
.tabela thead th {
  font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-3);
  border-bottom: 1px solid var(--linha-forte); white-space: nowrap;
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .acao { text-align: right; white-space: nowrap; }
.tabela .nome { overflow-wrap: anywhere; font-weight: 600; }
.cobranca { max-width: 980px; }
.cobranca-bloco {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
}
.cobranca-bloco > :first-child { flex: 1 1 240px; min-width: 0; }
.cobranca-bloco > h2 {
  flex: 0 0 100%; overflow-wrap: normal; word-break: normal;
}
.cobranca-bloco > .tabela-caixa,
.cobranca-bloco > form { flex: 1 1 320px; min-width: 0; }
.cobranca-bloco h2 { font-size: var(--t-h3); margin: 0 0 var(--e1); }
.cobranca-topo { display: flex; gap: var(--e3); align-items: flex-start; }
.icone-plano {
  width: 36px; height: 36px; border-radius: 8px; display: inline-grid;
  place-items: center; background: var(--acento-fraco); color: var(--acento);
  font-weight: 800; flex: 0 0 auto;
}
.pagamento-resumo { font-variant-numeric: tabular-nums; margin: 0; }
.plano-opcao { display: grid; gap: var(--e2); cursor: pointer; }
.plano-preco {
  display: flex; gap: var(--e2); align-items: baseline; flex-wrap: wrap;
  color: var(--tinta); font-size: var(--t-peq); line-height: 1.25;
}
.plano-preco strong { font-size: var(--t-corpo); font-weight: 800; }
.plano-preco-termo { color: var(--tinta-3); }
.form-compacta { max-width: 520px; }
.acoes-arquivo {
  display: flex; gap: var(--e2); align-items: center; justify-content: flex-end;
  flex-wrap: nowrap; white-space: nowrap; min-width: 0;
}
.acoes-arquivo .form-sair {
  display: inline-flex; gap: var(--e2); align-items: center; margin: 0;
}
.acoes-arquivo select {
  min-width: 0; max-width: 150px; min-height: 30px; padding: 4px 8px;
  font-size: var(--t-peq);
}
.tabela-cartao {
  border: 1px solid var(--linha); border-radius: var(--r2);
  background: var(--papel); overflow: hidden;
}
.icone-tipo { font-family: var(--mono); font-size: var(--t-rotulo); color: var(--tinta-3); margin-right: var(--e2); }

/* --------------------------------------------------------------- graficos */

.painel-espaco { display: grid; gap: var(--e4); }
.painel-topo {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--e4); align-items: start;
}
.metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); }
.metrica { display: grid; gap: 2px; min-width: 0; align-content: start; }
.metrica .valor { font-family: var(--serif); font-size: var(--t-num); line-height: 1.05; }
.metrica .valor.valor-texto { font-family: var(--sans); font-size: var(--t-h3); font-weight: 800; line-height: 1.2; }
.metrica .chave {
  font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-3);
}
.barra-cota {
  height: 12px; border-radius: 999px; background: var(--neutro-selo);
  overflow: hidden; width: 100%;
}
.barra-cota > span { display: block; height: 100%; background: var(--acento); border-radius: 999px; }
.barra-cota.cheia > span { background: var(--alerta); }
.cota-barra { width: 100%; height: 12px; accent-color: var(--acento); }

.grafico { width: 100%; height: 120px; display: block; overflow: visible; }
.grafico .barra { fill: var(--acento); }
.grafico .barra-hoje { fill: var(--tinta); }
.grafico .barra-perda { fill: var(--alerta); }
.grafico .barra-envio { fill: var(--tinta-2); }
.grafico .barra-zero { fill: var(--linha); }
.grafico .grade-y { stroke: var(--linha); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grafico .eixo, .grafico .grade-valor { fill: var(--tinta-3); font-size: var(--t-rotulo); font-family: var(--sans); }
.grafico .valor-barra { fill: var(--tinta-2); font-size: var(--t-rotulo); font-weight: 700; font-family: var(--sans); }
.grafico-caixa { overflow-x: auto; width: 100%; }
.uso-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: var(--e4); align-items: start; }
.uso-rankings { display: grid; gap: var(--e3); min-width: 0; }
.ranking-uso { display: grid; gap: var(--e2); min-width: 0; }

.barras-h { display: grid; gap: var(--e2); min-width: 0; }
.barra-h { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: var(--e3); align-items: center; }
.barra-h .rotulo-h { font-family: var(--mono); font-size: var(--t-peq); overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--tinta-2); }
.barra-h .trilho { height: 10px; border-radius: 999px; background: var(--neutro-selo); overflow: hidden; }
.barra-h progress.trilho { width: 100%; accent-color: var(--acento); }
.barra-h .trilho > span { display: block; height: 100%; background: var(--acento); border-radius: 999px; }
.barra-h .n { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--t-peq); }

.vazio {
  border: 1px dashed var(--linha-forte); border-radius: var(--r2);
  padding: var(--e5); color: var(--tinta-3); text-align: center; margin: 0;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.chips li {
  border: 1px solid var(--linha); border-radius: 999px; background: var(--branco);
  padding: 3px 10px; font-size: var(--t-peq); color: var(--tinta-2);
}
.chips li .ext { font-family: var(--mono); font-size: var(--t-rotulo); color: var(--tinta-3); }

/* --------------------------------------------------------------- landing */

.dobra {
  padding: var(--e5) 0 42px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e6); align-content: center; align-items: center;
}
.dobra-texto { display: grid; gap: 22px; min-width: 0; }
.dobra-texto h1 { margin: 0; font-size: var(--t-hero); line-height: 1.12; max-width: 19ch; }
.dobra-texto h1.largo { max-width: 20ch; }
.dobra-texto p { margin: 0; font-size: var(--t-corpo); line-height: 1.45; color: var(--tinta-2); max-width: 34em; }
.dobra-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.exemplos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
.exemplo { display: grid; gap: var(--e2); min-width: 0; align-content: start; }
.captura-card {
  padding: var(--e2); background: var(--tinta); border: 1px solid var(--tinta);
  border-radius: var(--r3); width: 100%; margin: 0;
}
.captura-card img { display: block; width: 100%; height: auto; border-radius: var(--e3); }
.captura-legenda { display: grid; gap: 2px; font-size: var(--t-peq); color: var(--tinta-3); }
.captura-legenda .rotulo-captura {
  font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--acento);
}

.passos-home { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--e6); align-items: start; }
.passos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); }
.passo-home { display: grid; gap: var(--e2); border-top: 2px solid var(--tinta); padding-top: var(--e4); align-content: start; }
.passo-home .n { font-family: var(--serif); font-size: var(--t-num); color: var(--acento); line-height: 1; }
.seo-blocos { display: grid; gap: var(--e6); }
.lista-passos { display: grid; gap: var(--e3); margin: 0; padding-left: 22px; }
.lista-passos li { padding-left: var(--e1); }
.lista-passos strong, .lista-passos span { display: block; }
.chips-texto { color: var(--tinta); font-weight: 700; line-height: 1.9; overflow-wrap: anywhere; }
.faq-publica { display: grid; gap: var(--e2); }
.faq-publica details { border-top: 1px solid var(--linha); padding: var(--e3) 0; }
.faq-publica summary { cursor: pointer; font-weight: 800; }
.faq-publica p { margin-bottom: 0; }
.planos-publicos { display: grid; gap: var(--e5); }
.planos-publicos .lead { max-width: 760px; }
.planos-publicos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); }
.plano-publico {
  border: 1px solid var(--linha); border-radius: var(--r2); padding: var(--e4);
  background: var(--papel); min-height: 210px; display: grid; gap: var(--e2);
  align-content: start;
}
.plano-publico h2 { margin: 0; font-size: 1.25rem; }
.plano-publico p, .plano-publico span { margin: 0; }
.plano-publico strong { font-size: 1.4rem; }
.passo { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--e4); align-items: start; }
.passo .n { font-family: var(--serif); font-size: var(--t-num); line-height: 1; color: var(--acento); }

.fluxo { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin: 0; padding: 0; list-style: none; }
.fluxo li { font-weight: 700; }
.fluxo li + li::before { content: "\2192"; color: var(--acento); margin-right: var(--e3); font-weight: 400; }
.faixa-compat { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: baseline; font-size: var(--t-corpo); color: var(--tinta-3); }
.faixa-compat strong { color: var(--tinta); }
.planos-home { display: grid; gap: var(--e4); }
.planos-home .entre { align-items: end; }
.plano-publico {
  display: grid; gap: var(--e3); align-content: start;
  min-height: 214px; padding: var(--e5); border: 1px solid var(--linha);
  border-radius: var(--r2); background: var(--papel);
}
.plano-publico > strong { font-size: var(--t-h3); }
.plano-publico .plano-preco { font-weight: 800; }
.plano-publico .botao { justify-self: start; align-self: end; margin-top: auto; }
.nota-tecnica { font-size: var(--t-peq); color: var(--tinta-3); margin: 0; }

.cadastro-grade { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 64px; padding: var(--e6) 0 64px; align-items: start; }
.coluna-estreita { max-width: 520px; margin: 0 auto; display: grid; gap: var(--e4); width: 100%; }
.coluna-media { max-width: 760px; display: grid; gap: var(--e5); }
.coluna-larga { max-width: 920px; display: grid; gap: var(--e4); }

.legal { max-width: 760px; display: grid; gap: var(--e4); }
.legal h2 { font-family: var(--serif); font-size: var(--t-h2); font-weight: 400; margin: 18px 0 0; }
.legal li { margin: 6px 0; }
.tabela-conformidade {
  width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--t-peq);
}
.tabela-conformidade th,
.tabela-conformidade td {
  text-align: left; vertical-align: top; padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--linha);
}
.tabela-conformidade th { color: var(--tinta-2); font-weight: 700; }
.lista-simples { margin: 0; padding-left: 20px; }

.envios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.envio {
  display: grid; grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr) auto;
  gap: var(--e3); align-items: center; font-size: var(--t-peq);
}
.envio-nome { overflow-wrap: anywhere; font-weight: 700; }
.envio-barra { width: 100%; height: 10px; accent-color: var(--acento); }
.envio-cancelar {
  padding: 6px var(--e3); font-size: var(--t-peq); cursor: pointer;
  background: transparent; font-family: inherit;
}

/* ============================================================ 700..1099 */

@media (max-width: 1099px) {
  :root { --lateral-larg: 196px; }
  .shell main { padding: var(--e6) var(--e5); }
  .lateral { padding: var(--e5) var(--e3); gap: var(--e5); }
  .dobra { grid-template-columns: 1fr; padding: var(--e6) 0 var(--e6); }
  .dobra-texto h1 { max-width: 20ch; }
  .passos-home { grid-template-columns: 1fr; gap: var(--e5); }
  .cadastro-grade { grid-template-columns: 1fr; gap: var(--e6); }
  .painel-topo { grid-template-columns: 1fr; }
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uso-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================ <=699 */

@media (max-width: 699px) {
  body { font-size: var(--t-corpo); }
  .pagina { padding: 0 var(--e4); }

  /* A lateral vira barra superior com botao de menu. Sem JS: o alternador e um
     checkbox escondido -- a CSP e `script-src 'self'` e a pagina tem de
     funcionar mesmo com o JS bloqueado. */
  /* `grid-template-rows: auto 1fr` e o que impede a barra superior de esticar:
     o `.shell` tem `min-height: 100vh` e, com linhas automaticas, a sobra de
     altura era repartida entre a barra e o conteudo -- 100px de vazio embaixo
     do botao Menu, visivel na captura de /preferencias em 390px. */
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .shell main { padding: var(--e5) var(--e4); gap: var(--e4); }
  .lateral {
    border-right: 0; border-bottom: 1px solid var(--linha);
    padding: var(--e3) var(--e4); gap: var(--e3);
  }
  .barra-movel { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); }
  .lateral > a.marca-lateral { display: none; }
  .lateral nav { display: none; }
  .menu-alavanca:checked ~ nav { display: grid; }
  .menu-alavanca:checked ~ .lateral-rodape { display: grid; }
  .lateral-rodape { display: none; margin-top: 0; }
  .lateral .pessoa-bloco { padding: 0; }

  .grade-2, .grade-3, .grade-4, .metricas, .passos-grid, .exemplos,
  .planos-publicos-grid,
  .kits-conectar, .tools-conectar, .par-acao, .painel-topo, .linha-dupla {
    grid-template-columns: 1fr;
  }
  .indicadores, .uso-grid { grid-template-columns: 1fr; }
  .par-acao { gap: var(--e3); }
  .barra-h { grid-template-columns: minmax(0, 1fr) auto; }
  .barra-h .trilho { grid-column: 1 / -1; }
  .envio { grid-template-columns: minmax(0, 1fr); }
  .cartao { padding: var(--e4); }
  .cartao.form { padding: var(--e4); }
  .titulo-pagina-logada { gap: var(--e3); }
  .h-pagina { font-size: var(--t-h1); }

  /* Tabela empilhada: cada linha vira um cartao, com o nome da coluna no
     rotulo. Abaixo de 430px nao ha largura para quatro colunas -- rolagem
     horizontal numa tabela e exatamente o que o dono reclamou. */
  .tabela-cartao { border: 0; background: transparent; }
  .tabela, .tabela thead, .tabela tbody, .tabela tr, .tabela th, .tabela td { display: block; }
  .tabela thead { position: absolute; left: -10000px; }
  .tabela tbody tr {
    border: 1px solid var(--linha); border-radius: var(--r2);
    background: var(--papel); padding: var(--e3) var(--e4);
    margin-bottom: var(--e3);
  }
  .tabela td { border-bottom: 0; padding: var(--e1) 0; text-align: left; }
  .tabela td.num, .tabela td.acao { text-align: left; }
  .tabela td[data-rotulo]::before {
    content: attr(data-rotulo) ": ";
    font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--tinta-3);
  }
  .tabela td.acao[data-rotulo]::before { content: attr(data-rotulo) ": "; }
  .tabela td:empty { display: none; }
}

@media (max-width: 430px) {
  :root { --t-num: var(--t-num-movel); }
  .shell main { padding: var(--e4) var(--e3); }
  .pagina { padding: 0 var(--e3); }
  .codigo { font-size: var(--t-peq); }
  .botao { padding: 9px 18px; font-size: var(--t-corpo); }
}

@media (max-width: 699px) {
  .cadastro-formulario .cartao { padding: var(--e3) var(--e4); }
  .cadastro-formulario .grade-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e2);
  }
  .cadastro-formulario .opcao {
    border-radius: var(--r2);
    padding: var(--e2);
    font-size: var(--t-peq);
    line-height: 1.25;
  }
  .cadastro-formulario .opcao .suave,
  .cadastro-formulario .opcao .plano-preco {
    font-size: var(--t-rotulo);
  }
  .cadastro-formulario .opcao .plano-preco strong {
    font-size: var(--t-peq);
  }
}

/* ======================================================= ajustes de bloco 2/3 */

.codigo-inline { font-family: var(--mono); font-size: var(--t-corpo); overflow-wrap: anywhere; }
.comando-copiavel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e2); align-items: start; min-width: 0;
}
.comando-copiavel .codigo { margin: 0; }

/* Barras: a largura e ATRIBUTO de SVG, nao `style=` inline -- a folha so
   pinta. Ha teste que conta `style="` no HTML de cada pagina. */
/* O arredondamento vem do CONTAINER, e nao do `rx` do `<rect>`: com
   `preserveAspectRatio="none"` o raio estica junto e as pontas viram elipse. */
.barra-cota, .barra-h .trilho {
  width: 100%; display: block; border-radius: 999px; overflow: hidden;
  background: var(--neutro-selo);
}
.barra-cota, .cota-barra { height: 10px; }
.cota-barra { width: 100%; accent-color: var(--acento); }
.cota-barra.cheia { accent-color: var(--alerta); }
.barra-h .trilho { height: 8px; }
.barra-cota > svg, .barra-h .trilho > svg { display: block; width: 100%; height: 100%; }
.barra-cota .fundo, .barra-h .trilho .fundo { fill: var(--neutro-selo); }
.barra-cota .preenchido, .barra-h .trilho .preenchido { fill: var(--acento); }
.barra-cota.cheia .preenchido { fill: var(--alerta); }

/* Chips dos formatos aceitos. O seletor e por ATRIBUTO porque o `<ul>` nao
   pode ganhar mais nenhum atributo: o teste `pagina == fonte` casa
   `<ul data-lista-formatos="x">` com o `>` logo apos as aspas. */
ul[data-lista-formatos] {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0;
}
ul[data-lista-formatos] > li {
  border: 1px solid var(--linha); border-radius: 999px; background: var(--branco);
  padding: 3px 10px; font-size: var(--t-peq); color: var(--tinta-2);
}
[data-formatos] h3 { margin: var(--e3) 0 0; font-size: var(--t-h3); }
[data-formatos] .nota { font-size: var(--t-peq); }

/* ============================================================== carrossel */

/* `position: relative` para as setas absolutas caberem SOBRE a imagem. */
.carrossel { display: grid; gap: var(--e3); min-width: 0; position: relative; }
.carrossel-trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: var(--e4); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: var(--e1);
  scrollbar-width: thin;
}
.carrossel-trilho:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
.carrossel-slide { scroll-snap-align: center; }
.exemplo, .carrossel-slide {
  display: grid; gap: var(--e2); min-width: 0; margin: 0; align-content: start;
}
.pergunta-exemplo {
  margin: 0; font-family: var(--serif); font-size: var(--t-h2);
  line-height: 1.2; color: var(--tinta);
}
.pergunta-exemplo::before { content: "\201C"; color: var(--acento); }
.pergunta-exemplo::after { content: "\201D"; color: var(--acento); }
/* Dentro do carrossel a PERGUNTA ocupa a mesma altura (ate 2 linhas) em todos os
   slides, para o contentor nao pular ao trocar. */
.carrossel .pergunta-exemplo {
  min-height: 2.5em; display: flex; align-items: flex-end;
}
/* ALTURA FIXA da imagem: razao unica + object-fit contain sobre fundo neutro.
   Sem isto uma captura mais alta esticava o carrossel e empurrava a pagina --
   o dono: "uma das imagens expande e a pessoa tem que rolar a pagina". */
.carrossel .captura-card {
  aspect-ratio: 16 / 10; padding: var(--e2); display: flex;
  align-items: center; justify-content: center; overflow: hidden;
}
.carrossel .captura-card img {
  width: 100%; height: 100%; object-fit: contain; border-radius: var(--e3);
}
.carrossel-controles {
  display: flex; align-items: center; justify-content: center; gap: var(--e3);
}
/* Setas SOBRE a imagem: escondidas ate o JS marcar `.pronto`; aparecem no
   hover (desktop) e sempre no toque. `top: 46%` cai na faixa da imagem. */
.carrossel-seta {
  position: absolute; top: 46%; transform: translateY(-50%); z-index: 2;
  border: 1.5px solid var(--tinta); background: rgba(255, 253, 249, 0.92);
  color: var(--tinta); border-radius: 999px; width: 42px; height: 42px;
  font-size: var(--t-num-movel); line-height: 1; cursor: pointer; font-family: inherit;
  display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s ease, background 0.15s ease;
}
.carrossel-seta-ant { left: 12px; }
.carrossel-seta-prox { right: 12px; }
.carrossel-seta:hover { background: var(--acento-fraco); }
.carrossel.pronto .carrossel-seta { display: flex; }
.carrossel.pronto:hover .carrossel-seta,
.carrossel.pronto:focus-within .carrossel-seta { opacity: 1; }
/* No toque nao ha hover: as setas ficam sempre visiveis. */
@media (hover: none) {
  .carrossel.pronto .carrossel-seta { opacity: 1; }
}
.carrossel-pontos { display: flex; gap: var(--e2); align-items: center; justify-content: center; }
.carrossel-ponto {
  width: 10px; height: 10px; padding: 0; border-radius: 999px;
  border: 1px solid var(--linha-forte); background: transparent; cursor: pointer;
}
.carrossel-ponto.ativo { background: var(--acento); border-color: var(--acento); }

@media (prefers-reduced-motion: reduce) {
  .carrossel-trilho { scroll-behavior: auto; }
}

/* ------------------------------------------------- pastas e abas (P2a) */

/* As duas camadas do espaco (pessoal e da empresa). Rolagem horizontal
   PROPRIA no celular: com dois rotulos longos elas vazariam a pagina, e o
   gate visual conta vazamento como falha. */
.abas {
  display: flex; gap: var(--e2); margin: 0 0 var(--e4);
  border-bottom: 1px solid var(--linha); overflow-x: auto;
}
.aba {
  padding: var(--e2) var(--e3); text-decoration: none; white-space: nowrap;
  color: var(--tinta-3); border-bottom: 2px solid transparent; font-weight: 600;
}
.aba:hover { color: var(--tinta); }
.aba.ativa { color: var(--tinta); border-bottom-color: var(--tinta); }

/* Trilha de migalhas. O caminho rola sozinho quando fica longo -- e por isso
   ele tem caixa propria com `overflow-x: auto`, e nao a barra inteira. */
.trilha {
  display: flex; align-items: center; gap: var(--e3);
  flex-wrap: wrap; margin: 0 0 var(--e3); font-size: var(--t-corpo);
}
.trilha-caminho {
  display: flex; align-items: center; gap: var(--e2);
  min-width: 0; overflow-x: auto; white-space: nowrap;
}
.trilha a { color: var(--tinta-2); text-decoration: none; }
.trilha a:hover { color: var(--tinta); text-decoration: underline; }
.trilha-sep { color: var(--tinta-3); }

/* "Nova pasta": campo e botao lado a lado, empilhando no celular. */
.linha-acao {
  display: flex; gap: var(--e3); align-items: flex-end; flex-wrap: wrap;
}
.linha-acao .campo { flex: 1 1 220px; min-width: 0; margin: 0; }

.icone-pasta { color: var(--tinta-2); }
.selo.neutro { background: var(--neutro-selo); color: var(--tinta-2); }
.nome-arquivo-com-miniatura {
  display: inline-flex; align-items: center; gap: var(--e2); min-width: 0;
}
.miniatura-arquivo {
  width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover;
  border-radius: var(--raio); border: 1px solid var(--linha);
  background: var(--papel-2);
}

/* Duas acoes por linha (Mover com destino, Remover). O `select` encolhe --
   sem `min-width: 0` ele impoe a largura do maior nome de pasta e estoura a
   tabela no celular. */
.tabela .acao { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.tabela .acao .form-sair { display: flex; gap: var(--e2); align-items: center; }
.tabela .acao select { min-width: 0; max-width: 160px; padding: 4px 8px; font-size: var(--t-peq); }

.exemplo-titulo { display: block; font-weight: 700; margin-bottom: var(--e1); }

/* ---------------------------------------------------------------- /admin
   Painel de administracao (P2b). Tres secoes numa pagina so, com ancoras.

   A REGRA QUE MANDA AQUI: nenhuma tabela pode empurrar a barra horizontal da
   PAGINA. A tabela de clientes tem dez colunas e a de conteineres tem cinco --
   num celular de 390 px nenhuma das duas cabe, e a saida certa e a tabela
   rolar DENTRO da propria caixa (`overflow-x: auto` em `.tabela-rolagem`), e
   nao o documento inteiro deslizar. `min-width: 0` no filho e o que faz o
   flex/grid pai permitir que ele encolha: sem ele o `overflow` nunca dispara,
   porque a caixa cresce ate caber a tabela. */
.ancoras-admin {
  display: flex; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e5);
}
.ancoras-admin a {
  color: var(--tinta-2); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid var(--linha); padding-bottom: 2px;
}
.ancoras-admin a:hover { color: var(--acento); border-color: var(--acento); }

.admin-secundaria {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e3); margin: 0 0 var(--e5); align-items: stretch;
}
.admin-secundaria a {
  width: 100%; min-width: 0; min-height: 44px; display: flex;
  align-items: center; justify-content: center; text-align: center;
  padding: 10px var(--e3); border: 1px solid var(--linha);
  border-radius: var(--r2); color: var(--tinta); text-decoration: none;
  background: var(--branco); font-weight: 700;
}
.admin-secundaria a:hover { border-color: var(--acento); color: var(--acento); }

.destaque-ferramenta { display: grid; gap: var(--e2); }
.destaque-ferramenta code,
.cartao code {
  overflow-wrap: anywhere; word-break: break-word;
}

.tabela-rolagem { overflow-x: auto; min-width: 0; max-width: 100%; }
.tabela-admin { width: 100%; border-collapse: collapse; font-size: var(--t-peq); }
.tabela-admin th, .tabela-admin td {
  text-align: left; padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--linha); white-space: nowrap;
}
/* NOWRAP nas duas, e a tabela ROLA dentro da caixa. Tentei o contrario --
   deixar as celulas quebrarem para as dez colunas caberem num monitor de
   1280 -- e MEDIDO na captura de 390 px: sem espacos para quebrar, o e-mail e o
   nome da imagem viravam tiras de tres letras por linha
   ("ana.ri / beiro / @exe / mplo"), ilegiveis. Dez colunas nao cabem em 390 px
   de jeito nenhum; o que se escolhe e COMO elas nao cabem, e rolar e melhor que
   quebrar no meio da palavra. No desktop as ultimas colunas ("Chaves ativas",
   "Criado em") pedem uma rolagem curta -- e esta anotado no relatorio da fatia
   como o custo aceito. */
.tabela-admin th { font-weight: 700; color: var(--tinta-2); }
.tabela-admin th a { color: inherit; text-decoration: none; }
.tabela-admin th a:hover { text-decoration: underline; }
.tabela-admin th.ativa a { color: var(--acento); }

.linha-busca {
  display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap;
  margin-bottom: var(--e4);
}
.linha-busca input[type="search"] {
  flex: 1 1 240px; min-width: 0; padding: 8px var(--e3);
  border: 1px solid var(--linha); border-radius: 8px; font: inherit;
  background: var(--branco); color: var(--tinta);
}

.numero { font-size: var(--t-num); line-height: 1.2; }
.lista-numeros { list-style: none; margin: 0; padding: 0; }
.lista-numeros li {
  display: flex; justify-content: space-between; gap: var(--e3);
  padding: var(--e1) 0; border-bottom: 1px solid var(--linha);
  font-size: var(--t-peq); min-width: 0;
}
.lista-numeros li:last-child { border-bottom: 0; }
.lista-numeros li span { overflow: hidden; text-overflow: ellipsis; }

/* Pastilha de estado. SEM classe de cor = sem cor: `sem dado` nao pode sair
   verde, porque pintar de verde um numero que nao existe e a forma mais rapida
   de um painel mentir. */
.pastilha { display: inline-block; }
.pastilha.amarelo { color: #854d0e; }
.pastilha.vermelho { color: var(--alerta); }

/* ===== Infra 2.0: os tres blocos da secao Infra da /admin ================= *
 * So tokens (theme-aware por heranca). Zero style inline no HTML: as cores e
 * tamanhos moram aqui. */
.bloco-infra { display: flex; flex-direction: column; gap: var(--e3); margin-top: var(--e5); }
.h-bloco { font-size: var(--t-h3); line-height: 1.2; margin: 0; }
.grade-containers { display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grade-maquina { display: grid; gap: var(--e3);
  grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) {
  .grade-maquina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cartao-container { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.tabela-containers th, .tabela-containers td {
  height: 32px; vertical-align: top; white-space: normal;
}
.tabela-containers .num { white-space: nowrap; }
.detalhes-linha { margin-top: var(--e1); }
.detalhes-linha summary {
  cursor: pointer; color: var(--tinta-2); font-size: var(--t-peq);
}
.detalhes-tecnicos {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--e1) var(--e3); margin: var(--e2) 0 0; font-size: var(--t-peq);
}
.detalhes-tecnicos dt { color: var(--tinta-2); }
.detalhes-tecnicos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cont-cabeca { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e2); }
.cont-cabeca > div { display: flex; flex-direction: column; min-width: 0; }
.cont-tecnico { font-family: var(--mono); font-size: var(--t-peq); }
.cont-papel { margin: 0; }
.cont-linha-1 { display: flex; justify-content: space-between; gap: var(--e2);
  flex-wrap: wrap; font-family: var(--mono); font-size: var(--t-peq); }
.cont-spark { height: 30px; }
.metrica-linha { display: flex; justify-content: space-between; gap: var(--e2);
  align-items: baseline; flex-wrap: wrap; }
.metrica-valores { font-family: var(--mono); font-size: var(--t-peq); color: var(--tinta-2); }
.cont-rodape { display: flex; justify-content: space-between; align-items: center;
  gap: var(--e2); flex-wrap: wrap; margin-top: auto; padding-top: var(--e2);
  border-top: 1px solid var(--linha); }
.cont-acoes { display: flex; gap: var(--e3); align-items: center; }
.lnk-param { font-size: var(--t-peq); }

/* sparkline: preserveAspectRatio=none estica; non-scaling-stroke mantem o traco */
.sparkline { width: 100%; height: 100%; display: block; }
.sparkline polyline { fill: none; stroke: var(--acento); stroke-width: 1.5;
  vector-effect: non-scaling-stroke; }
.sparkline .spark-ponto { fill: var(--acento); }
.spark-vazio { color: var(--tinta-3); font-family: var(--mono); }

.pastilha.verde { color: var(--ok); }

/* parametros */
.param-servico { border: 1px solid var(--linha); border-radius: var(--r2);
  padding: var(--e4); display: flex; flex-direction: column; gap: 0;
  margin: 0 0 var(--e4) 0; }
.param-servico legend { font-family: var(--mono); font-size: var(--t-peq); padding: 0 var(--e2); }
.param-linha { display: grid; grid-template-columns: minmax(0, 1fr) 9rem 8rem; gap: var(--e2) var(--e3);
  align-items: center; padding: var(--e2) 0; border-bottom: 1px solid var(--linha); }
.param-linha:last-child { border-bottom: 0; }
.param-id { display: flex; flex-direction: column; min-width: 0; }
.param-campo { display: flex; gap: var(--e2); align-items: center; min-width: 0; }
.param-campo input, .param-campo select { max-width: 100%; padding: 4px 8px; font-size: var(--t-peq);
  font-family: var(--mono); }
.param-campo input[type="number"] {
  width: 9rem; text-align: right;
}
.param-campo select { width: 9rem; text-align: right; }
.param-campo.param-texto { grid-column: 2 / -1; }
.param-campo.param-texto input {
  min-width: 24rem; width: 100%; text-align: left; font-family: var(--mono);
}
@supports selector(:has(*)) {
  .param-linha:has(.param-texto) {
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 1fr);
  }
}
.param-unidade { color: var(--tinta-3); font-size: var(--t-peq); min-width: 0; text-align: left; }
.param-meta { grid-column: 1 / -1; display: flex; gap: var(--e3); flex-wrap: wrap;
  align-items: center; font-size: var(--t-peq); }

@media (max-width: 430px) {
  .grade-containers, .grade-maquina { grid-template-columns: 1fr; }
  .param-linha { grid-template-columns: minmax(0, 1fr) 8rem minmax(4rem, 1fr); }
  .param-id { grid-column: 1 / -1; }
  .param-linha:has(.param-texto) { grid-template-columns: minmax(0, 1fr); }
  .param-campo.param-texto { grid-column: 1 / -1; }
  .param-campo.param-texto input { min-width: 0; }
  .param-campo input[type="number"], .param-campo select { width: 8rem; }
}

/* ====================================================== A2 2026-09-07 */

.acao-perigo > summary.botao-mini { list-style: none; }
.acao-perigo > summary.botao-mini::-webkit-details-marker { display: none; }

.tabela th, .tabela td, .tabela-admin th, .tabela-admin td {
  min-height: var(--altura-linha-tabela);
}
.tabela .acao {
  flex-wrap: nowrap; white-space: nowrap; align-items: center;
}
.tabela .acao select {
  max-width: 150px; min-height: 30px; padding: 4px 8px; font-size: var(--t-peq);
}

.ancoras-admin, .admin-secundaria { display: none; }
.admin-tabs {
  display: flex; gap: var(--e2); overflow-x: auto; max-width: 100%;
  border-bottom: 1px solid var(--linha); padding-bottom: var(--e1);
  scrollbar-width: thin;
}
.admin-tab {
  color: var(--tinta-2); text-decoration: none; font-weight: 700;
  white-space: nowrap; min-height: 34px; display: inline-flex;
  align-items: center; padding: 0 var(--e2); border-bottom: 2px solid transparent;
}
.admin-tab:hover { color: var(--acento); border-color: var(--acento); }

@media (max-width: 719px) {
  .admin-tabs { flex-wrap: wrap; overflow-x: visible; gap: var(--e1) var(--e2); }
  .admin-tab { min-height: 30px; padding: 0 var(--e1); }
}

.metricas-admin { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.metrica.compacta { padding: var(--e3); }
.metrica.compacta .valor { font-size: var(--t-num); font-variant-numeric: tabular-nums; }
.indicador-sem-dado { font-size: var(--t-peq); font-family: var(--sans); }
.numero.indicador-sem-dado { font-size: var(--t-peq); }
.metrica.compacta.indicador { padding: var(--e1) var(--e3); gap: var(--e1); }
.metrica.compacta.indicador .valor { line-height: 1; }
.metrica.compacta.indicador .valor-texto { font-size: var(--t-h3); }
.serie-assinaturas > div { display: grid; gap: var(--e2); }
.barra-mes {
  display: grid;
  grid-template-columns: 52px minmax(60px, 1fr) 34px minmax(60px, 1fr) 34px;
  gap: var(--e2); align-items: center; font-size: var(--t-peq);
}

.cont-imagem {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.tabela-admin.tabela-pedidos {
  table-layout: fixed;
}
.tabela-admin.tabela-pedidos th,
.tabela-admin.tabela-pedidos td {
  white-space: normal; vertical-align: top; overflow-wrap: anywhere;
}
.tabela-pedidos .col-data { width: 13ch; }
.tabela-pedidos .col-empresa { width: 14%; }
.tabela-pedidos .col-pessoa { width: 16%; }
.tabela-pedidos .col-telefone { width: 12%; }
.tabela-pedidos .col-pedido { width: auto; }
.tabela-pedidos .col-estado { width: 8%; }
.tabela-pedidos .col-acoes { width: 19%; }
.tabela-pedidos .pedido-texto { min-width: 0; }
.tabela-pedidos .acao form { min-width: 0; max-width: 100%; }
.tabela-pedidos .acao .botao-mini { max-width: 100%; white-space: normal; }
.mini-graficos { display: grid; gap: var(--e2); margin: var(--e1) 0; }
.mini-metrica {
  display: grid; grid-template-columns: 72px minmax(72px, 1fr) 48px auto;
  gap: var(--e2); align-items: center; font-size: var(--t-peq);
}
.mini-rotulo { color: var(--tinta-3); }
.mini-barra {
  display: block; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--neutro-selo); min-width: 0;
}
.mini-barra svg { display: block; width: 100%; height: 100%; }
.mini-barra .fundo { fill: var(--neutro-selo); }
.mini-barra .preenchido { fill: var(--acento); }
.mini-barra.perda .preenchido { fill: var(--alerta); }
.mini-barra.envio .preenchido { fill: var(--tinta-2); }
.mini-escala { color: var(--tinta-3); font-family: var(--mono); }


main > .botao,
main > form > .botao,
main > section + .botao,
main > .cartao + .botao,
main > .cartao + form,
main > section + form {
  margin-top: var(--gap-bloco);
}

@media (max-width: 719px) {
  body { font-size: var(--t-corpo); }
  .tabela-caixa { overflow-x: visible; }
  .tabela-cartao { border: 0; background: transparent; }
  .tabela:not(.tabela-admin), .tabela:not(.tabela-admin) thead,
  .tabela:not(.tabela-admin) tbody, .tabela:not(.tabela-admin) tr,
  .tabela:not(.tabela-admin) th, .tabela:not(.tabela-admin) td,
  .tabela-admin.tabela-pedidos, .tabela-admin.tabela-pedidos thead,
  .tabela-admin.tabela-pedidos tbody, .tabela-admin.tabela-pedidos tr,
  .tabela-admin.tabela-pedidos th, .tabela-admin.tabela-pedidos td,
  .tabela-conformidade, .tabela-conformidade thead, .tabela-conformidade tbody,
  .tabela-conformidade tr, .tabela-conformidade th, .tabela-conformidade td {
    display: block; min-width: 0; width: 100%;
  }
  .tabela:not(.tabela-admin) thead,
  .tabela-admin.tabela-pedidos thead,
  .tabela-conformidade thead { position: absolute; left: -10000px; }
  .tabela:not(.tabela-admin) tbody tr,
  .tabela-admin.tabela-pedidos tbody tr,
  .tabela-conformidade tbody tr {
    border: 1px solid var(--linha); border-radius: var(--r2);
    background: var(--papel); padding: var(--e3) var(--e4);
    margin-bottom: var(--e3);
  }
  .tabela:not(.tabela-admin) td,
  .tabela-admin.tabela-pedidos td,
  .tabela-conformidade td {
    border-bottom: 0; padding: var(--e1) 0; text-align: left;
  }
  .tabela:not(.tabela-admin) td[data-rotulo]::before,
  .tabela-admin.tabela-pedidos td[data-rotulo]::before,
  .tabela-conformidade td::before {
    content: attr(data-rotulo) ": ";
    font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--tinta-3);
  }
  .tabela td.acao { overflow-x: visible; }
  .acoes-arquivo { justify-content: flex-start; overflow-x: auto; }
  .tabela-admin { min-width: 760px; }
  .tabela-admin.tabela-pedidos { min-width: 0; }
  .tabela-rolagem {
    box-shadow: inset -16px 0 12px -16px rgba(28, 25, 23, 0.35);
  }
  .tabela-pedidos-wrapper { box-shadow: none; }
}

/* Listas paginadas e segredos responsivos, 2026-09-07 */
.lista-paginada {
  display: grid;
  gap: var(--e2);
  margin: var(--e3) 0;
}
.lista-paginada form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
}
.lista-paginada input[type="search"] {
  min-width: min(18rem, 100%);
}
.lista-paginada-resumo,
.lista-paginada-rodape {
  color: var(--tinta-2);
  font-size: var(--t-peq);
}
.lista-paginada-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  align-items: center;
}
.lista-paginada-nav a,
.lista-paginada-nav strong {
  min-width: 2rem;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lista-paginada-selecao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
  margin: var(--e2) 0;
}
.segredo-reinicio-aviso {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: center;
  justify-content: space-between;
}
.segredo-reinicio-aviso p {
  margin: 0;
}
.tabela-segredos {
  table-layout: fixed;
  width: 100%;
}
.tabela-segredos th,
.tabela-segredos td {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  overflow-x: hidden;
  overflow-y: visible;
}
.tabela-segredos .segredo-acao {
  width: 11rem;
  min-width: 0;
}
.segredo-nome,
.segredo-confirmacao-nome {
  font-family: var(--mono);
  overflow-wrap: anywhere;
}
.segredo-form {
  display: grid;
  gap: var(--e2);
  min-width: 0;
}
.segredo-details summary {
  font-size: var(--t-peq);
}
.segredo-campo {
  display: grid;
  gap: var(--e1);
  min-width: 0;
}
.segredo-campo > span {
  color: var(--tinta-3);
  font-size: var(--t-rotulo);
  font-weight: 800;
}
.segredo-campo .entrada,
.segredo-form textarea {
  width: 100%;
  box-sizing: border-box;
}
.segredo-confirmacao-nome {
  display: block;
  white-space: normal;
}
.segredos-cartoes {
  display: none;
}
.segredo-cartao {
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  background: var(--papel);
  padding: var(--e4);
  min-width: 0;
}
.segredo-cartao-cab,
.segredo-servico,
.segredo-estado {
  overflow-wrap: anywhere;
}
.segredo-cartao-cab {
  display: grid;
  gap: var(--e1);
}
.segredo-servico,
.segredo-estado {
  margin: var(--e1) 0;
  color: var(--tinta-2);
}
.conectores-provedor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e4);
}
.conectores-provedor h2 {
  margin: 0 0 var(--e1);
}
.conectores-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}
.conectores-lista td {
  vertical-align: top;
}
.conector-pasta {
  align-items: center;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  display: grid;
  gap: var(--e2);
  grid-template-columns: auto 1fr auto;
  padding: var(--e3);
}

@media (max-width: 768px) {
  .detalhes-tecnicos {
    grid-template-columns: minmax(0, 1fr);
  }
  .tabela-segredos-wrapper {
    display: none;
  }
  .segredos-cartoes {
    display: grid;
    gap: var(--e3);
  }
  .segredo-cartao {
    max-width: 100%;
  }
  .segredo-form .botao-mini {
    width: 100%;
    justify-content: center;
  }
  .conectores-provedor {
    align-items: stretch;
    flex-direction: column;
  }
  .conectores-acoes .botao-mini {
    flex: 1 1 9rem;
  }
}

@media (max-width: 719px) {
  .tabela:not(.tabela-admin) tbody tr {
    padding: var(--e2) var(--e3);
    margin-bottom: var(--e2);
  }
}