/* ==========================================================================
   Next — área logada: casca lateral (req_8e0b877f3949, U1)
   A MESMA folha serve a área da empresa e a Administração do Next: menu
   lateral do modelo (docs/codex-design/meu-espaco.html), barra de cima com
   trilha, idioma, tema e avatar, e os componentes do modelo. Tema claro e
   escuro por checkbox (`#tema`), sem JavaScript. HTML + CSS puros. Classes em
   português.
   ========================================================================== */

/* Mesma declaração das páginas públicas (style.css do kit do Kepler). */
@font-face {
  font-family: "Manrope";
  src: url("/static/fontes/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* --- Tema claro (padrão) --------------------------------------------------
   Os `--next-*` são os tokens do modelo (docs/codex-design/tokens.css), sem
   alteração. Os nomes em português abaixo são os que o portal usa: no claro
   eles SÃO os do modelo; no escuro (bloco seguinte) são derivados deles. */
:root {
  color-scheme: light;
  --next-action: #3155f5;
  --next-ink: #141b30;
  --next-origin: #98f5d2;
  --next-surface: #f4f6fb;
  --next-secondary: #596477;
  --next-border: #dbe0ea;
  --next-deep: #101625;
  --next-white: #ffffff;
  --next-radius-control: 8px;
  --next-radius-workspace: 16px;
  --next-radius-section: 20px;

  --tinta: var(--next-ink);
  --tinta-suave: var(--next-secondary);
  --fundo: var(--next-surface);
  --superficie: var(--next-white);
  --superficie-2: #eef1f8;
  --azul: var(--next-action);
  --azul-forte: #2440c9;
  --azul-fraco: #e7ecfe;
  --linha: var(--next-border);
  --linha-forte: #c3cbdb;
  --menta: var(--next-origin);
  --menta-tinta: #0c3b2c;
  --menta-fraco: #e0f8ee;
  --menta-escura: #22624e;
  --erro: #a8261c;
  --erro-fundo: #fbeceb;
  --aviso-fundo: #fff2da;
  --aviso-texto: #79561d;
  --raio: 20px;
  --raio-botao: var(--next-radius-control);
  --raio-cartao: 14px;
  --altura-botao: 54px;
  --gutter: clamp(20px, 4vw, 64px);
  --azul-marca: var(--next-action);
}

/* --- Tema escuro: o mesmo CSS, só os tokens mudam ------------------------
   Derivados do modelo: o fundo é o `--next-deep`; a superfície, o painel e a
   linha são o `--next-deep` clareado em direção ao azul de ação; a tinta é o
   branco do modelo; o azul vira o tom claro do mesmo matiz (o `--next-action`
   sobre o fundo escuro não chega ao AA); a menta é a `--next-origin`. O
   contraste de cada par é medido em `test_area_logada_codex.py`. */
body:has(.alternador-tema:checked) {
  color-scheme: dark;
  --tinta: #f9fbff;
  --tinta-suave: #b2bbce;
  --fundo: var(--next-deep);
  --superficie: #18203a;
  --superficie-2: #202942;
  --azul: #a9bbff;
  --azul-forte: #cdd8ff;
  --azul-fraco: #1e2947;
  --linha: #384154;
  --linha-forte: #4c5670;
  --menta: var(--next-origin);
  --menta-tinta: #06281d;
  --menta-fraco: #16342c;
  --menta-escura: #98f5d2;
  --erro: #ff9f96;
  --erro-fundo: #33161a;
  --aviso-fundo: #3a2d12;
  --aviso-texto: #f2c879;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.055em; line-height: 1.12; text-wrap: pretty; }
h3 { letter-spacing: -0.035em; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-forte); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--azul-marca); outline-offset: 5px; border-radius: 4px; }
::selection { background: var(--menta); color: var(--menta-tinta); }

.pular-para-conteudo {
  position: absolute; left: 16px; top: -64px; z-index: 60;
  padding: 12px 18px; border-radius: var(--raio-botao);
  background: var(--tinta); color: var(--fundo); font-weight: 700;
}
.pular-para-conteudo:focus { top: 16px; color: var(--fundo); text-decoration: none; }

.somente-leitores {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.alternador-tema, .alternador-menu {
  position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
}

/* ==========================================================================
   CASCA LATERAL — menu à esquerda, barra de cima, conteúdo
   `.quadro:has(> .casca-lateral)`: só a casca da conta é grade de duas
   colunas; o `.quadro` das telas sem menu (`/api`, consentimento) segue em
   bloco, com o `.topo` abaixo.
   ========================================================================== */
.quadro:has(> .casca-lateral) {
  display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh;
}
.casca-lateral {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 32px 20px 20px;
  background: var(--superficie); border-right: 1px solid var(--linha);
}
.casca-lateral-conteudo { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.casca-marca-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 30px; }
.casca-lateral .ladrilho-marca { width: 30px; height: 30px; }
.casca-lateral .palavra-marca { font-size: 34px; font-weight: 800; letter-spacing: -0.06em; text-transform: lowercase; }
.casca-lateral .marca-da-organizacao .palavra-marca { font-size: 20px; letter-spacing: -0.03em; text-transform: none; }
.casca-lateral .marca:not(.marca-da-organizacao)::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--menta);
  align-self: flex-end; margin-bottom: 4px; flex: none;
}

/* TAREFA-058 (HIST-063): a MARCA DA ORGANIZAÇÃO no alto do menu. O logotipo tem a
   ALTURA do ladrilho do Next (34 px) e a largura acompanha a proporção, com
   teto: um logotipo de 2048 x 512 px vira 136 x 34 e cabe no telefone de 360 px
   sem rolagem lateral (CA-8). O nome longo (até 40 caracteres) corta com
   reticências em vez de empurrar a fileira. */
.marca { display: inline-flex; align-items: center; gap: 12px; color: var(--tinta); }
.marca:hover { color: var(--tinta); text-decoration: none; }
.marca { gap: 9px; line-height: 1; }
.ladrilho-marca { display: block; width: 34px; height: 34px; flex: none; }
.ladrilho-marca img { display: block; width: 100%; height: 100%; border-radius: 9px; }
.palavra-marca { font-size: 26px; font-weight: 750; letter-spacing: -0.065em; }
.logotipo-da-organizacao {
  display: block; flex: none; height: 34px; width: auto;
  max-width: min(168px, 42vw); object-fit: contain; object-position: left center;
}
.marca-da-organizacao { min-width: 0; max-width: 100%; }
.marca-da-organizacao .palavra-marca {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 22px; letter-spacing: -0.03em;
}

/* Cartão da empresa: nome e papel. Com duas ou mais empresas (ou o grupo) ele
   é o `<summary>` do seletor: <details> + POST /contexto, sem JavaScript. */
.cartao-empresa, .seletor-empresa summary {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px;
  border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie);
  color: var(--tinta);
}
.cartao-empresa { margin-bottom: 26px; }
.seletor-empresa { position: relative; min-width: 0; margin-bottom: 26px; }
.seletor-empresa summary { list-style: none; cursor: pointer; }
.seletor-empresa summary::-webkit-details-marker { display: none; }
.seletor-empresa summary:hover { border-color: var(--linha-forte); background: var(--superficie-2); }
.avatar-empresa {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px;
  border-radius: 9px; background: var(--azul-fraco); color: var(--azul-forte); font-weight: 800;
}
.texto-empresa { display: block; flex: 1; min-width: 0; }
.nome-empresa { display: block; min-width: 0; font-size: 13px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.papel-empresa { display: block; margin-top: 2px; color: var(--tinta-suave); font-size: 11px; line-height: 1.4; }
.rotulo-empresa {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.seletor-empresa .seta-menu { flex: none; font-size: 10px; color: var(--tinta-suave); }
.seletor-empresa[open] .seta-menu { transform: rotate(180deg); }
.lista-empresas {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 25;
  margin: 0; padding: 8px;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 14px;
  box-shadow: 0 18px 40px -20px rgba(8, 12, 24, 0.45);
}
.lista-empresas ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.titulo-lista-empresas {
  margin: 4px 12px 8px; color: var(--tinta-suave); font-size: 12px; font-weight: 700;
}
.opcao-empresa {
  display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--tinta); font: inherit; font-size: 14px; text-align: left;
  overflow-wrap: anywhere; cursor: pointer;
}
.opcao-empresa:hover { background: var(--superficie-2); }
.opcao-empresa[aria-current="true"] { background: var(--azul-fraco); color: var(--azul-forte); font-weight: 800; }

/* O menu: um grupo por assunto, o item atual só por `aria-current="page"`. */
.indice ul { margin: 0; padding: 0; list-style: none; }
.rotulo-menu {
  margin: 25px 13px 7px; color: var(--tinta-suave); font-size: 11px; font-weight: 750;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.indice li { position: relative; }
.indice a {
  display: flex; align-items: center; min-height: 42px; margin-bottom: 3px; padding: 10px 12px 10px 42px;
  border-radius: 9px; color: var(--tinta-suave); font-size: 13px; font-weight: 650; line-height: 1.35;
  overflow-wrap: anywhere;
}
.indice a:hover { background: var(--superficie-2); color: var(--azul-forte); text-decoration: none; }
.indice a[aria-current="page"] { background: var(--azul-fraco); color: var(--azul-forte); font-weight: 750; }
.indice a[aria-current="page"]::after {
  content: ""; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--azul); flex: none;
}
.icone-menu {
  position: absolute; left: 12px; top: 12px; width: 18px; height: 18px; pointer-events: none;
  color: var(--tinta-suave); fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.indice a:hover + .icone-menu, .indice a[aria-current="page"] + .icone-menu { color: var(--azul-forte); }

/* Pé do menu: pessoa, e-mail e Sair (POST com CSRF). */
.rodape-conta {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-items: center;
  margin-top: auto; padding-top: 22px; border-top: 1px solid var(--linha);
  color: var(--tinta-suave); font-size: 11px;
}
/* P-N-048 -- o e-mail é o único campo desta fileira sem tamanho máximo, e o
   pacote põe `white-space: nowrap` em todos os `<span>` dela. Com um e-mail
   longo isso vira uma caixa que não quebra e empurra a página de lado no
   telefone: é o mesmo defeito que a lateral antiga resolveu com `min-width: 0`
   e quebra de palavra (`test_o_email_longo_da_conta_nao_transborda_na_casca_v2`).
   O nome continua curto; quem precisa quebrar é o e-mail, e ele quebra em
   qualquer ponto. */
.rodape-conta > span { min-width: 0; overflow-wrap: anywhere; }
.rodape-conta .avatar { grid-row: 1 / span 2; }
.rodape-conta .email-conta { font-size: 11px; line-height: 1.4; }
.grupo-menu { display: block; }
.rodape-conta .quem { color: var(--tinta); font-size: 12px; font-weight: 750; letter-spacing: -0.01em; }
.rodape-conta form { grid-column: 1 / -1; margin-top: 8px; }
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--menta-fraco); color: var(--menta-escura); font-size: 13px; font-weight: 750;
}
a.avatar:hover { text-decoration: none; color: var(--menta-escura); box-shadow: 0 0 0 2px var(--linha-forte); }
.sair-lateral .botao-discreto {
  display: flex; justify-content: space-between; width: 100%; min-height: 44px; padding: 0 3px;
  border: 0; background: transparent; color: var(--tinta-suave); font-size: 12px; font-weight: 650;
}
.sair-lateral .botao-discreto:hover { background: transparent; box-shadow: none; transform: none; color: var(--tinta); }
.sair-lateral .botao-discreto::after { content: "↗"; content: "↗" / ""; }

/* Barra de cima: trilha (empresa / tela), idioma, tema e avatar. */
.casca-corpo { min-width: 0; }
.casca-topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  min-height: 78px; padding: 8px var(--gutter);
  background: color-mix(in srgb, var(--superficie) 80%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha);
}
.casca-trilha { min-width: 0; color: var(--tinta-suave); font-size: 13px; overflow-wrap: anywhere; }
.casca-trilha strong { color: var(--tinta); font-weight: 700; }
.divisor-trilha { margin: 0 12px; color: var(--linha-forte); }
.casca-corpo > .principal { max-width: 1560px; margin: 0 auto; padding-top: 36px; }

/* ==========================================================================
   TOPO SIMPLES — só as telas sem menu (`/api`, consentimento do OAuth)
   ========================================================================== */
.topo {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--fundo) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.fila-marca {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px var(--gutter) 14px;
}
.ferramentas-topo { display: flex; align-items: center; gap: 10px; }

/* Área do grupo (TAREFA-037): a opção "Área do grupo · <grupo>" do seletor numa
   lista PRÓPRIA, separada das empresas por um fio; a tabela das empresas da
   Visão geral e o cartão "Criar empresa". No telefone a tabela vira uma pilha
   de linhas com o rótulo de cada coluna, em vez de rolar de lado. */
.titulo-lista-grupo {
  margin: 12px 12px 8px; padding-top: 10px; border-top: 1px solid var(--linha);
  color: var(--tinta-suave); font-size: 12px; font-weight: 700;
}
.lista-do-grupo { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.opcao-grupo { font-weight: 700; }
.cartao-criar-empresa { max-width: 640px; }
.ajuda-cartao { margin: 6px 0 14px; color: var(--tinta-suave); font-size: 14px; max-width: 62ch; }
.tabela-empresas { width: 100%; border-collapse: collapse; margin-top: 12px; }
.legenda-empresas {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.tabela-empresas th, .tabela-empresas td {
  padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linha);
  text-align: left; vertical-align: top; overflow-wrap: anywhere;
}
.tabela-empresas thead th { color: var(--tinta-suave); font-size: 12px; font-weight: 700; }
.tabela-empresas tbody th { font-weight: 800; letter-spacing: -0.015em; }
.tabela-empresas td { font-variant-numeric: tabular-nums; }
.tabela-empresas .pastilha { margin-left: 6px; font-size: 12px; font-weight: 600; }
@media (max-width: 700px) {
  .tabela-empresas thead { display: none; }
  .tabela-empresas tr { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
  .tabela-empresas th, .tabela-empresas td { padding: 0; border-bottom: 0; }
  .tabela-empresas td { display: flex; gap: 8px; }
  .tabela-empresas td::before { content: attr(data-rotulo); color: var(--tinta-suave); min-width: 11ch; }
}
/* --- Idioma, tema, sair -------------------------------------------------- */
.seletor-idioma {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie);
}
.seletor-idioma a {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  color: var(--tinta-suave); font-size: 13px; font-weight: 700;
}
.seletor-idioma a:hover { background: var(--superficie-2); color: var(--tinta); text-decoration: none; }
.seletor-idioma a[aria-current="true"] { background: var(--tinta); color: var(--fundo); }
/* P-028: bandeira em SVG inline, 20x14, cantos pelo CSS. */
.bandeira { display: block; width: 20px; height: 14px; flex: 0 0 auto; border-radius: 2px; }

.botao-tema, .botao-menu {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--linha); border-radius: var(--raio-botao);
  background: var(--superficie); color: var(--tinta);
  font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.botao-tema:hover, .botao-menu:hover { background: var(--superficie-2); }
/* O rótulo diz sempre para onde o clique leva. Os DOIS textos vêm do servidor
   (i18n `nav.theme_dark` / `nav.theme_light`); a folha só escolhe qual aparece.
   Escrevê-los aqui, num `content:`, punha texto de interface sem idioma dentro
   do CSS -- a tela em inglês mostrava "Tema escuro". */
.tema-claro { display: none; }
body:has(.alternador-tema:checked) .tema-escuro { display: none; }
body:has(.alternador-tema:checked) .tema-claro { display: inline; }
.alternador-tema:focus-visible ~ .quadro .botao-tema,
.alternador-menu:focus-visible ~ .quadro .botao-menu { outline: 2px solid var(--azul); outline-offset: 3px; }
.disco-tema {
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(105deg, var(--tinta) 0 50%, var(--menta) 50% 100%);
  flex: none;
}
/* O rótulo do Sair é o ÚNICO nome que o botão tem: ele não tem ícone nem
   `aria-label`. Por isso ele não some em largura nenhuma -- ver a nota da
   P-N-047 no bloco de telefone. Aqui a folha só garante que "Sair" não quebre
   em duas linhas dentro de um botão de 40 px de altura. */
.rotulo-sair { white-space: nowrap; }

/* ==========================================================================
   BLOCO DE TÍTULO — tipografia grande, sem cartão
   ========================================================================== */
.principal { padding: 0 var(--gutter) 64px; }

/* A segunda coluna só existe quando há algo nela (constelação ou medidor). */
.abertura {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 20px 40px; align-items: center;
  padding: 22px 0 18px; margin-bottom: 22px;
  border-bottom: 2px solid var(--tinta);
}
.abertura .selo-secao {
  display: block; margin-bottom: 14px; color: var(--tinta-suave);
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
}
.abertura h1 { font-size: clamp(32px, 3.6vw, 54px); font-weight: 700; }
.abertura .linha-apoio { margin-top: 10px; max-width: 62ch; color: var(--tinta-suave); font-size: 15px; }
.abertura .selo-secao { margin-bottom: 10px; }

/* Medidor do plano: número grande + barra fina */
.abertura:has(.constelacao),
.abertura:has(.medidor-plano) { grid-template-columns: minmax(0, 1fr) 272px; }
.abertura:has(.constelacao):has(.medidor-plano) .medidor-plano { grid-column: 1; }
.medidor-plano { display: grid; gap: 8px; max-width: 460px; }
.abertura:has(.constelacao) .medidor-plano { margin-top: 20px; }
.medidor-plano .rotulo {
  color: var(--tinta-suave); font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.medidor-plano .numero {
  font-size: 26px; font-weight: 700; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.medidor-plano .numero small { font-size: 0.45em; font-weight: 700; color: var(--tinta-suave); letter-spacing: -0.03em; }
.barra-plano { display: flex; height: 6px; background: var(--linha); }
.barra-plano span { display: block; height: 100%; }
.parte-empresa { background: var(--azul); }
.parte-pessoal { background: var(--menta); }
.legenda-plano {
  display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none;
  color: var(--tinta-suave); font-size: 13px;
}
.legenda-plano li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.legenda-plano b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.marca-legenda { width: 10px; height: 10px; flex: none; }

/* ==========================================================================
   ABAS — dois títulos lado a lado, não pílulas
   ========================================================================== */
.abas { display: flex; flex-wrap: wrap; gap: 28px; margin: 26px 0 8px; }
.abas a {
  padding-bottom: 8px; color: var(--tinta-suave);
  font-size: clamp(20px, 2.4vw, 27px); font-weight: 700; letter-spacing: -0.05em;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.abas a:hover { color: var(--tinta); text-decoration: none; border-bottom-color: var(--linha-forte); }
.abas a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--azul); }

/* Abas secundárias: dentro de uma tela (as seis de Administração). */
.abas-secundarias { gap: 18px; margin: 18px 0 4px; }
.abas-secundarias a { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; padding-bottom: 7px; border-bottom-width: 2px; }

/* ==========================================================================
   DUAS TRILHAS — lateral de contexto + livro-razão
   ========================================================================== */
.duas-trilhas {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 56px; align-items: start; margin-top: 34px;
}
.lateral { display: grid; gap: 34px; position: sticky; top: 176px; }
.bloco-lateral { display: grid; gap: 14px; }
.titulo-bloco {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--tinta);
}
.titulo-bloco h2 { font-size: 17px; letter-spacing: -0.04em; }
.titulo-bloco .contagem, .cabecalho-razao .contagem, .contagem {
  color: var(--tinta-suave); font-size: 13px; font-variant-numeric: tabular-nums;
}
.titulo-bloco .contagem { white-space: nowrap; }

/* Trilha de pastas */
.trilha ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600;
}
.trilha li { display: flex; align-items: center; gap: 6px; }
.trilha li + li::before { content: "/"; color: var(--linha-forte); }
.trilha [aria-current="page"] { color: var(--tinta); font-weight: 800; letter-spacing: -0.02em; }

/* Pastas como lista de sulcos, não cartões */
.lista-pastas { margin: 0; padding: 0; list-style: none; }
.lista-pastas a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 12px 2px; border-bottom: 1px solid var(--linha);
  color: var(--tinta); font-weight: 700; letter-spacing: -0.02em;
}
.lista-pastas a:hover { background: var(--superficie); color: var(--azul); text-decoration: none; padding-inline: 8px; }
.lista-pastas .itens { color: var(--tinta-suave); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lista-pastas .subir { color: var(--tinta-suave); }
.lista-pastas .subir:hover { color: var(--tinta); }

/* ==========================================================================
   LIVRO-RAZÃO DE ARQUIVOS — linhas de largura total, sem moldura
   ========================================================================== */
.razao { min-width: 0; }
.cabecalho-razao {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--tinta);
}
.cabecalho-razao h2 { font-size: 22px; }

.tabela-arquivos { width: 100%; border-collapse: collapse; }
.tabela-arquivos caption { text-align: left; }
.tabela-arquivos th, .tabela-arquivos td {
  padding: 18px 16px 18px 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--linha);
}
.tabela-arquivos thead th {
  padding-top: 12px; padding-bottom: 12px;
  color: var(--tinta-suave); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.tabela-arquivos tbody tr:hover { background: var(--superficie); }
.tabela-arquivos .coluna-acoes, .tabela-arquivos td:last-child { padding-right: 0; }

.indice-linha {
  display: inline-block; min-width: 2.4ch; margin-right: 12px;
  color: var(--tinta-suave); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.nome-arquivo { display: flex; gap: 0; }
.nome-arquivo .rotulo { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.03em; overflow-wrap: anywhere; }
/* Legenda de linha: vale fora de .nome-arquivo também (índice, listas). */
.tipo { display: block; margin-top: 3px; color: var(--tinta-suave); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.abrir-pasta .tipo { white-space: normal; }
.celula-menor { color: var(--tinta-suave); font-size: 14px; font-variant-numeric: tabular-nums; }
.tabela-arquivos td .celula-menor { white-space: nowrap; }
.tabela-arquivos td .pastilha { font-size: 12px; }
.aviso-linha { display: block; margin-top: 8px; color: var(--erro); font-size: 13px; font-weight: 700; }
/* P-N-216 (D3): a nota de um ESTADO (fonte desconectada) nao e erro: o tom e o da legenda. */
.aviso-linha-neutro { color: var(--tinta-suave); font-weight: 600; }
/* P-N-220: a nota longa entrava na largura intrinseca da celula Estado, e a tabela tirava a diferenca da coluna Nome
   (105 -> 84 px no 1366). Com `contain: inline-size` ela nao pede largura: quebra dentro da coluna que o estado
   normal ja tem, e as outras colunas ficam como estavam. */
.aviso-linha-neutro[data-desconectada] { contain: inline-size; }
/* R1: a desconectada tambem troca a pastilha e perde tres botoes; no layout automatico a tabela repartia a largura
   pelo conteudo e a coluna Nome estreitava. Largura por coluna: a geometria nao depende da linha. */
.tabela-conectores { table-layout: fixed; }
.tabela-conectores td { overflow-wrap: anywhere; }
.tabela-conectores th:nth-child(1) { width: 15%; }
.tabela-conectores th:nth-child(2) { width: 9%; }
.tabela-conectores th:nth-child(3) { width: 18%; }
.tabela-conectores th:nth-child(4) { width: 6%; }
.tabela-conectores th:nth-child(5) { width: 8%; }
.tabela-conectores th:nth-child(6) { width: 14%; }
.tabela-conectores th:nth-child(7) { width: 10%; }
.tabela-conectores th:nth-child(8) { width: 20%; }

/* Selos de estado: marca tipográfica, não pílula colorida */
.selo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap;
}
.selo::before { content: ""; width: 9px; height: 9px; background: currentColor; flex: none; }
.selo-indexado { color: var(--menta-tinta); }
body:has(.alternador-tema:checked) .selo-indexado { color: var(--menta); }
.selo-indexado::before { background: var(--marca-destaque, var(--menta)); outline: 1px solid var(--menta-tinta); }
/* TAREFA-058: com a marca, o selo da seção vira a pastilha da cor de destaque
   (`--marca-destaque`, texto `--marca-destaque-texto` #141B30) nos dois temas —
   o mesmo selo da prévia de "Sua marca". Sem a marca, o selo de hoje. */
.com-marca .abertura .selo-secao {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--marca-destaque, var(--menta)); color: var(--marca-destaque-texto, var(--menta-tinta));
}
.selo-na-fila { color: var(--tinta-suave); }
.selo-na-fila::before { background: transparent; outline: 1.5px solid currentColor; }
.selo-falha { color: var(--erro); }

/* Ações */
.acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.coluna-acoes { text-align: right; }
.acao-mover { position: relative; }
.acao-mover > summary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
  padding: 0 14px; border: 1px solid var(--linha-forte); border-radius: var(--raio-botao);
  background: var(--superficie); color: var(--tinta); font-size: 14px; font-weight: 700;
  cursor: pointer; list-style: none;
}
.acao-mover > summary::-webkit-details-marker { display: none; }
.acao-mover > summary:hover { border-color: var(--azul); color: var(--azul); }
/* P-N-216 (D2, D6): o resumo que abre uma confirmacao DESTRUTIVA tem a cor do `.botao-remover`. */
.acao-mover[data-confirmacao-destrutiva] > summary { color: var(--erro); }
.acao-mover[data-confirmacao-destrutiva] > summary:hover { background: var(--erro-fundo); border-color: var(--erro); color: var(--erro); }
.painel-mover {
  position: absolute; right: 0; z-index: 20;
  display: grid; gap: 12px; width: 270px; margin-top: 8px; padding: 16px;
  text-align: left; background: var(--superficie);
  border: 1px solid var(--linha-forte); border-radius: 14px;
  box-shadow: 0 22px 44px -24px rgba(8, 12, 24, 0.55);
}

/* ==========================================================================
   BOTÕES E FORMULÁRIOS
   ========================================================================== */
.botao-primario, .botao-secundario, .botao-discreto {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--altura-botao); padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--raio-botao);
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.botao-primario:hover, .botao-secundario:hover, .botao-discreto:hover {
  transform: translateY(-2px); box-shadow: 0 7px 22px #141b3020;
}
/* TAREFA-058: com a marca da organização, a folha `/marca/t/<sha10>.css` define
   `--marca-principal` (fundo) e `--marca-principal-texto` (#FFFFFF) nos DOIS
   temas; sem ela valem o azul e o texto do Next, como hoje. */
.botao-primario {
  background: var(--marca-principal, var(--azul)); color: var(--marca-principal-texto, var(--fundo));
}
.botao-primario:hover {
  background: var(--marca-principal, var(--azul-forte)); color: var(--marca-principal-texto, var(--fundo));
  text-decoration: none;
}
.botao-secundario { background: transparent; color: var(--tinta); border-color: var(--linha-forte); }
.botao-secundario:hover { border-color: var(--azul); color: var(--azul); text-decoration: none; }
.botao-discreto { background: transparent; color: var(--tinta-suave); border-color: var(--linha); }
.botao-discreto:hover { background: var(--superficie-2); color: var(--tinta); text-decoration: none; }
.botao-remover { color: var(--erro); }
.botao-remover:hover { background: var(--erro-fundo); border-color: var(--erro); color: var(--erro); }
/* P-N-053: `.botao-remover` só trocava a COR DO TEXTO, e o pacote combina a
   classe com `.botao-primario` no botão que confirma a destruição. O resultado
   era texto vermelho sobre o fundo azul do primário — ilegível nos dois temas.
   Medido em `/preferencias` (Pedir eliminação dos meus dados) e já no ar em
   `/pessoas` e em `/arquivos`, desde as fatias 1 e 3. O primário destrutivo é
   SÓLIDO, como o primário comum: a cor do texto é `--fundo`, que vira clara no
   tema escuro sozinha. */
.botao-primario.botao-remover {
  background: var(--erro); color: var(--fundo); border-color: var(--erro);
}
.botao-primario.botao-remover:hover {
  background: var(--erro); color: var(--fundo); border-color: var(--erro);
  filter: brightness(1.1);
}
.botao-miudo { min-height: 40px; padding: 0 14px; font-size: 14px; }
[disabled] { opacity: 0.45; cursor: not-allowed; }

.campo { display: grid; gap: 7px; min-width: 0; }
.campo > label { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.campo .ajuda { color: var(--tinta-suave); font-size: 13px; }
.erro-campo { color: var(--erro); font-size: 13px; font-weight: 700; }

.entrada {
  width: 100%; min-height: var(--altura-botao); padding: 0 16px;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-botao);
  font: inherit; font-size: 15px;
}
input[type="file"].entrada { height: auto; padding: 14px 16px; }
.entrada:hover { border-color: var(--azul); }
.entrada:focus-visible { border-color: var(--azul); outline-offset: 0; }
select.entrada {
  appearance: none; padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 49%, currentColor 50%),
                    linear-gradient(-45deg, transparent 49%, currentColor 50%);
  background-size: 7px 7px, 7px 7px;
  background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-repeat: no-repeat;
}
.linha-formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: end; }

/* Bloco de envio: o único bloco com raio 20, como os cartões das páginas públicas */
.caixa-envio {
  display: grid; gap: 18px; padding: 26px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.caixa-envio h2 { font-size: 20px; }
.limite-envio { color: var(--tinta-suave); font-size: 13px; }
/* Linha de envio: dois campos e o botão do tamanho do texto, tudo pela base. */
.caixa-envio .linha-formulario {
  grid-template-columns: minmax(180px, 1.15fr) minmax(170px, 1fr) auto;
  align-items: end;
}
.caixa-envio .linha-formulario > .botao-primario { justify-self: start; }

/* A lista de envios NASCE `hidden` (sem JS ela nunca aparece). A regra e
   explicita nas DUAS classes em jogo: `.envios`, que o portal emite hoje, e
   `.lista-envios`, a do pacote -- `.lista-envios { display: grid }` logo
   abaixo venceria o `[hidden]` da folha do navegador. Terceira e unica
   mudanca alem do @font-face, autorizada pelo coordenador em P-N-045. */
.envios[hidden], .lista-envios[hidden] { display: none; }
.lista-envios { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.envio { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--linha); }
.envio .topo-envio { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.envio .nome { font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.envio .situacao { color: var(--tinta-suave); font-size: 13px; font-weight: 700; }
.envio-falha .situacao { color: var(--erro); }
.barra-progresso { height: 4px; background: var(--linha); }
.barra-progresso span { display: block; height: 100%; background: var(--azul); }
.envio-concluido .barra-progresso span { background: var(--menta); }
.envio-falha .barra-progresso span { background: var(--erro); }

/* O QUE O SCRIPT INJETA. `upload-tus.js` monta a linha do envio em tempo de
   execucao -- `<ul class="envios">` deixa de ser `hidden` e recebe um
   `<li class="envio">` com quatro filhos PLANOS: `.envio-nome`,
   `<progress class="envio-barra">`, `.envio-estado` (que vira `.erro` quando
   falha) e `<button class="botao-claro envio-cancelar">`. Nada disso aparece no
   HTML do servidor, e por isso escapou do porte: a folha ficou sem as quatro
   classes e, durante o envio, a lista voltava a ter marcador e recuo de lista,
   a barra saia crua e a falha saia sem vermelho.
   A forma do PACOTE (`.lista-envios` > `.envio` > `.topo-envio`) e outra, e
   continua valendo: por isso a grade de quatro colunas e escopada em `.envios`,
   que e a lista que o portal emite hoje. */
.envios { display: grid; margin: 0; padding: 0; list-style: none; }
.envios > .envio {
  grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr) auto;
  gap: 14px; align-items: center; font-size: 13px;
}
.envio-nome { font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.envio-estado { color: var(--tinta-suave); font-size: 13px; font-weight: 700; }
/* `.erro` e a classe que o script TROCA no estado quando o envio falha; em
   `portal.css` ela ja era a cor de recusa, e aqui vale o token do tema. */
.erro { color: var(--erro); font-size: 13px; }
/* `<progress>` nativo: os tres pseudo-elementos, como em `.cota-barra`. */
.envio-barra {
  display: block; width: 100%; height: 6px;
  appearance: none; border: 0; background: var(--linha); color: var(--azul);
}
.envio-barra::-webkit-progress-bar { background: var(--linha); }
.envio-barra::-webkit-progress-value { background: var(--azul); }
.envio-barra::-moz-progress-bar { background: var(--azul); }
.envio-cancelar { justify-self: end; }

/* Cartão: a superfície fechada do sistema (raio 20, como nas páginas públicas). */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 22px;
}
.cartao h2 { font-size: 20px; }
.cartao h3 { font-size: 17px; }
.cartao-perigo { border-color: color-mix(in srgb, var(--erro) 40%, var(--linha)); }

/* ==========================================================================
   PAINEL — cartões de indicador, cotas e gráficos (Meu espaço, Uso, Pessoas)
   ========================================================================== */
.painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; align-items: start; }
.painel-largo { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
/* Quatro planos cabem lado a lado até ~860px; abaixo disso, dois e dois. */
.painel-planos { grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); }
.painel-planos .cartao { padding: 18px; }

.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 20px 24px; }
.metrica { display: grid; gap: 2px; }
.metrica .valor { font-size: 30px; font-weight: 700; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.metrica .valor-miudo { font-size: 19px; }
.metrica .chave { color: var(--tinta-suave); font-size: 13px; font-weight: 600; }
.metrica .nota { color: var(--tinta-suave); font-size: 12px; }

.rotulo-cartao,
.cartao h2.rotulo-cartao,
.cartao h3.rotulo-cartao {
  color: var(--tinta-suave); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.5;
}
.numero-medio { font-size: 26px; font-weight: 700; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }

.barra-cota { height: 6px; background: var(--linha); overflow: hidden; }
.barra-cota span { display: block; height: 100%; background: var(--azul); }
.barra-cota-cheia span { background: var(--erro); }

/* Gráfico de barras por dia */
.grafico-dias { display: flex; align-items: flex-end; gap: 3px; height: 74px; }
.grafico-dias .coluna { flex: 1; min-width: 2px; background: var(--azul-fraco); border-radius: 2px 2px 0 0; }
.grafico-dias .coluna-forte { background: var(--azul); }
.eixo-dias { display: flex; justify-content: space-between; color: var(--tinta-suave); font-size: 11px; }

/* Barras horizontais por ferramenta */
/* P-N-218 (D3): as colunas são da LISTA, e cada linha as herda por `subgrid`. Com a grade em cada linha, a coluna
   `auto` do número ("421 · 90%" × "12 · 3%") mudava de largura linha a linha, e as trilhas ficavam desalinhadas. */
.barras-h { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr) auto; gap: 10px 12px; margin: 0; padding: 0; }
.barras-h > div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.barras-h dt { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.barras-h dd { margin: 0; font-size: 13px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
/* `.trilho` ao lado de `.trilho-h`: o pacote chama o trilho da barra
   horizontal de `.trilho-h`, e o servidor o emite por
   `graficos_html.trilho_percentual`, que o chama de `.trilho` — a largura de
   cada barra é um `style` inline, e ele mora em módulo separado porque
   `server.py` não pode ter nenhum. Mesma aparência, dois nomes. */
.barras-h .trilho-h, .barras-h .trilho { height: 8px; background: var(--linha); }
.barras-h .trilho-h span,
.barras-h .trilho span { display: block; height: 100%; background: var(--azul); }

/* Pastilhas de estado (pessoas, convites, conectores).
   P-N-083: a causa do conector indisponível é uma frase longa; em 390 px ela
   passava da borda do cartão. A pastilha quebra linha quando não cabe e nunca
   passa do contêiner; o marcador fica na primeira linha (meia linha menos meio
   marcador), o que numa linha só dá o mesmo centro de antes. Em tabela o texto
   é curto e a coluna não deve partir: ali segue numa linha. */
.pastilha {
  display: inline-flex; align-items: flex-start; gap: 7px; max-width: 100%;
  font-size: 13px; font-weight: 700; overflow-wrap: anywhere;
}
.pastilha::before {
  content: ""; width: 9px; height: 9px; margin-top: calc((1lh - 9px) / 2);
  background: currentColor; flex: none;
}
td .pastilha { white-space: nowrap; }
.pastilha-ativa { color: var(--menta-tinta); }
body:has(.alternador-tema:checked) .pastilha-ativa { color: var(--menta); }
.pastilha-ativa::before { background: var(--marca-destaque, var(--menta)); outline: 1px solid var(--menta-tinta); }
.pastilha-pendente { color: var(--tinta-suave); }
.pastilha-pendente::before { background: transparent; outline: 1.5px solid currentColor; }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.nota-tecnica { color: var(--tinta-suave); font-size: 13px; }
.suave { color: var(--tinta-suave); }
.miudo { font-size: 13px; }
.pilha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.campo-curto { max-width: 130px; }
.linha-acao { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; align-items: end; }
.linha-acao > .botao-primario, .linha-acao > .botao-secundario { justify-self: start; }
/* Ajuda e erro ocupam a linha inteira, abaixo dos campos: assim o botão alinha
   pela base do campo e a mensagem não desalinha a linha. */
.linha-acao > .nota-linha { grid-column: 1 / -1; margin: 0; }

/* Código: URL do MCP, comandos e código de pareamento. */
/* Linha de código + botão: o código ocupa a linha e o botão vem abaixo,
   para a URL não quebrar no meio. */
.linha-codigo { display: grid; gap: 10px; justify-items: start; margin-top: 12px; }
/* `white-space: pre-wrap` e `overflow-wrap` juntos, e os dois importam (P-N-051):
   sem o primeiro, um `<pre>` herda `white-space: pre` do navegador e o comando
   de registro do Codex (uma linha de ~120 caracteres) sai da tela no telefone;
   sem o segundo, a quebra so acontece em espaco, e uma URL longa transborda do
   mesmo jeito. A guarda de `portal.css` media isto desde 2026-09-05 e veio
   junto com a tela. */
.codigo {
  display: block; width: 100%; padding: 10px 12px;
  background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--raio-botao);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.codigo-inline { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
.codigo-grande {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px; font-weight: 700; letter-spacing: 0.04em;
}
.entrada-alta { min-height: 110px; padding: 12px 14px; line-height: 1.5; resize: vertical; }

.lista-regras { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.lista-regras li { color: var(--tinta-suave); font-size: 13px; }
.cartao-atual { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }

.lista-escolha { margin: 0; padding: 0; list-style: none; display: grid; }
.lista-escolha li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--linha);
}
.lista-escolha label { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; min-width: 0; }
/* Radio junto do checkbox (P-N-051): as opcoes do instalador de `/conectar` sao
   um radio de sistema e dois checkboxes de ferramenta na MESMA lista -- com a
   regra so no checkbox, metade da lista saia com o controle do navegador, de
   outro tamanho e de outra cor. */
.lista-escolha input[type="checkbox"],
.lista-escolha input[type="radio"] { width: 18px; height: 18px; accent-color: var(--azul-marca); flex: none; }

.bloco-codigo {
  margin: 12px 0 0; padding: 14px; overflow-x: auto;
  background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--raio-botao);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.6;
}
.documento-fatura { max-width: 760px; }
.total-fatura {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--tinta);
}
@media print {
  .topo, .casca-lateral, .casca-topo, .abas, .rodape-conta, .acoes-linha, .pular-para-conteudo { display: none !important; }
  body { background: #fff; }
  .documento-fatura { border: 0; padding: 0; max-width: none; }
}

/* Modal: só existe com JavaScript. Sem ele, o mesmo formulário abre no
   <details> ao lado do botão — nenhuma ação depende do modal. */
dialog.modal {
  width: min(520px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  padding: 24px;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
  box-shadow: 0 28px 90px rgba(8, 12, 24, 0.4);
}
dialog.modal::backdrop { background: rgba(10, 16, 32, 0.55); }
.modal-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.modal-topo h2 { font-size: 21px; }
.modal-fechar {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  background: var(--superficie-2); color: var(--tinta-suave);
  border: 1px solid var(--linha); border-radius: var(--raio-botao);
  font-size: 18px; cursor: pointer;
}
.modal-fechar:hover { color: var(--tinta); }
.modal-corpo { margin-top: 14px; display: grid; gap: 14px; }
.modal-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.modal-acoes .botao-primario, .modal-acoes .botao-secundario { min-height: 46px; }

/* ==========================================================================
   MENSAGENS
   ========================================================================== */
.mensagem {
  display: flex; gap: 12px; padding: 14px 18px 14px 16px;
  background: var(--superficie); border-left: 4px solid var(--linha-forte); font-size: 15px;
}
.mensagem .icone-mensagem { flex: none; margin-top: 3px; }
.mensagem .texto-mensagem { min-width: 0; }
.mensagem strong { display: block; font-weight: 800; letter-spacing: -0.02em; }
.mensagem p { color: var(--tinta-suave); }
.mensagem-aviso { border-left-color: var(--azul); }
.mensagem-aviso .icone-mensagem { color: var(--azul); }
.mensagem-erro { background: var(--erro-fundo); border-left-color: var(--erro); }
.mensagem-erro strong, .mensagem-erro .icone-mensagem { color: var(--erro); }
.mensagem-sucesso { background: var(--menta); border-left-color: var(--menta-tinta); }
.mensagem-sucesso strong, .mensagem-sucesso .icone-mensagem, .mensagem-sucesso p { color: var(--menta-tinta); }
.mensagem + .mensagem { margin-top: 10px; }
/* Mensagem curta não estica: fica do tamanho do texto. */
.mensagem-curta { width: fit-content; max-width: 100%; }

/* ==========================================================================
   ESTADOS VAZIOS, PAGINAÇÃO, FORMATOS
   ========================================================================== */
.estado-vazio { padding: 36px 0; display: grid; gap: 10px; max-width: 52ch; }
.estado-vazio h3 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; }
.estado-vazio p { color: var(--tinta-suave); font-size: 17px; }
.estado-vazio .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

.paginacao {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; padding-top: 18px;
}
.paginacao .resumo { color: var(--tinta-suave); font-size: 14px; font-variant-numeric: tabular-nums; }
.paginacao ol { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.paginacao a, .paginacao span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 42px; padding: 0 10px;
  color: var(--tinta-suave); font-size: 14px; font-weight: 700;
  border-bottom: 2px solid transparent;
}
.paginacao a:hover { color: var(--tinta); text-decoration: none; border-bottom-color: var(--linha-forte); }
.paginacao [aria-current="page"] { color: var(--tinta); border-bottom-color: var(--azul); }
.paginacao .inativo { opacity: 0.4; }
.busca-tabela { display: flex; gap: 10px; align-items: flex-end; }
.busca-tabela .campo { min-width: 220px; }

.grupos-formatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin-top: 26px; }
.grupo-formato h3 { font-size: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--tinta); }
.grupo-formato p { margin-top: 10px; color: var(--tinta-suave); font-size: 14px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 0; list-style: none; }
.etiquetas li { font-size: 13px; font-weight: 700; color: var(--tinta); }
.etiquetas li::after { content: "·"; margin-left: 14px; color: var(--linha-forte); }
.etiquetas li:last-child::after { content: ""; }
.grupo-formato-negado .etiquetas li { color: var(--tinta-suave); text-decoration: line-through; }

.secao { margin-top: 44px; }
.titulo-secao { font-size: clamp(19px, 2.1vw, 24px); padding-bottom: 10px; border-bottom: 1px solid var(--tinta); margin-bottom: 18px; }

/* ==========================================================================
   SÍMBOLOS E ORNAMENTOS
   Tudo desenhado em SVG inline (sprite de <symbol> no topo da página) ou em
   CSS. Nenhuma imagem externa, nenhuma requisição extra.
   ========================================================================== */

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

.icone { display: block; width: 20px; height: 20px; flex: none; }
.icone-g { width: 26px; height: 26px; }
.icone-tinta { color: var(--tinta-suave); }
.icone-azul { color: var(--azul); }

/* Chip de arquivo: o .file-icon do kit (34x40, raio 5, #edf0ff / mint #dcfaef). */
.chip-arquivo {
  display: grid; place-items: center;
  width: 34px; height: 40px; flex: none; margin-right: 15px;
  background: #edf0ff; color: #2544ce; border-radius: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.02em;
}
.chip-xlsx { background: #dcfaef; color: #216e56; }
.chip-pptx { background: #fdf0e3; color: #8a4b09; }
.chip-txt { background: var(--superficie-2); color: var(--tinta-suave); }
body:has(.alternador-tema:checked) .chip-arquivo { background: #1e2947; color: #a9bbff; }
body:has(.alternador-tema:checked) .chip-xlsx { background: #143a2f; color: var(--menta); }
body:has(.alternador-tema:checked) .chip-pptx { background: #3a2a14; color: #f0b46a; }

/* Constelação: mesma geometria do hero da landing (.constellation do style.css):
   três orbitais, os quatro fios com os sinais hero-in/hero-out e o núcleo. */
.constelacao {
  position: relative; width: 100%; height: 178px; justify-self: end; overflow: hidden;
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  background: radial-gradient(ellipse at 49% 49%, #d8e2ff 0, transparent 64%);
  border-radius: 40%;
}
body:has(.alternador-tema:checked) .constelacao {
  background: radial-gradient(ellipse at 49% 49%, #1e2947 0, transparent 64%);
}
.orbital {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 1px solid var(--linha-forte); border-radius: 50%;
}
.orbit-um { width: 76px; height: 76px; }
.orbit-dois { width: 112px; height: 112px; }
.orbit-tres { width: 148px; height: 148px; border-style: dashed; }
.fios {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: #aebfe6; stroke-width: 1.2;
}
body:has(.alternador-tema:checked) .fios { stroke: #4c5670; }
.fios .sinal {
  stroke: var(--azul-marca); stroke-width: 2; stroke-linecap: butt;
  stroke-dasharray: 4 196; stroke-dashoffset: 4;
  animation: sinal-entra 5s linear infinite;
}
body:has(.alternador-tema:checked) .fios .sinal { stroke: #a9bbff; }
.fios .sinal-sai { animation-name: sinal-sai; }
@keyframes sinal-entra { 0% { stroke-dashoffset: 4; } 60%, 100% { stroke-dashoffset: -100; } }
@keyframes sinal-sai { 0%, 60% { stroke-dashoffset: 4; } 100% { stroke-dashoffset: -100; } }
.nucleo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 64px; height: 64px; z-index: 2;
  background: var(--azul-marca); color: #fff;
  border: 4px solid var(--fundo); border-radius: 17px;
  box-shadow: 0 14px 40px #3155f540;
}
.nucleo img { width: 26px; height: 26px; }
.nucleo span { font-weight: 700; letter-spacing: -0.06em; font-size: 0.8rem; line-height: 1; }
.flutuante {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; font-size: 0.68rem; font-weight: 700;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 12px; box-shadow: 0 10px 35px #25386e12;
}
.flutuante small { display: block; color: var(--tinta-suave); font-size: 0.62rem; font-weight: 400; }
.flutuante .chip-arquivo { width: 26px; height: 30px; font-size: 9px; }
.flutuante .chip-arquivo { margin-right: 0; }
.flutuante-a { top: 10px; left: 0; max-width: 46%; transform: rotate(-4deg); }
.flutuante-b { bottom: 20px; right: 0; max-width: 46%; transform: rotate(4deg); }
.flutuante div { min-width: 0; }
/* Abaixo de 1080px o painel não comporta os cartões: ficam só os fios e o núcleo,
   como o kit faz ao esconder .trust-visual nas telas pequenas. */
@media (max-width: 1080px) { .flutuante { display: none; } }
.rotulo-diagrama {
  position: absolute; bottom: 2px; width: 100%; text-align: center;
  font: 9px monospace; letter-spacing: 0.06em; color: var(--tinta-suave);
}
@media (max-width: 1080px) { .rotulo-diagrama { display: none; } }

/* Trama de pontos: a retícula de impressão, usada como fundo de blocos */
.textura-pontos {
  background-image: radial-gradient(var(--linha-forte) 1px, transparent 1.2px);
  background-size: 11px 11px;
}

/* Medidor do plano em arco */
.arco-plano { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; align-items: center; }
.arco-plano svg { width: 62px; height: 62px; }
.arco-plano .trilho { fill: none; stroke: var(--linha); stroke-width: 10; }
.arco-plano .setor-empresa { fill: none; stroke: var(--azul); stroke-width: 10; stroke-linecap: butt; }
.arco-plano .setor-pessoal { fill: none; stroke: var(--menta); stroke-width: 10; stroke-linecap: butt; }
.arco-plano .centro { fill: var(--tinta); font-size: 17px; font-weight: 750; letter-spacing: -0.04em; }

/* ==========================================================================
   EXPLORADOR — árvore de pastas + trilha + lista única (pastas e arquivos)
   Navegação por links e <details>: funciona sem JavaScript.
   ========================================================================== */
.explorador {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: 48px; align-items: start; margin-top: 30px;
}

.arvore { position: sticky; top: 176px; display: grid; gap: 12px; }
.arvore > .titulo-bloco { margin-bottom: 2px; }
.arvore ul { margin: 0; padding: 0; list-style: none; }
.arvore li { min-width: 0; }
.arvore ul ul { margin-left: 14px; padding-left: 10px; border-left: 1px solid var(--linha); }
.ramo {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  min-height: 40px; padding: 6px 10px; border-radius: 8px;
  color: var(--tinta); font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ramo:hover { background: var(--superficie); color: var(--azul); text-decoration: none; }
.ramo[aria-current="page"] { background: var(--azul-fraco); color: var(--azul); font-weight: 750; }
.ramo .conta { margin-left: auto; color: var(--tinta-suave); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ramo svg { width: 17px; height: 17px; flex: none; color: var(--azul-marca); opacity: 0.8; }
.arvore details > summary { list-style: none; cursor: pointer; }
.arvore details > summary::-webkit-details-marker { display: none; }
.arvore details > summary .seta { transition: transform 0.15s ease; }
.arvore details[open] > summary .seta { transform: rotate(90deg); }
.arvore .linha-formulario { grid-template-columns: minmax(0, 1fr); }
.arvore .linha-formulario button { justify-self: start; }
.seta { width: 12px; height: 12px; flex: none; color: var(--tinta-suave); }

/* Barra de ações acima da lista */
.barra-ferramentas {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--tinta);
}
.barra-ferramentas .acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.trilha-topo { display: grid; gap: 6px; min-width: 0; }

/* Pastas como primeiras linhas da lista: entra clicando no nome */
.linhas-pastas { margin: 0; padding: 0; list-style: none; }
.linha-pasta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--linha);
}
.linha-pasta:hover { background: var(--superficie); }
.abrir-pasta {
  display: flex; align-items: center; gap: 15px; min-width: 0;
  color: var(--tinta); font-size: 17px; font-weight: 700; letter-spacing: -0.03em;
}
.abrir-pasta:hover { color: var(--azul); text-decoration: none; }
.abrir-pasta .marcador {
  display: grid; place-items: center; width: 34px; height: 40px; flex: none;
  background: var(--azul-fraco); color: var(--azul-marca); border-radius: 5px;
}
body:has(.alternador-tema:checked) .abrir-pasta .marcador { color: #a9bbff; }
.abrir-pasta .marcador svg { width: 19px; height: 19px; }
.linha-pasta .conta { color: var(--tinta-suave); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-pasta-subir .abrir-pasta { font-size: 15px; font-weight: 600; color: var(--tinta-suave); }
.linha-pasta-subir .marcador { background: var(--superficie-2); color: var(--tinta-suave); }

/* Pastas como fichas com sigilo geométrico */
.fichas-pastas { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ficha-pasta {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px;
  color: var(--tinta);
}
.ficha-pasta:hover { border-color: var(--azul); color: var(--azul); text-decoration: none; }
.ficha-pasta .sigilo { width: 38px; height: 38px; flex: none; color: var(--azul); }
.ficha-pasta .nome { display: block; font-weight: 700; letter-spacing: -0.02em; }
.ficha-pasta .itens { display: block; color: var(--tinta-suave); font-size: 13px; font-weight: 600; }
.ficha-pasta-subir { border-style: dashed; }
.ficha-pasta-subir .sigilo { color: var(--tinta-suave); }

/* Medalhas de estado: selo circular com anel */
.medalha { width: 76px; height: 76px; flex: none; }
.medalha-ok { color: var(--menta-tinta); }
body:has(.alternador-tema:checked) .medalha-ok { color: var(--menta); }
.medalha-vazio { color: var(--azul); }
.medalha-erro { color: var(--erro); }

/* Estado vazio com ilustração */
.estado-vazio { align-items: start; }
.estado-vazio .figura { margin-bottom: 8px; color: var(--azul); }
.estado-vazio .figura svg { width: min(320px, 100%); height: auto; }
.estado-vazio .figura .fio-c { stroke: currentColor; stroke-width: 1; opacity: 0.4; }
.estado-vazio .figura .no-c { fill: currentColor; }
.estado-vazio .figura .caixa { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 6 5; opacity: 0.7; }

/* Mensagens com medalha */
.mensagem-medalha { align-items: center; gap: 18px; }
.mensagem-medalha .medalha { width: 54px; height: 54px; }

/* ==========================================================================
   A MARCAÇÃO QUE O SERVIDOR CONTINUA EMITINDO COM OS NOMES ANTIGOS

   A fatia 1 portou a tela `/arquivos` e trocou a folha dela por esta — mas 29
   classes que `/arquivos` EMITE ficaram sem regra nenhuma aqui, e portanto sem
   estilo na tela: o rodapé do site, a barra de cota, a busca e a paginação, a
   célula de nome do arquivo, o bloco de formatos e o botão Enviar.

   Elas ficam com o NOME que o servidor emite (renomear classe é reescrever
   marcação, e não cabe nesta fatia) e com a APARÊNCIA do pacote: cada uma
   abaixo aponta a regra equivalente do pacote de design. A guarda que liga
   classe emitida a regra nesta folha é `test_toda_classe_emitida_tem_regra_
   na_folha_que_a_pagina_declara`.
   ========================================================================== */

/* Abas de área (pessoal | empresa) — o `<a>` leva `.aba` e `.aba.ativa`,
   onde o pacote usa `.abas a` e `a[aria-current="page"]`. */
.abas .aba {
  padding-bottom: 8px; color: var(--tinta-suave);
  border-bottom: 3px solid transparent;
}
.abas .aba.ativa { color: var(--tinta); border-bottom-color: var(--azul); }

/* Trilha de migalhas: `<nav class="trilha">` com um `<span>` que rola sozinho
   quando o caminho fica longo. No pacote é `.trilha ol`. */
.trilha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin: 0; font-size: 14px; font-weight: 600;
}
.trilha-caminho {
  display: flex; align-items: center; gap: 8px;
  min-width: 0; overflow-x: auto; white-space: nowrap;
}
.trilha-sep { color: var(--linha-forte); }

/* Célula de nome: [miniatura ou chip de tipo] + nome. No pacote, `.abrir-pasta`
   e `.nome-arquivo .rotulo`. */
.nome-arquivo-grade { display: flex; align-items: center; min-width: 0; }
.nome-arquivo-texto {
  min-width: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
/* C2: na busca recursiva, a pasta do resultado sob o nome. */
.pasta-do-resultado {
  display: block; font-size: 13px; font-weight: 400; letter-spacing: 0;
  color: var(--tinta-suave);
}
/* O slot da miniatura só ocupa espaço quando HÁ miniatura — a maioria das
   linhas não tem figura, e um vão fixo de 34px em todas elas desalinharia a
   coluna inteira à toa. */
.miniatura-arquivo-slot {
  display: block; flex: none; width: 34px; height: 40px; margin-right: 15px;
}
.miniatura-arquivo-slot:empty { display: none; }
.miniatura-arquivo {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 5px; border: 1px solid var(--linha);
  background: var(--superficie-2);
}
/* Chip de tipo: a mesma ficha 34x40 do `.chip-arquivo` do pacote. */
.icone-tipo {
  display: grid; place-items: center;
  width: 34px; height: 40px; flex: none; margin-right: 15px;
  background: #edf0ff; color: #2544ce; border-radius: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.02em;
}
body:has(.alternador-tema:checked) .icone-tipo { background: #1e2947; color: #a9bbff; }
/* Pasta: o marcador azul do `.abrir-pasta .marcador`. Vem DEPOIS de
   `.icone-tipo` de propósito — mesma especificidade, e a pasta vence. */
.icone-pasta { background: var(--azul-fraco); color: var(--azul-marca); }
body:has(.alternador-tema:checked) .icone-pasta { background: #1e2947; color: #a9bbff; }
.tipo-nowrap { white-space: nowrap; }

/* Coluna e bloco de ações da linha (no pacote, `.coluna-acoes`/`.acoes-linha`). */
.tabela-arquivos th.acao, .tabela-arquivos td.acao {
  text-align: right; padding-right: 0;
}
.acoes-arquivo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 8px; min-width: 0;
}
.form-sair { display: inline-flex; align-items: center; margin: 0; }

/* Selo "Pasta" na coluna de tamanho: marca de tom secundário, e sem o quadrado
   do `.selo` — ele é indicador de ESTADO, e "pasta" não é estado. */
.selo.neutro { color: var(--tinta-suave); font-weight: 700; }
.selo.neutro::before { display: none; }

/* Barra de cota: `<progress class="cota-barra">`. O pacote desenha a dele com
   `<span>` (`.barra-cota`); aqui é o elemento nativo, que precisa dos três
   pseudo-elementos para pintar igual nos dois motores. */
.cota-barra {
  display: block; width: 100%; height: 6px; margin-top: 10px;
  appearance: none; border: 0; background: var(--linha); color: var(--azul);
}
.cota-barra::-webkit-progress-bar { background: var(--linha); }
.cota-barra::-webkit-progress-value { background: var(--azul); }
.cota-barra::-moz-progress-bar { background: var(--azul); }
.cota-barra.cheia { color: var(--erro); }
.cota-barra.cheia::-webkit-progress-value { background: var(--erro); }
.cota-barra.cheia::-moz-progress-bar { background: var(--erro); }

/* Gráfico de chamadas por dia: SVG inline gerado no servidor
   (`_svg_barras_dias`), que `/espaco` e `/uso` emitem. O pacote desenha o dele
   com `<span class="coluna">` numa fileira flex (`.grafico-dias`), e a
   aparência aqui é a MESMA — barra fina azul, dia sem chamada em traço claro.
   O que o pacote não tem, e por isso o SVG fica: grade de valor no eixo Y,
   rótulo de semana, `<title>` por dia (a dica ao passar o ponteiro) e a
   `.so-leitor` — a mesma série em TABELA, para quem usa leitor de tela, que
   de um gráfico só receberia o `aria-label`. */
.grafico-caixa { overflow-x: auto; width: 100%; }
.grafico { display: block; width: 100%; height: 118px; overflow: visible; }
.grafico .barra { fill: var(--azul); }
.grafico .barra-hoje { fill: var(--azul); opacity: 0.55; }
.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-suave); font-family: inherit; font-size: 11px; font-weight: 600;
}
/* A série em texto, só para o leitor de tela — a mesma receita de
   `.somente-leitores`, com o nome que o servidor emite. */
.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Ritmo vertical dentro do cartão. O pacote resolve isso com `style=
   "margin-top:14px"` em cada bloco; aqui é uma regra só, e a marcação do
   servidor fica sem estilo inline. */
.cartao > * + * { margin-top: 14px; }

/* Cartoes de download do sincronizador (P-N-051): o do Windows tem uma linha a
   mais (a descricao do executavel), e sem isto o botao "Baixar" dele ficava
   45px abaixo dos outros dois -- a queixa do dono de 2026-09-05 sobre os cards
   de plugin, com outra roupa. A coluna estica e o ultimo bloco desce. */
/* A tela de decisao do OAuth tem UM cartao: esticado na largura do desktop ele
   vira uma faixa de 1300px com duas linhas de texto dentro (P-N-051). */
[data-oauth="consentimento"] { max-width: 640px; }

/* Dentro de um cartao as acoes comecam na ESQUERDA, junto do texto que as
   explica; `.acoes-linha` alinha a direita porque nasceu na ultima celula da
   tabela de arquivos, onde a coluna e que e alinhada a direita. */
[data-cartao="chave-mcp"] .acoes-linha { justify-content: flex-start; }
.painel:has([data-sync-sistema]),
.painel:has([data-plugin]) { align-items: stretch; }
[data-sync-sistema], [data-plugin] { display: flex; flex-direction: column; }
[data-sync-sistema] > p:last-child,
[data-plugin] > .linha-codigo { margin-top: auto; padding-top: 14px; }

/* Botões com os nomes antigos, sobre o MESMO contrato dos do pacote:
   `.botao` = `.botao-primario`; `.botao-claro` = `.botao-secundario.botao-miudo`;
   `.botao-mini` e `.pagina-atual` = os degraus de `.paginacao`. */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--altura-botao); padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--raio-botao);
  background: var(--marca-principal, var(--azul)); color: var(--marca-principal-texto, var(--fundo));
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  cursor: pointer; white-space: nowrap;
}
.botao:hover {
  background: var(--marca-principal, var(--azul-forte)); color: var(--marca-principal-texto, var(--fundo));
  text-decoration: none;
}
.botao-claro {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-botao);
  background: transparent; color: var(--tinta);
  font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.botao-claro:hover { border-color: var(--azul); color: var(--azul); text-decoration: none; }
.inicio { justify-self: start; }

/* Bloco "O que você pode enviar": `<details class="details-resumo">`. */
.details-resumo {
  min-width: 0; padding: 18px 22px; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--raio);
}
.details-resumo > summary {
  list-style: none; cursor: pointer;
  color: var(--tinta); font-size: 15px; font-weight: 800; letter-spacing: -0.02em;
}
.details-resumo > summary::-webkit-details-marker { display: none; }
.details-resumo > *:not(summary) { margin-top: 12px; }
.details-resumo h3 { font-size: 16px; }
.details-resumo .nota { color: var(--tinta-suave); font-size: 13px; }
/* Chips dos formatos. O seletor é por ATRIBUTO porque o `<ul>` não pode ganhar
   mais nenhum atributo: o teste `pagina == fonte` casa `<ul data-lista-formatos
   ="x">` com o `>` logo após as aspas. */
ul[data-lista-formatos] {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;
}
ul[data-lista-formatos] > li {
  padding: 3px 10px; border: 1px solid var(--linha); border-radius: 999px;
  background: var(--superficie-2); color: var(--tinta-suave); font-size: 13px;
}

/* Lista paginada: a busca e a navegação que aparecem acima de 200 itens. */
.lista-paginada { display: grid; gap: 14px; margin-top: 18px; }
.lista-paginada-topo, .lista-paginada-rodape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; color: var(--tinta-suave); font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.lista-paginada-busca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lista-paginada-busca .entrada {
  min-height: 40px; min-width: min(18rem, 100%); font-size: 14px;
}
.lista-paginada-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lista-paginada-nav .botao-mini, .pagina-atual {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 42px; padding: 0 10px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--tinta-suave);
  font-size: 14px; font-weight: 700;
}
.botao-mini {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 12px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-botao);
  background: transparent; color: var(--tinta);
  font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.lista-paginada-nav .botao-mini:hover {
  color: var(--tinta); text-decoration: none; border-bottom-color: var(--linha-forte);
}
.pagina-atual { color: var(--tinta); border-bottom-color: var(--azul); }

/* Rodapé do site — o `_rodape` que TODA tela leva, portada ou não. */
.rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--linha);
  color: var(--tinta-suave); font-size: 13px;
}
.rodape a { color: var(--tinta-suave); }
.rodape a:hover { color: var(--tinta); }
.rodape-fase { color: var(--azul); font-weight: 700; }
/* TAREFA-058: "Powered by Next" fixo no rodapé quando a marca da organização
   vale; nenhum campo da marca o remove. Texto e link seguem o tema. */
.powered-by-next { margin-top: 10px; color: var(--tinta-suave); font-size: 13px; font-weight: 700; }
.powered-by-next a { color: var(--tinta-suave); }
.powered-by-next a:hover { color: var(--tinta); }
.sem-margem { margin: 0; }

/* --------------------------------------------------------------- P-N-050
   Cobrança: o preço do plano, a tabela de faturas e o bloco do pagamento
   pendente. `.plano-preco` é emitido por `_preco_do_plano_html`, que também
   serve as páginas públicas — aqui ele só ganha a escala do painel. */
.plano-preco {
  display: block; color: var(--tinta);
  font-size: 22px; font-weight: 750; letter-spacing: -0.045em;
}
.plano-preco-termo {
  display: block; margin-top: 2px;
  color: var(--tinta-suave); font-size: 13px; font-weight: 600;
  letter-spacing: 0;
}
/* Faturas: valores em coluna alinhada à direita e com dígitos de largura fixa
   — sem isso, "R$ 99,00" e "R$ 1.099,00" não se comparam de relance. A
   especificidade tem de vencer `.tabela-arquivos th, .tabela-arquivos td`
   (0,2,0), que alinha tudo à esquerda; `.tabela-faturas` soma a terceira
   classe. */
.tabela-faturas th.num, .tabela-faturas td.num {
  text-align: right; font-variant-numeric: tabular-nums;
}
/* Pagamento pendente: o plano pago está bloqueado até a confirmação, e o
   cartão diz isso pela borda, não só pelo texto. */
.pagamento-pendente { border-color: var(--linha-forte); }
/* A barra do teto DA PESSOA vive dentro de uma célula, e não de um cartão: em
   100% ela atravessa a coluna inteira e some no meio do texto. 110px é a
   largura do pacote (`max-width:110px` no `.barra-cota` da linha). */
.tabela-arquivos td .cota-barra { max-width: 110px; margin-top: 6px; }

/* ==========================================================================
   FAIXA INTERMEDIÁRIA E CELULAR
   ========================================================================== */
@media (max-width: 1080px) {
  .duas-trilhas { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .explorador { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .arvore { position: static; }
  .barra-ferramentas { flex-direction: column; align-items: stretch; }
  .lateral { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .constelacao { height: 160px; }
  .tabela-arquivos th, .tabela-arquivos td { padding-right: 10px; }
  .tabela-arquivos td:first-child { min-width: 180px; }
  .acoes-linha, .acoes-arquivo { gap: 6px; }
  .acao-mover > summary, .acoes-linha .botao-miudo { padding: 0 10px; }
}

/* Entre 821 e 1080 px a barra de cima ainda cabe numa linha com a trilha
   quebrando: a fileira do topo simples aceita quebrar -- quebrar, nunca rolar
   de lado. */
@media (max-width: 1080px) {
  .fila-marca { flex-wrap: wrap; row-gap: 10px; }
}

/* R4 (U6 N1): com o menu lateral sempre visível, o `#menu` sai junto com o rótulo (era uma parada de Tab invisível). */
@media (min-width: 821px) { .botao-menu, .alternador-menu { display: none; } }

/* Abaixo de 820px o menu lateral vira a faixa de cima (marca + botão) e o
   conteúdo dele abre pelo checkbox `#menu`, sem JavaScript. */
@media (max-width: 820px) {
  .quadro:has(> .casca-lateral) { display: block; }
  .casca-lateral {
    position: static; height: auto; overflow: visible;
    padding: 14px var(--gutter); border-right: 0; border-bottom: 1px solid var(--linha);
  }
  .casca-marca-fila { padding: 0; }
  .casca-lateral-conteudo { display: none; padding-top: 18px; }
  .alternador-menu:checked ~ .quadro .casca-lateral-conteudo { display: flex; }
  .casca-topo { position: static; min-height: 64px; }
  .botao-menu {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 16px;
    border: 1px solid var(--linha); border-radius: var(--raio-botao);
    background: var(--superficie); color: var(--tinta);
    font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
  }
  .botao-menu:hover { background: var(--superficie-2); }
  .alternador-menu:checked ~ .quadro .abrir-menu { display: none; }
  .abrir-menu ~ .fechar-menu { display: none; }
  .alternador-menu:checked ~ .quadro .fechar-menu { display: inline; }
  .fila-marca { padding-bottom: 14px; }
  .casca-corpo > .principal { padding-top: 24px; }
}

@media (max-width: 700px) {
  /* P-N-047 -- o botão Sair MANTÉM o rótulo no telefone.
     O pacote de design esconde `.rotulo-sair` com `display: none` aqui, e foi
     essa regra que o portal copiou. Medido em 390x844 depois da P-N-046: o
     botão ficava 29x40, sem rótulo, sem `aria-label` e sem ícone -- uma caixa
     vazia na tela e um controle sem nome nenhum no leitor. A receita de
     `.somente-leitores` (clip-path), que resolve o rótulo do tema, não serve
     aqui: o tema tem o disco visível, o Sair não tem nada. Como o pacote não
     resolve e não há ícone de sair no sprite, o rótulo curto FICA. Ele custa
     26 px, medido em 390x844 pela guarda `area-logada-celular.mjs`: 30x40 com
     esta regra, 56x40 sem ela, e a página continua em scrollWidth 390 =
     clientWidth 390 — a fileira, desde a P-N-046, quebra em vez de sair da
     tela. A regra do pacote não é recriada aqui: ela É o defeito. */

  /* P-N-046 -- o topo tem de CABER na largura do telefone.
     Medido em 390x844 (350 px úteis entre os gutters) antes do conserto: a
     marca ocupa 96 px e as ferramentas 413 px (idioma 139 + tema 142 + índice
     72 + sair 30 + folgas), numa fileira que não quebrava. Resultado:
     `scrollWidth` 545 contra `clientWidth` 390 — a página inteira deslizava na
     horizontal, e o botão do menu (right=505) e o rótulo do tema (right=406)
     ficavam fora da tela.

     Duas defesas, nesta ordem. Primeiro as ferramentas ENCOLHEM: o rótulo do
     tema fica só para o leitor de tela — é a forma do pacote, em que o
     `.botao-tema` é o disco e um rótulo invisível — e o botão perde 104 px.
     Depois, o que ainda não couber QUEBRA: a fileira da marca passa a aceitar
     segunda linha, como `.rodape-conta` já faz. Sem a quebra, um telefone mais
     estreito (360 px) voltaria a rolar de lado. */
  .fila-marca { flex-wrap: wrap; row-gap: 10px; padding: 14px var(--gutter) 12px; }
  .ferramentas-topo { flex-wrap: wrap; gap: 8px; }
  .botao-tema, .botao-menu { padding: 0 12px; }
  /* O texto some da tela, não da árvore de acessibilidade: é a mesma receita
     de `.somente-leitores`. `display: none` aqui apagaria o nome do controle.
     A folha continua ESCOLHENDO qual dos dois rótulos existe (a regra base
     `.tema-claro { display: none }` segue valendo); aqui ela só o recolhe. */
  .botao-tema .tema-escuro, .botao-tema .tema-claro {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* A linha do envio pede três colunas com mínimo (180 + 170 + auto = 382 px)
     dentro dos 298 px úteis do cartão: media 472 px e saía pela direita junto
     com o seletor de pasta e o botão Enviar. No telefone ela empilha. */
  .caixa-envio .linha-formulario { grid-template-columns: minmax(0, 1fr); }
  /* Rótulo longo de botão quebra em vez de empurrar a página (320 px). */
  .botao-primario, .botao-secundario, .botao-discreto { white-space: normal; text-align: center; }

  .abertura { padding-top: 30px; }
  .abas { gap: 18px; }
  .abertura, .abertura:has(.constelacao), .abertura:has(.medidor-plano) {
    grid-template-columns: minmax(0, 1fr); align-items: start;
  }
  .constelacao { height: 150px; max-width: 300px; justify-self: center; grid-column: 1; grid-row: auto; }
  .medidor-plano { margin-top: 4px; }

  /* Cada linha do livro-razão vira um cartão */
  .tabela-arquivos thead { display: none; }
  .tabela-arquivos, .tabela-arquivos tbody, .tabela-arquivos tr, .tabela-arquivos td { display: block; width: 100%; }
  .tabela-arquivos tr {
    margin-top: 14px; padding: 18px;
    background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px;
  }
  .tabela-arquivos td { padding: 0; border-bottom: 0; }
  .tabela-arquivos td + td { margin-top: 12px; }
  .tabela-arquivos td[data-rotulo]::before {
    content: attr(data-rotulo); display: block; margin-bottom: 4px;
    color: var(--tinta-suave); font-size: 10px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
  }
  .tabela-arquivos .coluna-acoes, .tabela-arquivos td.acao { text-align: left; }
  .acoes-arquivo { justify-content: flex-start; }
  /* P-N-048 -- "Últimos arquivos" (`/espaco`) no telefone. Em três colunas
     (nome | data | estado) dentro de um cartão de 298 px úteis, o nome sobra
     com ~100 px e quebra letra a letra: "contrato-forneciment / o-acme-2026
     / .pdf", cinco linhas por arquivo. Aqui o nome fica com a linha inteira e
     a data e o estado descem, recuados sob o texto (34 px do chip + 15 do
     vão), alinhados com o nome. */
  .linha-pasta { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .linha-pasta .conta, .linha-pasta .selo { padding-left: 49px; }
  .painel-mover { right: auto; left: 0; width: min(280px, 100%); }
  /* P-N-219: o "Remover" da P-N-216 fica DEPOIS de outros controles na linha; ancorado no proprio botao, o painel
     nascia a direita dele e passava da borda (right=393 em 390). A janela destrutiva se ancora na LINHA de acoes
     (`.acoes-linha`, que cabe na tela): nasce na margem esquerda dela, em qualquer posicao do botao. O "Mover"
     continua ancorado no proprio botao, como estava. Com `melhorias.js` o formulario vai para o `<dialog>` e perde
     a classe `painel-mover`: este caminho nao muda. Fechado, o Chrome mantem o painel na arvore de layout (o
     conteudo do `<details>` e `content-visibility: hidden`, que o contem na largura do botao) e o nome longo
     transbordava: fechado ele nao e desenhado, entao sai do layout; aberto, o nome quebra dentro dos 280 px. */
  .acoes-linha { position: relative; }
  .acao-mover[data-confirmacao-destrutiva] { position: static; }
  .acao-mover[data-confirmacao-destrutiva] > .painel-mover {
    left: 0; right: auto; width: min(280px, 100%);
    grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere;
  }
  .acao-mover[data-confirmacao-destrutiva]:not([open]) > .painel-mover { display: none; }
  .busca-tabela, .lista-paginada-busca { width: 100%; flex-wrap: wrap; }
  .busca-tabela .campo { flex: 1; min-width: 150px; }
  .lista-paginada-busca .entrada { min-width: 0; flex: 1; }
  .lista-paginada-topo, .lista-paginada-rodape { align-items: stretch; }
  .caixa-envio { padding: 20px; }
  /* Quatro colunas nao cabem no celular: a linha do envio empilha, como fazia
     em `portal.css`, e o botao de cancelar volta para a esquerda. */
  .envios > .envio { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .envio-cancelar { justify-self: start; }
  .secao { margin-top: 56px; }
}

/* P-N-170 -- `/conectar`: a pessoa escolhe o SISTEMA (um radio por cartao) e o
   guia dele aparece, um passo de cada vez. Sem JavaScript, quem esconde os
   outros guias e a folha (`:has` com o radio marcado); sem radio marcado, o
   aviso "escolha um aplicativo" e nenhum guia; sem `:has`, todos os guias
   aparecem, na ordem. O guia e a receita do carrossel da landing: rolagem com
   encaixe que funciona sem script, e o `guia.js` revela os botoes (`.pronto`). */
.conectar-guias { display: grid; gap: 22px; min-width: 0; }
.escolha-sistema { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 14px; }
.titulo-escolha { padding: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.grupo-sistemas { display: grid; gap: 8px; min-width: 0; }
.rotulo-grupo {
  font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.lista-sistemas {
  margin: 0; padding: 0; list-style: none; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.cartao-sistema {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px;
  align-items: center; height: 100%; min-width: 0; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--linha); border-radius: var(--raio-botao); background: var(--superficie);
}
.cartao-sistema:hover { border-color: var(--azul); }
.cartao-sistema:has(.radio-sistema:checked) {
  border-color: var(--azul); background: var(--azul-fraco); box-shadow: inset 0 0 0 1px var(--azul);
}
.cartao-sistema:has(.radio-sistema:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }
.radio-sistema { grid-row: span 2; width: 18px; height: 18px; margin: 0; accent-color: var(--azul-marca); }
.nome-sistema { font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.dica-sistema { grid-column: 2; font-size: 13px; color: var(--tinta-suave); }
.guia-vazio { margin: 0; }
.conectar-guias:has(.radio-sistema:checked) .guia-vazio,
.conectar-guias:not(:has(.radio-sistema:checked)) .guia { display: none; }
.conectar-guias:has(#sis-claude-desktop-windows:checked) .guia:not(#guia-claude-desktop-windows),
.conectar-guias:has(#sis-claude-desktop-mac:checked) .guia:not(#guia-claude-desktop-mac),
.conectar-guias:has(#sis-claude-web:checked) .guia:not(#guia-claude-web),
.conectar-guias:has(#sis-claude-celular:checked) .guia:not(#guia-claude-celular),
.conectar-guias:has(#sis-chatgpt-web:checked) .guia:not(#guia-chatgpt-web),
.conectar-guias:has(#sis-chatgpt-celular:checked) .guia:not(#guia-chatgpt-celular),
.conectar-guias:has(#sis-claude-code:checked) .guia:not(#guia-claude-code),
.conectar-guias:has(#sis-codex:checked) .guia:not(#guia-codex),
.conectar-guias:has(#sis-cursor:checked) .guia:not(#guia-cursor),
.conectar-guias:has(#sis-vscode:checked) .guia:not(#guia-vscode),
.conectar-guias:has(#sis-gemini-cli:checked) .guia:not(#guia-gemini-cli) { display: none; }
.guia { display: grid; gap: 14px; min-width: 0; scroll-margin-top: 16px; }
.titulo-guia { font-size: 20px; }
.guia-carrossel { position: relative; display: grid; gap: 12px; min-width: 0; }
.guia-trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px; align-items: start;
  margin: 0; padding: 0; list-style: none; min-width: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
}
.guia-trilho:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; }
.guia-carrossel.pronto .guia-trilho { scrollbar-width: none; }
.guia-passo {
  display: grid; gap: 14px; min-width: 0; padding: 18px; scroll-snap-align: start;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie);
}
.guia-imagem img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--linha); border-radius: var(--raio-botao);
}
.guia-texto { display: grid; gap: 10px; min-width: 0; }
.guia-contagem {
  font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--azul);
}
.guia-titulo-passo { font-size: 18px; letter-spacing: -0.02em; }
.guia-nota {
  padding: 10px 14px; font-size: 14px;
  border-left: 3px solid var(--azul); border-radius: var(--raio-botao); background: var(--superficie-2);
}
.guia-url, .guia-kit { display: grid; gap: 8px; min-width: 0; }
.guia-controles { display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.guia-carrossel.pronto .guia-controles { display: flex; }
.guia-contador { margin: 0; font-weight: 800; }
.aviso-marca { margin: 0; }
.titulo-caminho { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.quando-falha {
  display: grid; gap: 8px; margin-top: 8px; padding: 16px 18px;
  border: 1px solid var(--linha); border-left: 4px solid var(--erro); border-radius: var(--raio-botao);
}
.quando-falha .lista-regras { margin: 0; gap: 8px; }
.pergunta-exemplo {
  margin: 12px 0; padding: 12px 16px; border-left: 3px solid var(--azul);
  background: var(--superficie); font-weight: 700; overflow-wrap: anywhere;
}
/* P-N-093 -- "Diga à sua IA para usar o Next primeiro": o texto de colar num
   campo de leitura. `pre-wrap` quebra as linhas longas do texto (~110
   caracteres) dentro da largura do campo, sem rolagem lateral em 360 px. */
.campo-instrucao { margin-top: 14px; }
.texto-colar {
  min-height: 250px; font-size: 14px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden;
}
/* P-N-208 -- captura alta (ChatGPT: "Continuar em Next", "Nome e URL") empurrava o texto do passo para fora da
   tela a 1280x900. Acima de 700 px a imagem tem altura maxima e `contain` (a proporcao fica; nada e cortado);
   no celular ela continua na largura da coluna. */
@media (min-width: 701px) {
  .guia-imagem img { width: auto; max-height: min(50vh, 400px); margin-inline: auto; object-fit: contain; }
}
@media (max-width: 700px) {
  .guia-passo { padding: 14px; }
  .guia-contador { order: -1; flex-basis: 100%; }
  .quando-falha { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .guia-trilho { scroll-behavior: auto; } }

/* ==========================================================================
   COMPONENTES DO MODELO (docs/codex-design/company.css), para as telas que
   ainda vão ser portadas (U2-U4). Nomes em português e SEM colisão com as
   classes que as telas de hoje usam; tudo pelos tokens, então os dois temas
   valem sem regra a mais. Campos, trilha de pastas e paginação já existem
   acima (`.campo`, `.entrada`, `.trilha`, `.paginacao`, `.lista-paginada-*`).
   ========================================================================== */
.grade-cartoes, .grade-metricas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px;
}
.grade-cartoes.duas, .grade-metricas.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.painel-bloco {
  min-width: 0; margin-bottom: 24px; padding: 26px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--next-radius-workspace);
}
.grade-cartoes > .painel-bloco { margin: 0; }
.painel-bloco h2 { margin-bottom: 12px; font-size: 18px; letter-spacing: -0.03em; }
.painel-bloco p { color: var(--tinta-suave); font-size: 13px; line-height: 1.8; }
.painel-bloco p:last-child { margin-bottom: 0; }
.painel-perigo { border-color: var(--erro); }
.painel-perigo h2 { color: var(--erro); }
.cartao-metrica {
  min-width: 0; padding: 22px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-cartao);
}
.cartao-metrica > span { display: block; color: var(--tinta-suave); font-size: 12px; font-weight: 650; }
.cartao-metrica > strong { display: block; margin: 9px 0; font-size: 29px; font-weight: 750; letter-spacing: -0.04em; line-height: 1.2; }
.cartao-metrica > small { color: var(--tinta-suave); font-size: 11px; }
.barra-secao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.barra-secao > div { min-width: 0; }
.grupo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.botao-compacto { min-height: 44px; padding: 11px 17px; font-size: 13px; }
.botao-perigo { color: var(--erro); border-color: var(--erro); }
.botao-perigo:hover { background: var(--erro-fundo); color: var(--erro); }
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: 11px; }
.tabela-rolagem:focus-visible { outline: 3px solid var(--azul-marca); outline-offset: 4px; }
.etiqueta {
  display: inline-block; padding: 4px 8px; border-radius: 6px; white-space: nowrap;
  background: var(--menta-fraco); color: var(--menta-escura); font-size: 11px; font-weight: 700;
}
dialog.dialogo {
  width: min(590px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 28px;
  background: var(--superficie); color: var(--tinta); border: 1px solid var(--linha-forte); border-radius: var(--raio);
}
dialog.dialogo::backdrop { background: rgba(8, 12, 24, 0.55); }
@media (max-width: 1200px) {
  .grade-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-metricas { gap: 12px; }
}
@media (max-width: 980px) {
  .grade-cartoes.duas { grid-template-columns: 1fr; }
  .grade-metricas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grade-cartoes, .grade-metricas, .grade-metricas.duas { grid-template-columns: 1fr; }
  .painel-bloco { padding: 20px; }
  .barra-secao > .grupo-acoes { width: 100%; }
  .barra-secao > .grupo-acoes > * { flex: 1; }
  dialog.dialogo { padding: 20px; }
}

/* ==========================================================================
   ADMINISTRAÇÃO DO NEXT — componentes ainda no desenho antigo
   O miolo de `/admin*` (admin.py e afins) usa as classes do antigo
   `portal.css`, que colidem com as do pacote (`.cartao`, `.entrada`, `.campo`,
   `.selo`). Para a Administração sair na MESMA casca e na MESMA folha, sem
   `@import`, as regras daquele arquivo vêm AQUI, escopadas em `.admin-next`
   (o `<div>` que `_shell_logada` põe em volta do miolo), e os tokens dele
   apontam para os da casca: os dois temas valem. Geradas de `portal.css` sem
   as regras da lateral antiga; apague este bloco quando as telas da
   Administração forem portadas para os componentes acima.
   ========================================================================== */
/* R1: o acento tambem no :root, como no portal.css antigo; no tema escuro e o `--azul` do corpo escuro. */
:root { --acento: var(--azul); }
:root:has(.alternador-tema:checked) { --acento: #a9bbff; }
.admin-next {
  --creme: var(--fundo); --papel: var(--superficie); --papel-2: var(--superficie-2); --branco: var(--superficie);
  --tinta-2: var(--tinta-suave); --tinta-3: var(--tinta-suave);
  --acento: var(--azul); --acento-escuro: var(--azul-forte); --acento-fraco: var(--azul-fraco);
  --ok: #196546; --alerta: var(--erro); --neutro-selo: var(--superficie-2); --borda: var(--linha);
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
  --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; --t-marca: 32px;
  --r1: 10px; --r2: 14px; --r3: 20px; --raio: var(--r1);
  --sombra: 0 1px 2px rgba(20, 27, 48, 0.04), 0 6px 20px rgba(20, 27, 48, 0.05);
  --serif: "Manrope", system-ui, sans-serif;
  --sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, Consolas, "Cascadia Mono", "SFMono-Regular", monospace;
  --altura-botao: 36px; --altura-linha-tabela: 44px; --gap-bloco: var(--e3);
}
body:has(.alternador-tema:checked) .admin-next { --ok: #7fe0b5; --sombra: none; }
/* O seletor de idioma do miolo antigo repete o da barra de cima. */
.admin-next .idioma { display: none; }
.admin-next { box-sizing: border-box; }
.admin-next *, .admin-next *::before, .admin-next *::after { box-sizing: inherit; }
.admin-next { 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; font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "dlig" 0; }
.admin-next a { color: var(--acento); }
.admin-next a:hover { color: var(--acento-escuro); }
.admin-next img, .admin-next svg, .admin-next canvas, .admin-next video { max-width: 100%; }
.admin-next img { height: auto; }
.admin-next pre, .admin-next code, .admin-next samp, .admin-next kbd { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.admin-next h1, .admin-next h2, .admin-next h3, .admin-next h4 { overflow-wrap: anywhere; }
.admin-next h1 { margin: 0; font-size: var(--t-h1); line-height: 1.12; }
.admin-next .serif { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
.admin-next .suave { color: var(--tinta-3); }
.admin-next .nota { color: var(--tinta-3); font-size: var(--t-corpo); margin: 0; }
.admin-next .sem-margem { margin: 0; }
.admin-next .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; }
.admin-next .secao { padding: var(--e6) 0; min-width: 0; width: 100%; }
.admin-next .regra { height: 1px; background: var(--linha); margin: 0; border: 0; }
.admin-next .topo { display: flex; align-items: center; justify-content: space-between; padding: var(--e5) 0; gap: var(--e5); flex-wrap: wrap; }
.admin-next .topo-acoes { display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; }
.admin-next .topo > a { color: inherit; text-decoration: none; }
.admin-next .marca { font-family: var(--serif); font-size: var(--t-marca); letter-spacing: 0; display: inline-flex; align-items: center; gap: 12px; font-synthesis: none; }
.admin-next .marca::before { content: ""; width: 38px; height: 38px; flex: none; background: url("/static/marca/marca.svg") center / contain no-repeat; }
.admin-next .marca em { font-style: normal; }
.admin-next .link-topo { font-weight: 700; text-decoration: none; }
.admin-next .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); }
.admin-next .selo-conformidade { margin: var(--e3) 0 var(--e6); font-size: var(--t-peq); }
.admin-next .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; }
.admin-next .selo-conformidade a::before { content: "\2713\00a0"; color: var(--acento); }
.admin-next .selo-conformidade a:hover { border-color: var(--tinta); color: var(--tinta); }
.admin-next .botao, .admin-next 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; }
.admin-next .botao:hover { color: var(--creme); background: #000; }
.admin-next .botao.compacto { padding: 7px 16px; font-size: var(--t-peq); }
.admin-next .botao.grande { font-size: var(--t-corpo); padding: 10px 24px; }
.admin-next .botao.perigo { background: var(--alerta); color: var(--superficie); }
.admin-next .botao.perigo:hover { filter: brightness(0.9); color: var(--superficie); }
.admin-next .botao.secundario { background: transparent; color: var(--tinta); border: 1.5px solid var(--tinta); padding: 9px 18px; font-size: var(--t-peq); }
.admin-next .botao.secundario:hover { color: var(--tinta); background: var(--acento-fraco); }
.admin-next .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; }
.admin-next .botao-claro:hover { color: var(--tinta); background: var(--acento-fraco); }
.admin-next .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; }
.admin-next .botao-mini:hover { border-color: var(--tinta); color: var(--tinta); background: var(--papel); }
.admin-next .botao-mini.perigo { color: var(--alerta); border-color: #e6c4c4; }
.admin-next .botao-mini.perigo:hover { color: var(--alerta); border-color: var(--alerta); background: var(--erro-fundo); }
.admin-next .acao-perigo { white-space: normal; }
.admin-next .acoes-tabela { display: flex; gap: var(--e2); flex-wrap: nowrap; align-items: center; white-space: nowrap; }
.admin-next .acoes-tabela form { margin: 0; }
.admin-next .entrada.num-gb { width: 76px; min-height: 28px; padding: 4px var(--e2); font-size: var(--t-peq); }
.admin-next form.form { display: grid; gap: var(--gap-bloco); }
.admin-next .inicio { justify-self: start; }
.admin-next .pilha-4 > :is(.botao, .botao-claro, .botao-mini, button):not(:first-child), .admin-next [data-copiar].inicio { margin-top: var(--gap-bloco); }
.admin-next .acoes-tabela .pilha-4 > :is(.botao, .botao-claro, .botao-mini, button):not(:first-child) { margin-top: var(--gap-bloco); }
.admin-next .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; }
.admin-next .cartao > h2, .admin-next .cartao > h3 { margin: 0; }
.admin-next .cartao.compacto { padding: var(--e4) var(--e5); }
.admin-next .cartao.destaque { border-color: var(--acento); }
.admin-next .cartao.form { padding: var(--e5); gap: var(--e4); }
.admin-next .cartao.form-fino { padding: var(--e4) var(--e5); gap: var(--e3); }
.admin-next .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; }
.admin-next .kit h3 { margin: 0; font-size: var(--t-h3); }
.admin-next .kit a { overflow-wrap: anywhere; min-width: 0; }
.admin-next .kit-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); flex-wrap: wrap; min-width: 0; }
.admin-next .kit-plugin { display: flex; flex-direction: column; gap: var(--e2); height: 100%; }
.admin-next .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; }
.admin-next .kit-plugin .kit-rodape { margin-top: auto; display: grid; gap: var(--e2); min-width: 0; }
.admin-next .kit-plugin .kit-rodape .botao-claro { justify-self: start; }
.admin-next .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); }
.admin-next .selo.ok { background: #dcf0e2; color: var(--ok); }
/* R4 (U6 B4): no escuro o `--ok` clareia; o fundo do selo tem de escurecer junto (era o do claro, 1,33:1). */
body:has(.alternador-tema:checked) .admin-next .selo.ok { background: var(--menta-fraco); }
.admin-next .selo.espera { background: #f6ead2; color: #7c4a03; }
.admin-next .selo.recusa { background: var(--erro-fundo); color: var(--alerta); }
.admin-next .valor-tecnico { display: inline-flex; align-items: center; gap: var(--e2); flex-wrap: wrap; max-width: 100%; min-width: 0; vertical-align: middle; }
.admin-next .valor-tecnico code { font-family: var(--mono); font-size: var(--t-peq); overflow-wrap: anywhere; word-break: break-word; }
.admin-next .valor-tecnico-completo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: pre-wrap; }
.admin-next .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); }
.admin-next .dialog-tecnico::backdrop { background: rgb(0 0 0 / 0.32); }
.admin-next .dialog-tecnico .fechar { float: right; }
.admin-next .dialog-tecnico pre, .admin-next .valor-tecnico-fallback pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; }
.admin-next .valor-tecnico-fallback { flex-basis: 100%; }
html.js .admin-next .valor-tecnico-fallback { display: none; }
.admin-next .pedido-texto .valor-tecnico code[aria-hidden="true"] { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-next .details-resumo { border: 1px solid var(--linha); border-radius: var(--r2); background: var(--papel); padding: var(--e3) var(--e4); min-width: 0; }
.admin-next .details-resumo summary { cursor: pointer; font-weight: 800; color: var(--tinta-2); }
.admin-next .details-resumo > *:not(summary) { margin-top: var(--e3); }
.admin-next .bloco-infra-fechado > .bloco-infra { margin-top: var(--e3); }
.admin-next details:not([open]) > *:not(summary) { display: none; }
.admin-next .campo { display: grid; gap: 6px; min-width: 0; }
.admin-next .campo label, .admin-next .rotulo { font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-2); }
.admin-next .entrada, .admin-next 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; font: inherit; line-height: 1.3; }
.admin-next input.entrada:focus, .admin-next select.entrada:focus { border-color: var(--acento); outline: none; }
.admin-next .erro { color: var(--alerta); font-size: var(--t-peq); }
.admin-next .aviso { color: var(--ok); font-size: var(--t-peq); }
.admin-next .codigo-campo { gap: 8px; }
.admin-next .codigo-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; }
.admin-next .codigo-digito { min-height: 54px; padding: 0; text-align: center; font-size: var(--t-num); font-weight: 800; line-height: 1; }
.admin-next .codigo-digito:focus { border-color: var(--acento); outline: 3px solid color-mix(in srgb, var(--acento) 28%, transparent); outline-offset: 2px; }
.admin-next .botao[data-login-resend][aria-disabled="true"] { opacity: 0.65; cursor: wait; }
@media (max-width: 420px) {
  .admin-next .codigo-grade { gap: 6px; }
  .admin-next .codigo-digito { min-height: 50px; font-size: var(--t-num-movel); }
}
.admin-next .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; }
.admin-next .opcao input { margin: 0 var(--e2) 0 0; accent-color: var(--tinta); }
.admin-next .opcao:has(input:checked) { border-color: var(--tinta); background: var(--papel); box-shadow: 0 0 0 1px var(--tinta) inset; }
.admin-next .aceite { display: flex; gap: var(--e3); align-items: flex-start; }
.admin-next .grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.admin-next .grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.admin-next .grade-larga { gap: var(--e4); }
.admin-next .pilha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); min-width: 0; }
.admin-next .pilha-4 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e1); min-width: 0; }
.admin-next .arvore-base { min-width: 0; }
.admin-next .pasta-base { border: 1px solid var(--linha); border-radius: var(--r1); padding: var(--e2) var(--e3); min-width: 0; }
.admin-next .pasta-base > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); min-width: 0; }
.admin-next .pasta-toggle { display: inline-flex; align-items: center; gap: var(--e2); min-width: 0; overflow-wrap: anywhere; }
.admin-next .docs-base { padding: var(--e2) 0 0 var(--e4); min-width: 0; }
.admin-next .linha-doc { display: flex; align-items: center; gap: var(--e2) var(--e3); flex-wrap: wrap; padding: 2px 0; min-width: 0; }
.admin-next .doc-titulo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.admin-next .entre { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); flex-wrap: wrap; min-width: 0; }
.admin-next .acoes-linha { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.admin-next .par-acao { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e4); }
.admin-next .h-pagina { margin: 0; font-size: var(--t-h1); line-height: 1.12; }
.admin-next .h-secao { margin: 0; font-size: var(--t-h2); line-height: 1.15; }
.admin-next .h-hero { margin: 0; font-size: var(--t-h1); line-height: 1.1; }
.admin-next .lead-pagina { margin: 6px 0 0; font-size: var(--t-corpo); color: var(--tinta-3); max-width: 60ch; }
.admin-next .eyebrow { font-size: var(--t-peq); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); }
.admin-next .miudo { font-size: var(--t-peq); }
.admin-next .numero-grande { font-family: var(--serif); font-size: var(--t-num); line-height: 1.05; margin: 0; }
.admin-next .numero-medio { font-size: var(--t-h3); margin: 6px 0 0; }
.admin-next .link-topo { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; color: var(--acento); font-weight: 700; text-decoration: none; }
.admin-next .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; }
.admin-next .envios[hidden], .admin-next [hidden] { display: none !important; }
.admin-next .tabela-caixa { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }
.admin-next .tabela { width: 100%; border-collapse: collapse; border-spacing: 0; min-width: 0; font-size: var(--t-corpo); }
.admin-next .tabela th, .admin-next .tabela td { text-align: left; padding: 4px var(--e3); border-bottom: 1px solid var(--linha); vertical-align: middle; }
.admin-next .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; }
.admin-next .tabela tbody tr:last-child td { border-bottom: 0; }
.admin-next .tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-next .tabela .acao { text-align: right; white-space: nowrap; }
.admin-next .tabela .nome { overflow-wrap: anywhere; font-weight: 600; }
.admin-next .cobranca { max-width: 980px; }
.admin-next .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; }
.admin-next .plano-preco strong { font-size: var(--t-corpo); font-weight: 800; }
.admin-next .plano-preco-termo { color: var(--tinta-3); }
.admin-next .acoes-arquivo { display: flex; gap: var(--e2); align-items: center; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.admin-next .acoes-arquivo select { min-width: 0; max-width: 150px; min-height: 30px; padding: 4px 8px; font-size: var(--t-peq); }
.admin-next .tabela-cartao { border: 1px solid var(--linha); border-radius: var(--r2); background: var(--papel); overflow: hidden; }
.admin-next .icone-tipo { font-family: var(--mono); font-size: var(--t-rotulo); color: var(--tinta-3); margin-right: var(--e2); }
.admin-next .metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.admin-next .indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); }
.admin-next .metrica { display: grid; gap: 2px; min-width: 0; align-content: start; }
.admin-next .metrica .valor { font-family: var(--serif); font-size: var(--t-num); line-height: 1.05; }
.admin-next .metrica .valor.valor-texto { font-family: var(--sans); font-size: var(--t-h3); font-weight: 800; line-height: 1.2; }
.admin-next .metrica .chave { font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); }
.admin-next .cota-barra { width: 100%; height: 12px; accent-color: var(--acento); }
.admin-next .grafico { width: 100%; height: 120px; display: block; overflow: visible; }
.admin-next .grafico .barra { fill: var(--acento); }
.admin-next .grafico .barra-hoje { fill: var(--acento); opacity: .55; }
.admin-next .grafico .barra-perda { fill: var(--alerta); }
.admin-next .grafico .barra-zero { fill: var(--linha); }
.admin-next .grafico .grade-y { stroke: var(--linha); stroke-width: 1; vector-effect: non-scaling-stroke; }
.admin-next .grafico .eixo, .admin-next .grafico .grade-valor { fill: var(--tinta-3); font-size: var(--t-rotulo); font-family: var(--sans); }
.admin-next .grafico-caixa { overflow-x: auto; width: 100%; }
.admin-next .uso-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: var(--e4); align-items: start; }
.admin-next .uso-rankings { display: grid; gap: var(--e3); min-width: 0; }
.admin-next .ranking-uso { display: grid; gap: var(--e2); min-width: 0; }
.admin-next .barras-h { display: grid; gap: var(--e2); min-width: 0; }
.admin-next .barra-h { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(7ch, auto); gap: var(--e3); align-items: center; }
.admin-next .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); }
.admin-next .barra-h .trilho { height: 6px; max-width: 260px; border-radius: 999px; background: var(--neutro-selo); overflow: hidden; }
.admin-next .barra-h .trilho > span { display: block; height: 100%; background: var(--acento); border-radius: 999px; }
.admin-next .barra-h .n { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--t-peq); text-align: right; justify-self: end; min-width: 7ch; }
.admin-next .vazio { border: 1px dashed var(--linha-forte); border-radius: var(--r2); padding: var(--e5); color: var(--tinta-3); text-align: center; margin: 0; }
.admin-next .chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.admin-next .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); }
.admin-next .chips li .ext { font-family: var(--mono); font-size: var(--t-rotulo); color: var(--tinta-3); }
.admin-next .dobra { padding: var(--e5) 0 max(40px, var(--e6)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e6); align-content: start; align-items: start; }
.admin-next .exemplos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
.admin-next .exemplo { display: grid; gap: var(--e2); min-width: 0; align-content: start; }
.admin-next .captura-card { padding: var(--e2); background: var(--tinta); border: 1px solid var(--tinta); border-radius: var(--r3); width: 100%; margin: 0; }
.admin-next .captura-card img { display: block; width: 100%; height: auto; border-radius: var(--e3); }
.admin-next .captura-legenda { display: grid; gap: 2px; font-size: var(--t-peq); color: var(--tinta-3); }
.admin-next .captura-legenda .rotulo-captura { font-size: var(--t-rotulo); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acento); }
.admin-next .passo-home { display: grid; gap: var(--e2); border-top: 2px solid var(--tinta); padding-top: var(--e4); align-content: start; }
.admin-next .passo-home .n { font-family: var(--serif); font-size: var(--t-num); color: var(--acento); line-height: 1; }
.admin-next .seo-blocos { display: grid; gap: var(--e6); }
.admin-next .lista-passos { display: grid; gap: var(--e3); margin: 0; padding-left: 22px; }
.admin-next .lista-passos li { padding-left: var(--e1); }
.admin-next .lista-passos strong, .admin-next .lista-passos span { display: block; }
.admin-next .chips-texto { color: var(--tinta); font-weight: 700; line-height: 1.9; overflow-wrap: anywhere; }
.admin-next .faq-publica { display: grid; gap: var(--e2); }
.admin-next .faq-publica details { border-top: 1px solid var(--linha); padding: var(--e3) 0; }
.admin-next .faq-publica summary { cursor: pointer; font-weight: 800; }
.admin-next .faq-publica p { margin-bottom: 0; }
.admin-next .tabela-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--linha); border-radius: var(--r2); }
.admin-next .tabela-scroll table { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--papel); }
.admin-next .tabela-scroll th, .admin-next .tabela-scroll td { padding: var(--e3); border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.admin-next .tabela-scroll thead th { background: var(--papel-2); }
.admin-next .tabela-scroll tbody tr:last-child th, .admin-next .tabela-scroll tbody tr:last-child td { border-bottom: 0; }
.admin-next .passo { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--e4); align-items: start; }
.admin-next .passo .n { font-family: var(--serif); font-size: var(--t-num); line-height: 1; color: var(--acento); }
.admin-next .fluxo { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin: 0; padding: 0; list-style: none; }
.admin-next .fluxo li { font-weight: 700; }
.admin-next .fluxo li + li::before { content: "\2192"; color: var(--acento); margin-right: var(--e3); font-weight: 400; }
.admin-next .nota-tecnica { font-size: var(--t-peq); color: var(--tinta-3); margin: 0; }
@media (min-width: 1100px) {
  .admin-next .dobra .captura-card, .admin-next .dobra .captura-card img { max-height: min(62vh, 760px); }
  .admin-next .dobra .captura-card img { object-fit: contain; }
}
@media (min-width: 1600px) {
  .admin-next .dobra .captura-card { min-height: 480px; }
}
.admin-next .legal { max-width: 760px; display: grid; gap: var(--e4); }
.admin-next .legal h2 { font-family: var(--serif); font-size: var(--t-h2); font-weight: 400; margin: 18px 0 0; }
.admin-next .legal li { margin: 6px 0; }
.admin-next .tabela-conformidade { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--t-peq); }
.admin-next .tabela-conformidade th, .admin-next .tabela-conformidade td { text-align: left; vertical-align: top; padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linha); }
.admin-next .tabela-conformidade th { color: var(--tinta-2); font-weight: 700; }
.admin-next .envios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.admin-next .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); }
.admin-next .envio-nome { overflow-wrap: anywhere; font-weight: 700; }
.admin-next .envio-barra { width: 100%; height: 10px; accent-color: var(--acento); }
.admin-next .envio-cancelar { padding: 6px var(--e3); font-size: var(--t-peq); cursor: pointer; background: transparent; font-family: inherit; }
@media (max-width: 1099px) {
  .admin-next .dobra { grid-template-columns: 1fr; padding: var(--e6) 0 var(--e6); }
  .admin-next .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-next .uso-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .admin-next { font-size: var(--t-corpo); }
  .admin-next .grade-2, .admin-next .grade-3, .admin-next .metricas, .admin-next .exemplos, .admin-next .kits-conectar, .admin-next .par-acao { grid-template-columns: 1fr; }
  .admin-next .indicadores, .admin-next .uso-grid { grid-template-columns: 1fr; }
  .admin-next .par-acao { gap: var(--e3); }
  .admin-next .barra-h { grid-template-columns: minmax(0, 1fr) minmax(7ch, auto); }
  .admin-next .barra-h .trilho { grid-column: 1 / -1; }
  .admin-next .envio { grid-template-columns: minmax(0, 1fr); }
  .admin-next .cartao { padding: var(--e4); }
  .admin-next .cartao.form { padding: var(--e4); }
  .admin-next .h-pagina { font-size: var(--t-h1); }
  .admin-next .tabela-cartao { border: 0; background: transparent; }
  .admin-next .tabela, .admin-next .tabela thead, .admin-next .tabela tbody, .admin-next .tabela tr, .admin-next .tabela th, .admin-next .tabela td { display: block; }
  .admin-next .tabela thead { position: absolute; left: -10000px; }
  .admin-next .tabela tbody tr { border: 1px solid var(--linha); border-radius: var(--r2); background: var(--papel); padding: var(--e3) var(--e4); margin-bottom: var(--e3); }
  .admin-next .tabela td { border-bottom: 0; padding: var(--e1) 0; text-align: left; }
  .admin-next .tabela td.num, .admin-next .tabela td.acao { text-align: left; }
  .admin-next .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); }
  .admin-next .tabela td.acao[data-rotulo]::before { content: attr(data-rotulo) ": "; }
  .admin-next .tabela td:empty { display: none; }
}
@media (max-width: 430px) {
  .admin-next .codigo { font-size: var(--t-peq); }
  .admin-next .botao { padding: 9px 18px; font-size: var(--t-corpo); }
}
@media (max-width: 699px) {
  .admin-next .cadastro-formulario .cartao { padding: var(--e3) var(--e4); }
  .admin-next .cadastro-formulario .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); }
  .admin-next .cadastro-formulario .opcao { border-radius: var(--r2); padding: var(--e2); font-size: var(--t-peq); line-height: 1.25; }
  .admin-next .cadastro-formulario .opcao .suave, .admin-next .cadastro-formulario .opcao .plano-preco { font-size: var(--t-rotulo); }
  .admin-next .cadastro-formulario .opcao .plano-preco strong { font-size: var(--t-peq); }
}
.admin-next .codigo-inline { font-family: var(--mono); font-size: var(--t-corpo); overflow-wrap: anywhere; }
.admin-next .comando-copiavel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e2); align-items: start; min-width: 0; }
.admin-next .comando-copiavel .codigo { margin: 0; }
.admin-next .barra-h .trilho { width: 100%; display: block; border-radius: 999px; overflow: hidden; background: var(--neutro-selo); }
.admin-next .cota-barra { height: 10px; }
.admin-next .cota-barra { width: 100%; accent-color: var(--acento); }
.admin-next .cota-barra.cheia { accent-color: var(--alerta); }
.admin-next .barra-h .trilho { height: 6px; max-width: 260px; }
.admin-next .barra-h .trilho > svg { display: block; width: 100%; height: 100%; }
.admin-next .barra-h .trilho .fundo { fill: var(--neutro-selo); }
.admin-next .barra-h .trilho .preenchido { fill: var(--acento); }
.admin-next ul[data-lista-formatos] { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.admin-next 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); }
.admin-next [data-formatos] h3 { margin: var(--e3) 0 0; font-size: var(--t-h3); }
.admin-next [data-formatos] .nota { font-size: var(--t-peq); }
.admin-next .carrossel { display: grid; gap: var(--e3); min-width: 0; position: relative; }
.admin-next .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; }
.admin-next .carrossel-trilho:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
.admin-next .carrossel-slide { scroll-snap-align: center; }
.admin-next .exemplo, .admin-next .carrossel-slide { display: grid; gap: var(--e2); min-width: 0; margin: 0; align-content: start; }
.admin-next .pergunta-exemplo { margin: 0; font-family: var(--serif); font-size: var(--t-h2); line-height: 1.2; color: var(--tinta); }
.admin-next .pergunta-exemplo::before { content: "\201C"; color: var(--acento); }
.admin-next .pergunta-exemplo::after { content: "\201D"; color: var(--acento); }
.admin-next .carrossel .pergunta-exemplo { min-height: 2.5em; display: flex; align-items: flex-end; }
.admin-next .carrossel .captura-card { aspect-ratio: 16 / 10; padding: var(--e2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.admin-next .carrossel .captura-card img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--e3); }
.admin-next .carrossel-controles { display: flex; align-items: center; justify-content: center; gap: var(--e3); }
.admin-next .carrossel-seta { position: absolute; top: 46%; transform: translateY(-50%); z-index: 2; border: 1.5px solid var(--tinta); background: color-mix(in srgb, var(--superficie) 92%, transparent); 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; }
.admin-next .carrossel-seta-ant { left: 12px; }
.admin-next .carrossel-seta-prox { right: 12px; }
.admin-next .carrossel-seta:hover { background: var(--acento-fraco); }
.admin-next .carrossel.pronto .carrossel-seta { display: flex; }
.admin-next .carrossel.pronto:hover .carrossel-seta, .admin-next .carrossel.pronto:focus-within .carrossel-seta { opacity: 1; }
@media (hover: none) {
  .admin-next .carrossel.pronto .carrossel-seta { opacity: 1; }
}
.admin-next .carrossel-pontos { display: flex; gap: var(--e2); align-items: center; justify-content: center; }
.admin-next .carrossel-ponto { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 1px solid var(--linha-forte); background: transparent; cursor: pointer; }
.admin-next .carrossel-ponto.ativo { background: var(--acento); border-color: var(--acento); }
@media (prefers-reduced-motion: reduce) {
  .admin-next .carrossel-trilho { scroll-behavior: auto; }
}
.admin-next .abas { display: flex; gap: var(--e2); margin: 0 0 var(--e4); border-bottom: 1px solid var(--linha); overflow-x: auto; }
.admin-next .aba { padding: var(--e2) var(--e3); text-decoration: none; white-space: nowrap; color: var(--tinta-3); border-bottom: 2px solid transparent; font-weight: 600; }
.admin-next .aba:hover { color: var(--tinta); }
.admin-next .aba.ativa { color: var(--tinta); border-bottom-color: var(--tinta); }
.admin-next .trilha { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin: 0 0 var(--e3); font-size: var(--t-corpo); }
.admin-next .trilha-caminho { display: flex; align-items: center; gap: var(--e2); min-width: 0; overflow-x: auto; white-space: nowrap; }
.admin-next .trilha a { color: var(--tinta-2); text-decoration: none; }
.admin-next .trilha a:hover { color: var(--tinta); text-decoration: underline; }
.admin-next .trilha-sep { color: var(--tinta-3); }
.admin-next .linha-acao { display: flex; gap: var(--e3); align-items: flex-end; flex-wrap: wrap; }
.admin-next .linha-acao .campo { flex: 1 1 220px; min-width: 0; margin: 0; }
.admin-next .icone-pasta { color: var(--tinta-2); }
.admin-next .selo.neutro { background: var(--neutro-selo); color: var(--tinta-2); }
.admin-next .nome-arquivo-grade { display: grid; grid-template-columns: 40px minmax(3.2rem, auto) minmax(0, 1fr); gap: var(--e2); align-items: center; min-width: 0; }
.admin-next .miniatura-arquivo-slot { width: 40px; height: 40px; display: block; }
.admin-next .miniatura-arquivo { width: 40px; height: 40px; object-fit: cover; display: block; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--papel-2); }
.admin-next .tipo-nowrap { white-space: nowrap; min-width: 2.6rem; text-align: center; }
.admin-next .nome-arquivo-texto { min-width: 0; overflow-wrap: anywhere; }
.admin-next .tabela .acao { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.admin-next .tabela .acao select { min-width: 0; max-width: 160px; padding: 4px 8px; font-size: var(--t-peq); }
.admin-next .exemplo-titulo { display: block; font-weight: 700; margin-bottom: var(--e1); }
.admin-next .cartao code { overflow-wrap: anywhere; word-break: break-word; }
.admin-next .tabela-rolagem { overflow-x: auto; min-width: 0; max-width: 100%; }
.admin-next .tabela-admin { width: 100%; border-collapse: collapse; font-size: var(--t-peq); }
.admin-next .tabela-admin th, .admin-next .tabela-admin td { text-align: left; padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linha); white-space: nowrap; }
.admin-next .tabela-admin th { font-weight: 700; color: var(--tinta-2); }
.admin-next .tabela-admin th a { color: inherit; text-decoration: none; }
.admin-next .tabela-admin th a:hover { text-decoration: underline; }
.admin-next .tabela-admin th.ativa a { color: var(--acento); }
.admin-next .numero { font-size: var(--t-num); line-height: 1.2; }
.admin-next .lista-numeros { list-style: none; margin: 0; padding: 0; }
.admin-next .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; }
.admin-next .lista-numeros li:last-child { border-bottom: 0; }
.admin-next .lista-numeros li span { overflow: hidden; text-overflow: ellipsis; }
.admin-next .pastilha { display: inline-block; }
.admin-next .pastilha.amarelo { color: #854d0e; }
/* R4 (U6 B3): #854d0e sobre a superfície escura dava 2,34:1. */
body:has(.alternador-tema:checked) .admin-next .pastilha.amarelo { color: var(--aviso-texto); }
.admin-next .pastilha.vermelho { color: var(--alerta); }
.admin-next .bloco-infra { display: flex; flex-direction: column; gap: var(--e3); margin-top: var(--e5); }
.admin-next .h-bloco { font-size: var(--t-h3); line-height: 1.2; margin: 0; }
.admin-next .grade-maquina { display: grid; gap: var(--e3); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) {
  .admin-next .grade-maquina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.admin-next .cartao-container { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.admin-next .tabela-containers th, .admin-next .tabela-containers td { height: 32px; vertical-align: top; white-space: normal; }
.admin-next .tabela-containers .num { white-space: nowrap; }
.admin-next .detalhes-linha { margin-top: var(--e1); }
.admin-next .detalhes-linha summary { cursor: pointer; color: var(--tinta-2); font-size: var(--t-peq); }
.admin-next .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); }
.admin-next .detalhes-tecnicos dt { color: var(--tinta-2); }
.admin-next .detalhes-tecnicos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.admin-next .cont-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); }
.admin-next .cont-cabeca > div { display: flex; flex-direction: column; min-width: 0; }
.admin-next .cont-tecnico { font-family: var(--mono); font-size: var(--t-peq); }
.admin-next .cont-papel { margin: 0; }
.admin-next .cont-linha-1 { display: flex; justify-content: space-between; gap: var(--e2); flex-wrap: wrap; font-family: var(--mono); font-size: var(--t-peq); }
.admin-next .metrica-linha { display: flex; justify-content: space-between; gap: var(--e2); align-items: baseline; flex-wrap: wrap; }
.admin-next .metrica-valores { font-family: var(--mono); font-size: var(--t-peq); color: var(--tinta-2); }
.admin-next .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); }
.admin-next .cont-acoes { display: flex; gap: var(--e3); align-items: center; }
.admin-next .lnk-param { font-size: var(--t-peq); }
.admin-next .sparkline { width: 100%; height: 100%; display: block; }
.admin-next .sparkline polyline { fill: none; stroke: var(--acento); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.admin-next .sparkline .spark-ponto { fill: var(--acento); }
.admin-next .spark-vazio { color: var(--tinta-3); font-family: var(--mono); }
.admin-next .pastilha.verde { color: var(--ok); }
.admin-next .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; }
.admin-next .param-servico legend { font-family: var(--mono); font-size: var(--t-peq); padding: 0 var(--e2); }
.admin-next .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); }
.admin-next .param-linha:last-child { border-bottom: 0; }
.admin-next .param-id { display: flex; flex-direction: column; min-width: 0; }
.admin-next .param-campo { display: flex; gap: var(--e2); align-items: center; min-width: 0; }
.admin-next .param-campo input, .admin-next .param-campo select { max-width: 100%; padding: 4px 8px; font-size: var(--t-peq); font-family: var(--mono); }
.admin-next .param-campo input[type="number"], .admin-next .param-campo input[data-formato="moeda"] { width: 100%; max-width: 9rem; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.admin-next .param-campo select { width: 9rem; text-align: right; }
.admin-next .param-campo.param-texto { grid-column: 2 / -1; }
.admin-next .param-campo.param-texto input { min-width: 24rem; width: 100%; text-align: left; font-family: var(--mono); }
@supports selector(:has(*)) {
  .admin-next .param-linha:has(.param-texto) { grid-template-columns: minmax(0, 1fr) minmax(24rem, 1fr); }
}
.admin-next .param-unidade { color: var(--tinta-3); font-size: var(--t-peq); min-width: 0; text-align: left; flex: none; }
.admin-next .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) {
  .admin-next .grade-maquina { grid-template-columns: 1fr; }
  .admin-next .param-linha { grid-template-columns: minmax(0, 1fr) 8rem minmax(4rem, 1fr); }
  .admin-next .param-id { grid-column: 1 / -1; }
  .admin-next .param-linha:has(.param-texto) { grid-template-columns: minmax(0, 1fr); }
  .admin-next .param-campo.param-texto { grid-column: 1 / -1; }
  .admin-next .param-campo.param-texto input { min-width: 0; }
  .admin-next .param-campo input[type="number"], .admin-next .param-campo input[data-formato="moeda"] { max-width: 8rem; }
  .admin-next .param-campo select { width: 8rem; }
}
.admin-next .acao-perigo > summary.botao-mini { list-style: none; }
.admin-next .acao-perigo > summary.botao-mini::-webkit-details-marker { display: none; }
.admin-next .tabela th, .admin-next .tabela td, .admin-next .tabela-admin th, .admin-next .tabela-admin td { min-height: var(--altura-linha-tabela); }
.admin-next .tabela .acao { flex-wrap: nowrap; white-space: nowrap; align-items: center; }
.admin-next .tabela .acao select { max-width: 150px; min-height: 30px; padding: 4px 8px; font-size: var(--t-peq); }
.admin-next .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-next .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-next .admin-tab:hover { color: var(--acento); border-color: var(--acento); }
.admin-next .abas-admin-grupo { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.admin-next .abas-admin-grupo [aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: 0.25em; }
.admin-next .admin-grupos, .admin-next .admin-grupos .cartao, .admin-next .admin-grupos form { min-width: 0; overflow-wrap: anywhere; }
.admin-next .admin-grupos .entrada { max-width: 100%; box-sizing: border-box; }
.admin-next .admin-grupos summary { cursor: pointer; }
.admin-next .chamadas-admin-grupo { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.5rem; }
.admin-next .chamadas-admin-grupo dd { margin-inline-start: 0; }
.admin-next #clientes .tabela-admin { width: 100%; table-layout: fixed; }
.admin-next #clientes .tabela-admin td { white-space: normal; overflow-wrap: anywhere; }
.admin-next #clientes .tabela-admin .cont-tecnico { white-space: normal; overflow-wrap: anywhere; }
.admin-next #clientes .tabela-admin .acoes-tabela { flex-wrap: wrap; white-space: normal; }
@media (max-width: 719px) {
  .admin-next #clientes .tabela-admin, .admin-next #clientes .tabela-admin tbody, .admin-next #clientes .tabela-admin tr, .admin-next #clientes .tabela-admin td { display: block; min-width: 0; width: 100%; box-sizing: border-box; }
  .admin-next #clientes .tabela-admin thead { display: none; }
  .admin-next #clientes .tabela-admin td { white-space: normal; overflow-wrap: anywhere; }
  .admin-next #clientes .tabela-admin td::before { content: attr(data-rotulo); display: block; font-weight: 700; margin-bottom: 0.25rem; }
  .admin-next #clientes .tabela-admin tr + tr { border-top: 2px solid #dce3f0; }
}
@media (max-width: 719px) {
  .admin-next .admin-tabs { flex-wrap: nowrap; overflow-x: auto; gap: var(--e3); -webkit-overflow-scrolling: touch; }
  .admin-next .admin-tab { min-height: 36px; padding: 0 0 7px; }
}
.admin-next .metricas-admin { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.admin-next .metrica.compacta { padding: var(--e3); }
.admin-next .metrica.compacta .valor { font-size: var(--t-num); font-variant-numeric: tabular-nums; }
.admin-next .indicador-sem-dado { font-size: var(--t-peq); font-family: var(--sans); }
.admin-next .numero.indicador-sem-dado { font-size: var(--t-peq); }
.admin-next .metrica.compacta.indicador { padding: var(--e1) var(--e3); gap: var(--e1); }
.admin-next .metrica.compacta.indicador .valor { line-height: 1; }
.admin-next .metrica.compacta.indicador .valor-texto { font-size: var(--t-h3); }
.admin-next .serie-assinaturas > div { display: grid; gap: var(--e2); }
.admin-next .cont-imagem { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-next .cont-imagem-linha { display: flex; gap: var(--e2); align-items: center; min-width: 0; }
.admin-next .cont-imagem-linha .cont-imagem { min-width: 0; }
.admin-next .cont-imagem-linha .botao-mini { flex: 0 0 auto; margin-left: auto; }
.admin-next .tabela-containers { table-layout: fixed; }
/* R3: sem largura, Estado dividia a sobra com Nome e Ação (71 px a 1280) e a pastilha vazava. */
.admin-next .tabela-containers th:nth-child(2) { width: 6rem; }
.admin-next .tabela-containers th:nth-child(3) { width: 30%; min-width: 18rem; }
.admin-next .tabela-containers th:nth-child(4), .admin-next .tabela-containers th:nth-child(6) { width: 7rem; }
.admin-next .tabela-containers th:nth-child(5) { width: 11rem; }
.admin-next .tabela-admin.tabela-pedidos { table-layout: fixed; }
.admin-next .tabela-admin.tabela-pedidos th, .admin-next .tabela-admin.tabela-pedidos td { white-space: normal; vertical-align: top; overflow-wrap: anywhere; }
.admin-next .tabela-pedidos .col-data { width: 13ch; }
.admin-next .tabela-pedidos .col-empresa { width: 14%; }
.admin-next .tabela-pedidos .col-pessoa { width: 16%; }
.admin-next .tabela-pedidos .col-telefone { width: 12%; }
.admin-next .tabela-pedidos .col-pedido { width: auto; }
.admin-next .tabela-pedidos .col-estado { width: 8%; }
.admin-next .tabela-pedidos .col-acoes { width: 19%; }
.admin-next .tabela-pedidos .pedido-texto { min-width: 0; }
.admin-next .tabela-pedidos .acao form { min-width: 0; max-width: 100%; }
.admin-next .tabela-pedidos .acao .botao-mini { max-width: 100%; white-space: normal; }
.admin-next .mini-graficos { display: grid; gap: var(--e2); margin: var(--e1) 0; }
.admin-next .mini-metrica { display: grid; grid-template-columns: 72px minmax(72px, 1fr) 48px auto; gap: var(--e2); align-items: center; font-size: var(--t-peq); }
.admin-next .mini-rotulo { color: var(--tinta-3); }
.admin-next .mini-barra { display: block; height: 8px; border-radius: 999px; overflow: hidden; background: var(--neutro-selo); min-width: 0; }
.admin-next .mini-barra svg { display: block; width: 100%; height: 100%; }
.admin-next .mini-barra .fundo { fill: var(--neutro-selo); }
.admin-next .mini-barra .preenchido { fill: var(--acento); }
.admin-next .mini-barra.perda .preenchido { fill: var(--alerta); }
.admin-next .mini-barra.envio .preenchido { fill: var(--tinta-2); }
.admin-next .mini-escala { color: var(--tinta-3); font-family: var(--mono); }
.admin-next > .botao, .admin-next > form > .botao, .admin-next > section + .botao, .admin-next > .cartao + .botao, .admin-next > .cartao + form, .admin-next > section + form { margin-top: var(--gap-bloco); }
@media (max-width: 719px) {
  .admin-next { font-size: var(--t-corpo); }
  .admin-next .tabela-caixa { overflow-x: visible; }
  .admin-next .tabela-cartao { border: 0; background: transparent; }
  .admin-next .tabela:not(.tabela-admin), .admin-next .tabela:not(.tabela-admin) thead, .admin-next .tabela:not(.tabela-admin) tbody, .admin-next .tabela:not(.tabela-admin) tr, .admin-next .tabela:not(.tabela-admin) th, .admin-next .tabela:not(.tabela-admin) td, .admin-next .tabela-admin.tabela-pedidos, .admin-next .tabela-admin.tabela-pedidos thead, .admin-next .tabela-admin.tabela-pedidos tbody, .admin-next .tabela-admin.tabela-pedidos tr, .admin-next .tabela-admin.tabela-pedidos th, .admin-next .tabela-admin.tabela-pedidos td, .admin-next .tabela-conformidade, .admin-next .tabela-conformidade thead, .admin-next .tabela-conformidade tbody, .admin-next .tabela-conformidade tr, .admin-next .tabela-conformidade th, .admin-next .tabela-conformidade td { display: block; min-width: 0; width: 100%; }
  .admin-next .tabela:not(.tabela-admin) thead, .admin-next .tabela-admin.tabela-pedidos thead, .admin-next .tabela-conformidade thead { position: absolute; left: -10000px; }
  .admin-next .tabela:not(.tabela-admin) tbody tr, .admin-next .tabela-admin.tabela-pedidos tbody tr, .admin-next .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); }
  .admin-next .tabela:not(.tabela-admin) td, .admin-next .tabela-admin.tabela-pedidos td, .admin-next .tabela-conformidade td { border-bottom: 0; padding: var(--e1) 0; text-align: left; }
  .admin-next .tabela:not(.tabela-admin) td[data-rotulo]::before, .admin-next .tabela-admin.tabela-pedidos td[data-rotulo]::before, .admin-next .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); }
  .admin-next .tabela td.acao { overflow-x: visible; }
  .admin-next .acoes-arquivo { justify-content: flex-start; overflow-x: auto; }
  .admin-next .tabela-admin { min-width: 760px; }
  .admin-next .tabela-admin.tabela-pedidos { min-width: 0; }
  /* R3: 760 px deixava 34 px para Nome, Estado e Ação; a tabela rola dentro de `.tabela-rolagem`. */
  .admin-next .tabela-admin.tabela-containers { min-width: 56rem; }
  .admin-next .tabela-rolagem { box-shadow: inset -16px 0 12px -16px rgba(28, 25, 23, 0.35); }
  .admin-next .tabela-pedidos-wrapper { box-shadow: none; }
  .admin-next .nome-arquivo-grade { grid-template-columns: 32px minmax(3.2rem, auto) minmax(0, 1fr); }
  .admin-next .miniatura-arquivo-slot, .admin-next .miniatura-arquivo { width: 32px; height: 32px; }
}
.admin-next .lista-paginada { display: grid; gap: var(--e2); margin: var(--e3) 0; }
.admin-next .lista-paginada form { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.admin-next .lista-paginada input[type="search"] { min-width: min(18rem, 100%); }
.admin-next .lista-paginada-rodape { color: var(--tinta-2); font-size: var(--t-peq); }
.admin-next .lista-paginada-nav { display: flex; flex-wrap: wrap; gap: var(--e1); align-items: center; }
.admin-next .lista-paginada-nav a, .admin-next .lista-paginada-nav strong { min-width: 2rem; min-height: 2rem; display: inline-flex; align-items: center; justify-content: center; }
.admin-next .segredo-reinicio-aviso { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; justify-content: space-between; }
.admin-next .segredo-reinicio-aviso p { margin: 0; }
.admin-next .tabela-segredos { table-layout: fixed; width: 100%; }
.admin-next .tabela-segredos th, .admin-next .tabela-segredos td { overflow-wrap: anywhere; word-break: break-word; white-space: normal; overflow-x: hidden; overflow-y: visible; }
.admin-next .tabela-segredos .segredo-acao { width: 11rem; min-width: 0; }
.admin-next .segredo-nome, .admin-next .segredo-confirmacao-nome { font-family: var(--mono); overflow-wrap: anywhere; }
.admin-next .segredo-form { display: grid; gap: var(--e2); min-width: 0; }
.admin-next .segredo-details summary { font-size: var(--t-peq); }
.admin-next .segredo-campo { display: grid; gap: var(--e1); min-width: 0; }
.admin-next .segredo-campo > span { color: var(--tinta-3); font-size: var(--t-rotulo); font-weight: 800; }
.admin-next .segredo-campo .entrada, .admin-next .segredo-form textarea { width: 100%; box-sizing: border-box; }
.admin-next .segredo-confirmacao-nome { display: block; white-space: normal; }
.admin-next .segredos-cartoes { display: none; }
.admin-next .segredo-cartao { border: 1px solid var(--linha); border-radius: var(--r2); background: var(--papel); padding: var(--e4); min-width: 0; }
.admin-next .segredo-cartao-cab, .admin-next .segredo-servico, .admin-next .segredo-estado { overflow-wrap: anywhere; }
.admin-next .segredo-cartao-cab { display: grid; gap: var(--e1); }
.admin-next .segredo-servico, .admin-next .segredo-estado { margin: var(--e1) 0; color: var(--tinta-2); }
@media (max-width: 768px) {
  .admin-next .detalhes-tecnicos { grid-template-columns: minmax(0, 1fr); }
  .admin-next .tabela-segredos-wrapper { display: none; }
  .admin-next .segredos-cartoes { display: grid; gap: var(--e3); }
  .admin-next .segredo-cartao { max-width: 100%; }
  .admin-next .segredo-form .botao-mini { width: 100%; justify-content: center; }
}
@media (max-width: 719px) {
  .admin-next .tabela:not(.tabela-admin) tbody tr { padding: var(--e2) var(--e3); margin-bottom: var(--e2); }
}
.admin-next .lista-falhas { margin: var(--e3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e3); }
.admin-next .falha { border: 1px solid var(--linha, currentColor); padding: var(--e3); min-width: 0; }
.admin-next .falha-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); }
.admin-next .falha-nome { overflow-wrap: anywhere; }
.admin-next .falha-detalhes { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e1) var(--e3); margin: var(--e2) 0 0; }
.admin-next .falha-detalhes dt { font-weight: 700; }
.admin-next .falha-detalhes dd { margin: 0; overflow-wrap: anywhere; }
.admin-next .falha-espaco { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); }
@media (max-width: 719px) {
  .admin-next .falha-detalhes { grid-template-columns: minmax(0, 1fr); }
}

/* O refino que a casca Codex dava ao miolo da Administração (era `portal-workspace.css`), agora pelos tokens. */
.admin-next h1 { font: 750 clamp(28px, 2.8vw, 40px)/1.18 Manrope, Arial, sans-serif; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.admin-next h2, .admin-next .h-secao { font-weight: 700; font-size: 19px; letter-spacing: -0.02em; line-height: 1.4; }
.admin-next .lead-pagina { max-width: 820px; font-size: 13px; line-height: 1.8; color: var(--tinta-suave); }
.admin-next .cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-cartao); padding: 24px; }
.admin-next .cartao.aviso { background: var(--menta-fraco); border-color: var(--linha); color: var(--menta-escura); }
.admin-next .cartao.erro { background: var(--erro-fundo); border-color: var(--linha); color: var(--erro); }
.admin-next .botao, .admin-next .botao-mini, .admin-next .botao-claro { font-family: inherit; font-size: 12px; font-weight: 700; border-radius: 8px; min-height: 40px; padding: 10px 14px; }
.admin-next .botao, .admin-next .botao.inicio { background: var(--azul); color: var(--fundo); border: 1px solid var(--azul); }
.admin-next .botao:hover { background: var(--azul-forte); }
.admin-next .perigo { background: var(--superficie); border: 1px solid var(--erro); color: var(--erro); }
.admin-next .entrada { border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta); border-radius: 8px; min-height: 42px; font: inherit; font-size: 13px; padding: 10px 12px; }
.admin-next input[type=checkbox], .admin-next input[type=radio] { accent-color: var(--azul); }
.admin-next table { background: var(--superficie); font-size: 12px; }
.admin-next table th { background: var(--superficie-2); color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; font-weight: 650; }
.admin-next table td, .admin-next table th { padding: 14px 16px; border-color: var(--linha); }
.admin-next .tabela-cartao, .admin-next .tabela-rolagem { border: 1px solid var(--linha); border-radius: 13px; background: var(--superficie); overflow-x: auto; max-width: 100%; }
.admin-next .param-servico, .admin-next .segredo-cartao { background: var(--superficie); border-color: var(--linha); border-radius: 12px; }
.admin-next .details-resumo > summary { color: var(--azul-forte); font-size: 12px; font-weight: 700; min-height: 40px; display: flex; align-items: center; }
.admin-next .admin-cliente-abas { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-next .lista-paginada-topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-next .lista-paginada-busca { display: flex; align-items: center; gap: 8px; flex: 0 1 340px; }
.admin-next .lista-paginada-busca .entrada { min-width: 0; width: 100%; }
.admin-next .grade-3, .admin-next .grade-2 { gap: 18px; }
.admin-next .pilha { gap: 24px; }
.admin-next .grafico { max-width: 100%; }
.admin-next :is(.linha-acao, .par-acao, .cont-acoes) { flex-wrap: wrap; }
.admin-next :is(.campo, .cartao, .segredo-campo) { min-width: 0; }
.admin-next :is(code, pre, .segredo-nome, .valor-tecnico, .pedido-texto) { overflow-wrap: anywhere; }
/* P-N-218 (D42): o bloco de cobrança do grupo (dl) em duas colunas, rótulo e valor na mesma linha. */
.admin-next section[data-aba="cobranca"] > dl {
  display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 8px 20px;
  margin: 0 0 20px; padding: 18px 20px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px;
}
.admin-next section[data-aba="cobranca"] > dl dt { color: var(--tinta-suave); font-size: 12px; font-weight: 700; }
.admin-next section[data-aba="cobranca"] > dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 1150px) { .admin-next .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .admin-next .grade-3, .admin-next .grade-2 { grid-template-columns: 1fr; }
  .admin-next .cartao { padding: 20px; }
  .admin-next table :is(td, th) { padding: 12px; }
  .admin-next .botao, .admin-next .botao-mini { min-height: 44px; }
  .admin-next .entrada { max-width: 100%; }
}

/* ==========================================================================
   Meu espaço e Uso (req_8e0b877f3949, U2a) — docs/codex-design/meu-espaco.html
   Título com a ação principal à direita, três cartões, chamadas com gráfico e
   rankings lado a lado, últimos arquivos + "Este é o seu espaço", configurações
   recolhidas. Só tokens da folha: o escuro vem de graça.
   ========================================================================== */
.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 26px 0 0; margin-bottom: 28px; }
.workspace-heading .eyebrow, .context-card .eyebrow {
  margin: 0 0 9px; color: var(--tinta-suave); font-size: 10px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase;
}
.workspace-heading h1 { margin: 0 0 12px; font-size: clamp(31px, 3vw, 38px); font-weight: 750; line-height: 1.15; letter-spacing: -0.045em; }
.workspace-heading .lead { margin: 0; color: var(--tinta-suave); font-size: 14px; }
.primary-button {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 11px 17px; border: 1px solid var(--azul); border-radius: var(--raio-botao);
  background: var(--azul); color: var(--fundo); font-size: 13px; font-weight: 700; box-shadow: 0 3px 5px rgba(49, 85, 245, 0.1);
}
.primary-button:hover { background: var(--azul-forte); border-color: var(--azul-forte); color: var(--fundo); text-decoration: none; }
.primary-button svg { width: 17px; height: 17px; }

.summary-grid { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 18px; align-items: stretch; }
.summary-grid > .cartao { margin: 0; }
.summary-grid [data-cartao="espaco"]::before, .summary-grid [data-cartao="arquivos"]::before {
  content: ""; display: block; width: 28px; height: 3px; margin-bottom: 16px; border-radius: 3px; background: var(--menta);
}
.summary-grid [data-cartao="arquivos"]::before { background: var(--azul-fraco); outline: 1px solid var(--linha); }
.summary-grid [data-cartao="chave"] {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  background: #192c6f; border-color: #192c6f; color: #ffffff;
}
.summary-grid [data-cartao="chave"]::before { content: "\2197"; position: absolute; top: 21px; right: 23px; color: #98f5d2; font-size: 31px; line-height: 1; }
.summary-grid [data-cartao="chave"] .pilha-4 { display: grid; gap: 6px; }
.summary-grid [data-cartao="chave"] .rotulo-cartao { margin-top: 19px; color: #d1daff; font-size: 11px; font-weight: 750; }
.summary-grid [data-cartao="chave"] .pilha-4 > span:nth-child(2) { max-width: 190px; font-size: 16px; font-weight: 600; line-height: 1.5; }
.summary-grid [data-cartao="chave"] .miudo { color: #d1daff; }
.summary-grid [data-cartao="chave"] a:not(.botao) { color: #ffffff; text-decoration: underline; }
.summary-grid [data-cartao="chave"] .botao {
  align-self: flex-start; margin-top: 18px; min-height: 44px; padding: 11px 17px; font-size: 13px;
  background: #98f5d2; border-color: #98f5d2; color: #183e32;
}
.summary-grid .botao-claro.inicio { margin-top: 14px; }
.scope-note, .scope-copy { margin: 11px 0 26px; color: var(--tinta-suave); font-size: 12px; }

[data-cartao="chamadas"] { margin-bottom: 22px; padding: 26px 28px; }
.chamadas-resumo { grid-template-columns: 1.15fr 1fr 1fr 1.25fr; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--linha); }
.chamadas-resumo .valor { font-size: 27px; font-weight: 750; letter-spacing: -0.03em; }
.chamadas-resumo .valor-miudo { padding-top: 9px; font-size: 16px; letter-spacing: -0.02em; }
.uso-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(180px, 1fr); gap: 30px; align-items: center; }
.uso-rankings { min-width: 0; padding-left: 26px; border-left: 1px solid var(--linha); }
.ranking-uso + .ranking-uso { margin-top: 22px; }
.ranking-uso .rotulo-cartao { margin-bottom: 11px; }
.ranking-uso:nth-child(2) .trilho > span { background: var(--menta-escura); }

.workspace-lower { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(235px, 1fr); gap: 22px; align-items: start; }
.workspace-lower > .cartao { margin: 0; }
[data-cartao="recentes"] .tabela-arquivos td { padding: 14px 16px 14px 0; vertical-align: middle; font-size: 14px; }
[data-cartao="recentes"] .tabela-arquivos td.nome { font-weight: 650; overflow-wrap: anywhere; }
[data-cartao="recentes"] .tabela-arquivos td.nome .icone-tipo { display: inline-flex; margin-right: 12px; vertical-align: middle; }
[data-cartao="recentes"] .tabela-arquivos .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.summary-grid [data-cartao="arquivos"] .metricas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.summary-grid [data-cartao="arquivos"] .metrica .valor { font-size: 28px; }
.summary-grid [data-cartao="arquivos"] .metrica .chave { font-size: 11px; }
.tabela-caixa { overflow-x: auto; }
.context-card {
  padding: 26px; border: 1px solid var(--linha); border-radius: var(--raio-cartao);
  background: linear-gradient(145deg, var(--azul-fraco), var(--menta-fraco)); min-width: 0;
}
.context-card h2 { margin: 0 0 10px; font-size: 21px; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.context-card > p:not(.eyebrow) { color: var(--tinta-suave); font-size: 13px; line-height: 1.7; }
.context-card dl { margin: 20px 0; font-size: 12px; }
.context-card dl > div { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; }
.context-card dt { color: var(--tinta-suave); }
.context-card dd { margin: 0; font-weight: 700; text-align: right; }
.context-links { padding-top: 17px; border-top: 1px solid var(--linha-forte); }
.context-links h3 { margin: 0 0 4px; color: var(--tinta-suave); font-size: 11px; }
.context-links a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; font-size: 13px; font-weight: 700; color: var(--azul-forte); }

.workspace-settings { margin-top: 24px; padding: 0 23px; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); }
.workspace-settings summary { display: flex; align-items: center; justify-content: space-between; padding: 19px 0; cursor: pointer; font-size: 14px; font-weight: 700; list-style: none; }
.workspace-settings summary::-webkit-details-marker { display: none; }
.workspace-settings summary > span:first-child { display: flex; align-items: center; gap: 12px; }
.workspace-settings[open] > summary > span:last-child { transform: rotate(45deg); }
.workspace-settings > p { margin: 0 0 16px; color: var(--tinta-suave); font-size: 13px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-bottom: 24px; align-items: start; }
.settings-grid .cartao { border-radius: 9px; }
.settings-grid .linha-acao { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

.metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.metric-card { display: grid; gap: 6px; align-content: start; padding: 22px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.metric-card > span { color: var(--tinta-suave); font-size: 12px; font-weight: 650; }
.metric-card > strong { font-size: 28px; font-weight: 750; letter-spacing: -0.04em; line-height: 1.2; }
.metric-card > small { color: var(--tinta-suave); font-size: 12px; }
.panel { margin-top: 22px; padding: 24px 28px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.panel h2 { margin: 0 0 8px; font-size: 18px; }
.panel p { margin: 0 0 14px; color: var(--tinta-suave); font-size: 13px; }
.daily-details { margin-top: 0; margin-bottom: 22px; padding: 0 28px; }
.daily-details summary { padding: 18px 0; cursor: pointer; font-size: 14px; font-weight: 700; }
.daily-details[open] summary { border-bottom: 1px solid var(--linha); margin-bottom: 8px; }

@media (max-width: 1200px) {
  .chamadas-resumo { grid-template-columns: 1fr 1fr; row-gap: 20px; }
}
@media (max-width: 980px) {
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .summary-grid [data-cartao="chave"] { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; }
  .summary-grid [data-cartao="chave"]::before { display: none; }
  .summary-grid [data-cartao="chave"] .rotulo-cartao { margin: 0 0 5px; }
  .summary-grid [data-cartao="chave"] .pilha-4 > span:nth-child(2) { max-width: none; font-size: 14px; }
  .summary-grid [data-cartao="chave"] .botao { align-self: center; margin: 0; }
  .uso-grid { grid-template-columns: 1fr; }
  .uso-rankings { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--linha); }
  .ranking-uso + .ranking-uso { margin: 0; }
  .workspace-lower { grid-template-columns: 1fr; }
  .context-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
  .context-card .eyebrow, .context-card h2, .context-card > p { grid-column: 1; }
  .context-card dl { grid-column: 2; grid-row: 1 / 4; margin: 0; align-self: center; }
  .context-links { grid-column: 1 / -1; }
  .settings-grid { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  .workspace-heading { align-items: flex-start; }
  .primary-button { font-size: 0; gap: 0; padding: 10px; }
  .primary-button > span { display: none; }
  .primary-button svg { width: 22px; height: 22px; }
  .summary-grid { grid-template-columns: 1fr; }
  .summary-grid [data-cartao="chave"] { flex-direction: column; align-items: flex-start; }
  .summary-grid [data-cartao="chave"] .botao { align-self: flex-start; margin-top: 8px; }
  .summary-grid [data-cartao="espaco"]::before, .summary-grid [data-cartao="arquivos"]::before { display: none; }
  [data-cartao="chamadas"] { padding: 22px 18px; }
  .uso-rankings { grid-template-columns: 1fr; gap: 23px; }
  .context-card { display: block; padding: 22px; }
  .context-card dl { margin-block: 20px; }
  .workspace-settings, .daily-details { padding-inline: 18px; }
  .settings-grid .cartao { padding: 18px; }
  .panel { padding: 20px 18px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* U2c -- Pessoas e Conectores no modelo novo (docs/codex-design/pessoas.html, conectores.html). */
.grade-cartoes.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .grade-cartoes.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grade-cartoes.quatro { grid-template-columns: 1fr; } }
.grade-cartoes > .painel-bloco[data-conector] { display: grid; align-content: start; justify-items: start; gap: 4px; }
.grade-cartoes > .painel-bloco[data-conector] h2 { margin: 6px 0 0; }
.grade-cartoes > .painel-bloco[data-conector] p { margin: 0; }
.grade-cartoes > .painel-bloco[data-conector] form, .grade-cartoes > .painel-bloco[data-conector] .acoes-linha { margin-top: 10px; }
.icone-provedor {
  display: grid; place-items: center; width: 38px; height: 38px;
  background: var(--superficie-2); color: var(--azul);
  border: 1px solid var(--linha); border-radius: var(--raio-botao); font-weight: 800;
}
/* "Convidar pessoa": o <details> é o botão primário; o painel abre à direita, na largura de um formulário. */
.acao-convidar > summary {
  background: var(--marca-principal, var(--azul)); border-color: transparent;
  color: var(--marca-principal-texto, var(--fundo));
}
.acao-convidar > summary:hover { background: var(--marca-principal, var(--azul-forte)); color: var(--marca-principal-texto, var(--fundo)); }
.painel-convite { width: min(360px, calc(100vw - 48px)); }
.painel-convite .campo-curto { max-width: 100%; }
.lista-paginada-topo > .acao-convidar { margin-left: auto; }
@media (max-width: 640px) {
  .lista-paginada-topo > .acao-convidar { margin-left: 0; }
  .painel-convite { left: 0; right: auto; }
}
.lista-paginada-topo > .lista-paginada-busca { flex-wrap: nowrap; }
.secao + .painel-bloco { margin-top: 24px; }

/* === task_feb13d019ea2 · /conectar, /sincronizar, /plugins === */
/* ============================================================
   U2d — Conectar a sua IA, Sincronizar pasta e Plugins no modelo novo
   (docs/codex-design/conectar-ia.html, sincronizar.html, plugins-empresa.html).
   Escopo `.pagina-modelo`: o resto da área logada não muda.
   ========================================================================== */
.pagina-conectar, .pagina-sincronizar, .pagina-plugins { min-width: 0; }
.pagina-modelo .abertura { border-bottom: 0; padding-bottom: 6px; }
.pagina-modelo .abertura h1::after { content: "."; color: var(--azul); }
.pagina-modelo .titulo-secao { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }
.pagina-modelo .cartao { border-radius: 16px; padding: 26px; }
.pagina-modelo .secao { margin-bottom: 24px; }

/* Superfície da chave: o bloco escuro do modelo (`.key-surface`). */
.superficie-chave {
  position: relative; overflow: hidden; margin-bottom: 24px; padding: 32px;
  color: #fff; border: 1px solid #273e79; border-radius: 18px;
  background: linear-gradient(115deg, #162654, #243d91);
}
.superficie-chave h2 { max-width: 500px; margin: 0 0 10px; font-size: 26px; letter-spacing: -0.03em; color: #fff; }
.superficie-chave .apoio-chave { max-width: 520px; margin: 0 0 22px; color: #d4ddfa; font-size: 13px; }
.superficie-chave .rotulo-chave {
  margin: 0 0 10px; color: #d4ddfa; font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.superficie-chave .suave, .superficie-chave p { color: #d4ddfa; }
.superficie-chave .tabela-arquivos { background: #ffffff0a; border: 1px solid #7181b5; border-radius: 10px; color: #fff; }
.superficie-chave .tabela-arquivos th { background: transparent; color: #d4ddfa; }
.superficie-chave .tabela-arquivos td { border-color: #ffffff22; color: #fff; }
.superficie-chave .tabela-arquivos .tipo, .superficie-chave .tabela-arquivos .celula-menor { color: #d4ddfa; }
/* R4 (U6 B1/B2): no celular a linha vira cartão com `--superficie` (branco no claro) e o texto da chave é branco;
   aqui o cartão fica sobre o azul, e os selos usam os tons claros da superfície. */
.superficie-chave .tabela-arquivos tr, .superficie-chave .tabela-arquivos tbody tr:hover { background: transparent; border-color: #7181b5; }
.superficie-chave .tabela-arquivos td[data-rotulo]::before { color: #d4ddfa; }
.superficie-chave .pastilha-ativa { color: #98f5d2; }
.superficie-chave .pastilha-pendente { color: #d4ddfa; }
.superficie-chave .acoes-linha { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.superficie-chave .botao-primario { background: #98f5d2; border-color: #98f5d2; color: #163e33; }
.superficie-chave .botao-primario:hover { background: #b6f9e1; }
.superficie-chave .botao-secundario { background: transparent; border-color: #7284bd; color: #fff; }
.superficie-chave .botao-secundario:hover { background: #ffffff14; }

/* Passos numerados do Sincronizar (`.steps` do modelo). */
.passos-modelo {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.passos-modelo li {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 16px; padding: 26px; min-width: 0;
}
.passos-modelo .numero-passo { display: block; margin-bottom: 26px; color: var(--azul); font-size: 12px; font-weight: 700; }
.passos-modelo h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: -0.03em; }
.passos-modelo p { margin: 0; color: var(--tinta-suave); font-size: 13px; line-height: 1.7; }

/* Painel de destaque (`.soft-panel` do modelo): degradê azul-menta suave. */
.painel-destaque {
  margin-bottom: 24px; padding: 26px; min-width: 0;
  border: 1px solid var(--linha); border-radius: 16px;
  background: linear-gradient(135deg, var(--azul-fraco), var(--menta-fraco));
}
.painel-destaque .selo-secao {
  display: block; margin-bottom: 10px; color: var(--tinta-suave);
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.painel-destaque h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: -0.03em; }
.painel-destaque > p { margin: 0 0 14px; color: var(--tinta-suave); font-size: 13px; line-height: 1.7; }
.painel-destaque .rotulo-cartao { margin-top: 18px; }

@media (max-width: 900px) {
  .passos-modelo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .superficie-chave { padding: 24px; }
  .superficie-chave h2 { font-size: 24px; }
  .pagina-modelo .cartao, .passos-modelo li, .painel-destaque { padding: 20px; }
}
/* ==========================================================================
   U2e (req_8e0b877f3949) — Cobrança, Planos, Pagamento, Preferências e Sua marca no modelo novo.
   Só apresentação: os formulários, as rotas e os textos do servidor seguem os mesmos.
   ========================================================================== */
.titulo-cartao, .cartao h2.titulo-cartao {
  margin: 0 0 12px; color: var(--tinta); font-size: 20px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.25; text-transform: none;
}
.grade-cartoes.um { grid-template-columns: minmax(0, 1fr); }
.grade-cartoes > .cartao, .grade-cartoes > .pilha { min-width: 0; }
.grade-cartoes + .cartao, .grade-cartoes + .painel-bloco { margin-top: -4px; margin-bottom: 24px; }
.acoes-linha-inicio { justify-content: flex-start; margin-top: 14px; }

/* O plano em destaque: pastilha de estado, nome grande e a ação do Stripe embaixo. */
.plano-destaque {
  background: linear-gradient(160deg, var(--superficie), color-mix(in srgb, var(--azul) 6%, var(--superficie)));
}
.plano-destaque .numero-medio { margin: 4px 0 10px; font-size: 32px; }
.plano-destaque-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.plano-destaque .acoes-linha { justify-content: flex-start; margin-top: 14px; }
.plano-destaque .acoes-linha form { margin: 0; }

/* Cartão de plano (Ajustar plano): rótulo, preço em destaque, descrição e ação. */
.painel-planos > .cartao { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.painel-planos > .cartao .plano-preco strong, .painel-planos > .cartao > .plano-preco { font-size: 26px; letter-spacing: -0.05em; }
.painel-planos > .cartao p { margin: 0; }
.painel-planos > .cartao form, .painel-planos > .cartao .botao-secundario { margin-top: auto; }
.painel-cabe { margin-top: 20px; }
.painel-cabe .titulo-cartao { margin-bottom: 8px; }

/* Retrato em linhas: rótulo à esquerda, valor à direita, filete entre elas. */
.lista-dados { display: grid; margin: 0 0 16px; }
.lista-dados > div {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--linha);
}
.lista-dados dt { color: var(--tinta-suave); font-size: 14px; }
.lista-dados dd { margin: 0; min-width: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.lista-dados dd .lista-regras { margin: 0; font-weight: 400; text-align: right; }
.lista-dados .plano-preco, .lista-dados .plano-preco strong { font-size: inherit; letter-spacing: 0; }
.lista-dados .plano-preco-termo { display: inline; margin: 0; font-size: 13px; }

@media (max-width: 640px) {
  .lista-dados > div { flex-direction: column; align-items: flex-start; }
  .lista-dados dd, .lista-dados dd .lista-regras { text-align: left; }
}
/* === task_ee2717538cc2 · U2b · Meus arquivos e Documentos da empresa === */
/* ==========================================================================
   U2b — MEUS ARQUIVOS / DOCUMENTOS DA EMPRESA (docs/codex-design/meus-arquivos.html)
   Escopo, métricas, painel do acervo com busca e ações na barra, coluna de seleção
   e barra de lote sob a tabela. Só tokens: o modo escuro vale sem regra a mais.
   ========================================================================== */
.escopo-area { margin: 14px 0 22px; color: var(--tinta-suave); font-size: 14px; max-width: 72ch; }
.colecao { display: grid; gap: 18px; align-content: start; margin-bottom: 0; }
.colecao > * { min-width: 0; }
.barra-acervo { margin-bottom: 0; }
.busca-acervo { display: flex; flex: 1 1 280px; gap: 10px; max-width: 460px; }
.busca-acervo .entrada { flex: 1; min-width: 0; }
.colecao .tabela-rolagem { border-radius: 11px; }
.colecao .lista-paginada-topo { margin-bottom: 4px; }
.tabela-arquivos th.selecionar, .tabela-arquivos td.selecionar { padding-right: 16px; white-space: nowrap; }
/* "+ Nova pasta" e "Enviar arquivos" abrem o formulario: sem JS, painel sob o botao; com JS, `<dialog>`. */
.grade-metricas .cartao-metrica > p { margin-top: 10px; font-size: 12px; }
.escopo-area + .mensagem[data-somente-leitura] { margin: 0 0 20px; }
/* As abas do acervo sao os `page-tabs` do modelo: botoes pequenos, a atual em azul fraco, fio abaixo. */
.abas:has(+ .escopo-area) { gap: 10px; margin: 22px 0 0; padding-bottom: 15px; border-bottom: 1px solid var(--linha); }
.abas:has(+ .escopo-area) .aba {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--linha-forte); border-radius: 8px; background: var(--superficie);
  color: var(--tinta); font-size: 13px; letter-spacing: 0;
}
.abas:has(+ .escopo-area) .aba:hover { border-color: var(--azul); color: var(--azul); }
.abas:has(+ .escopo-area) .aba.ativa { border-color: var(--azul-fraco); background: var(--azul-fraco); color: var(--azul); }
.acao-barra { display: inline-flex; padding: 0; border: 0; background: none; }
.acao-mover.acao-barra > summary { min-height: 44px; padding: 11px 17px; font-size: 13px; }
.acao-mover.acao-barra > summary.botao-primario,
.acao-mover.acao-barra > summary.botao-primario:hover {
  border-color: transparent; background: var(--marca-principal, var(--azul));
  color: var(--marca-principal-texto, var(--fundo));
}
.acao-barra > form {
  position: absolute; right: 0; top: 100%; z-index: 20; width: min(440px, calc(100vw - 32px));
  margin-top: 8px; padding: 18px; grid-template-columns: minmax(0, 1fr); gap: 14px; text-align: left;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 14px;
  box-shadow: 0 22px 44px -24px rgba(8, 12, 24, 0.55);
}
.acao-barra > form > button { justify-self: start; }
.modal-corpo > .linha-formulario { grid-template-columns: minmax(0, 1fr); }
.modal-corpo > .linha-formulario > button { justify-self: start; }
.tabela-arquivos .selecionar input { width: 18px; height: 18px; accent-color: var(--azul); }
.barra-lote {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
  padding-top: 16px; border-top: 1px solid var(--linha); font-size: 13px;
}
.barra-lote .acoes-linha { margin: 0; }
@media (max-width: 700px) {
  .colecao .tabela-rolagem { border: 0; border-radius: 0; overflow: visible; }
  .busca-acervo { max-width: none; flex-basis: 100%; }
  .tabela-arquivos td.selecionar { width: auto; }
  .tabela-arquivos td.selecionar::before { content: none; }
  .acao-barra > summary { width: 100%; }
}
/* U4b: classes da Administração que ainda não tinham regra na folha base. */
.admin-next .linha-acao-mini { display: inline-flex; gap: var(--e1); margin: 0; }
.admin-next .ordem-clientes { display: grid; gap: var(--e1); min-width: 0; font-size: var(--t-peq); color: var(--tinta-3); }
.admin-next .cartao-secundario { border: 1px solid var(--linha); border-radius: var(--r2); background: var(--papel); padding: var(--e3) var(--e4); min-width: 0; }
.admin-next .segredo-confirmacao { display: grid; gap: var(--e1); min-width: 0; }
.admin-next .chip-selecionados { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--linha); border-radius: 999px; font-size: var(--t-peq); font-weight: 700; }
.admin-next .inline-form { display: inline-flex; gap: var(--e1); margin: 0; }
.admin-next .entrada.pequena { min-height: 32px; padding: 4px 8px; font-size: var(--t-peq); }
.admin-next .cont-imagem-nome { font-weight: 700; }
.admin-next .cont-digest { color: var(--tinta-suave); font-family: var(--mono); font-size: var(--t-peq); overflow-wrap: anywhere; }
.admin-next .lista-disco-infra { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e1); }
.admin-next .param-reinicio { display: block; }
.admin-next .param-erro { margin: var(--e1) 0 0; }
.admin-next .linha-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.admin-next .tabela-config-efetiva { width: 100%; }
.admin-next .selo-detalhe > summary { cursor: pointer; }
.admin-next .grafico-modelos-html { min-width: 0; }
.admin-next .details-resumo > summary { min-height: 32px; display: flex; align-items: center; }
.admin-next .barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); flex: 1 1 520px; justify-content: flex-end; min-width: 0; }
.admin-next .barra-filtros .lista-paginada-busca { flex: 1 1 340px; flex-wrap: wrap; align-items: flex-end; }
.admin-next .barra-filtros .lista-paginada-busca > input[type=search] { flex: 1 1 200px; width: auto; }
@media (max-width: 720px) { .admin-next .barra-filtros { flex-basis: 100%; justify-content: stretch; } }
.admin-next .pessoa-email { overflow-wrap: anywhere; }
.admin-next .config-imagem { font-family: var(--mono); overflow-wrap: anywhere; }

/* U4b: abertura, abas, cartões de métrica e barra de criação iguais às telas da empresa. */
.admin-next .abertura h1 { font-size: clamp(32px, 3.6vw, 54px); font-weight: 700; line-height: 1.1; }
.admin-next .admin-tabs { gap: 18px; margin: 0 0 var(--e5); padding-bottom: 0; flex-wrap: nowrap; overflow-x: auto; }
.admin-next .admin-tab { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--tinta-suave); padding: 0 0 7px; border-bottom: 2px solid transparent; }
.admin-next .admin-tab:hover { color: var(--tinta); border-bottom-color: var(--linha-forte); text-decoration: none; }
.admin-next .admin-tab[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--azul); }
.admin-next .admin-cliente-abas { margin-top: calc(-1 * var(--e3)); }
.admin-next .metricas-admin { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--e3); }
.admin-next .cartao-metrica { display: flex; flex-direction: column; gap: var(--e1); padding: 18px 20px; }
.admin-next .cartao-metrica > .chave { order: -1; color: var(--tinta-suave); font-size: 12px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.admin-next .cartao-metrica > .valor, .admin-next .cartao-metrica > strong { margin: 4px 0; font-family: var(--sans); font-size: 27px; font-weight: 750; letter-spacing: -0.04em; line-height: 1.2; color: var(--tinta); overflow-wrap: anywhere; }
.admin-next .cartao-metrica > .valor.indicador-sem-dado, .admin-next .cartao-metrica > strong.indicador-sem-dado { font-size: 18px; color: var(--tinta-suave); }
.admin-next .cartao-metrica .lista-numeros { margin-top: var(--e1); }
.admin-next .cartao-metrica > strong .pastilha { font-size: inherit; font-weight: inherit; }
.admin-next .filtro-grupo { justify-content: flex-start; align-items: flex-end; flex: none; margin: 0; }
.admin-next .filtro-grupo .campo { flex: 0 1 280px; }
.admin-next .barra-criacao { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: var(--e2); margin-bottom: 0; }
.admin-next .barra-criacao > .details-resumo { border: 0; background: transparent; padding: 0; }
.admin-next .barra-criacao > .details-resumo[open] { flex-basis: 100%; order: 1; border: 1px solid var(--linha); border-radius: var(--r2); background: var(--superficie); padding: var(--e3) var(--e4); }
.admin-next .barra-criacao > .details-resumo > summary.botao-secundario { display: inline-flex; width: auto; min-height: 40px; padding: 0 16px; color: var(--tinta); font-size: 13px; list-style: none; }
.admin-next .barra-criacao > .details-resumo[open] > summary.botao-secundario { border-color: var(--azul); color: var(--azul); }
.admin-next .lista-paginada-secao { display: grid; gap: var(--e2); min-width: 0; }

/* ============================================================
   C1 — consistência entre telas (revisão visual da onda 2, docs/codex-design).
   ========================================================================== */
/* 1. Estado vazio: o `.empty-state` do modelo, um painel com medalha, título médio e ação, centrado. Dentro de um
   painel que já tem borda (acervo, cartão, tabela) ele perde a própria moldura. */
.estado-vazio {
  justify-items: center; max-width: none; margin: 0 0 24px; padding: 44px 24px; text-align: center;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--next-radius-workspace);
}
.estado-vazio > * { max-width: 560px; }
.estado-vazio h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.estado-vazio p { font-size: 14px; line-height: 1.7; }
.estado-vazio .medalha { width: 60px; height: 60px; }
.estado-vazio .acoes { justify-content: center; }
:where(.painel-bloco, .cartao, .painel-destaque, td) .estado-vazio { margin: 0; padding: 28px 12px; background: none; border: 0; }
/* 2. O ponto azul do fim do título é de TODA tela logada (empresa, grupo, Administração), como no modelo. */
.casca-corpo .abertura h1::after { content: "."; color: var(--marca-principal, var(--azul)); }
/* 5. O fundo e a borda do menu lateral acompanham a página inteira: a coluna da grade é pintada, e o menu segue fixo. */
@media (min-width: 821px) {
  .quadro:has(> .casca-lateral) {
    background: linear-gradient(to right, var(--superficie) 247px, var(--linha) 247px 248px, transparent 248px);
  }
}
/* 8. Cabeçalho de tabela quebra entre palavras, nunca no meio de uma ("Documento s"). */
thead th, .tabela-empresas thead th { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* R2 (task_1c08afec6290) · HIST-063: o título de /espaco é `.workspace-heading.abertura` para a marca pintar o selo;
   sem marca fica o desenho do modelo. Os botões de fundo menta fixo seguem `--marca-principal` com a marca. */
.workspace-heading.abertura { border-bottom: 0; }
.com-marca .summary-grid [data-cartao="chave"] .botao,
.com-marca .superficie-chave .botao-primario,
.com-marca .superficie-chave .botao-primario:hover {
  background: var(--marca-principal, var(--azul)); border-color: var(--marca-principal, var(--azul));
  color: var(--marca-principal-texto, var(--fundo));
}
/* R2 · auditoria-telas: o envio da barra de /arquivos abre num painel de 440 px (uma coluna, como o "Nova pasta"), e a
   busca de /pessoas em `nowrap` encolhe a entrada, não empurra o botão Buscar para fora do formulário. */
.acao-barra.caixa-envio > .linha-formulario { grid-template-columns: minmax(0, 1fr); }
.lista-paginada-topo > .lista-paginada-busca .entrada { flex: 1 1 18rem; min-width: 0; }
/* R5 (task_45042d359f83) · U7 F2 · HIST-063 CA-1/CA-2: com a marca, o botão principal do topo de /espaco
   (`.primary-button`) segue `--marca-principal` com o texto da marca nos dois temas; sem ela, o azul do modelo. */
.com-marca .primary-button,
.com-marca .primary-button:hover {
  background: var(--marca-principal, var(--azul)); border-color: var(--marca-principal, var(--azul));
  color: var(--marca-principal-texto, var(--fundo));
}