/* ==========================================================================
   Credhost / AvaliService Data — portal.css (marca por html[data-brand])
   Folha única da plataforma (cliente e administração). A administração ganha regras próprias em admin.css.

   Sistema visual (rodada de 26/10/2026, docs/RODADA-PAINEL-20261026.md §1.4): um sistema só, tudo por token.
   - Tipografia (Inter para tudo; Spline Sans Mono só em identificador, chave, cronômetro e rótulo de documento):
       --fs-micro 9 (legenda da chapa) · --fs-label 10.5 (rótulo mono caixa-alta) · --fs-chip 11.5 (chip, contagem,
       grupo do menu) · --fs-caption 12 (metadado, ajuda) · --fs-sm 13 (secundário, tabela operacional, botão pequeno) ·
       --fs-body 14 (corpo, menu, botão) · --fs-value 15 (valor da ficha, título de cartão) · --fs-key 16 (campo da
       chave) · --fs-title 17 (diálogo, painel) · --fs-h2 20 (título do compositor) · --fs-count 20 (valor de indicador)
       · --fs-h1-sm 21 (título abaixo de 640px) · --fs-plate 22 (chapa) · --fs-verdict-sm 22 · --fs-h1 24 (título de
       página e de folha) · --fs-verdict 26 (veredito único) · --fs-amount 32 (valor em destaque).
       Mono caixa-alta só dentro de documento (ficha, doc-table em folha, rótulo de indicador); telas operacionais
       (histórico, clientes, lotes, equipe) usam cabeçalho de tabela Inter 12px/500 em ink-2.
   - Cor: neutros (canvas, sheet, ink, ink-2; ink-3 só em ícone decorativo e texto desabilitado), marca só em ação e
       seleção, semáforo só como dado (ok, bad, warn, off, info + -bg e -line). --success/--danger/--warn-soft são
       apelidos do semáforo e não entram em regra nova; --teal e --slate deixaram de existir. --field-line (3:1) borda
       de campo; --scrim véu de diálogo e menu; gráfico: --chart-bar, --chart-bar-hi, --chart-track, --chart-axis,
       --chart-quota-over.
   - Raio: --r-bar 2 · --r-plate-sm 5 · --r-xs 6 · --r-sm 8 · --r-ctl 10 · --r-card 12 · --r-checks 14 · --r-sheet 18 ·
       --r-frame 26 · --r-chip 999.
   - Movimento: --ease-out (chegada e saída curta), --ease-drawer (gaveta e menu); --dur-press 100 · --dur-hover 120
       · --dur-ui 180 · --dur-panel 240 · --dur-exit 140 (ms). Sem animar troca de tela, troca de aba pelo teclado nem
       busca; sem entrada orquestrada; com movimento reduzido o estado final aparece direto.
   - Fontes locais em fonts/ (woff2, subconjuntos latin e latin-ext, eixo de peso 400 a 600), sem serviço externo.

   Índice
   01. Tokens
   02. Base e acessibilidade
   03. Ícones
   04. Moldura do aplicativo (shell, sidebar, main)
   05. Topbar, breadcrumb e busca global
   06. Página e cabeçalhos
   07. Botões
   08. Formulários
   09. Superfícies (card) e listas
   10. Chips, avisos, vazio, carregamento
   11. Abas
   12. Tabelas
   13. Início: consulta, trabalho, métricas
   14. Módulos de consulta
   15. Resultado e entidades
   16. Origem da consulta
   17. CEP e mapa (em portal-extra.css)
   18. Acesso, login e conta
   19. Administração
   20. Lotes
   21. Diálogos e toasts
   22. Compatibilidade de componentes existentes
   23. Responsivo (1280 / 1100 / 900 / 640 / 420)
   24. Famílias, fichas de documento e marca (Credhost, 12/10/2026)
   25. Telas existentes, rodada v2
   26. Casca, componentes e movimento (rodada de 26/10/2026)
   ========================================================================== */

/* Fontes locais: Inter (corpo) e Spline Sans Mono (identificadores), variáveis no eixo de peso 400–600. O latin vem
   pré-carregado pelo index.html; o latin-ext só baixa se a página usar um caractere dele. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2?v=4.001") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2?v=4.001") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/spline-sans-mono-latin.woff2?v=1.004") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/spline-sans-mono-latin-ext.woff2?v=1.004") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 01. Tokens ============================================================== */
:root {
  /* Fundo externo da moldura. */
  --backdrop: #eaedf0;
  /* Superfícies da ficha, tinta e semáforo (direção visual de 12/10/2026). */
  --canvas: #F4F5F7;
  --sheet: #FFFFFF;
  --ink: #1B2130;
  --ink-2: #5B6474;
  --ink-3: #8A93A3;
  --ok: #1E7F4F;
  --ok-bg: #E8F3EC;
  --ok-line: color-mix(in srgb, var(--ok) 22%, #fff);
  --bad: #BF3B2B;
  --bad-bg: #FBECEA;
  --bad-line: color-mix(in srgb, var(--bad) 22%, #fff);
  --warn: #7A5200;
  --warn-bg: #FBF1DC;
  --warn-line: color-mix(in srgb, var(--warn) 20%, #fff);
  --off: #6B7682;
  --off-bg: #EEF0F2;
  --info: #123C8F;
  --info-bg: #E9EEF8;
  /* Apelidos antigos do semáforo: só para o que ainda não migrou; regra nova usa os nomes da ficha. */
  --success: var(--ok);
  --success-soft: var(--ok-bg);
  --danger: var(--bad);
  --danger-soft: var(--bad-bg);
  --warn-soft: var(--warn-bg);

  /* Marca padrão (Credhost) antes de o envelope definir data-brand. */
  --brand: #1F4FD8;
  --brand-hover: #1A43B8;
  --brand-soft: #EAF0FD;
  --brand-ink: #0B1426;
  --brand-line: color-mix(in srgb, var(--brand) 24%, #fff);
  --brand-line-strong: color-mix(in srgb, var(--brand) 45%, #fff);
  --brand-text: var(--brand-hover);
  --focus: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);

  --app: #f7f8fa;
  --surface: #ffffff;
  --subtle: #fafbfc;
  --fill: #f3f4f6;
  --hover: #f7f8f9;
  --selected: #f2f3f5;

  --text: #20242b;
  --text-2: #4a505a;
  --muted: var(--ink-2);
  --faint: var(--ink-3);

  --hairline: #eef0f3;
  --line: rgba(22, 32, 43, .10);
  --line-strong: rgba(22, 32, 43, .22);
  --row-line: #f1f2f4;
  /* Borda de campo de formulário com 3:1 sobre a folha (WCAG 1.4.11). */
  --field-line: #838C9A;  /* 3,3:1 sobre branco e 3,0:1 sobre o fundo do app (RX-TOKENS-01) */
  /* Véu de diálogo, gaveta e menu do celular. */
  --scrim: rgba(22, 26, 32, .32);

  /* Acento antigo aponta para a marca ativa. */
  --accent: var(--brand);
  --accent-h: var(--brand-hover);
  --accent-soft: var(--brand-soft);
  --accent-line: var(--brand-line);
  --accent-text: var(--brand-text);

  /* Gráficos (barras por dia, uso de franquia): uma série na rampa da marca; trilho é o tom claro da mesma rampa. */
  --chart-bar: color-mix(in srgb, var(--brand) 72%, #fff);
  --chart-bar-hi: var(--brand);
  --chart-track: var(--brand-soft);
  --chart-axis: var(--line-strong);
  --chart-quota-over: #B97D0A;

  /* Escala tipográfica. */
  --fs-micro: 9px;
  --fs-label: 10.5px;
  --fs-chip: 11.5px;
  --fs-caption: 12px;
  --fs-sm: 13px;
  --fs-body: 14px;
  --fs-value: 15px;
  --fs-key: 16px;
  --fs-title: 17px;
  --fs-h2: 20px;
  --fs-count: 20px;
  --fs-h1-sm: 21px;
  --fs-plate: 22px;
  --fs-verdict-sm: 22px;
  --fs-h1: 24px;
  --fs-verdict: 26px;
  --fs-amount: 32px;

  /* Raios. */
  --r-bar: 2px;
  --r-plate-sm: 5px;
  --r-xs: 6px;
  --r-sm: 8px;
  --r-ctl: 10px;
  --r-card: 12px;
  --r-checks: 14px;
  --r-sheet: 18px;
  --r-frame: 26px;
  --r-chip: 999px;

  /* Movimento. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --dur-press: 100ms;
  --dur-hover: 120ms;
  --dur-ui: 180ms;
  --dur-panel: 240ms;
  --dur-exit: 140ms;

  --ctl-h: 40px;
  --ctl-h-sm: 32px;

  --frame-m: 16px;
  --sidebar-w: 224px;
  --page-x: 28px;
  --card-x: 22px;
  --card-y: 20px;
  --gap: 24px;

  --shadow-frame: 0 1px 2px rgba(20, 26, 36, .04);
  --shadow-pop: 0 18px 44px -14px rgba(20, 26, 36, .2), 0 2px 6px rgba(20, 26, 36, .06);
  --ring: var(--focus);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
html[data-brand="credhost"] {
  --brand: #1F4FD8;
  --brand-hover: #1A43B8;
  --brand-soft: #EAF0FD;
  --brand-ink: #0B1426;
  --brand-line: color-mix(in srgb, var(--brand) 24%, #fff);
  --brand-line-strong: color-mix(in srgb, var(--brand) 45%, #fff);
  --brand-text: var(--brand-hover);
}
html[data-brand="avaliservice"] {
  --brand: #BC4B25;
  --brand-hover: #A53F1E;
  --brand-soft: #FFF1EA;
  --brand-ink: #16202B;
  --brand-line: #efd3c7;
  --brand-line-strong: #dcae9b;
  --brand-text: #9a3c1c;
}

/* 02. Base e acessibilidade =============================================== */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 400;
  color: var(--text);
  background: var(--backdrop);
  caret-color: var(--brand);
  font-feature-settings: "cv11", "ss01";
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.has-dialog { overflow: hidden; }
body:has(.shell:not([hidden])) { height: 100dvh; overflow-y: hidden; }

h1, h2, h3, h4, h5, p, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; color: var(--text); }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
table { font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
kbd { font-family: var(--font); }

::selection { background: var(--brand-soft); color: var(--ink); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
/* Destino do foco na troca de página (o título): recebe o foco do leitor de tela sem anel visível. */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Fora da tela sem sombra (a sombra vazava no canto superior esquerdo); sombra e posição só com o foco. */
.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 9px 14px;
  border-radius: var(--r-ctl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
  font-weight: 500;
  transform: translateY(calc(-100% - 40px));
}
.skip-link:focus, .skip-link:focus-visible { transform: none; box-shadow: var(--shadow-pop); }

.noscript { padding: 24px; }

.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.nowrap { white-space: nowrap; }
.wrap { white-space: normal; overflow-wrap: anywhere; }

/* 03. Ícones =============================================================== */
/* ic() (web/ui.js) monta o <svg> do subconjunto Lucide de vendor/icones.js direto no <span class="ic">. */
.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 17px;
  height: 17px;
  line-height: 0;
  vertical-align: middle;
}
.ic svg { display: block; width: 100%; height: 100%; stroke-width: 1.7; }
.ic-xs { width: 13px; height: 13px; }
.ic-sm { width: 15px; height: 15px; }
.ic-lg { width: 20px; height: 20px; }
.spin svg, .svc-loading .ic svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 04. Moldura do aplicativo =============================================== */
/* Faixa de ambiente (linha 1, largura toda) e, embaixo, sidebar e área principal. A faixa some quando oculta. */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  width: calc(100% - var(--frame-m) * 2);
  max-width: 1600px;
  height: calc(100vh - var(--frame-m) * 2);
  height: calc(100dvh - var(--frame-m) * 2);
  margin: var(--frame-m) auto;
  background: var(--app);
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  box-shadow: var(--shadow-frame);
  overflow: hidden;
}
.shell > .sidebar { grid-row: 2; grid-column: 1; }
.shell > .main { grid-row: 2; grid-column: 2; }

/* Ambiente de homologação: faixa fina acima de tudo, só fora de produção (portal visto pelo administrador). */
.env-strip {
  grid-row: 1;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 16px;
  border-bottom: 1px solid var(--warn-line);
  background: var(--warn-bg);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.3;
  color: var(--warn);
  text-align: center;
}
.env-strip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.env-strip .env-short { display: none; }
@media (max-width: 640px) {
  .env-strip .env-full { display: none; }
  .env-strip .env-short { display: inline; }
}

/* Sidebar branca independente, com rolagem própria */
.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 18px 12px 12px;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 8px 14px;
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-radius: var(--r-sm);
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
}
.brand-mark img { display: block; width: 28px; height: 22px; }
.brand-text { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.brand-name {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.brand-name > span { color: var(--accent); }
.brand-tag {
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--subtle);
  font-size: var(--fs-chip);
  font-weight: 500;
  line-height: 18px;
  color: var(--muted);
}

.icon-btn.sidebar-close { display: none; }

/* Bloco da empresa sob a marca: quem está consultando (no admin, a administração da casa com o selo "Admin"). */
.workspace {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0 2px 16px;
  padding: 10px 12px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
  background: var(--canvas);
}
.workspace:empty { display: none; }
.workspace-name {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.workspace-doc { font-family: var(--mono); font-size: var(--fs-chip); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }

.nav { flex: 1; display: grid; align-content: start; gap: 14px; }
.nav-groups { display: grid; gap: 14px; }
.nav-group { display: grid; gap: 2px; min-width: 0; }
#secondary-nav, .nav-list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Rótulo de grupo: Inter, caixa normal, sem espaçamento (EST-03, AUD-09: ink-2, nunca ink-3 em texto de leitura). */
.nav-label {
  padding: 0 10px 4px;
  font-size: var(--fs-chip);
  font-weight: 500;
  color: var(--ink-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--r-ctl);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--text-2);
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.nav-item > span:not(.ic):not(.nav-count) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item .ic { color: var(--ink-2); }
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item[aria-current="page"],
.nav-item.active {
  background: var(--fill);
  color: var(--ink);
  font-weight: 500;
}
.nav-item[aria-current="page"] .ic,
.nav-item.active .ic { color: var(--ink); }
.nav-item:focus-visible { outline-offset: -2px; }
.nav-count {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--r-chip);
  background: var(--fill);
  font-size: var(--fs-chip);
  line-height: 19px;
  text-align: center;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.nav-item[aria-current="page"] .nav-count { background: var(--sheet); }

/* Rodapé: quem está conectado e o papel (a empresa já está no bloco do alto). */
.sidebar-foot { display: grid; gap: 8px; padding-top: 12px; }
.account {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 8px 2px;
  border-top: 1px solid var(--hairline);
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fill);
  color: var(--text-2);
  font-size: var(--fs-chip);
  font-weight: 500;
  letter-spacing: .02em;
}
.avatar.accent { background: var(--accent-soft); color: var(--accent-text); }
.avatar.neutral { background: var(--off-bg); color: var(--ink-2); }
.account-text { display: grid; min-width: 0; line-height: 1.35; }
.account-name, .account-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-name { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.account-role { font-size: var(--fs-caption); color: var(--ink-2); }

.scrim { display: none; }

/* Área principal com rolagem própria no desktop */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 05. Topbar, breadcrumb e busca global ==================================== */
/* Só trilha e busca do histórico (EST-04): ambiente, administração e "ver portal" moram fora daqui. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  flex-shrink: 0;
  padding: 0 var(--page-x);
  background: var(--app);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-hover) var(--ease-out);
}
.topbar.scrolled { border-bottom-color: var(--hairline); }
.icon-btn.menu-btn, .icon-btn.search-btn { display: none; }

/* Barra fina de carregamento da rota no pé da topbar (aparece só se a troca passar de 150 ms). */
.route-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.route-bar > i { display: block; width: 100%; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; opacity: 0; }
.route-bar.is-active > i { opacity: 1; transform: scaleX(.7); transition: transform 2s var(--ease-out), opacity var(--dur-hover) linear; }
.route-bar.is-done > i { opacity: 0; transform: scaleX(1); transition: transform var(--dur-hover) var(--ease-out), opacity 150ms linear var(--dur-hover); }

.breadcrumb { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--fs-body);
  color: var(--ink-2);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.breadcrumb li:last-child { overflow: hidden; }
.breadcrumb li:last-child > [aria-current="page"] { display: block; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb a,
.breadcrumb [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  border-radius: var(--r-xs);
}
.breadcrumb a { transition: color var(--dur-hover) var(--ease-out); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }
.breadcrumb .ic { width: 16px; height: 16px; color: var(--ink-3); }
.breadcrumb .sep { color: var(--ink-3); }

.global-search {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  margin-left: auto;
}
.global-search > .ic, .global-search > svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--ink-2);
  pointer-events: none;
}
.global-search input {
  width: 280px;
  height: 38px;
  padding: 0 58px 0 36px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.global-search input::placeholder { color: var(--ink-2); }
.global-search input:hover { border-color: var(--ink-2); }
.global-search input:focus { border-color: var(--brand); box-shadow: var(--ring); }
.global-search input::-webkit-search-cancel-button { display: none; }
.global-search kbd {
  position: absolute;
  right: 10px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--subtle);
  font-size: var(--fs-chip);
  line-height: 1.25;
  color: var(--ink-2);
  white-space: nowrap;
  pointer-events: none;
}
.global-search input:focus ~ kbd { display: none; }

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: 360px;
  max-height: 400px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-checks);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.sr-group { padding: 8px 10px 4px; font-size: var(--fs-chip); color: var(--ink-2); }
.sr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.sr-item .ic { color: var(--muted); }
.sr-item .sr-hint { margin-left: auto; font-size: var(--fs-caption); color: var(--ink-2); white-space: nowrap; }
.sr-item:hover, .sr-item[aria-selected="true"] { background: var(--fill); }
.sr-empty { padding: 12px 10px; font-size: var(--fs-sm); color: var(--muted); }

/* 06. Página e cabeçalhos ================================================== */
.view {
  flex: 1 0 auto;
  width: 100%;
  min-width: 0;
  padding: 6px var(--page-x) 36px;
}
.view:focus, .view:focus-visible { outline: none; }

/* Ritmo vertical uniforme entre blocos da página */
.view > * + * { margin-top: var(--gap); }
.view > .dialog-backdrop, .view > .toasts { margin-top: 0; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  min-width: 0;
}
.page-head > :first-child { min-width: 0; }
.page-head h1 {
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.page-sub { margin-top: 4px; font-size: var(--fs-body); color: var(--muted); max-width: 72ch; }
.page-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-chip);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-title {
  margin: 0 0 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
}
.note { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-caption); color: var(--muted); }
.note .ic { margin-top: 1px; }
.help { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-caption); color: var(--muted); }

.svc-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--muted);
  border-radius: var(--r-xs);
}
.svc-back:hover { color: var(--text); }

/* 07. Botões =============================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--ctl-h);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  background: transparent;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.btn .ic { width: 16px; height: 16px; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-h); border-color: var(--accent-h); }

.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--hover); border-color: var(--line-strong); }

.btn-quiet { background: transparent; color: var(--text-2); }
.btn-quiet:hover { background: var(--fill); color: var(--text); }

.btn-danger { background: var(--surface); border-color: var(--bad-line); color: var(--bad); }
.btn-danger:hover { background: var(--bad-bg); border-color: var(--bad-line); }

.btn-sm { height: var(--ctl-h-sm); padding: 0 12px; gap: 6px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-sm .ic { width: 15px; height: 15px; }
.btn-block { display: flex; width: 100%; }

/* Retorno imediato ao toque (MOT-10): só em botões, nunca em itens de navegação, linhas ou abas. */
.btn:not(:disabled):active,
.icon-btn:not(:disabled):active,
.link-btn:not(:disabled):active { transform: scale(.98); }

.btn:disabled,
.btn[aria-disabled="true"],
.icon-btn:disabled,
.icon-btn[aria-disabled="true"],
.link-btn:disabled,
.link-btn[aria-disabled="true"] {
  background: var(--fill);
  border-color: var(--hairline);
  color: var(--ink-3);
  box-shadow: none;
  cursor: not-allowed;
}
/* Ocupado (withBusy, busyLabel, compositor): a cor continua a do botão, o ícone vira um anel girando e a largura não
   pula quando o rótulo muda (MOT-03). Sem ícone, withBusy põe um <span class="ic"> só para o anel. */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]:disabled { cursor: progress; }
.btn-primary[aria-busy="true"]:disabled { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost[aria-busy="true"]:disabled { background: var(--surface); border-color: var(--line); color: var(--text); }
.btn-quiet[aria-busy="true"]:disabled { background: transparent; color: var(--text-2); }
.btn-danger[aria-busy="true"]:disabled { background: var(--surface); border-color: var(--bad-line); color: var(--bad); }
.btn[aria-busy="true"] > .ic:first-child svg { display: none; }
.btn[aria-busy="true"] > .ic:first-child::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.text-btn:disabled { color: var(--faint); cursor: not-allowed; text-decoration: none; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  color: var(--text-2);
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
.icon-btn:hover { background: var(--hover); color: var(--text); border-color: var(--line-strong); }
.icon-btn.sm { width: 30px; height: 30px; border-radius: var(--r-sm); }
.icon-btn.quiet { border-color: transparent; background: transparent; }
.icon-btn.quiet:hover { background: var(--fill); border-color: transparent; }

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.link-btn:hover { background: var(--hover); color: var(--text); }
.link-btn .ic { width: 14px; height: 14px; }
.link-btn[aria-expanded="true"] { background: var(--fill); color: var(--text); }

/* Link de ação (navLink): navegação entre páginas, sem borda e sem seta (EST-22); botão com borda é só para ação. */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--brand-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.link-action:hover { background: var(--brand-soft); color: var(--brand-hover); }
.link-action:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.link-action .ic { width: 14px; height: 14px; }
.link-action.flush { margin-inline: -8px; }

.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 2px;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent);
}
.text-btn:hover { color: var(--accent-h); text-decoration: underline; text-underline-offset: 3px; }
.text-btn .ic { width: 14px; height: 14px; }

.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }

/* 08. Formulários ========================================================== */
.form-grid { display: grid; gap: 16px; min-width: 0; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 20px; }

.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field > label,
.field-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
}
.field-help { font-size: var(--fs-caption); line-height: 1.45; color: var(--muted); }
.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  color: var(--bad);
}
.field-error:empty { display: none; }

.input,
.select,
.textarea,
.field select {
  width: 100%;
  height: var(--ctl-h);
  padding: 0 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  font-size: var(--fs-body);
  color: var(--text);
  transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--off); }
.input:hover, .select:hover, .textarea:hover, .field select:hover { border-color: var(--ink-2); }
.input:focus, .select:focus, .textarea:focus, .field select:focus {
  /* RX-A11Y-01: com foco a borda escurece (marca, 6,6:1), nunca clareia; o --ring fica só como halo. */
  border-color: var(--brand);
  box-shadow: var(--ring);
  outline: none;
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible, .field select:focus-visible { outline: none; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--bad); }
.input:disabled, .select:disabled, .textarea:disabled, .input[readonly] {
  background: var(--subtle);
  color: var(--text-2);
}
.input:disabled, .select:disabled, .textarea:disabled { color: var(--muted); cursor: not-allowed; }
.input.mono { font-family: var(--mono); font-size: var(--fs-sm); }

.select,
.field select,
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b818b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}
.textarea, textarea.input {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
}

.input-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.input-wrap > .ic { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.input-wrap .input { padding-left: 38px; }

.check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
}
.check input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap > .ic:first-child { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.select-wrap .chev { position: absolute; right: 10px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  height: 36px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.select-wrap.has-icon select { padding-left: 34px; }
.select-wrap.sm select { height: var(--ctl-h-sm); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.field .select-wrap { display: flex; }
.field .select-wrap select { width: 100%; height: var(--ctl-h); background-image: none; }

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-card);
  background: var(--fill);
}
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
}
.seg input:checked + span { background: var(--surface); border-color: var(--line); color: var(--text); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 09. Superfícies e listas ================================================= */
.card {
  min-width: 0;
  padding: var(--card-y) var(--card-x);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sheet);
  background: var(--surface);
}
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .card-head { margin: 0; padding: 18px var(--card-x) 14px; }
.card.flush > .card-body { padding: 0 var(--card-x) var(--card-y); }

/* Sem cards dentro de card: blocos internos ficam planos */
.card .card,
.client-panel .card,
.start-panel .card,
.active-batches .card,
.contract-summary .card,
.wizard-panel .card,
.access-card .card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
  min-width: 0;
  margin-bottom: 16px;
}
.card-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.card-title h2, .card-title h3 { font-size: var(--fs-value); font-weight: 500; letter-spacing: -.005em; }
.card-title.top { align-items: flex-start; }
/* Sem ícone antes do título de cartão (EST-08): o das telas que ainda montam o ícone à mão não aparece. */
.card-title > .ic { display: none; }
.card-sub { margin-top: 1px; font-size: var(--fs-caption); color: var(--muted); }
.card-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding: 12px var(--card-x);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-caption);
  color: var(--muted);
}
.card:not(.flush) > .card-foot { margin: var(--card-y) calc(var(--card-x) * -1) calc(var(--card-y) * -1); }

.grid { display: grid; gap: var(--gap); align-items: start; }
.grid-a, .grid-d { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.grid-b { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.grid-c { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.stretch { align-items: stretch; }
.stack { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
.grid > *, .stack > * { min-width: 0; }

.kv { display: grid; }
.kv > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--row-line);
  font-size: var(--fs-sm);
}
.kv > div:first-child { border-top: 0; }
.kv dt { color: var(--muted); }
.kv dd { font-weight: 500; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  min-width: 0;
}
.fields > div { min-width: 0; padding: 10px 0; border-top: 1px solid var(--row-line); }
.fields dt { font-size: var(--fs-caption); color: var(--muted); }
.fields dd { margin-top: 2px; font-size: var(--fs-body); overflow-wrap: anywhere; }
.fields .wide { grid-column: 1 / -1; }

.row-link {
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  font-size: var(--fs-body);
  font-weight: 500;
  text-align: left;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }

.cell-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cell-text { display: grid; min-width: 0; line-height: 1.4; }
.cell-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-sub { font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 10. Chips, avisos, vazio, carregamento ================================== */
/* Um chip só (EST-05): .doc-chip; .badge e .chip são o mesmo componente (apelidos), com ponto opcional (.bdot).
   Cor só para semáforo de dado ou situação: ok, bad, warn, info, off. "Sem registro" usa o ponto vazado (.is-hollow);
   "Não concluída" usa o ponto cinza (off). Os nomes antigos (success, danger, neutral, slate, accent, teal) apontam
   para estes. */
.badge, .doc-chip, .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-chip);
  background: var(--off-bg);
  font-size: var(--fs-chip);
  font-weight: 600;
  line-height: 1;
  color: var(--ink-2);
  white-space: nowrap;
}
.badge .bdot, .doc-chip .bdot, .chip .bdot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok, .badge.success, .doc-chip.ok, .chip.ok { background: var(--ok-bg); color: color-mix(in srgb, var(--ok) 80%, var(--ink)); }
.badge.bad, .badge.danger, .doc-chip.bad, .chip.bad { background: var(--bad-bg); color: var(--bad); }
.badge.warn, .doc-chip.warn, .chip.warn { background: var(--warn-bg); color: var(--warn); }
.badge.info, .badge.accent, .badge.teal, .doc-chip.info, .chip.info, .chip.accent { background: var(--info-bg); color: var(--info); }
.badge.off, .badge.neutral, .badge.slate, .doc-chip.off, .chip.off { background: var(--off-bg); color: var(--ink-2); }
.badge.off .bdot, .badge.neutral .bdot, .badge.slate .bdot, .doc-chip.off .bdot { background: var(--off); }
.badge.is-hollow .bdot, .doc-chip.is-hollow .bdot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--off); }
.badge.outline, .doc-chip.outline { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.chip .ic { width: 13px; height: 13px; }
.chip.tiny { font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Aviso: neutro por padrão (canvas e linha; falha técnica e "sem registro" ficam aqui, UXF-11); com cor só quando
   o aviso fala de dado ou de risco. */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-checks);
  background: var(--canvas);
  font-size: var(--fs-sm);
}
.notice > .ic { margin-top: 1px; color: var(--ink-2); }
.notice > div { min-width: 0; }
.notice p + p { margin-top: 2px; }
.notice .n-title { font-weight: 500; color: var(--ink); }
.notice .n-sub { font-size: var(--fs-sm); color: var(--ink-2); }
.notice .btn { margin-top: 10px; }
.notice.danger { background: var(--bad-bg); border-color: var(--bad-line); }
.notice.danger > .ic { color: var(--bad); }
.notice.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.notice.warn > .ic { color: var(--warn); }
.notice.success { background: var(--ok-bg); border-color: var(--ok-line); }
.notice.success > .ic { color: var(--ok); }
.notice.accent, .notice.info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 18%, #fff); }
.notice.accent > .ic, .notice.info > .ic { color: var(--info); }

/* Estado vazio (EST-09): alinhado à esquerda, sem ícone, uma linha de título, uma de orientação e no máximo uma ação. */
.empty {
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: 16px 0 20px;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.empty-title { font-size: var(--fs-body); font-weight: 500; color: var(--ink); }
.empty-text { max-width: 64ch; }
.empty-action { margin-top: 10px; }
.card.flush > .empty, .card.flush .table-wrap + .empty { padding-inline: var(--card-x); }

.svc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 16px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.skeleton { display: grid; gap: 10px; }
.skeleton span { display: block; height: 12px; border-radius: var(--r-xs); background: var(--off-bg); animation: pulse 1.2s ease-in-out infinite; }
.skeleton span:nth-child(2) { width: 82%; }
.skeleton span:nth-child(3) { width: 64%; }
@keyframes pulse { 50% { opacity: .55; } }

/* Esqueleto de lista (skeletonRows, MOT-14): o grid das linhas reais e a altura delas; invisível nas cargas rápidas
   (só aparece depois de 150 ms). */
.skeleton-list { display: grid; animation: skeleton-in 1ms linear 150ms both; }
.skeleton-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 104px; align-items: center; gap: 14px; height: 44px; border-top: 1px solid var(--row-line); }
.skeleton-row:first-child { border-top: 0; }
.skeleton-row > span { display: block; height: 12px; border-radius: var(--r-xs); background: var(--off-bg); animation: pulse 1.2s ease-in-out 150ms infinite; }
.skeleton-row > span:first-child { height: 20px; border-radius: var(--r-plate-sm); }
.skeleton-row > span:nth-child(2) { width: 62%; }
@keyframes skeleton-in { from { visibility: hidden; } }

/* Lista em carga (MOT-02): a tabela e o paginador ficam no lugar; esmaece só se a resposta passar de 150 ms. */
.list-busy[aria-busy="true"] { opacity: .55; pointer-events: none; transition: opacity var(--dur-hover) var(--ease-out) 150ms; }

.progress {
  height: 6px;
  border-radius: var(--r-chip);
  background: var(--fill);
  overflow: hidden;
}
.progress > span, .progress-bar { display: block; height: 100%; border-radius: var(--r-chip); background: var(--accent); }
.progress.success > span { background: var(--ok); }
.progress-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: var(--fs-caption); color: var(--ink-2); }

/* 11. Abas (underline) ===================================================== */
.tabs,
.client-tabs,
.admin-tabs {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  min-width: 0;
  max-width: 100%;
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar,
.client-tabs::-webkit-scrollbar,
.admin-tabs::-webkit-scrollbar { display: none; }
/* Abas que não cabem (RX-RESP-05): a borda direita esmaece enquanto ainda há aba à direita. */
.client-tabs.is-overflow { -webkit-mask-image: linear-gradient(90deg, var(--ink) 85%, transparent); mask-image: linear-gradient(90deg, var(--ink) 85%, transparent); }  /* na máscara só a opacidade conta */
@media (max-width: 640px) { .client-tabs { gap: 18px; } }

.tab,
.admin-tab,
.client-tabs > button,
.client-tabs > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 7px;
  height: 42px;
  padding: 0 1px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  border-radius: 0;
  /* Sublinhado muda no mesmo quadro do conteúdo (MOT-17): só a cor anima. */
  transition: color var(--dur-hover) var(--ease-out);
}
.tab .ic,
.admin-tab .ic,
.client-tabs > * .ic { width: 15px; height: 15px; }
.tab:hover,
.admin-tab:hover,
.client-tabs > *:hover { color: var(--text); }
.tab[aria-selected="true"], .tab.active, .tab[aria-current="page"],
.admin-tab[aria-selected="true"], .admin-tab.active,
.client-tabs > [aria-selected="true"], .client-tabs > .active, .client-tabs > [aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--text);
}
.tab:focus-visible,
.admin-tab:focus-visible,
.client-tabs > *:focus-visible { outline-offset: -2px; border-radius: var(--r-xs); }

.tab-count {
  padding: 1px 6px;
  border-radius: var(--r-chip);
  background: var(--fill);
  font-size: var(--fs-chip);
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 12. Tabelas ============================================================== */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  font-size: var(--fs-caption);
  font-weight: 500;
  text-align: left;
  color: var(--muted);
  white-space: nowrap;
}
.table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--row-line);
  vertical-align: middle;
}
.table th:first-child, .table td:first-child { padding-left: var(--card-x); }
.table th:last-child, .table td:last-child { padding-right: var(--card-x); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--dur-hover) var(--ease-out); }
.table tbody tr:hover { background: var(--hover); }
.table tbody tr.selected, .table tbody tr[aria-selected="true"] { background: var(--selected); }
.table tbody tr.clickable { cursor: pointer; }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .nowrap { white-space: nowrap; }
.table .muted { color: var(--muted); }
.table td.wrap { white-space: normal; overflow-wrap: anywhere; max-width: 360px; }
.table tfoot td { border-top: 1px solid var(--line); border-bottom: 0; font-weight: 500; }
.table.compact td { padding-top: 9px; padding-bottom: 9px; }
.table.inset th:first-child, .table.inset td:first-child { padding-left: 0; }
.table.inset th:last-child, .table.inset td:last-child { padding-right: 0; }
.table-min-640 { min-width: 640px; }
.table-min-760 { min-width: 760px; }
.table-min-860 { min-width: 860px; }
.table .progress { min-width: 90px; }
.svc-progress-cell { display: grid; gap: 4px; min-width: 110px; font-size: var(--fs-caption); color: var(--muted); }

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 var(--card-x) 14px;
}
.toolbar .search-field { position: relative; display: flex; align-items: center; flex: 1 1 240px; max-width: 360px; }
.toolbar .search-field .ic { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.toolbar .search-field input {
  width: 100%;
  height: 36px;
  padding: 0 10px 0 34px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  font-size: var(--fs-sm);
}
.toolbar .search-field input:focus { border-color: var(--brand); box-shadow: var(--ring); }
.toolbar .spacer { flex: 1; }
.result-count { font-size: var(--fs-caption); color: var(--muted); }

.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.svc-page-of { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; }
.svc-page-input,
.svc-size {
  height: var(--ctl-h-sm);
  padding: 0 8px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-sm);
}
.svc-page-input { width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.svc-size { width: auto; padding-right: 28px; background-position: right 8px center; }
.svc-page-input:focus, .svc-size:focus { border-color: var(--brand); box-shadow: var(--ring); }

/* 13. Início =============================================================== */
/* A2: Início como mesa de trabalho (rodada de 26/10/2026, §1.3). Sem título visível: o campo único é o herói (48px,
   chave em mono 16px), com o tipo reconhecido e os produtos do contrato logo abaixo; depois a faixa do mês, as últimas
   consultas e, ao lado, as consultas dos últimos 30 dias e os lotes em andamento. */
.home { display: grid; gap: var(--gap); min-width: 0; }
.home > * { min-width: 0; }
.home-desk { padding: 20px var(--card-x) 18px; border: 1px solid var(--hairline); border-radius: var(--r-sheet); background: var(--sheet); }
.home-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.home-input { position: relative; min-width: 0; }
.home-key-ic { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; color: var(--ink-3); transform: translateY(-50%); pointer-events: none; }
.input.home-key { height: 48px; padding: 0 14px 0 44px; font-family: var(--mono); font-size: var(--fs-key); letter-spacing: .02em; color: var(--ink); }
.input.home-key::placeholder { font-family: var(--font); font-size: var(--fs-value); letter-spacing: 0; }
.home-submit { height: 48px; min-width: 136px; font-size: var(--fs-value); }
.home-query > .field-error { margin-top: 8px; }
.home-status:not(:empty) { margin-top: 10px; }
.home-hint { font-size: var(--fs-caption); line-height: 1.45; color: var(--ink-2); }
.home-detected { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.home-detected .link-action { margin-left: -2px; }
.home-options { display: grid; grid-template-columns: minmax(0, 1fr) auto fit-content(48ch); margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--sheet); overflow: hidden; }
.home-options.is-one-family { grid-template-columns: minmax(0, 1fr) fit-content(48ch); }
.home-options.is-one-family .home-option-family { display: none; }
.home-option {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  gap: 2px 16px;
  min-height: 42px;
  padding: 8px 14px;
  border-top: 1px solid var(--row-line);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out);
}
.home-option:first-child { border-top: 0; }
.home-option:hover { background: var(--hover); }
.home-option[aria-selected="true"] { background: var(--brand-soft); }
.home-option-name { min-width: 0; font-size: var(--fs-body); font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.home-option[aria-selected="true"] .home-option-name { color: var(--brand-text); }
.home-option-family { font-size: var(--fs-caption); color: var(--ink-2); white-space: nowrap; }
.home-option-bill { font-size: var(--fs-sm); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.home-foot { margin-top: 8px; font-size: var(--fs-caption); color: var(--ink-2); }
.home-foot:empty { display: none; }
.home-run:not(:empty) { margin-top: 14px; }
/* Faixa do mês fora da folha: células brancas (o canvas some no fundo do aplicativo). */
.home > .kpi-strip .kpi-cell { background: var(--sheet); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
.home-grid > *, .home-side > * { min-width: 0; }
.home-side { display: grid; gap: var(--gap); align-content: start; }
@media (min-width: 1100px) {
  /* RC-F3: a coluna das últimas consultas fica mais larga, para o nome do produto caber sem cortar. */
  .home-grid { grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1fr); }
}
@media (max-width: 640px) {
  .home-desk { padding: 16px; }
  .home-field { grid-template-columns: minmax(0, 1fr); }
  .home-submit { width: 100%; }
  .home-options, .home-options.is-one-family { grid-template-columns: minmax(0, 1fr); }
  .home-option { padding: 10px 12px; }
  .home-option-family { display: none; }
  .home-option-bill { text-align: left; }
  /* No celular, as cinco mais recentes; o resto fica no histórico. */
  .home .recent-list > li:nth-child(n+6) { display: none; }
}

/* Consultas por dia (DAT-02): uma série em barras verticais com os tokens de gráfico, sem grade. A coluna inteira é o
   alvo do ponteiro; o foco percorre os dias pelas setas. */
.day-chart { min-width: 0; }
.day-plot { position: relative; padding-top: 18px; border-radius: var(--r-xs); }
.day-plot:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
.day-max { position: absolute; top: 0; left: 0; font-size: 11px; line-height: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.day-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); align-items: end; column-gap: 2px; height: 96px; border-bottom: 1px solid var(--chart-axis); }
.day-col { display: flex; align-items: flex-end; justify-content: center; height: 100%; min-width: 0; }
.day-col > i { display: block; width: min(14px, 100%); height: max(3px, calc(var(--h, 0) * 100%)); border-radius: var(--r-bar) var(--r-bar) 0 0; background: var(--chart-bar); transition: background var(--dur-hover) var(--ease-out); }
.day-col.is-zero > i { height: 2px; border-radius: 0; background: var(--chart-track); }
.day-col.is-today > i, .day-col.is-active > i { background: var(--chart-bar-hi); }
.day-col.is-zero.is-active > i { background: var(--chart-axis); }
.day-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.day-tip {
  position: absolute;
  top: 6px;
  z-index: 2;
  display: grid;
  gap: 1px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sheet);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-caption);
  line-height: 1.35;
  color: var(--ink-2);
  white-space: nowrap;
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.day-tip[data-edge="start"] { transform: translate(-12px, -100%); }
.day-tip[data-edge="end"] { transform: translate(calc(-100% + 12px), -100%); }
.day-tip strong { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.day-chart > .table-wrap { max-height: 320px; overflow-y: auto; }
.table.day-table th:first-child, .table.day-table td:first-child { padding-left: 0; }
.table.day-table th:last-child, .table.day-table td:last-child { padding-right: 0; }

/* Lotes em andamento (DAT-15): uma linha por lote com a contagem, a barra de 4px e o percentual. */
.batch-lines { margin: 0; padding: 0 0 6px; list-style: none; }
.batch-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 88px 38px;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px var(--card-x);
  border-top: 1px solid var(--row-line);
  color: var(--ink);
  transition: background var(--dur-hover) var(--ease-out);
}
.batch-lines > li:first-child .batch-line { border-top: 0; }
.batch-line:hover { background: var(--hover); }
.batch-line:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.batch-line-name { min-width: 0; font-size: var(--fs-body); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.batch-line-count, .batch-line-pct { font-size: var(--fs-caption); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.batch-line-pct { text-align: right; }
.batch-line-bar { position: relative; height: 4px; border-radius: var(--r-bar); background: var(--chart-track); overflow: hidden; }
.batch-line-bar > i { position: absolute; inset: 0; border-radius: var(--r-bar); background: var(--chart-bar-hi); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* Primeiros passos (ROB-19): três linhas acionáveis, sem ilustração. */
.first-steps { margin: 0; padding: 0 0 4px; list-style: none; }
.first-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; padding: 14px var(--card-x); border-top: 1px solid var(--row-line); }
.first-step:first-child { border-top: 0; }
.first-step-title { font-size: var(--fs-body); font-weight: 500; color: var(--ink); }
.first-step-text { max-width: 72ch; margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-2); }
@media (max-width: 640px) {
  .batch-line { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .batch-line-bar { grid-column: 1; }
  .first-step { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

.client-panel,
.access-card {
  min-width: 0;
  padding: var(--card-y) var(--card-x);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sheet);
  background: var(--surface);
}

/* Métricas compactas: faixa baixa ou coluna lateral */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sheet);
  background: var(--surface);
  overflow: hidden;
}
.kpi {
  min-width: 0;
  padding: 16px 20px;
  border-left: 1px solid var(--hairline);
  margin-left: -1px;
}
.kpi-label { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-2); }
.kpi-label .ic { width: 15px; height: 15px; color: var(--ink-3); }
.kpi-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.kpi-value {
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.kpi-meta { font-size: var(--fs-caption); color: var(--muted); }
.kpi-meta strong { font-weight: 500; color: var(--text-2); }
.kpi-meta.accent strong { color: var(--accent-text); }

.contract-page, .module-page { display: grid; gap: 22px; }
.contract-page > .page-head, .module-page > .page-head { margin-bottom: 0; }
.contract-page > .contract-summary { justify-content: flex-start; }
.contract-page > .contract-summary > div { flex: 1; margin-right: 0; }
.entity-document { font-size: var(--fs-body); font-weight: 500; }

/* 14. Módulos de consulta ================================================== */
/* A2: a página própria de produto e a central de consultas saíram (as cinco famílias usam a página de família); ficam
   os selos de produto usados nas listas e nos resultados. */
.mod-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  color: var(--text-2);
}
.mod-ico.sm { width: 28px; height: 28px; border-radius: var(--r-sm); }
.mod-ico.sm .ic { width: 15px; height: 15px; }
.mod-ico.org { font-size: var(--fs-caption); font-weight: 500; }
.mod-tag { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

.module-source { font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); }

/* 15. Resultado e entidades =============================================== */
/* As fichas antigas (pessoa, empresa, explorador lista + detalhe, painel postal) saíram: os resultados usam a composição
   da ficha (seção 24 e portal-extra.css). Fica o que as telas ainda montam. */
.result-workspace { display: grid; gap: 20px; min-width: 0; }
.result-workspace > * { min-width: 0; }

/* "Cobrança desta consulta" no rodapé da folha */
details.result-meta-disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  font-size: var(--fs-caption);
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--r-xs);
}
details.result-meta-disclosure > summary::-webkit-details-marker { display: none; }
details.result-meta-disclosure > summary:hover { color: var(--text); }
details.result-meta-disclosure > .fields { margin-top: 10px; }

/* Fatos em grade (resumo da ficha do cliente na administração) */
.entity-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
}
.entity-facts > * { min-width: 0; padding: 10px 0; border-top: 1px solid var(--row-line); }
.entity-facts dt { font-size: var(--fs-caption); color: var(--muted); }
.entity-facts dd { margin-top: 2px; font-size: var(--fs-body); overflow-wrap: anywhere; }
.entity-facts .wide { grid-column: 1 / -1; }

/* Documento clicável dentro de uma ficha (nova consulta) */
.entity-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--text);
  border-radius: var(--r-xs);
  cursor: pointer;
}
.entity-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.entity-link:focus-visible,
.origin-link:focus-visible,
.row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 16. Origem da consulta =================================================== */
/* Consulta-filha de uma composta: a volta à consulta de origem, acima da folha. */
.query-origin {
  display: flex;
  align-items: center;
  gap: 6px 10px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.origin-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  font: inherit;
  color: var(--text-2);
  cursor: pointer;
}
.origin-link .ic { width: 14px; height: 14px; }
.origin-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.query-origin .sep { color: var(--ink-3); }

/* 17. CEP e mapa =========================================================== */
/* A área postal e o mapa da área do CEP (Leaflet com os tiles do portal) moram em portal-extra.css: .doc-postal,
   .postal-map. */

/* 18. Acesso, login e conta =============================================== */
/* Entrada (UXF-10, CAP-14): acima de 900px, duas colunas (o formulário na folha; no canvas, a mini-ficha estática e o
   que o portal faz); abaixo, só o formulário, centralizado na altura da tela. */
.auth {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 32px 16px;
  background: var(--backdrop);
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 456px) minmax(0, 1fr);
  width: min(1000px, 100%);
  min-height: 580px;
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  background: var(--sheet);
  box-shadow: var(--shadow-frame);
  overflow: hidden;
}
.auth-card { display: flex; flex-direction: column; min-width: 0; padding: 36px 40px 26px; }
.auth-brand { display: flex; align-items: center; gap: 10px; min-height: 30px; margin-bottom: 40px; }
.auth-brand .brand-mark, .auth-brand .brand-mark img { width: 30px; }
.auth-brand .brand-mark img { height: 24px; }
.auth-brand .brand-name { font-size: var(--fs-title); }
.auth-panels { flex: 1; display: grid; align-content: center; min-width: 0; }
.auth h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
.auth .page-sub { margin: 6px 0 24px; color: var(--ink-2); }
.auth .form-grid { gap: 16px; }
.auth .btn-block { margin-top: 4px; }
.password-field { position: relative; display: flex; align-items: center; min-width: 0; }
.password-field .input { padding-right: 46px; }
.password-toggle {
  position: absolute;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-2);
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.password-toggle:hover { background: var(--fill); color: var(--ink); }
.password-toggle[aria-pressed="true"] { color: var(--ink); }
.password-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.caps-hint { display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: 500; color: var(--warn); }
.caps-hint .ic { width: 14px; height: 14px; }
#login-form .field-error {
  padding: 10px 12px;
  border-radius: var(--r-ctl);
  background: var(--bad-bg);
}
#login-form .field-error:empty { display: none; }
.access-toggle { justify-self: start; margin: 14px 0 0 -8px; }
.access-help { max-width: 48ch; margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.auth-foot { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: var(--fs-caption); color: var(--ink-2); text-wrap: pretty; }

/* Coluna do canvas: uma folha de resultado em miniatura, estática e sem dado de ninguém, e três frases. */
.auth-aside {
  display: grid;
  align-content: center;
  gap: 28px;
  min-width: 0;
  padding: 44px 48px;
  border-left: 1px solid var(--line);
  background: var(--canvas);
}
.mini-sheet { display: grid; gap: 16px; min-width: 0; padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: var(--r-sheet); background: var(--sheet); }
.mini-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-width: 0; }
.mini-title { font-size: var(--fs-value); font-weight: 600; line-height: 1.3; color: var(--ink); }
.mini-meta { margin-top: 3px; font-size: var(--fs-caption); color: var(--ink-2); }
.mini-meta .mono { font-size: var(--fs-caption); }
.mini-sheet .plate { flex: none; padding: 4px 11px 6px; font-size: var(--fs-title); }
.mini-sheet .plate small { margin-bottom: 3px; }
.mini-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--line); border-radius: var(--r-checks); background: var(--line); overflow: hidden; }
.mini-checks > div { min-width: 0; padding: 10px 12px 11px; background: var(--canvas); }
.mini-checks dt, .mini-grid dt { font-family: var(--mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-checks dd { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.mini-checks dd i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.mini-grid > div { min-width: 0; }
.mini-grid dd { margin-top: 2px; font-size: var(--fs-sm); color: var(--ink); }
.auth-points { display: grid; gap: 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.auth-points li { display: flex; align-items: baseline; gap: 10px; }
.auth-points li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); transform: translateY(-2px); }
@media (max-width: 1100px) {
  .auth-aside { padding: 40px 32px; }
}
@media (max-width: 900px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); width: min(456px, 100%); min-height: 0; }
  .auth-aside { display: none; }
  .auth-brand { margin-bottom: 32px; }
}
@media (max-width: 420px) {
  .auth { padding: 16px; }
  .auth-layout { border-radius: var(--r-sheet); }
  .auth-card { padding: 28px 22px 20px; }
  .auth h1 { font-size: var(--fs-h1-sm); }
  .auth-foot { margin-top: 26px; }
}

.account-page { display: grid; gap: var(--gap); max-width: 880px; min-width: 0; }
.access-card { display: grid; gap: 16px; }
.access-card > h2, .access-card > header h2 { font-size: var(--fs-title); font-weight: 500; }
.access-card > p, .access-card > header p { font-size: var(--fs-sm); color: var(--muted); }
.access-form { display: grid; gap: 16px; max-width: 560px; min-width: 0; }
.access-form .form-actions { justify-content: flex-start; margin-top: 4px; }


.access-link-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-checks);
  background: var(--subtle);
}
.access-link-card > div:has(> .btn),
.access-link-card > div:has(> button) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.access-link-card > div > .input,
.access-link-card > div > code,
.access-link-card > div > output { flex: 1 1 260px; min-width: 0; }
.access-link-card code,
.access-link-card output,
.access-link-card .access-link-url {
  display: block;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.access-link-card .input { font-family: var(--mono); font-size: var(--fs-caption); }
.access-link-card textarea.input { min-height: 64px; word-break: break-all; }

.member { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* 19. Administração ======================================================== */
.admin-client-page { display: grid; gap: 20px; min-width: 0; }
.admin-client-page > * { min-width: 0; }
.client-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  min-width: 0;
}
.client-heading > div:first-child { display: flex; align-items: center; gap: 14px; min-width: 0; }
.client-heading > div:first-child { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; }
.client-heading .eyebrow { grid-column: 1 / -1; }
.client-heading .badge { align-self: center; }
.admin-client-page > .btn { justify-self: start; }
.client-panel form:has(#tenant-name) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 24px; }
.client-panel form:has(#tenant-name) > .check, .client-panel form:has(#tenant-name) > .form-actions { grid-column: 1 / -1; }
.client-heading .avatar, .client-heading .mod-ico { width: 44px; height: 44px; }
.client-heading h1 { font-size: var(--fs-h1); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; overflow-wrap: anywhere; }
.client-heading p { margin-top: 2px; font-size: var(--fs-sm); color: var(--muted); }
.client-panel { padding: 22px var(--card-x) 24px; }
.client-tabs + .client-panel { margin-top: 0; }

.contract-editor { display: grid; min-width: 0; }
.contract-editor > section,
.contract-editor > fieldset,
.contract-editor > .module-rule {
  min-width: 0;
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
}
.contract-editor > :first-child { padding-top: 0; border-top: 0; }
.contract-editor > .form-actions { margin-top: 0; padding-top: 18px; border-top: 1px solid var(--hairline); }
.contract-editor h3, .contract-editor legend { font-size: var(--fs-value); font-weight: 500; }

.module-rule { display: grid; gap: 12px; min-width: 0; }
.module-rule > header,
.module-rule > .module-rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
}
.module-rule h4 { font-size: var(--fs-body); font-weight: 500; }

.rule-editor { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rule-editor legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-size: var(--fs-body); font-weight: 500; }
.rule-editor legend + * { clear: both; }
.rule-editor .form-actions { margin-top: 4px; }
.rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.admin-tabs { margin-bottom: 0; }

/* Consultas compostas (montador do dono): lista, formulário com produtos marcados e ordenados, uso por cliente. */
.composite-page .client-heading h1 { overflow-wrap: anywhere; }
.composite-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px; align-items: start; min-width: 0; }
.composite-layout > * { min-width: 0; }
.cp-form { gap: 22px; }
.cp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.cp-fields > .cp-desc { grid-column: 1 / -1; }
.cp-compose { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cp-compose > legend { float: left; width: 100%; padding: 0; font-size: var(--fs-value); font-weight: 600; color: var(--ink); }
.cp-compose > legend + * { clear: both; }
.cp-compose-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 24px; }
.cp-components { display: grid; gap: 2px; padding: 6px 10px 10px; border: 1px solid var(--hairline); border-radius: var(--r-sheet); background: var(--surface); }
.cp-group { display: grid; gap: 2px; }
.cp-group + .cp-group { margin-top: 6px; }
.cp-option.check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: var(--r-ctl); }
.cp-option.check:hover { background: var(--hover); }
.cp-option.check input { margin-top: 3px; }
.cp-option > span { display: grid; gap: 1px; min-width: 0; }
.cp-option b { font-size: var(--fs-body); font-weight: 500; color: var(--ink); }
.cp-option small { font-size: var(--fs-caption); line-height: 1.4; color: var(--ink-2); }
.cp-option:has(input:checked) b { color: var(--brand-text); }
.cp-order-box { position: sticky; top: 84px; align-self: start; display: grid; gap: 8px; align-content: start; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--r-sheet); background: var(--canvas); }
.cp-order-box .section-title { margin: 0; }
.cp-order { list-style: none; display: grid; margin: 0; padding: 0; }
.cp-order li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--row-line); }
.cp-order li:first-child { border-top: 0; }
.cp-pos { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.cp-name { font-size: var(--fs-body); color: var(--ink); overflow-wrap: anywhere; }
.cp-order .row-actions { flex-wrap: nowrap; gap: 2px; }
.btn.icon-only { padding: 0 8px; }
.btn.icon-only > span:not(.ic) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
/* Composta inativa: o chip diz "Inativa" e a linha ganha o tom do canvas; o texto continua legível (AUD-09). */
.composites-table .is-inactive td { background: var(--canvas); }
.composites-table .is-inactive td, .composites-table .is-inactive .row-link { color: var(--ink-2); }
/* Nome e "n produtos · chave" quebram em vez de cortar; a situação e a data da última consulta ficam inteiras. */
@media (min-width: 641px) { .composites-table td.c-main { min-width: 200px; } }
@media (min-width: 1400px) { .composites-table td.c-main { min-width: 236px; } }
.composites-table .c-main .row-link, .composites-table .c-main .cell-sub { white-space: normal; overflow: visible; text-overflow: clip; }
.composites-table .c-status .cell-sub { overflow: visible; text-overflow: clip; }
.composites-table .is-inactive .badge { color: var(--ink-2); }
@media (max-width: 1100px) {
  .composite-layout, .cp-compose-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-order-box { position: static; }
}
@media (max-width: 640px) {
  .cp-fields, .cp-kpis { grid-template-columns: minmax(0, 1fr); }
}

/* 20. Lotes ================================================================ */
.batch-wizard { display: grid; gap: 20px; min-width: 0; }
.batch-wizard > .wizard-panel { padding: 8px 0 0; border: 0; border-radius: 0; background: transparent; }
.batch-progress { display: grid; gap: 16px; margin-bottom: 22px; }
.batch-progress > .badge { justify-self: start; }
.batch-progress .progress { margin: 0; }
.progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.progress-meta strong { font-weight: 500; }
.progress-meta > span { font-variant-numeric: tabular-nums; color: var(--muted); }
.batch-totals, .validation-summary { display: flex; flex-wrap: wrap; gap: 12px 26px; font-size: var(--fs-sm); color: var(--muted); }
.validation-summary { padding: 16px 18px; background: var(--fill); border-radius: var(--r-ctl); }
.validation-summary strong { color: var(--ok); font-weight: 500; }
.review-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px 24px; }
.review-summary dt { font-size: var(--fs-caption); color: var(--muted); margin-bottom: 4px; }
.review-summary dd { font-size: var(--fs-body); overflow-wrap: anywhere; }
.batch-items { gap: 16px; }
.batch-items .card-head { margin-bottom: 0; }

.wizard-steps {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wstep;
}
.wizard-step {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 0;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  color: var(--muted);
  white-space: nowrap;
  counter-increment: wstep;
}
.wizard-step::before {
  content: counter(wstep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.wizard-step:has(.wizard-step-num, .step-num)::before { display: none; }
.wizard-step:has(> span:first-child)::before { display: none; }
.wizard-step > span:first-child { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); }
.wizard-step[aria-current="step"] > span:first-child { background: var(--text); color: white; border-color: var(--text); }
.wizard-step.complete > span:first-child { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.wizard-step .wizard-step-num,
.wizard-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  font-size: var(--fs-caption);
}
.wizard-step:not(:last-child)::after {
  content: "";
  flex: 1 1 24px;
  min-width: 16px;
  height: 1px;
  background: var(--line);
}
.wizard-step > span:not(.wizard-step-num):not(.step-num) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wizard-step.active,
.wizard-step[aria-current="step"],
.wizard-step[aria-selected="true"] { color: var(--text); }
.wizard-step.active::before,
.wizard-step[aria-current="step"]::before,
.wizard-step[aria-selected="true"]::before,
.wizard-step.active .wizard-step-num,
.wizard-step.active .step-num,
.wizard-step[aria-current="step"] .wizard-step-num,
.wizard-step[aria-current="step"] .step-num {
  border-color: var(--text);
  background: var(--text);
  color: #fff;
}
.wizard-step.done,
.wizard-step.complete,
.wizard-step[data-state="done"] { color: var(--text-2); }
.wizard-step.done::before,
.wizard-step.complete::before,
.wizard-step[data-state="done"]::before {
  content: "✓";
  border-color: var(--ok-line);
  background: var(--ok-bg);
  color: var(--ok);
}
button.wizard-step:hover { color: var(--text); }
button.wizard-step:disabled { cursor: default; }

.wizard-panel {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 24px var(--card-x);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sheet);
  background: var(--surface);
}
.wizard-panel > h2, .wizard-panel > header h2 { font-size: var(--fs-title); font-weight: 500; }
.wizard-panel > p, .wizard-panel > header p { font-size: var(--fs-sm); color: var(--muted); max-width: 72ch; }
.wizard-panel .form-actions { margin-top: 0; padding-top: 16px; border-top: 1px solid var(--hairline); }

.file-drop {
  display: grid;
  place-items: center;
  gap: 8px;
  min-width: 0;
  padding: 32px 20px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-checks);
  background: var(--subtle);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out);
}
.file-drop .ic { width: 22px; height: 22px; color: var(--ink-3); }
.file-drop strong { font-weight: 500; color: var(--text); }
.file-drop small, .file-drop .field-help { font-size: var(--fs-caption); color: var(--muted); }
.file-drop:hover,
.file-drop.dragover,
.file-drop.is-dragging,
.file-drop[data-dragging="true"] { border-color: var(--brand-line-strong); background: var(--brand-soft); }
.file-drop:focus-within { border-color: var(--brand); box-shadow: var(--ring); }

.file-input,
.svc-file {
  width: 100%;
  max-width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
}
.file-drop .file-input { width: auto; border: 0; background: transparent; padding: 0; }
.file-input::file-selector-button,
.svc-file::file-selector-button {
  height: var(--ctl-h-sm);
  margin-right: 12px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font: 500 var(--fs-sm) var(--font);
  color: var(--text);
  cursor: pointer;
}
.file-input:hover::file-selector-button,
.svc-file:hover::file-selector-button { background: var(--hover); }

.batch-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.batch-filters .input, .batch-filters .select { width: auto; min-width: 160px; height: 36px; }
.batch-items { display: grid; min-width: 0; }
.batch-items > li,
.batch-items > .batch-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--row-line);
  min-width: 0;
}
.batch-items > :first-child { border-top: 0; }
.batch-name { display: block; min-width: 0; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }

.svc-batch-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
  min-width: 0;
}
.svc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-checks);
  overflow: hidden;
}
.svc-stat {
  min-width: 0;
  margin-left: -1px;
  padding: 12px 16px;
  border-left: 1px solid var(--hairline);
  background: var(--surface);
}
.svc-stat .lbl { display: block; font-size: var(--fs-caption); color: var(--muted); }
.svc-stat .num {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-count);
  font-weight: 500;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.svc-stat.ok .num { color: var(--ok); }
.svc-stat.bad .num { color: var(--bad); }

/* A2: Novo lote em quatro passos (Produto → Arquivo → Revisão → Processamento, UXF-13, CAP-12). O produto vem numa
   lista de radios por família, com a chave e a cobrança do contrato; a revisão usa a faixa de indicadores. */
/* O texto de apoio fica junto do título do passo (o painel separa os blocos por 18px). */
.batch-wizard .wizard-panel > h2 + p { margin-top: -10px; }
.batch-picker { display: grid; gap: 10px; min-width: 0; }
/* Sem rolagem própria (RC-F12): a lista cortava no meio de uma linha com altura sobrando; rola com a página. */
.batch-options { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--sheet); }
.batch-family { min-width: 0; margin: 0; padding: 0; border: 0; }
.batch-family + .batch-family { border-top: 1px solid var(--line); }
.batch-family > legend { float: left; width: 100%; padding: 12px 14px 6px; font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.batch-family > legend + * { clear: both; }
.batch-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, max-content);
  align-items: center;
  gap: 2px 12px;
  min-height: 48px;
  padding: 8px 14px;
  border-top: 1px solid var(--row-line);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out);
}
.batch-family > legend + .batch-option { border-top: 0; }
.batch-option:hover { background: var(--hover); }
.batch-option:has(input:checked) { background: var(--brand-soft); }
.batch-option[hidden] { display: none; }
.batch-option input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.batch-option-text { display: grid; min-width: 0; }
.batch-option-name { font-size: var(--fs-body); font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.batch-option:has(input:checked) .batch-option-name { color: var(--brand-text); }
.batch-option-key { font-size: var(--fs-caption); color: var(--ink-2); }
.batch-option-bill { max-width: 40ch; font-size: var(--fs-sm); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.batch-picked { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--canvas); font-size: var(--fs-sm); color: var(--ink-2); }
/* Toque: sem "arraste para cá" (o botão de escolher basta). */
@media (pointer: coarse) { .file-drop .file-drop-title, .file-drop .file-drop-or { display: none; } }
.batch-picked .btn { max-width: 100%; height: auto; min-height: var(--ctl-h-sm); padding-block: 6px; line-height: 1.3; white-space: normal; text-align: left; }
.batch-picked code { padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--r-plate-sm); background: var(--sheet); font-family: var(--mono); font-size: var(--fs-caption); color: var(--ink); }
.batch-column { max-width: 320px; }
.batch-validating { font-size: var(--fs-sm); color: var(--ink-2); }
.validation-summary { align-items: center; }
.validation-summary > .btn { margin-left: auto; }
.wizard-panel .form-actions .form-why { margin-right: auto; font-size: var(--fs-caption); color: var(--ink-2); }
.batch-name-field { max-width: 420px; }
.batch-sample { display: grid; gap: 6px; }
.batch-sample > h3 { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.table.preview-table th:first-child, .table.preview-table td:first-child { width: 88px; padding-left: 0; }
.table.preview-table th:last-child, .table.preview-table td:last-child { padding-right: 0; }
.batch-confirm { align-items: flex-start; padding: 12px 14px; border: 1px solid var(--warn-line); border-radius: var(--r-ctl); background: var(--warn-bg); font-size: var(--fs-sm); color: var(--ink); }
.batch-confirm input { margin-top: 2px; }
.batch-run { display: grid; gap: 12px; }
.batch-run > .badge { justify-self: start; }
.batch-empty .empty-facts { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--ink-2); }
.batch-items .card-head { padding-bottom: 14px; }
.batch-table .b-product { min-width: 180px; }
@media (max-width: 640px) {
  /* Passos compactos no celular: os números e só o rótulo do passo atual. */
  .batch-wizard .wizard-steps { gap: 6px; }
  .batch-wizard .wizard-step { flex: 0 0 auto; flex-basis: auto; }
  .batch-wizard .wizard-step[aria-current="step"] { flex: 1 1 auto; }
  .batch-wizard .wizard-step:not([aria-current="step"]) > span:last-child { display: none; }
  .batch-wizard .wizard-step:not(:last-child)::after { flex: 0 0 12px; min-width: 12px; }
  .batch-option { grid-template-columns: auto minmax(0, 1fr); }
  .batch-option-bill { grid-column: 2; max-width: none; text-align: left; }
  .validation-summary > .btn { margin-left: 0; }
}

/* 21. Diálogos e toasts ==================================================== */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--scrim);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dialog {
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  border: 1px solid var(--line);
  border-radius: var(--r-sheet);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.dialog.wide { width: min(760px, 100%); }
.dialog:focus, .dialog:focus-visible { outline: none; }
.dialog-head,
.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px var(--card-x) 16px;
  border-bottom: 1px solid var(--hairline);
}
.dialog-head h2, .drawer-head h2 { font-size: var(--fs-title); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.dialog-head p, .drawer-head p { margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-2); }
.dialog-body,
.drawer-body {
  flex: 1;
  min-height: 0;
  padding: 20px var(--card-x) 22px;
  overflow-y: auto;
}
.dialog-foot,
/* Pergunta de saída no próprio rodapé (RF-F05, RF-F06): a frase ocupa a linha e os dois botões ficam embaixo dela. */
.drawer-foot.is-asking { align-items: center; background: var(--canvas); }
.drawer-ask { flex: 1 1 100%; margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); }
.drawer-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px var(--card-x);
  border-top: 1px solid var(--hairline);
}

/* #dialog-root: entrada e saída (MOT-05). A entrada parte do estado inicial já calculado; a saída (.closing) é mais
   curta e mais discreta, e o conteúdo só é removido no fim dela. */
#dialog-root .overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}
#dialog-root.open .overlay { opacity: 1; }
.drawer {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(520px, calc(100vw - 24px));
  border: 1px solid var(--line);
  border-radius: var(--r-sheet);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateX(16px);
  transition: transform 220ms var(--ease-drawer), opacity var(--dur-ui) var(--ease-out);
  overflow: hidden;
}
#dialog-root.open .drawer { opacity: 1; transform: none; }
.drawer:focus, .drawer:focus-visible { outline: none; }
#dialog-root .drawer.svc-modal {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(520px, calc(100vw - 24px));
  max-height: 88vh;
  max-height: 88dvh;
  transform: translate(-50%, -48%) scale(.98);
  transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
}
#dialog-root.open .drawer.svc-modal { transform: translate(-50%, -50%); }
/* RM-MOT-R07: véu e painel saem juntos, na mesma curva de saída curta, e o painel que sai não recebe um segundo clique. */
#dialog-root.closing { pointer-events: none; }
#dialog-root.closing .overlay { opacity: 0; transition: opacity var(--dur-exit) var(--ease-out); }
#dialog-root.closing .drawer { opacity: 0; transform: translateX(8px); transition-duration: var(--dur-exit); transition-timing-function: var(--ease-out); }
#dialog-root.closing .drawer.svc-modal { transform: translate(-50%, -49%) scale(.99); }

/* Toasts (MOT-06, AUD-11): os de erro ficam até serem fechados (região role=alert); os demais somem sozinhos, com
   pausa enquanto o ponteiro ou o foco estão neles; saída curta antes de remover. */
.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: grid;
  justify-items: end;
  gap: 8px;
  pointer-events: none;
}
.toasts { display: grid; justify-items: end; gap: 8px; }
.toasts:empty { display: none; }
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: max-content;
  max-width: 400px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-checks);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink);
  pointer-events: auto;
  animation: toast-in 200ms var(--ease-out);
}
.toast > .ic { margin-top: 1px; color: var(--ok); }
.toast > span:not(.ic) { min-width: 0; overflow-wrap: anywhere; }
.toast.neutral > .ic { color: var(--ink-2); }
.toast.danger > .ic { color: var(--bad); }
.toast.warn > .ic { color: var(--warn); }
.toast .toast-close { margin: -6px -6px -6px 2px; }
/* Aviso com ação (consulta concluída fora da tela, ROB-24): o link "Abrir" no fim do aviso. */
.toast .toast-action { flex: none; margin: -5px -6px -5px 4px; }
.toast.leaving { opacity: 0; transform: translateY(4px); transition: opacity var(--dur-exit) var(--ease-out), transform var(--dur-exit) var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
/* Celular: a pilha (o contêiner posicionado) ocupa a largura entre as margens e o texto quebra, em vez de o aviso passar
   da tela. */
@media (max-width: 640px) {
  .toast-stack { left: 16px; right: 16px; bottom: 16px; }
  .toast { width: auto; max-width: none; }
}

/* 22. Compatibilidade de componentes existentes =========================== */
.candidates { display: grid; min-width: 0; }
.candidate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--row-line);
}
.candidate:first-child { border-top: 0; }
.candidate .c-name { font-weight: 500; }
.candidate .c-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-caption); color: var(--muted); }

.catalog { display: grid; gap: 2px; }
.cat-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--r-card);
  background: none;
  text-align: left;
}
.cat-item:hover { background: var(--hover); }
.cat-item[aria-pressed="true"] { background: var(--selected); }
.cat-item .c-title { font-size: var(--fs-body); font-weight: 500; }
.cat-item .c-desc { font-size: var(--fs-caption); color: var(--muted); }
.cat-item .chev { color: var(--faint); }

.session-list { display: grid; }
.session-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--row-line);
  background: none;
  text-align: left;
}
.session-item:first-child { border-top: 0; }
.session-item:hover .cell-title, .session-item[aria-current="true"] .cell-title { text-decoration: underline; text-underline-offset: 3px; }

.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mode { position: relative; display: block; }
.mode input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.mode-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-checks);
  background: var(--surface);
  transition: border-color var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out);
}
.mode-box .m-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-2); }
.mode-box .m-title { font-size: var(--fs-body); font-weight: 500; }
.mode-box .m-desc { margin-top: 2px; font-size: var(--fs-caption); color: var(--muted); }
.mode-box .radio { display: inline-block; width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid var(--field-line); border-radius: 50%; }
.mode:hover .mode-box { border-color: var(--line-strong); }
.mode input:checked + .mode-box { border-color: var(--text); }
.mode input:checked + .mode-box .radio { border: 5px solid var(--text); }
.mode input:focus-visible + .mode-box { outline: 2px solid var(--accent); outline-offset: 2px; }

.rules { display: grid; gap: 10px; }
.rules li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); color: var(--text-2); }
.rules .ic { margin-top: 1px; color: var(--ok); }
.rules .ic.muted { color: var(--muted); }

.plan-name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.plan-name h3 { font-size: var(--fs-title); font-weight: 500; }
.plan-desc { margin-top: 2px; font-size: var(--fs-caption); color: var(--muted); }
.plan-usage { display: flex; align-items: center; gap: 14px; margin: 14px 0; }
.plan-usage .num { font-size: var(--fs-h1); font-weight: 500; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-usage .lbl { font-size: var(--fs-sm); color: var(--text-2); }
.plan-kv { margin-top: 14px; border-top: 1px solid var(--hairline); }

.dist-title { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: var(--fs-caption); color: var(--muted); }
.dist-list { display: grid; gap: 9px; margin-top: 12px; }
.dist-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px 46px; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.dist-row .name { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); }
.dist-row .val, .dist-row .pct { text-align: right; font-variant-numeric: tabular-nums; }
.dist-row .pct { font-size: var(--fs-caption); color: var(--muted); }
.mini-track, .stackbar { height: 6px; border-radius: var(--r-chip); background: var(--fill); overflow: hidden; }
.stackbar { display: flex; gap: 2px; }
.mini-fill, .stackbar span { display: block; height: 100%; border-radius: var(--r-chip); background: var(--chart-bar); }
.fill-cpf { background: var(--accent); }

.svc-chart { display: flex; align-items: stretch; gap: 8px; height: 150px; }
.svc-bar-col { flex: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 6px; min-width: 0; }
.svc-bar-area { display: flex; align-items: flex-end; justify-content: center; width: 100%; }
.svc-bar { display: block; width: min(100%, 26px); min-height: 2px; border-radius: var(--r-xs) var(--r-xs) 0 0; background: var(--chart-bar); }
.svc-bar.zero { background: var(--fill); }
.bar-date { max-width: 100%; overflow: hidden; font-size: var(--fs-chip); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.svc-purposes { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.svc-purposes li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--row-line); font-size: var(--fs-sm); }
.svc-purposes li:first-child { border-top: 0; }
.svc-purposes .row-link { min-width: 0; white-space: normal; overflow-wrap: anywhere; }

.foot-note { padding: 12px var(--card-x) 16px; border-top: 1px solid var(--hairline); font-size: var(--fs-caption); color: var(--muted); }

/* 23. Responsivo =========================================================== */

/* 1280 e abaixo */
@media (max-width: 1280px) {
  :root { --page-x: 24px; }
  .global-search input { width: 220px; }
  .entity-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 1100 e abaixo: sidebar continua visível até 901px */
@media (max-width: 1100px) {
  :root { --page-x: 22px; --card-x: 20px; --gap: 20px; }
  .topbar { gap: 10px; }
  .global-search input { width: 190px; }
  #cta-batch .cta-label { display: none; }
  #cta-batch { width: 38px; padding: 0; }

  .grid-a, .grid-b, .grid-d { grid-template-columns: minmax(0, 1fr); }

  .rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modes { grid-template-columns: minmax(0, 1fr); }
}

/* 900 e abaixo: app em largura total e sidebar offcanvas */
@media (max-width: 900px) {
  :root { --page-x: 20px; }

  body { background: var(--app); }
  body:has(.shell:not([hidden])) { height: auto; overflow-y: auto; }
  .shell {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .main { min-height: 100vh; min-height: 100dvh; overflow: visible; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: min(288px, 86vw);
    height: 100%;
    border-right: 0;
    border-radius: 0 var(--r-sheet) var(--r-sheet) 0;
    box-shadow: var(--shadow-pop);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dur-ui) var(--ease-drawer), visibility 0s linear var(--dur-ui);
  }
  .sidebar.open { transform: none; visibility: visible; transition: transform var(--dur-panel) var(--ease-drawer), visibility 0s; }
  .icon-btn.sidebar-close { display: inline-flex; width: 34px; height: 34px; }
  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: var(--scrim);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-ui) var(--ease-drawer), visibility 0s linear var(--dur-ui);
  }
  .scrim.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dur-panel) var(--ease-drawer), visibility 0s; }
  body:has(.sidebar.open) { overflow: hidden; }
  .env-strip { position: relative; z-index: 21; }

  .icon-btn.menu-btn, .icon-btn.search-btn { display: inline-flex; }
  .icon-btn.search-btn { margin-left: auto; }
  .topbar { min-height: 56px; gap: 10px; }
  .global-search { display: none; }
  .breadcrumb { flex: 1; }
  .breadcrumb li:not(:last-child) { display: none; }
  .breadcrumb [aria-current="page"] { overflow: hidden; text-overflow: ellipsis; }

  .grid-c { grid-template-columns: minmax(0, 1fr); }
}

/* 640 e abaixo: tabelas viram lista */
@media (max-width: 640px) {
  :root { --page-x: 16px; --card-x: 16px; --card-y: 16px; --r-sheet: 14px; --gap: 16px; }

  .topbar { min-height: 52px; gap: 8px; }
  .view { padding: 4px var(--page-x) 28px; }
  .review-summary { grid-template-columns: 1fr; }
  .client-panel form:has(#tenant-name) { grid-template-columns: 1fr; }

  .page-head h1,
  .client-heading h1 { font-size: var(--fs-h1-sm); }
  .page-head { align-items: stretch; flex-direction: column; }
  .page-tools, .card-tools { justify-content: flex-start; flex-wrap: wrap; }
  /* O link de ação que cai sob o título começa na mesma margem do texto (RX-CSS-02), sem o recuo do padding. */
  .card-tools > .link-action:first-child { margin-left: -8px; }

  .form-row, .rule-grid { grid-template-columns: minmax(0, 1fr); }

  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 14px 16px; border-top: 1px solid var(--hairline); margin-top: -1px; }
  .kpi-value { font-size: var(--fs-count); }

  .fields, .entity-facts { grid-template-columns: minmax(0, 1fr); }
  .client-tabs, .admin-tabs, .tabs { gap: 18px; }

  .wizard-steps { flex-wrap: wrap; gap: 10px 14px; }
  .wizard-step { flex: 1 1 calc(50% - 14px); }
  .wizard-step::after { display: none; }
  .wizard-panel { padding: 18px var(--card-x); }
  .wizard-panel .form-actions .btn { flex: 1 1 auto; }
  .batch-filters .input, .batch-filters .select { flex: 1 1 100%; min-width: 0; }
  .svc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-stat { border-top: 1px solid var(--hairline); margin-top: -1px; }
  .file-drop { padding: 24px 16px; }

  .form-actions { justify-content: stretch; }
  .form-actions .btn { flex: 1 1 auto; }

  .candidate { grid-template-columns: 32px minmax(0, 1fr); align-items: start; }
  .candidate > .badge { grid-column: 2; justify-self: start; }
  .dist-row { grid-template-columns: 48px minmax(0, 1fr) 36px 40px; gap: 8px; }

  .dialog-backdrop { place-items: end center; padding: 8px; }
  .dialog { width: 100%; max-height: calc(100dvh - 16px); }
  .drawer { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 88vh; max-height: 88dvh; }
}

/* 420 e abaixo (390) */
@media (max-width: 420px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .svc-stats { grid-template-columns: minmax(0, 1fr); }
  .wizard-step { flex-basis: 100%; }
  .row-actions { justify-content: flex-start; }
}

/* Movimento reduzido (MOT-12, AUD-24): o estado final aparece direto, sem deslocamento; a barra indeterminada da
   consulta vira uma faixa inteira esmaecida (não parece progresso de 40%) e as rolagens são diretas. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .run-bar i { width: 100%; opacity: .35; transform: none; animation: none !important; }
  /* RM-MOT-R06: a barra da rota também não pode parar em 70% e parecer progresso: faixa inteira, esmaecida. */
  .route-bar.is-active > i { transform: scaleX(1); opacity: .35; }
  /* O giro pequeno do botão ocupado e do carregamento central não é movimento vestibular: segue girando, mais devagar,
     para dizer que algo está rodando (parado, vira um "C" estático). */
  .btn[aria-busy="true"] > .ic:first-child::before, .spin svg, .svc-loading .ic svg {
    animation-duration: 1.2s !important;
    animation-iteration-count: infinite !important;
  }
}

/* 24. Famílias, fichas de documento e marca ============================== */
/* Direção visual de 12/10/2026 (docs/DIRECAO-VISUAL.md). Mono só em identificadores e rótulos. */

/* Marca */
.brand-ch { display: inline-flex; flex: none; width: 28px; height: 28px; color: var(--brand); }
.brand-ch svg { display: block; width: 28px; height: 28px; }
.brand-word { font-size: var(--fs-title); font-weight: 600; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.brand-tagline { margin-left: 4px; font-size: var(--fs-chip); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.auth-brand .brand-ch, .auth-brand .brand-ch svg { width: 30px; height: 30px; }
.auth-brand .brand-word { font-size: var(--fs-title); }
html[data-brand="avaliservice"] .brand-ch { display: none; }
.brand-mark-slot { display: contents; }

/* Identificadores */
.plate {
  display: inline-grid;
  justify-items: center;
  padding: 6px 16px 8px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--sheet);
  font-family: var(--mono);
  font-size: var(--fs-plate);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.plate small { margin-bottom: 5px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; color: var(--ink-3); }
.plate-sm {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-plate-sm);
  background: var(--sheet);
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink);
  white-space: nowrap;
}
.ident { font-family: var(--mono); font-size: var(--fs-body); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Folha do resultado: identidade, carimbos, avisos, seções */
.result-back { justify-self: start; }
.sheet {
  container-type: inline-size;
  min-width: 0;
  padding: 26px 28px 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sheet);
  background: var(--sheet);
}
.sheet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title plate" "meta plate" "tools plate";
  column-gap: 28px;
  align-items: start;
  min-width: 0;
}
.sheet-title { grid-area: title; font-size: var(--fs-h1); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.sheet-title .model { font-weight: 500; color: var(--ink-2); }
.sheet-title .mono { font-family: var(--mono); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.sheet-head > .plate { grid-area: plate; justify-self: end; }
.sheet-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.sheet-meta .mono { font-size: var(--fs-caption); color: var(--ink-2); }
.sheet-tools { grid-area: tools; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sheet > .notice { margin-top: 20px; }
.result-workspace > .sheet-head { padding: 2px 0 4px; }

.checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 22px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-checks);
  background: var(--canvas);
  overflow: hidden;
}
/* Separadores pintados pela célula: linha incompleta não vira bloco cinza. */
.checks > .check {
  display: block;
  min-width: 0;
  min-height: 76px;
  padding: 12px 14px;
  background: var(--canvas);
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line), 1px 1px 0 var(--line);
}
.checks dt { font-family: var(--mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.checks .check-verdict { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; font-size: var(--fs-body); font-weight: 600; white-space: nowrap; }
.checks .check-verdict i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.checks .check-detail {
  display: -webkit-box;
  margin: 3px 0 0;
  overflow: hidden;
  font-size: var(--fs-caption);
  line-height: 1.35;
  color: var(--ink-2);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.st-ok { color: var(--ok); }
.st-bad { color: var(--bad); }
.st-warn { color: var(--warn); }
.st-off, .st-na { color: var(--ink-2); }
.st-off i, .st-na i { background: var(--off) !important; }

.doc-alerts { display: grid; gap: 8px; margin-top: 16px; }
.doc-alert { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--canvas); }
.doc-alert > i { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--bad); }
.doc-alert.warn > i { background: var(--warn); }
.doc-alert.info > i { background: var(--info); }
.doc-alert b { display: block; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.doc-alert p { margin-top: 2px; max-width: 80ch; font-size: var(--fs-sm); color: var(--ink-2); }

.doc-section { margin-top: 28px; min-width: 0; }
.doc-section > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-strong);
}
.doc-section h2 { font-size: var(--fs-value); font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
.doc-section .origin { min-width: 0; font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-align: right; overflow-wrap: anywhere; }
.doc-section > * + *:not(header) { margin-top: 12px; }
.doc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin: 0; }
.doc-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.doc-grid.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.doc-grid > div { min-width: 0; }
.doc-grid > .wide { grid-column: 1 / -1; }
.doc-grid dt { font-family: var(--mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.doc-grid dd { margin: 2px 0 0; font-size: var(--fs-value); color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.doc-grid dd.ident { font-size: var(--fs-body); }
.doc-note { font-size: var(--fs-caption); color: var(--ink-2); }
.doc-text { max-width: 75ch; font-size: var(--fs-body); color: var(--ink); }
.doc-list { display: grid; gap: 6px; padding-left: 18px; list-style: disc; font-size: var(--fs-sm); color: var(--ink); }

.doc-table {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  /* Indicador de rolagem lateral: sombra na borda com mais colunas, coberta quando a rolagem chega ao fim. */
  background:
    linear-gradient(to right, var(--canvas) 40%, transparent) left center / 36px 100% no-repeat local,
    linear-gradient(to left, var(--canvas) 40%, transparent) right center / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(22, 32, 43, .16), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(22, 32, 43, .16), transparent) right center / 12px 100% no-repeat scroll,
    var(--canvas);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.doc-table table { width: 100%; min-width: calc(var(--cols, 2) * 104px); border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.doc-table th { padding: 9px 12px 7px; border-bottom: 1px solid var(--line-strong); font-family: var(--mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-align: left; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.doc-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: baseline; }
.doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table .num { text-align: right; white-space: nowrap; }
.doc-table .ident-cell { font-family: var(--mono); font-size: var(--fs-caption); white-space: nowrap; }
.doc-table:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cell-name { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.cell-stack { display: grid; gap: 2px; }
.cell-stack .cell-sub { white-space: normal; color: var(--ink-2); }

/* .doc-chip: ver a seção 10 (um componente de chip só). */

.doc-more { margin-top: 22px; }
.doc-more > summary,
.doc-fulltext > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  list-style: none;
  cursor: pointer;
}
.doc-more > summary::-webkit-details-marker, .doc-fulltext > summary::-webkit-details-marker { display: none; }
.doc-more > summary:hover, .doc-fulltext > summary:hover { color: var(--ink); }
.doc-more > summary .ic, .doc-fulltext > summary .ic { transition: transform var(--dur-hover) var(--ease-out); }
.doc-more[open] > summary .ic, .doc-fulltext[open] > summary .ic { transform: rotate(90deg); }
.doc-more[open] > summary { margin-bottom: 12px; }
.doc-more[open] > :not(summary), .doc-fulltext[open] > :not(summary), .doc-cell-more[open] > :not(summary),
.contract-family[open] > :not(summary), .product-group-items:not([hidden]) { animation: reveal var(--dur-hover) var(--ease-out); }
@keyframes reveal { from { opacity: 0; } }
/* Menus suspensos (RM-MOT-R12): uma entrada só para os três (Mais ações, menu da linha do contrato e Consultas
   relacionadas): 120 ms, opacidade e 2 px a partir do gatilho. */
@keyframes menu-in { from { opacity: 0; transform: translateY(-2px) scale(.98); } }
.doc-fulltext > summary { font-size: var(--fs-sm); }
.doc-fulltext[open] > summary { margin-bottom: 8px; }
.doc-entries { display: grid; }
.doc-entry { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.doc-entry:first-child { padding-top: 2px; border-top: 0; }
.doc-entry-text { max-width: 80ch; font-size: var(--fs-sm); color: var(--ink); }
.doc-entry-text b { font-weight: 600; }

.sheet-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 26px;
  padding-top: 12px;
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-caption);
  color: var(--ink-2);
}
.sheet-foot > span { min-width: 0; }
.sheet-foot .mono { font-size: var(--fs-caption); overflow-wrap: anywhere; }
.sheet-foot details > summary { color: var(--ink-2); }
.sheet-foot details[open] { flex-basis: 100%; }
.sheet-foot details .fields { margin-top: 10px; }

/* Destaques por kind */
.value-hero, .verdict-hero {
  display: grid;
  gap: 4px;
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-checks);
  background: var(--canvas);
}
.value-label, .verdict-label { font-family: var(--mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.value-amount { font-size: var(--fs-amount); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.value-meta { font-size: var(--fs-sm); color: var(--ink-2); }
.verdict-hero { padding: 22px 24px; }
.verdict-word { display: flex; align-items: center; gap: 10px; margin-top: 2px; font-size: var(--fs-verdict); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.verdict-word i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }

.cnh-card {
  display: grid;
  /* A linha de validade quebra em vez de espremer o nome (penalidade em vigor gera texto longo). */
  grid-template-columns: auto minmax(200px, 1fr) minmax(0, auto) auto;
  align-items: center;
  gap: 16px 22px;
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-checks);
  background: var(--canvas);
}
.cnh-cat {
  display: grid;
  place-items: center;
  align-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-card);
  background: var(--brand-soft);
  font-family: var(--mono);
  font-size: var(--fs-count);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.1;
  color: var(--brand-text);
}
.cnh-cat small { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em; }
.cnh-name { font-size: var(--fs-title); font-weight: 600; color: var(--ink); }
.cnh-main .row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-2); }
.cnh-main .row .ident { font-size: var(--fs-sm); }
.cnh-valid { min-width: 0; text-align: right; }
.cnh-valid .lbl { font-family: var(--mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.cnh-valid .val { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; margin-top: 3px; font-size: var(--fs-title); font-weight: 600; text-wrap: balance; }
.cnh-valid .val i { flex: none; align-self: flex-start; width: 8px; height: 8px; margin-top: .5lh; translate: 0 -50%; border-radius: 50%; background: currentColor; }
.cnh-photo { display: grid; justify-items: center; gap: 4px; margin: 0; }
.cnh-photo img { display: block; width: 96px; height: 128px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sheet); object-fit: cover; }
.cnh-photo figcaption { font-size: var(--fs-chip); color: var(--ink-2); }

/* Documento oficial: prévia em imagem da 1ª página, contida em até 560 px e centrada; clique abre a imagem inteira */
.doc-preview { margin: 22px 0 0; }
.doc-preview-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  max-height: 560px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--canvas);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color var(--dur-hover) var(--ease-out);
}
.doc-preview-frame:hover { border-color: var(--line-strong); }
.doc-preview-frame:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.doc-preview-img { display: block; width: auto; max-width: 100%; height: auto; max-height: 526px; object-fit: contain; border-radius: var(--r-bar); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.doc-preview figcaption { margin-top: 8px; font-size: var(--fs-caption); color: var(--ink-2); }
.doc-preview-fallback { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas); font-size: var(--fs-sm); color: var(--ink-2); }

/* Página de família: lista de produtos + compositor + últimas consultas */
/* A2: uma composição só para as cinco famílias (EST-11); família de um produto só fica sem a lista, com o compositor
   e as últimas consultas na largura toda (RC-F7: limitado a 720 px, sobrava uma faixa vazia à direita). No celular, o
   botão "Produto: … ▾" abre a lista numa folha inferior (UXC-06). */
.family-page { display: grid; gap: var(--gap); min-width: 0; }
.family-page > * { min-width: 0; }
.family { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 24px; min-width: 0; }
.family-page.is-single .family { grid-template-columns: minmax(0, 1fr); }
.family-main { display: grid; gap: 18px; min-width: 0; }
/* Desktop: compositor e últimas consultas acompanham a rolagem da lista de produtos (abaixo da barra superior). */
@media (min-width: 769px) and (min-height: 720px) {
  .family-main { position: sticky; top: 84px; align-self: start; }
}
.product-list { display: grid; padding: 8px; border: 1px solid var(--hairline); border-radius: var(--r-sheet); background: var(--surface); }
.product-list:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.product-group { display: grid; gap: 2px; }
.product-group + .product-group { margin-top: 4px; }
.product {
  display: block;
  width: 100%;
  padding: 8px 10px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.product b { display: block; font-size: var(--fs-body); font-weight: 500; line-height: 1.35; color: var(--ink); }
.product:hover { background: var(--hover); }
.product[aria-selected="true"] { border-color: var(--brand-line); background: var(--brand-soft); }
.product[aria-selected="true"] b { color: var(--brand-text); }
.product:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.product[aria-disabled="true"] { cursor: not-allowed; }
.product[aria-disabled="true"] b, .product[aria-disabled="true"] span { color: var(--ink-2); }
.product .tag { display: inline-block; margin-top: 5px; padding: 1px 7px; border-radius: var(--r-chip); background: var(--off-bg); font-size: var(--fs-chip); font-style: normal; color: var(--ink-2); }
.family-others:not([hidden]) { display: block; padding: 0 2px; }
.composer { min-width: 0; padding: 24px 26px; border: 1px solid var(--hairline); border-radius: var(--r-sheet); background: var(--surface); }
.composer h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.composer .lead { max-width: 70ch; margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-2); }
.composer-form { display: grid; gap: 8px; max-width: 680px; margin-top: 18px; }
.input.key { font-family: var(--mono); font-size: var(--fs-key); letter-spacing: .06em; }
.input.key::placeholder { font-family: var(--font); font-size: var(--fs-body); letter-spacing: 0; }
.composer .field-help { color: var(--ink-2); }
/* Cobrança no ponto da consulta (ROB-07, UXF-12): a frase do contrato e o saldo da franquia, sob o formulário. */
.composer-bill { max-width: 680px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.composer-bill-line { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: start; gap: 2px 8px; font-size: var(--fs-sm); color: var(--ink); }
.composer-bill-line > .ic { width: 14px; height: 14px; margin-top: 3px; color: var(--ink-3); }
.composer-bill-quota { grid-column: 2; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.composer-bill.is-warn .composer-bill-quota { font-weight: 500; color: var(--warn); }
.composer-bill-note { margin-top: 4px; padding-left: 22px; font-size: var(--fs-caption); line-height: 1.45; color: var(--ink-2); }
.composer-bill > .notice { margin-top: -2px; }
/* Produto fora do contrato aberto pela rota (ROB-06, CON-04): o que faz, a chave, o preço sob consulta e o pedido. */
.composer.is-offer .lead { margin-top: 6px; }
.offer-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 24px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--hairline); }
.offer-facts dt { font-size: var(--fs-caption); color: var(--ink-2); }
.offer-facts dd { margin: 2px 0 0; font-size: var(--fs-body); color: var(--ink); }
.offer-text { max-width: 72ch; margin-top: 14px; font-size: var(--fs-sm); color: var(--ink-2); }
.offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.offer-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.composer.is-offer > .empty { padding: 0; }
/* Aviso da mesma chave consultada hoje (ROB-23): "Abrir resultado" e "Consultar de novo" lado a lado. */
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.notice .notice-actions .btn { margin-top: 0; }
.query-running { min-width: 0; padding: 22px 26px; border: 1px solid var(--hairline); border-radius: var(--r-sheet); background: var(--surface); animation: reveal 140ms var(--ease-out); }
.run-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.run-key { font-family: var(--mono); font-size: var(--fs-title); font-weight: 600; letter-spacing: .08em; color: var(--ink); overflow-wrap: anywhere; }
.run-timer { font-family: var(--font); font-size: var(--fs-body); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.run-bar { height: 2px; margin: 14px 0 10px; overflow: hidden; border-radius: var(--r-bar); background: var(--line); }
.run-bar i { display: block; width: 40%; height: 100%; background: var(--brand); animation: run-bar 1.4s var(--ease-out) infinite; }
@keyframes run-bar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.run-text { font-size: var(--fs-sm); color: var(--ink); }
.run-note { margin-top: 2px; font-size: var(--fs-caption); color: var(--ink-2); }
.run-slot:empty { display: none; }
.family-recent-body { min-width: 0; padding: 0 var(--card-x) 6px; }
.family-recent-body > .skeleton-list { padding-bottom: 8px; }
/* Celular: o botão do produto (rótulo pequeno em cima, o nome embaixo, a seta à direita) no lugar da lista. */
.product-picker-btn { display: none; }
@media (max-width: 768px) {
  .product-picker-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label chev" "name chev";
    align-items: center;
    column-gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 8px 14px;
    border: 1px solid var(--field-line);
    border-radius: var(--r-ctl);
    background: var(--sheet);
    font: inherit;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
  }
  .product-picker-btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
  .picker-label { grid-area: label; font-size: var(--fs-caption); color: var(--ink-2); }
  .picker-name { grid-area: name; font-size: var(--fs-value); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
  .product-picker-btn > .ic { grid-area: chev; width: 18px; height: 18px; color: var(--ink-2); }
  /* Folha inferior com a lista de produtos: entra de baixo, ocupa a largura e rola por dentro. */
  #dialog-root .drawer:has(.product-sheet) { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: 88vh; max-height: 88dvh;
    border-bottom: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; transform: translateY(24px); }
  #dialog-root.open .drawer:has(.product-sheet) { transform: none; }
  #dialog-root.closing .drawer:has(.product-sheet) { transform: translateY(12px); }
}
.product-sheet { display: grid; gap: 12px; }
.product-sheet .product-list { padding: 0; border: 0; border-radius: 0; }
.product-sheet .family-others:not([hidden]) { padding: 4px 2px 0; }

/* Consulta veicular completa (dossiê): andamento enquanto a consulta roda (uma consulta só para o cliente).
   Sem cor nova: tokens e raios existentes; mono só no cronômetro; subtítulo dentro de seção como o do PDF. */
.dossie-progress { min-width: 0; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas); }
.dossie-progress-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: var(--fs-sm); color: var(--ink); }
.dossie-timer { font-family: var(--font); font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dossie-bar { height: 2px; margin-top: 10px; overflow: hidden; border-radius: var(--r-bar); background: var(--line); }
/* A folha é refeita a cada leitura, então a transição de largura nunca rodava (MOT-08): sem transição até a barra passar a
   transform (render-dossie). */
.dossie-bar > i { display: block; height: 100%; background: var(--brand); }
.dossie-progress-note { margin-top: 8px; font-size: var(--fs-caption); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.doc-table .source-name { font-weight: 500; }
/* Subtítulo dentro de uma seção (Avaliação do veículo no Leilão): rótulo, como o sub-titulo do PDF. */
.doc-section > .doc-subhead { margin-top: 18px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.doc-section > .doc-subhead + * { margin-top: 6px; }
@media print { .dossie-progress { display: none !important; } }

/* Ícones por família */
.fam-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); }
.fam-ico .ic { width: 15px; height: 15px; }
.fam-ico.lg { width: 34px; height: 34px; border-radius: var(--r-ctl); }
.fam-ico.lg .ic { width: 17px; height: 17px; }
.key-cell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }

/* Contrato e regras agrupados por família */
.contract-families { display: grid; }
.contract-family { border-top: 1px solid var(--hairline); }
.contract-family:first-child { border-top: 0; }
.contract-family > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 0; list-style: none; cursor: pointer; }
.contract-family > summary::-webkit-details-marker { display: none; }
.contract-family > summary h3 { font-size: var(--fs-value); font-weight: 600; color: var(--ink); }
.contract-family > summary .count { margin-left: auto; font-size: var(--fs-caption); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.contract-family > summary .count-wrap { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; }
.contract-family > summary .count-wrap .count { margin-left: 0; }
.contract-family > summary .chev { color: var(--ink-2); transition: transform var(--dur-hover) var(--ease-out); }
.contract-family[open] > summary .chev { transform: rotate(90deg); }
.contract-family > summary:focus-visible { outline-offset: 2px; }
.contract-family-body { padding: 0 0 18px; }
.not-contracted-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; font-size: var(--fs-caption); color: var(--ink-2); }
.rule-group-label { margin: 14px 0 2px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
/* Módulos e contrato (T21): linha por módulo; no desktop largo um cabeçalho de colunas preso ao rolar substitui os
   rótulos repetidos (que continuam para leitores de tela), abaixo de 1100 px os rótulos voltam e no celular cada módulo
   é uma grade 2×2 (Cobrança · Preço / Franquia · Mensalidade). */
.module-rule.compact {
  display: grid;
  grid-template-columns: minmax(200px, 1.5fr) repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 8px 14px;
  padding: 10px 0;
  border-top: 1px solid var(--row-line);
}
.rule-head + .module-rule.compact, .rule-group-label + .module-rule.compact { border-top: 0; }
.contract-family-body > .module-rule.compact + .rule-group-label { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--row-line); }
.module-rule.compact .rule-name { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pick name" ". on"; align-items: center; gap: 4px 10px; min-width: 0; }
.rule-name > .rule-pick { grid-area: pick; flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.rule-name > h4 { grid-area: name; min-width: 0; overflow-wrap: anywhere; }
.rule-name > .rule-on { grid-area: on; justify-self: start; font-size: var(--fs-sm); }
.module-rule.compact .rule-name h4 { font-size: var(--fs-body); font-weight: 500; color: var(--ink); }
.module-rule.compact .field { gap: 4px; }
.module-rule.compact .field > label { font-family: var(--mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.module-rule.compact .input { height: 36px; }
.module-rule.compact .btn { height: 36px; }
.module-rule.compact .field-error { grid-column: 1 / -1; }
.module-rule.compact .field-error:empty { display: none; }
.module-rule.compact.dirty .rule-name h4::after { content: " · alterado"; font-size: var(--fs-caption); font-weight: 500; color: var(--warn); }
.rule-head { display: none; }
@media (min-width: 1101px) {
  .rule-head {
    position: sticky;
    top: 68px;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(200px, 1.5fr) repeat(4, minmax(0, 1fr));
    gap: 8px 14px;
    padding: 8px 0 7px;
    border-bottom: 1px solid var(--line-strong);
    background: var(--surface);
    font-family: var(--mono);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .rule-head > :first-child { padding-left: 26px; }
  .rule-composite { margin-left: 26px; }
  .module-rule.compact .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1100px) {
  .module-rule.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
  .module-rule.compact .rule-name { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pick name on"; }
  .rule-name > .rule-on { justify-self: end; }
}
@media (max-width: 640px) {
  .module-rule.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 0 14px; }
}

/* Ações em lote da família: marcar, contratar todos e aplicar cobrança/preço aos marcados. */
.rule-bulk {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 2px 0 10px;
  padding: 10px 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--canvas);
}
.rule-bulk-pick { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.rule-bulk-count { font-size: var(--fs-caption); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rule-bulk-apply { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 10px; }
.rule-bulk .field { gap: 4px; }
.rule-bulk .field > label { font-family: var(--mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rule-bulk .input { width: 156px; height: 36px; }
.rule-bulk .btn { height: 36px; }
.rule-bulk > .btn { margin-left: auto; }
.rule-bulk-error { flex-basis: 100%; }
@media (max-width: 640px) {
  .rule-bulk { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 12px; }
  .rule-bulk-pick { flex-wrap: wrap; gap: 4px 12px; }
  .rule-bulk > .btn { grid-column: 2; grid-row: 1; margin-left: 0; }
  .rule-bulk-apply { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .rule-bulk .input { width: 100%; }
  .rule-bulk-apply > .btn { grid-column: 1 / -1; width: 100%; }
  .rule-bulk-error { grid-column: 1 / -1; }
}

/* Cartão da consulta composta na linha do módulo: componentes, obrigatórios e situação no contrato deste cliente. */
.rule-composite { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 2px; padding: 10px 14px 8px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--canvas); }
.rule-composite-head { font-size: var(--fs-sm); color: var(--ink-2); }
.rule-composite-head b { font-weight: 600; color: var(--ink); }
.rule-composite-help { max-width: 80ch; font-size: var(--fs-caption); color: var(--ink-2); }
.rule-components { display: grid; max-width: 720px; margin: 2px 0 0; padding: 0; list-style: none; }
.rule-components li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 32px; padding: 5px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.rule-components li:first-child { border-top: 0; }
.rule-components .rc-name { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.rule-components .rc-state { margin-left: auto; font-size: var(--fs-caption); color: var(--ink-2); white-space: nowrap; }
.rule-components li.is-missing .rc-state { font-weight: 600; color: var(--warn); }
.rule-components-reason { padding-top: 6px; border-top: 1px solid var(--line); font-size: var(--fs-caption); color: var(--ink-2); }
.rule-components-reason.is-blocking { font-weight: 500; color: var(--warn); }

/* Salvar família: rodapé preso ao pé da família enquanto ela está na tela, sempre visível; o botão fica desabilitado
   até haver alteração e o contador diz quantos módulos mudaram. */
.contract-family-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--line-strong);
  background: var(--surface);
}
.family-save-status { margin-right: auto; font-size: var(--fs-caption); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* A3: Meu contrato e Consumo (rodada de 26/10/2026: UXC-03, DAT-03..06, DAT-09, CON-19). A ficha do contrato em
   leitura, como a do administrador: selo do número no lugar da chapa, faixa de indicadores, condições em grade e UMA
   tabela dos produtos contratados. Na tabela, a família é uma linha de grupo em canvas (600, subtotal nas colunas de
   número, recolhível); os produtos ficam na folha; números à direita e tabulares; cabeçalho mono de duas linhas no máximo,
   alinhado embaixo e preso sob a topbar ao rolar (folha larga). Folha mais estreita: a tabela rola de lado dentro do
   envelope, com a coluna Produto presa. Abaixo de 640 px de folha cada linha vira um bloco: produto e valor em cima, a
   cobrança e a frase com os números embaixo. */
.mc-page { display: grid; gap: var(--gap); min-width: 0; }
.mc-sheet { min-width: 0; }
.mc-head > .doc-seal { grid-area: plate; justify-self: end; }
/* As ações ocupam a largura toda da folha, embaixo do selo (o mês e os três downloads numa linha). */
@media (min-width: 1025px) { .mc-head { grid-template-areas: "title plate" "meta plate" "tools tools"; } }
.mc-sheet .doc-seal {
  display: inline-grid;
  justify-items: center;
  padding: 7px 14px 9px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--sheet);
  font-family: var(--mono);
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mc-sheet .doc-seal small { margin-bottom: 6px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; line-height: 1; text-transform: uppercase; color: var(--ink-3); }
.mc-tools { align-items: center; }
.mc-month select { min-width: 232px; }
.mc-month-text { padding: 0 2px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.mc-internal { margin-top: 14px; max-width: 80ch; }
.mc-sheet > .kpi-strip { margin-top: 22px; }
.mc-sheet > .mc-alerts { margin-top: 12px; }
.admin-consumption > .kpi-strip + .mc-alerts { margin-top: 12px; }
.mc-section { container: mc / inline-size; }
.mc-section > header { align-items: center; }
.mc-note { margin-top: 10px; }

/* Por produto | Por usuário: alternador de dois botões (aria-pressed), sem cor de marca no fundo. */
.mc-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-ctl); background: var(--fill); }
.mc-switch-btn {
  height: 28px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.mc-switch-btn:hover { color: var(--ink); }
.mc-switch-btn[aria-pressed="true"] { background: var(--surface); border-color: var(--line); color: var(--ink); }
.mc-switch-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.doc-table.mc-table { background: var(--canvas); }
.mc-table table { table-layout: fixed; min-width: 0; border-collapse: separate; border-spacing: 0; }
.mc-table col.c-prod { width: 21%; }
.mc-table col.c-bill { width: 25%; }
.mc-table col.c-n { width: 8.25%; }
.mc-table col.c-q { width: 10%; }  /* Consultas: o rótulo e o ícone de ordenar numa linha só */
.mc-table col.c-cents { width: 11%; }
.mc-users col.c-prod { width: 23%; }
.mc-users col.c-n { width: 9%; }
.mc-users col.c-cents { width: 11%; }
.mc-users col.c-last { width: 21%; }
.doc-table.mc-table thead th { padding: 9px 10px 7px; letter-spacing: .06em; line-height: 1.35; white-space: normal; vertical-align: bottom; background: var(--canvas); }
.mc-table .th-sort-ic { margin-left: 3px; }
.mc-table .th-sort { white-space: nowrap; }
.doc-table.mc-table thead th:first-child, .doc-table.mc-table tbody th, .doc-table.mc-table tfoot th { padding-left: 12px; }
.doc-table.mc-table thead th.num { text-align: right; }
.doc-table.mc-table th, .doc-table.mc-table td { vertical-align: top; }
.doc-table.mc-table td { padding: 9px 10px; white-space: normal; overflow-wrap: anywhere; }
.doc-table.mc-table td.num { white-space: nowrap; overflow-wrap: normal; }
.doc-table.mc-table tbody > tr > * { background: var(--sheet); transition: background var(--dur-hover) var(--ease-out); }
.doc-table.mc-table tbody th, .doc-table.mc-table tfoot th {
  padding-top: 9px;
  padding-bottom: 9px;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--ink);
}
/* Linha entre todos os produtos, inclusive a última de cada família (a base da doc-table tira a da última linha). */
.doc-table.mc-table tbody > tr > td, .doc-table.mc-table tbody > tr > th { border-bottom: 1px solid var(--line); }
.doc-table.mc-table tbody:last-of-type > tr:last-child > * { border-bottom: 0; }
.doc-table.mc-table tr.is-idle td.num { color: var(--ink-2); }
/* Linha de grupo: a família em 600 com a contagem e o subtotal; o botão recolhe as linhas dela. */
.doc-table.mc-table tbody > tr.mc-group > * { padding-top: 7px; padding-bottom: 6px; background: var(--canvas); font-weight: 600; color: var(--ink); }
.mc-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -2px -6px;
  padding: 2px 6px;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.mc-group-toggle:hover { background: var(--fill); }
.mc-group-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.mc-group-toggle .chev { width: 13px; height: 13px; color: var(--ink-2); transform: rotate(90deg); transition: transform var(--dur-ui) var(--ease-out); }
.mc-group-toggle[aria-expanded="false"] .chev { transform: none; }
.mc-group-count { font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* Dobra dos contratados sem uso no mês, no fim da família: uma linha discreta que abre e fecha as linhas zeradas. */
.doc-table.mc-table tbody > tr.mc-fold > td { padding: 5px 10px 6px 12px; }
.mc-fold-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 -6px;
  padding: 3px 6px;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.mc-fold-btn:hover { background: var(--fill); color: var(--ink); }
.mc-fold-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.mc-fold-btn .chev { width: 12px; height: 12px; transition: transform var(--dur-ui) var(--ease-out); }
.mc-fold-btn[aria-expanded="true"] .chev { transform: rotate(90deg); }
.doc-table.mc-table tr[hidden] { display: none; }
.doc-table.mc-table tfoot th, .doc-table.mc-table tfoot td { border-top: 1px solid var(--line-strong); border-bottom: 0; background: var(--canvas); font-weight: 600; color: var(--ink); }
.mc-table .c-line { display: none; }
.mc-table .cell-stack { gap: 3px; }
.mc-table .cell-stack .cell-sub { font-size: var(--fs-caption); line-height: 1.4; }
.mc-table td.num .cell-stack { justify-items: end; }
.mc-table .mc-next { color: var(--ink); }
/* Uso da franquia: "37 de 100" com a barra fina ao lado (o medidor da faixa), âmbar a partir de 80%. */
.mc-quota { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.mc-quota .kpi-meter { flex: 0 0 72px; height: 3px; }
.mc-quota.is-warn .mc-quota-text { font-weight: 500; color: var(--warn); }
/* Folha larga: sem rolagem lateral, o cabeçalho fica preso sob a topbar enquanto a tabela está na tela. */
@container mc (min-width: 1000px) {
  .doc-table.mc-table { overflow: visible; }
  .doc-table.mc-table thead th { position: sticky; top: 64px; z-index: 2; }
}
/* Folha média: a tabela rola de lado dentro do envelope, com a coluna Produto presa (sombra de continuação). */
@container mc (max-width: 999px) {
  .mc-table table { min-width: 940px; }
  .doc-table.mc-table tr > :first-child { position: sticky; left: 0; z-index: 1; }
  .doc-table.mc-table[data-scrolled] tr > :first-child { box-shadow: 10px 0 12px -10px rgba(22, 32, 43, .28); }
}
@container mc (max-width: 640px) {
  .doc-table.mc-table { overflow: visible; background: var(--canvas); }
  .mc-table table, .mc-table tbody, .mc-table tfoot { display: block; width: auto; min-width: 0; }
  .mc-table colgroup { display: none; }
  .mc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .doc-table.mc-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "prod cents" "bill bill" "line line"; align-items: baseline; gap: 3px 14px; padding: 10px 12px 11px; border-bottom: 1px solid var(--line); background: var(--sheet); }
  .doc-table.mc-table tbody > tr > *, .doc-table.mc-table tfoot > tr > * { display: none; padding: 0; border: 0; background: none; }
  /* Sem as linhas das células do desktop dentro do bloco (a regra de cima tem menos peso que a da borda). */
  .doc-table.mc-table tbody > tr > td, .doc-table.mc-table tbody > tr > th, .doc-table.mc-table tfoot > tr > td, .doc-table.mc-table tfoot > tr > th { border: 0; }
  .doc-table.mc-table tr > .c-prod { display: block; grid-area: prod; position: static; box-shadow: none; }
  .doc-table.mc-table tr > .c-bill { display: block; grid-area: bill; }
  .doc-table.mc-table tr > .c-cents { display: block; grid-area: cents; text-align: right; }
  .doc-table.mc-table tr > .c-line { display: block; grid-area: line; font-size: var(--fs-caption); line-height: 1.45; color: var(--ink-2); }
  .doc-table.mc-table tr.mc-fold { display: block; padding-top: 7px; padding-bottom: 8px; }
  .doc-table.mc-table tr.mc-fold[hidden] { display: none; }
  .doc-table.mc-table tr.mc-fold > .c-fold { display: block; padding: 0; }
  .doc-table.mc-table tbody > tr.mc-group, .doc-table.mc-table tfoot > tr { background: var(--canvas); }
  .doc-table.mc-table tbody > tr.mc-group > * { padding: 0; border: 0; background: none; }
  .doc-table.mc-table tbody > tr.mc-group > .c-line { font-weight: 500; }
  .doc-table.mc-table tr[hidden] { display: none; }
  .doc-table.mc-table tbody:last-of-type > tr:last-child { border-bottom: 1px solid var(--line); }
  .doc-table.mc-table tfoot > tr { border-bottom: 0; border-top: 1px solid var(--line-strong); }
}
@media (max-width: 640px) {
  .mc-section > header { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 1024px) {
  .mc-head > .doc-seal { display: none; }
}
/* Celular: a razão social desce para a linha dela, sem o ponto separador no começo da linha. */
@media (max-width: 640px) {
  .mc-head .sheet-title .model { display: block; margin-top: 2px; }
  .mc-head .mc-sep { display: none; }
}
/* Contratar mais produtos: o pé da ficha leva ao catálogo (a linha inteira é o link). */
.mc-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title go" "text go";
  align-items: center;
  gap: 2px 16px;
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--canvas);
  color: var(--ink);
  transition: border-color var(--dur-hover) var(--ease-out);
}
.mc-more:hover { border-color: var(--line-strong); }
.mc-more:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mc-more-title { grid-area: title; font-size: var(--fs-body); font-weight: 600; }
.mc-more-text { grid-area: text; max-width: 72ch; font-size: var(--fs-sm); color: var(--ink-2); }
.mc-more-go { grid-area: go; font-size: var(--fs-sm); font-weight: 500; color: var(--brand-hover); white-space: nowrap; }
.mc-more:hover .mc-more-go { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .mc-more { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "text" "go"; }
  .mc-more-go { margin-top: 6px; }
  .mc-month, .mc-month select { width: 100%; min-width: 0; }
  .mc-tools > .btn { flex: 1 1 100%; justify-content: center; }
}

.th-sort {
  display: inline;
  margin: 0 -4px;
  padding: 2px 4px;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.th-sort:hover { background: var(--fill); color: var(--ink); }
.th-sort:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.th-sort-ic { display: inline-flex; margin-left: 4px; vertical-align: -2px; color: var(--ink-2); }
.th-sort-ic .ic { width: 13px; height: 13px; }
th[aria-sort="ascending"] > .th-sort, th[aria-sort="descending"] > .th-sort, th[aria-sort="ascending"] .th-sort-ic, th[aria-sort="descending"] .th-sort-ic { color: var(--ink); }

/* A3: Contratar produtos (CON-04, CON-05, TXT-02): o catálogo à venda numa superfície só, recortado pela família (pílulas
   com a contagem) e pela busca. Cada família lista as seções do catálogo; os produtos ficam em duas colunas na folha larga,
   com o nome, a descrição em até duas linhas e, no pé, o que a consulta aceita e o pedido (link de ação, sem borda). */
.ct-page { display: grid; gap: var(--gap); min-width: 0; max-width: 1120px; }
/* "Ver meu contrato" na altura do título, não solto na segunda linha do subtítulo (RC-F9). */
.ct-page > .page-head { align-items: flex-start; }
.ct-page > .page-head, .team-page > .page-head, .acct-page > .page-head, .hist-page > .page-head { margin-bottom: 0; }
.ct-card { padding: 0; overflow: clip; container: ct / inline-size; }
.ct-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px var(--card-x) 14px; border-bottom: 1px solid var(--hairline); }
/* A barra de ações da folha do contrato (admin) também é .ct-tools: dentro do cabeçalho da folha, que já tem o recuo, ela
   alinha com o título e a faixa de indicadores (RA-F09, RX-CSS-01). */
.sheet-head > .sheet-tools.ct-tools { padding: 0; border-bottom: 0; }
.ct-tools .search-field, .hist-bar .search-field { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 380px; min-width: 0; }
.ct-tools .search-field .ic, .hist-bar .search-field .ic { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--ink-2); pointer-events: none; }
.ct-tools .search-field .input, .hist-bar .search-field .input { height: 36px; padding: 0 10px 0 34px; font-size: var(--fs-sm); }
.ct-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ct-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-caption);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.ct-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.ct-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ct-chip[aria-pressed="true"] { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-text); }
.ct-chip-count { font-family: var(--mono); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.ct-count { margin-left: auto; font-size: var(--fs-caption); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-family { padding: 18px var(--card-x) 10px; border-top: 1px solid var(--hairline); }
.ct-family:first-child { border-top: 0; }
.ct-family > h2 { font-size: var(--fs-value); font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
.ct-family-count { font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ct-group { margin-top: 12px; }
.ct-group > h3 { margin-bottom: 2px; font-size: var(--fs-caption); font-weight: 500; color: var(--ink-2); }
.ct-group > ul { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; margin: 0; padding: 0; list-style: none; }
.ct-item { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 12px 0 11px; border-top: 1px solid var(--row-line); }
/* Produto de quem chegou por um link dele (#/contratar/{produto}): marcado no tom de seleção, sem animação. */
.ct-item.is-target { margin-inline: -12px; padding-inline: 12px; border-top-color: transparent; border-radius: var(--r-sm); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-line); }
.ct-name { font-size: var(--fs-body); font-weight: 500; color: var(--ink); }
.ct-desc { display: -webkit-box; max-width: 72ch; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); }
.ct-answer { max-width: 72ch; margin-top: 2px; font-size: var(--fs-sm); color: var(--ink); }
.ct-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: 4px; }
.ct-key { font-size: var(--fs-caption); color: var(--ink-2); }
.ct-side { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 12px; margin-left: auto; }
.ct-act { margin-right: -8px; }
.ct-state { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-caption); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ct-state.is-open > i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--info); }
.ct-list > .empty { padding-inline: var(--card-x); }
.ct-lead { max-width: 60ch; font-size: var(--fs-sm); color: var(--ink-2); }
.ct-form textarea.input { min-height: 104px; }
@container ct (min-width: 860px) {
  .ct-group > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ct-count { margin-left: 0; }
  .ct-side { justify-content: flex-start; margin-left: 0; }
  .ct-act { margin-left: -8px; margin-right: 0; }
  /* RX-RESP-03: alvo de toque de 36 px nos filtros de família e famílias recolhíveis pelo cabeçalho. */
  .ct-chip { height: 36px; }
  .ct-family.is-foldable { padding-block: 6px; }
  .ct-family.is-foldable > h2 { font-size: var(--fs-body); }
  .ct-family-toggle { width: calc(100% + 20px); min-height: 44px; margin-inline: -10px; font-size: inherit; font-weight: inherit; color: inherit; }
  .ct-family-toggle > .ic { color: var(--ink-2); }
  .ct-family-body > .ct-group:first-child { margin-top: 4px; }
}

/* A3: Equipe (UXF-20, CAP-13): tabela operacional (cabeçalho Inter 12px), quem é cada acesso, quando entrou pela última
   vez, desde quando existe e quanto consultou no mês; ações discretas por linha, sempre com confirmação. Abaixo de
   900 px cada acesso vira um bloco. */
.team-page { display: grid; gap: var(--gap); min-width: 0; }
.team-page .page-sub { max-width: 82ch; }
.team-note, .team-foot { max-width: 82ch; font-size: var(--fs-sm); color: var(--ink-2); }
.team-foot { margin-top: -8px; font-size: var(--fs-caption); }
.team-card { padding: 0; overflow: clip; }
.team-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.team-table th { height: 38px; padding: 0 12px; border-bottom: 1px solid var(--hairline); font-size: var(--fs-caption); font-weight: 500; text-align: left; color: var(--ink-2); white-space: nowrap; }
.team-table td { padding: 10px 12px; border-bottom: 1px solid var(--row-line); vertical-align: middle; color: var(--ink); }
.team-table tbody tr:last-child > td { border-bottom: 0; }
.team-table th:first-child, .team-table td:first-child { padding-left: var(--card-x); }
.team-table th:last-child, .team-table td:last-child { padding-right: calc(var(--card-x) - 8px); }
.team-table .num { text-align: right; }
.team-table .cell-stack { gap: 2px; }
.t-name { font-weight: 500; color: var(--ink); }
.t-you { font-weight: 400; color: var(--ink-2); }
.t-user .cell-sub { white-space: normal; overflow-wrap: anywhere; }
.t-user .cell-sub .mono { font-size: var(--fs-caption); color: var(--ink-2); }
.t-last, .t-created { white-space: nowrap; color: var(--ink-2); }
.t-status .cell-sub { white-space: nowrap; }
.team-table tr.is-off .t-name, .team-table tr.is-off .t-role { color: var(--ink-2); }
.t-act { width: 1%; text-align: right; white-space: nowrap; }
.team-actions { display: inline-flex; justify-content: flex-end; gap: 2px; }
.team-actions .t-danger { color: var(--bad); }
.team-actions .t-danger:hover { background: var(--bad-bg); color: var(--bad); }
.t-m-word, .t-last-label { display: none; }
@media (max-width: 900px) {
  .team-table, .team-table tbody { display: block; }
  .team-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .team-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "user status" "role month" "last last" "act act"; gap: 6px 14px; padding: 14px var(--card-x); border-top: 1px solid var(--row-line); }
  .team-table tbody tr:first-child { border-top: 0; }
  .team-table td { display: block; min-width: 0; padding: 0 !important; border: 0 !important; }
  .t-user { grid-area: user; }
  .t-status { grid-area: status; justify-self: end; text-align: right; }
  .t-status .cell-stack { justify-items: end; }
  .t-role { grid-area: role; color: var(--ink-2); }
  .t-month { grid-area: month; justify-self: end; font-size: var(--fs-caption); color: var(--ink-2); }
  .t-last { grid-area: last; font-size: var(--fs-caption); white-space: normal; }
  .t-m-word, .t-last-label { display: inline; }
  .t-created { display: none !important; }
  .t-act { grid-area: act; width: auto; text-align: left; }
  .t-act:empty { display: none !important; }
  .team-actions, .t-act > .link-action { justify-content: flex-start; margin-left: -8px; }
}

/* A3: Minha conta (UXF-20, CAP-16): cartões numa coluna; o formulário de senha com 480 px, a regra visível embaixo do
   campo e o aviso das outras sessões embaixo do botão, com respiro. */
.acct-page { display: grid; gap: var(--gap); min-width: 0; max-width: 760px; }
.acct-card { display: grid; gap: 14px; }
.acct-card > h2 { font-size: var(--fs-value); font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
.acct-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; }
.acct-facts dt { font-size: var(--fs-caption); color: var(--ink-2); }
.acct-facts dd { margin: 2px 0 0; font-size: var(--fs-body); color: var(--ink); overflow-wrap: anywhere; }
.acct-facts .mono { font-size: var(--fs-sm); }
.acct-form { max-width: 480px; }
.acct-form .form-actions { justify-content: flex-start; margin-top: 4px; }
.acct-rule { font-variant-numeric: tabular-nums; }
.acct-rule.is-ok { font-weight: 500; color: var(--ink); }
.acct-note { margin-top: -6px; font-size: var(--fs-caption); color: var(--ink-2); }
.acct-text { max-width: 64ch; font-size: var(--fs-sm); color: var(--ink-2); }
.acct-card > .btn { justify-self: start; }
@media (max-width: 640px) {
  .acct-facts { grid-template-columns: minmax(0, 1fr); }
  .acct-card > .btn { justify-self: stretch; justify-content: center; }
}

/* Listas do admin (T17/T18): acessos com o login sob o nome; abaixo de 640 px clientes, acessos, consultas compostas e
   produtos da Engine viram linhas empilhadas, com os números rotulados como na grade da ficha. */
.access-list { display: grid; min-width: 0; }
.access-list > .table-wrap { max-width: none; margin-inline: calc(-1 * var(--card-x)); }
.access-table .access-name { font-weight: 500; color: var(--ink); }
.access-table .row-actions { flex-wrap: nowrap; }
.engine-products-table .c-status .cell-sub { white-space: normal; }
@media (max-width: 640px) {
  .table.table-stack { min-width: 0; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-stack, .table-stack tbody { display: block; width: 100%; }
  .table-stack tbody tr { display: grid; align-items: start; gap: 10px 14px; padding: 14px var(--card-x); border-bottom: 1px solid var(--row-line); }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  .table.table-stack td, .table.table-stack td:first-child, .table.table-stack td:last-child { display: block; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; }
  .table.table-stack td:empty { display: none; }
  /* Tela operacional: rótulo em Inter 12px/500 (mono caixa-alta só em documento, EST-07). */
  .table-stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: var(--fs-caption); font-weight: 500; color: var(--ink-2); }
  .table-stack .cell-title, .table-stack .cell-sub { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .table-stack .row-actions { flex-wrap: wrap; justify-content: flex-start; }
  .table-stack .c-main .row-link, .table-stack .c-user .access-name { font-size: var(--fs-value); }
  .table-stack .c-status { justify-self: end; text-align: right; }
  .table-stack .c-status .cell-text { justify-items: end; }
  .clients-table tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "main main status" "users queries ."; }
  .clients-table .c-main { grid-area: main; }
  .clients-table .c-users { grid-area: users; }
  .clients-table .c-queries { grid-area: queries; }
  .clients-table .c-status { grid-area: status; }
  .table.table-stack.clients-table td.c-act { display: none; }
  .access-table tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "user user" "role status" "act act"; gap: 6px 14px; }
  .access-table .c-user { grid-area: user; }
  .access-table .c-status { grid-area: status; }
  .access-table .c-role { grid-area: role; font-size: var(--fs-sm); color: var(--ink-2); }
  .access-table .c-act { grid-area: act; padding-top: 4px; }
  .composites-table tbody tr { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "main main main main" "status status status status" "sec sec sec sec" "bill month cents total" "act act act act"; }
  .composites-table td.c-status { justify-self: start; text-align: left; }
  .composites-table .c-status .cell-text { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
  .composites-table .c-main { grid-area: main; }
  .composites-table .c-sec { grid-area: sec; }
  .composites-table .c-bill { grid-area: bill; }
  .composites-table .c-month { grid-area: month; }
  .composites-table .c-cents { grid-area: cents; }
  .composites-table .c-total { grid-area: total; }
  .composites-table .c-status { grid-area: status; }
  .composites-table .c-act { grid-area: act; }
  .engine-products-table tbody tr { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "main main main" "sec sec sec" "route route route" "status month total" "act act act"; }
  .engine-products-table .c-main { grid-area: main; }
  .engine-products-table .c-sec { grid-area: sec; }
  .engine-products-table .c-route { grid-area: route; }
  .engine-products-table .c-status { grid-area: status; justify-self: start; text-align: left; }
  .engine-products-table .c-status .cell-text { justify-items: start; }
  .engine-products-table .c-month { grid-area: month; }
  .engine-products-table .c-total { grid-area: total; }
  .engine-products-table .c-act { grid-area: act; }
}

/* Consultas compostas e Produtos da Engine: estilos que estavam inline nos componentes. */
.cp-warning:empty { display: none; }
.cp-item { min-width: 0; }
.cp-required.check { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: var(--fs-caption); color: var(--ink-2); }
.doc-grid.usage-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.usage-month { margin-top: 18px; }
.usage-components td:last-child, .usage-table td { white-space: normal; }
.pe-route-api, .pe-route-custom { display: grid; gap: 16px; min-width: 0; }
.pe-extras { display: grid; min-width: 0; }
.pe-extras-title { margin: 0; }
.pe-extra { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 180px) minmax(0, 1fr); align-items: center; gap: 8px 12px; margin-top: 6px; }
.pe-mode { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 2px 0 6px; }
.field.pe-flags { align-content: center; align-self: center; gap: 10px; }
.pe-side { display: grid; gap: 20px; align-content: start; min-width: 0; }
.pe-test-help { margin: 0 0 14px; }
.form-grid.pe-test-form { gap: 12px; }
.form-actions.pe-test-actions { justify-content: flex-start; margin: 0; }
.pe-tests-title { margin-top: 18px; }
.pe-tests td { vertical-align: top; }
.pe-test-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.pe-raw { max-height: 420px; margin: 8px 0 0; overflow: auto; font-size: var(--fs-caption); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .pe-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-extra > :first-child { grid-column: 1 / -1; }
}

/* Responsivo das superfícies novas (container da folha + viewport) */
@container (max-width: 860px) {
  .doc-grid.c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 640px) {
  .doc-grid, .doc-grid.c4, .doc-grid.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cnh-card { grid-template-columns: auto minmax(0, 1fr); }
  .cnh-valid { grid-column: 1 / -1; text-align: left; }
  .cnh-valid .val { justify-content: flex-start; }
  .cnh-photo { grid-column: 1 / -1; justify-items: start; }
}
@container (max-width: 520px) {
  .doc-grid, .doc-grid.c4, .doc-grid.c5 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  .sheet-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "plate" "meta" "tools"; }
  .sheet-head > .plate { justify-self: start; margin-top: 12px; }
}
@media (max-width: 768px) {
  .family, .family-page.is-single .family { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sheet { padding: 18px 16px 16px; }
  .sheet-title { font-size: var(--fs-h1-sm); }
  /* A parte secundária do título numa linha própria, sem o " · " no começo dela (RX-TYPO-01; o mesmo do contrato). */
  .sheet-title .model { display: block; margin-top: 2px; }
  .sheet-title .sheet-sep { display: none; }
  .composer { padding: 18px 16px; }
  .composer h2 { font-size: var(--fs-title); }
  .composer-row { grid-template-columns: minmax(0, 1fr); }
  .composer-row > .btn { width: 100%; }
  .query-running { padding: 18px 16px; }
  .value-amount { font-size: var(--fs-verdict); }
  .verdict-word { font-size: var(--fs-verdict-sm); }
}
@media (max-width: 480px) {
  /* Ações quebram em linhas sem cortar o texto nem perder o ícone. */
  .sheet-tools .btn { flex: 1 1 auto; min-width: 0; height: auto; min-height: var(--ctl-h); padding: 9px 14px; white-space: normal; line-height: 1.25; text-align: center; }
  .sheet-tools .btn .ic { flex: none; }
  /* Toque não tem title: no celular o detalhe da verificação aparece inteiro. */
  .checks .check-detail { display: block; overflow: visible; -webkit-line-clamp: unset; }
  .doc-table th, .doc-table td { white-space: nowrap; }
  .doc-section > header { flex-direction: column; align-items: flex-start; }
  .doc-section .origin { text-align: left; }
}

/* 25. Telas existentes, rodada v2 (docs/LEVANTAMENTO-20261018.md, E1) ===== */
/* Estado `info` do carimbo: "Consta" sem gravidade (passagens por radar, cadastro ANTT, leitura de quilometragem):
   palavra em tinta e o ponto como anel vazado na tinta primária (decisão f de 18/10/2026), para não confundir com o
   ponto cinza cheio de "Sem informação"; nunca verde, âmbar ou vermelho. */
.st-info { color: var(--ink); }
.st-info i { background: transparent !important; box-shadow: inset 0 0 0 1.5px currentColor; }
.checks[data-count="1"] .st-info i, .verdict-hero.st-info .verdict-word i { box-shadow: inset 0 0 0 2px currentColor; }

/* Carimbos pela contagem (data-count = total; decisão g de 18/10/2026): a grade nunca termina com célula vazia.
   Colunas pela contagem, a mesma regra do Resumo do PDF (backend/pdf/render._colunas: a que deixa menos sobra, 4 no
   empate): 1 = veredito em destaque; 2 = 2; 3, 5, 6, 9, 13, 14, 15, 17, 18 e 21 = 3; 10 = 5 na folha larga; o restante, 4.
   A grade tem 12 trilhas e a última linha divide a largura entre as células que sobram (5 → 3 + 2, 7 → 4 + 3,
   11 → 4 + 4 + 3); com 3 colunas e uma célula sobrando, as quatro últimas fecham em 2 + 2 (13 → 3 + 3 + 3 + 2 + 2).
   Folha média (até 860 px): 3 colunas para qualquer contagem, pela mesma divisão (4 → 2 + 2, 7 → 3 + 2 + 2,
   8 → 3 + 3 + 2); celular (até 640 px): 2, com a última ímpar na linha inteira; abaixo de 360 px de tela, 1.
   As regras de 4 por linha têm a especificidade zerada (:where): as de 3 por linha e a do 10 mandam sobre elas. */
/* Uma verificação só: a composição do veredito único (como "Possui CNH?"), sem célula esticada. */
.checks[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.checks[data-count="1"] > .check { min-height: 0; padding: 20px 24px 21px; }
.checks[data-count="1"] .check-verdict { gap: 10px; margin-top: 6px; font-size: var(--fs-verdict); letter-spacing: -.015em; line-height: 1.2; white-space: normal; }
.checks[data-count="1"] .check-verdict i { width: 12px; height: 12px; }
.checks[data-count="1"] .check-detail { display: block; margin-top: 6px; max-width: 80ch; overflow: visible; font-size: var(--fs-sm); line-height: 1.45; -webkit-line-clamp: unset; }
@container (width > 860px) {
  .checks:where([data-count]:not([data-count="1"])) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  :where(.checks[data-count]:not([data-count="1"])) > .check { grid-column: span 3; }
  :where(.checks[data-count]:not([data-count="1"])) > .check:where(:nth-child(4n+1):nth-last-child(3), :nth-child(4n+1):nth-last-child(3) ~ *) { grid-column: span 4; }
  :where(.checks[data-count]:not([data-count="1"])) > .check:where(:nth-child(4n+1):nth-last-child(2), :nth-child(4n+1):nth-last-child(2) ~ *) { grid-column: span 6; }
  :where(.checks[data-count]:not([data-count="1"])) > .check:where(:nth-child(4n+1):last-child) { grid-column: 1 / -1; }
  .checks:is([data-count="3"], [data-count="5"], [data-count="6"], [data-count="9"], [data-count="13"], [data-count="14"],
    [data-count="15"], [data-count="17"], [data-count="18"], [data-count="21"]) > .check { grid-column: span 4; }
  .checks:is([data-count="3"], [data-count="5"], [data-count="6"], [data-count="9"], [data-count="13"], [data-count="14"],
    [data-count="15"], [data-count="17"], [data-count="18"], [data-count="21"]) > .check:is(:nth-child(3n+1):nth-last-child(2), :nth-child(3n+1):nth-last-child(2) ~ *,
    :nth-child(3n+1):nth-last-child(4), :nth-child(3n+1):nth-last-child(4) ~ *) { grid-column: span 6; }
  .checks[data-count="10"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .checks[data-count="10"] > .check { grid-column: auto; }
}
@container (640px < width <= 860px) {
  .checks:where([data-count]:not([data-count="1"])) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  :where(.checks[data-count]:not([data-count="1"])) > .check { grid-column: span 4; }
  :where(.checks[data-count]:not([data-count="1"])) > .check:where(:nth-child(3n+1):nth-last-child(2), :nth-child(3n+1):nth-last-child(2) ~ *,
    :nth-child(3n+1):nth-last-child(4), :nth-child(3n+1):nth-last-child(4) ~ *) { grid-column: span 6; }
}
@container (width <= 640px) {
  .checks:where([data-count]:not([data-count="1"])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.checks[data-count]:not([data-count="1"])) > .check { grid-column: auto; }
  :where(.checks[data-count]:not([data-count="1"])) > .check:where(:last-child:nth-child(odd)) { grid-column: 1 / -1; }
  .checks[data-count="1"] .check-verdict { font-size: var(--fs-verdict-sm); }
}
@media (max-width: 359.98px) {
  .checks:where([data-count]:not([data-count="1"])) { grid-template-columns: minmax(0, 1fr); }
  :where(.checks[data-count]:not([data-count="1"])) > .check { grid-column: auto; }
}

/* Grade de campos no celular: valores curtos (até 14 caracteres) dois por linha; os longos ocupam a linha. */
@container (max-width: 520px) {
  .doc-grid, .doc-grid.c4, .doc-grid.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-grid > div:not(.short) { grid-column: 1 / -1; }
}

/* Cabeçalho do resultado: protocolo numa forma só (curto, mono, cópia ao clicar) e rótulo dos parâmetros extras. */
.protocol-copy { display: inline-flex; align-items: center; gap: 5px; padding: 1px 4px; margin: -1px -4px; border: 0; border-radius: var(--r-xs); background: none; color: var(--ink-2); font: inherit; cursor: copy; }
.protocol-copy .mono { font-size: var(--fs-caption); }
.protocol-copy .ic { width: 12px; height: 12px; color: var(--ink-3); transition: color var(--dur-hover) var(--ease-out); }
.protocol-copy:hover { color: var(--ink); background: var(--hover); }
.protocol-copy:hover .ic { color: var(--ink-2); }
.protocol-copy:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.params-label { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-chip); background: var(--off-bg); font-size: var(--fs-chip); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.key-cell { flex-wrap: wrap; row-gap: 4px; }
.run-key .run-params { margin-left: 10px; font-family: var(--font); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.sheet-foot { row-gap: 6px; }

/* Lista de produtos (A2, EST-12): cabeçalho do grupo em Inter 12px com a contagem à direita (só com mais de um grupo e
   mais de 4 produtos); família grande com grupos recolhíveis e filtro, sem saltos por grupo. Descrição em até duas
   linhas em todos os itens; a completa fica no compositor. */
.product-group-head, .product-group-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 6px 10px; }
.product-group-label { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.product-group-count { margin-left: auto; font-size: var(--fs-caption); font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.product-group-toggle { border: 0; border-radius: var(--r-ctl); background: none; font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-hover) var(--ease-out); }
.product-group-toggle:hover { background: var(--hover); }
.product-group-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.product-group-toggle > .ic { width: 13px; height: 13px; flex: none; color: var(--ink-3); transition: transform var(--dur-hover) var(--ease-out); }
.product-group-toggle[aria-expanded="true"] > .ic { transform: rotate(90deg); }
.product-list.is-big .product-group + .product-group { margin-top: 0; }
.product-list.is-big .product-group.is-open { padding-bottom: 6px; }
.product-list.is-grouped:not(.is-big) .product-group + .product-group { margin-top: 8px; }
.product-group-items { display: grid; gap: 2px; }
.product-group-items[hidden], .product-group[hidden], .product[hidden] { display: none; }
.product span { display: -webkit-box; margin-top: 2px; overflow: hidden; font-size: var(--fs-caption); line-height: 1.4; color: var(--ink-2); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product-none { padding: 14px 10px 12px; font-size: var(--fs-sm); color: var(--ink-2); }
.family-side { display: grid; align-content: start; gap: 12px; min-width: 0; }
.family-tools { display: grid; gap: 10px; min-width: 0; }
.product-filter { position: relative; min-width: 0; }
.product-filter > .ic { position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.product-filter .input { padding-left: 36px; }
@media (max-width: 768px) { .family-side { display: none; } }

/* Compositor com parâmetros extras: os campos ficam à direita da chave, com o mesmo visual. */
.composer-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.composer-row > .key-field { flex: 1 1 240px; min-width: 0; }
.composer-row > .param-field { flex: 0 0 auto; min-width: 0; }
.param-field.param-uf { width: 210px; }
.param-field.param-choice { width: 190px; }
.param-field.param-digits { width: 180px; }
.composer-row > .btn { flex: none; min-width: 128px; }
select.input.param { height: var(--ctl-h); }
@media (max-width: 640px) {
  .composer-row { flex-direction: column; align-items: stretch; }
  .composer-row > .key-field, .composer-row > .param-field { flex: none; width: 100%; }
}


/* A3: Histórico (rodada de 26/10/2026: UXC-07, UXC-14, UXC-15, TXT-19). Busca e "Baixar planilha (CSV)" numa linha, os
   filtros densos (36 px) embaixo; tabela operacional (cabeçalho Inter 12px) com linhas de 40 px sem ícone, a linha
   inteira clicável e o cabeçalho preso sob a topbar ao rolar (a superfície recorta com overflow: clip, que não cria
   rolagem e deixa o sticky valer). Até 900 px cada consulta vira um bloco (produto e valor; consultado e data; situação e
   usuário). Até 640 px ficam a busca e "Filtros (n)", que abre a folha inferior. */
.hist-page { display: grid; gap: var(--gap); min-width: 0; }
.hist-card { padding: 0; overflow: clip; }
.hist-bar { display: flex; align-items: center; gap: 10px; padding: 16px var(--card-x) 10px; }
.hist-bar .spacer { flex: 1; }
.hist-filters-btn { display: none; flex: none; }
.hist-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 var(--card-x) 14px; border-bottom: 1px solid var(--hairline); }
.hist-select { width: auto; min-width: 0; max-width: 220px; height: 36px; padding: 0 34px 0 11px; font-size: var(--fs-sm); text-overflow: ellipsis; }
.hist-product { max-width: 260px; }
.hist-dates { display: inline-flex; align-items: center; gap: 6px; }
.hist-dates[hidden] { display: none; }
.hist-date { width: 148px; height: 36px; padding: 0 10px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.hist-dates-sep { font-size: var(--fs-sm); color: var(--ink-2); }
.hist-filters > .btn[hidden] { display: none; }
.hist-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.hist-table thead th {
  position: sticky;
  top: 64px;
  z-index: 3;
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  font-size: var(--fs-caption);
  font-weight: 500;
  text-align: left;
  color: var(--ink-2);
  white-space: nowrap;
}
.hist-table th.num, .hist-table td.num { text-align: right; }
.hist-table td { height: 40px; padding: 6px 12px; border-bottom: 1px solid var(--row-line); vertical-align: middle; color: var(--ink); }
.hist-table tbody tr:last-child > td { border-bottom: 0; }
.hist-table th:first-child, .hist-table td:first-child { padding-left: var(--card-x); }
.hist-table th:last-child, .hist-table td:last-child { padding-right: var(--card-x); }
.hist-row { cursor: pointer; }
.hist-row > td { transition: background var(--dur-hover) var(--ease-out); }
.hist-row:hover > td, .hist-row:focus-within > td { background: var(--hover); }
.h-date { width: 1%; white-space: nowrap; color: var(--ink-2); }
.h-user { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.h-prod { min-width: 180px; }
.h-key .key-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.h-key-link { display: inline-flex; align-items: center; border-radius: var(--r-xs); color: var(--ink); }
.h-key-link .mono { font-size: var(--fs-sm); }
.h-key-link:hover .mono { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.h-key-link:hover .plate-sm { border-color: var(--ink-2); }
.h-key-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.h-status { width: 1%; white-space: nowrap; }
.h-records, .h-bill { width: 1%; white-space: nowrap; }
.hist-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px var(--card-x); border-top: 1px solid var(--hairline); font-size: var(--fs-caption); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hist-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hist-size { width: auto; height: var(--ctl-h-sm); padding: 0 30px 0 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); background-position: right 8px center; }
.hist-body > .empty, .hist-body > .notice { margin: 6px var(--card-x) 18px; }
.hist-body > .skeleton-list { padding: 0 var(--card-x) 12px; }
.hist-body[aria-busy="true"]:has(> .skeleton-list) { opacity: 1; }
/* Folha inferior de filtros (celular): sobe da borda de baixo e desce mais curta ao fechar. */
.hist-sheet { display: grid; gap: 14px; }
.hist-sheet .field { gap: 6px; }
.hist-field-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.hist-sheet .hist-select, .hist-sheet .hist-product { width: 100%; max-width: none; height: 44px; font-size: var(--fs-body); }
.hist-sheet .hist-dates { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.hist-sheet .hist-dates[hidden] { display: none; }
.hist-sheet .hist-date { width: 100%; height: 44px; }
.hist-sheet .hist-sheet-csv { justify-content: center; width: 100%; height: 44px; }
@media (max-width: 900px) {
  .hist-table, .hist-table tbody { display: block; }
  .hist-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hist-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "prod bill" "key date" "status user"; align-items: center; gap: 6px 14px; padding: 12px var(--card-x); border-top: 1px solid var(--row-line); }
  .hist-table:not(.has-user) tr { grid-template-areas: "prod bill" "key date" "status status"; }
  .hist-table tbody tr:first-child { border-top: 0; }
  .hist-table td { display: block; width: auto; height: auto; min-width: 0; max-width: none; padding: 0 !important; border: 0 !important; }
  .hist-row:hover > td, .hist-row:focus-within > td { background: none; }
  .hist-row:hover, .hist-row:focus-within { background: var(--hover); }
  .h-prod { grid-area: prod; font-weight: 500; }
  .h-bill { grid-area: bill; }
  .h-key { grid-area: key; }
  .h-date { grid-area: date; justify-self: end; font-size: var(--fs-caption); }
  .h-status { grid-area: status; }
  .h-user { grid-area: user; justify-self: end; font-size: var(--fs-caption); }
  .h-user.is-empty { visibility: hidden; }
  .h-records { display: none !important; }
}
@media (max-width: 640px) {
  .hist-filters, .hist-csv { display: none; }
  .hist-filters-btn { display: inline-flex; }
  .hist-bar { padding: 14px var(--card-x) 12px; border-bottom: 1px solid var(--hairline); }
  .hist-bar .search-field { max-width: none; }
  .hist-bar .spacer { display: none; }
  .hist-foot { justify-content: flex-start; }
  .hist-pager { width: 100%; }
  .hist-pager .hist-size { flex: 1 1 auto; }
  .hist-pager .btn { width: var(--ctl-h-sm); padding: 0; justify-content: center; }
  .hist-pager .btn > span:not(.ic) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #dialog-root .drawer.hist-sheet-panel { transform: translateY(24px); }
  #dialog-root.open .drawer.hist-sheet-panel { transform: none; }
  #dialog-root.closing .drawer.hist-sheet-panel { transform: translateY(12px); }
}

/* Documento oficial: o quadro acompanha a prévia (até 720 px de altura) em vez de um quadro vazio fixo. */
.doc-preview-frame { display: inline-flex; max-width: 100%; min-height: 0; max-height: none; padding: 12px; vertical-align: top; }
.doc-preview-img { max-height: 720px; }
.doc-preview-frame[data-document] { cursor: pointer; }

/* Lotes › Novo lote: área de arquivo com botão, selo do arquivo escolhido e estado de arrasto. */
.file-drop { position: relative; cursor: pointer; }
.file-drop .file-pick { margin-top: 2px; }
.file-drop.has-file { border-style: solid; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 8px; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--surface); font-size: var(--fs-caption); color: var(--ink); }
.file-chip .ic { width: 14px; height: 14px; color: var(--ink-2); }
.file-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.file-chip-size { flex: none; font-family: var(--mono); font-size: var(--fs-chip); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Recall: cabeçalho da campanha (início e selo "Histórico") e o texto da fonte em parágrafos. */
.doc-entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.doc-source-text { display: grid; gap: 8px; max-width: 80ch; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink); }
.doc-source-text b { font-weight: 600; }

/* Selo dentro de célula empilhada (situação do gravame, gravidade): no tamanho do texto, não na largura da célula. */
.cell-stack > .doc-chip { justify-self: start; }
/* No celular as tabelas rolam no envelope sem quebrar linha; a célula com texto empilhado (infração, penalidade) quebra. */
@media (max-width: 480px) { .doc-table td:has(> .cell-stack) { min-width: 220px; white-space: normal; } }
/* Duas tabelas lado a lado (histórico FIPE 6 + 6); uma embaixo da outra no celular. */
.doc-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; align-items: start; }
@container (max-width: 640px) { .doc-split { grid-template-columns: minmax(0, 1fr); } }
/* Detalhes dentro de uma célula de tabela (infrações): o restante dos fatos da linha, sob demanda. */
.doc-cell-more { margin-top: 4px; }
.doc-cell-more > summary { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); font-weight: 500; color: var(--ink-2); list-style: none; cursor: pointer; }
.doc-cell-more > summary::-webkit-details-marker { display: none; }
.doc-cell-more > summary:hover { color: var(--ink); }
.doc-cell-more > summary .ic { width: 12px; height: 12px; transition: transform var(--dur-hover) var(--ease-out); }
.doc-cell-more[open] > summary .ic { transform: rotate(90deg); }
.doc-cell-more .doc-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 8px 16px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sheet); white-space: normal; }
.doc-cell-more .doc-grid dd { font-size: var(--fs-sm); }

/* Impressão do resultado: só a folha, sem moldura, navegação nem ações */
@media print {
  @page { margin: 12mm 11mm 15mm; }
  html, body { height: auto !important; background: #fff !important; }
  body:has(.shell:not([hidden])) { height: auto !important; overflow: visible !important; }
  .sidebar, .topbar, .scrim, .skip-link, .toasts, .toast-stack, .env-strip, #dialog-root, .result-back, .query-origin, .svc-back,
  .sheet-tools, .sheet-foot details { display: none !important; }
  .shell { display: block !important; width: auto !important; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; background: #fff !important; }
  .main { overflow: visible !important; }
  .view { padding: 0 !important; }
  .sheet { padding: 0; border: 0; }
  .checks, .doc-alert, .doc-table, .cnh-card, .value-hero, .verdict-hero, .doc-grid > div, .doc-preview { break-inside: avoid; }
  .doc-section > header { break-after: avoid; }
  .checks, .checks > .check, .doc-alert, .doc-table, .cnh-card, .cnh-cat, .doc-chip, .plate { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 26. Casca, componentes e movimento (rodada de 26/10/2026) =============== */
/* Troca de página sem piscar (MOT-01): o conteúdo anterior fica e esmaece só se a nova página demorar mais de
   150 ms; a barra fina da topbar mostra a carga. Nada de fade nem deslocamento na chegada. */
.view.is-loading > * { opacity: .55; pointer-events: none; transition: opacity var(--dur-hover) var(--ease-out) 150ms; }

/* Faixa de indicadores (kpiStrip, EST-26): um componente só para Início, Meu contrato e Consumo. Células canvas
   dentro da folha, separadas por 1px; rótulo mono de documento; valor 20px em algarismos proporcionais (número solto,
   não coluna); sublinha 12px; medidor opcional de franquia. */
.kpi-strip {
  --kpi-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--kpi-cols), minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-checks);
  background: var(--line);
  overflow: hidden;
}
/* A faixa é uma <dl>: a margem do navegador sai sem especificidade (:where), e o espaço entre as peças da página
   (.view > * + *) e o de cada folha (.mc-sheet > .kpi-strip, .ct-sheet > .kpi-strip) continuam valendo. */
:where(.kpi-strip) { margin: 0; }
.kpi-strip[data-count="1"] { --kpi-cols: 1; }
.kpi-strip[data-count="2"] { --kpi-cols: 2; }
.kpi-strip[data-count="3"] { --kpi-cols: 3; }
.kpi-strip[data-count="5"] { --kpi-cols: 5; }
.kpi-cell { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 12px 14px 13px; background: var(--canvas); }
.kpi-cell dt { font-family: var(--mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); overflow-wrap: anywhere; }
.kpi-value { margin: 2px 0 0; font-size: var(--fs-count); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.kpi-sub { margin: 0; font-size: var(--fs-caption); line-height: 1.4; color: var(--ink-2); }
.kpi-cell.is-warn .kpi-sub { color: var(--warn); font-weight: 500; }
.kpi-meter-cell { margin: 6px 0 0; }
/* Medidor de uso: trilho no tom claro da marca, preenchimento na marca; em âmbar a partir de 80% e quando passa da
   franquia (o texto ao lado diz quanto), com o trilho no passo claro da mesma rampa (warn-bg, regra da dataviz). */
.kpi-meter { position: relative; height: 4px; border-radius: var(--r-bar); background: var(--chart-track); overflow: hidden; }
.kpi-meter > i { position: absolute; inset: 0; border-radius: var(--r-bar); background: var(--chart-bar-hi); transform: scaleX(var(--p, 0)); transform-origin: left; }
.kpi-meter.is-warn, .kpi-meter.is-over { background: var(--warn-bg); }
.kpi-meter.is-warn > i, .kpi-meter.is-over > i { background: var(--chart-quota-over); }
@media (max-width: 1100px) {
  .kpi-strip[data-count="5"] { --kpi-cols: 3; }
}
@media (max-width: 640px) {
  .kpi-strip, .kpi-strip[data-count="3"], .kpi-strip[data-count="5"] { --kpi-cols: 2; }
  .kpi-strip[data-count="1"] { --kpi-cols: 1; }
  .kpi-strip > .kpi-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Últimas consultas (recentList, EST-10): uma lista só para Início e famílias. Linha inteira clicável de 40px:
   chave em mono (placa como chapa pequena), produto, situação e data em Brasília. As colunas se alinham entre as
   linhas (subgrid); no estreito, a ordem do histórico em duas linhas ([produto e data] / [dado e situação]). */
.recent-list {
  container-type: inline-size;
  display: grid;
  grid-template-columns: fit-content(32%) minmax(0, 1fr) auto auto;
  column-gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card.flush > .recent-list, .card.flush > .card-body > .recent-list { padding: 0 var(--card-x) 8px; }
.recent-list > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; min-width: 0; border-top: 1px solid var(--row-line); }
.recent-list > li:first-child { border-top: 0; }
.recent-line {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  row-gap: 4px;
  min-height: 40px;
  margin: 0 -10px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: background var(--dur-hover) var(--ease-out);
}
.recent-line:hover { background: var(--hover); }
.recent-line:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.recent-key { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.recent-key .mono { font-size: var(--fs-sm); color: var(--ink); overflow-wrap: anywhere; }
/* O nome do produto quebra em até 2 linhas (RC-F3): com reticências na primeira, dois produtos parecidos ficavam iguais. */
.recent-product { min-width: 0; font-size: var(--fs-body); color: var(--ink); white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.recent-status { display: inline-flex; justify-self: end; }
.recent-date { font-size: var(--fs-caption); color: var(--ink-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@container (max-width: 560px) {
  .recent-list > li { display: block; }
  /* A mesma ordem do histórico no celular (RC-F4): produto e data na primeira linha, o dado consultado em mono e a
     situação embaixo. O produto começa sempre no mesmo x, seja qual for o tamanho do dado. */
  .recent-line { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "prod date" "key status"; column-gap: 12px; row-gap: 6px; padding-block: 10px; }
  .recent-key { grid-area: key; }
  .recent-product { grid-area: prod; }
  .recent-status { grid-area: status; justify-self: end; }
  .recent-date { grid-area: date; justify-self: end; }
}