/* Shell, layout, densidade e componentes do ERP. Só var(--token): nenhuma cor, raio, sombra, camada ou tempo solto. */

/* ---------- tom: um mecanismo para chip, badge, alerta, score e vazio ---------- */
[data-tom="ok"], [data-alert-tone="ok"] { --tom: var(--ok); --tom-fundo: var(--ok-fundo); }
[data-tom="warn"], [data-alert-tone="warn"] { --tom: var(--warn); --tom-fundo: var(--warn-fundo); }
[data-tom="crit"], [data-alert-tone="crit"] { --tom: var(--crit); --tom-fundo: var(--crit-fundo); }
[data-tom="info"], [data-alert-tone="info"] { --tom: var(--info); --tom-fundo: var(--info-fundo); }
[data-tom="neutro"] { --tom: var(--neutro); --tom-fundo: var(--neutro-fundo); }

/* ---------- shell ---------- */
.app {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  grid-template-rows: var(--cabecalho-h) auto auto minmax(0, 1fr) auto; /* a faixa de demonstração ocupa a linha 3 */
  height: 100vh;
  height: 100dvh;
}
.app[data-teca-trilho] { grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--trilho-teca); }
.app[data-spec] { grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--spec-w); }
.app[data-teca-trilho][data-spec] { grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--trilho-teca) var(--spec-w); }
.teca-trilho, .spec { grid-column: 3; }
.app[data-teca-trilho][data-spec] .spec { grid-column: 4; }

.cabecalho {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0 var(--e-4);
  background: var(--superficie);
  border-bottom: var(--b) solid var(--borda);
}
.marca { display: inline-flex; align-items: center; gap: var(--e-3); min-height: var(--alvo-min); color: var(--tinta); text-decoration: none; }
.marca-logo { width: var(--logo-w); height: auto; max-width: 100%; } /* a largura cede no aperto; a altura acompanha, sem deformar */
.marca-nome { font: var(--t-titulo); font-family: var(--fonte-titulo); }
.cab-espaco { flex: 1; }
.cab-busca { min-width: 14rem; justify-content: space-between; }
.cab-pessoa { min-width: 0; max-width: 20rem; }

.nav {
  grid-row: 4;
  position: relative;
  overflow-y: auto;
  padding: var(--e-3) var(--e-2);
  background: var(--superficie);
  border-right: var(--b) solid var(--borda);
}
.nav-grupo + .nav-grupo { margin-top: var(--e-3); padding-top: var(--e-3); border-top: var(--b) solid var(--borda); }
.nav-grupo-titulo { display: none; padding: 0 var(--e-3) var(--e-2); color: var(--tinta-3); font: var(--t-legenda); }
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--alvo-min);
  min-width: var(--alvo-min);
  padding: 0 var(--e-3);
  border-radius: var(--r-card);
  color: var(--tinta-2);
  text-decoration: none;
  font: var(--t-corpo);
}
.nav-link:hover { background: var(--superficie-2); }
.nav-link[aria-current="page"] { background: var(--neutro-fundo); color: var(--tinta); font-weight: 600; box-shadow: inset var(--e-1) 0 0 var(--dado); }
.nav-link .ico { flex: none; }
@media (max-width: 1599px) {
  .nav-rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-link { justify-content: center; padding: 0; }
  /* (crítica 10) o trilho de 56 px abre os nomes por hover e por foco, sem mexer na largura da coluna do conteúdo */
  .nav:hover, .nav:focus-within { width: 240px; z-index: calc(var(--z-fixo) + 2); box-shadow: var(--sombra-modal); }
  .nav:hover .nav-rotulo, .nav:focus-within .nav-rotulo { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
  .nav:hover .nav-link, .nav:focus-within .nav-link { justify-content: flex-start; padding: 0 var(--e-3); }
  .nav:hover .nav-grupo-titulo, .nav:focus-within .nav-grupo-titulo { display: block; }
}
@media (min-width: 1600px) { .nav-grupo-titulo { display: block; } }

.conteudo {
  grid-row: 4;
  min-width: 0;
  overflow: auto;
  padding: var(--e-5) var(--e-5) var(--respiro-fim);
  scroll-padding-block: var(--e-4) var(--respiro-fim);
}
.conteudo:focus, .conteudo:focus-visible { outline: none; }
.conteudo > * + * { margin-top: var(--e-5); }

.status {
  grid-column: 1 / -1;
  grid-row: 5; /* explícito: com #aviso vazio (display: none) a barra subia para a linha 2 */
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: 0 var(--e-4);
  background: var(--superficie-2);
  border-top: var(--b) solid var(--borda);
  font: var(--t-apoio);
  color: var(--tinta-2);
  position: relative;
  min-width: 0;
  min-height: var(--status-h);
  /* sem overflow: hidden aqui — ele cortava o menu Cenário, que abre para cima; cada .status-item já trunca o próprio texto */
  overflow: visible;
  padding-right: calc(var(--fab) + var(--e-4));
}
.app[data-teca-trilho] .status { padding-right: var(--e-4); }
.status-item { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; overflow: hidden; white-space: nowrap; }
.status-item:last-child { display: block; overflow: hidden; text-overflow: ellipsis; line-height: var(--status-h); }
.status-item:last-child svg { display: inline-block; vertical-align: text-bottom; margin-right: var(--e-2); }
.status .menu { flex: none; }
.status-sep { flex: 1; min-width: 0; }
.status .btn { min-height: var(--alvo); }

.aviso-faixa { grid-column: 1 / -1; grid-row: 2; padding: 0 var(--e-4); }
.aviso-faixa:empty { display: none; }
.aviso-faixa > * { margin: var(--e-2) 0; }

/* Teca: trilho fixo no layout >= 1920, diálogo e FAB abaixo */
.teca-trilho { grid-row: 4; overflow: auto; padding: var(--e-4); background: var(--superficie); border-left: var(--b) solid var(--borda); }
.teca-fab {
  /* Encaixado na barra de status: nunca fica sobre o conteúdo, então não cobre cartão nem filtro em nenhuma posição da rolagem */
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: var(--z-flutuante);
  width: var(--fab);
  height: var(--status-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-left: var(--b) solid var(--borda);
  border-radius: unset;
  background: var(--superficie-2);
}
.teca-fab img { width: var(--fab-img); height: var(--fab-img); filter: var(--teca-halo); }
.app[data-teca-trilho] ~ .teca-fab { display: none; }
.teca-painel { display: flex; flex-direction: column; gap: var(--e-3); height: 100%; min-height: 0; }
.teca-topo { display: flex; justify-content: center; flex: none; }
.teca-img { width: 80px; height: 80px; object-fit: contain; filter: var(--teca-halo); }
.teca-fala { font: var(--t-titulo); }
.teca-rotulo { color: var(--tinta-3); margin-top: var(--e-3); }
.teca-texto > * + * { margin-top: var(--e-2); }
/* chat da Teca: o log rola, o campo fica à vista */
.teca-chat { flex: 1 1 auto; min-height: 8rem; overflow-y: auto; display: flex; flex-direction: column; gap: var(--e-3); padding-right: var(--e-1); scroll-padding-block: var(--e-2); }
.teca-linha { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1); }
.teca-linha[data-de="voce"] { align-items: flex-end; }
.teca-quem { font: var(--t-legenda); color: var(--tinta-3); }
.teca-linha p { margin: 0; }
.teca-linha[data-de="voce"] > p { max-width: 90%; padding: var(--e-2) var(--e-3); background: var(--superficie-2); border-radius: var(--r-chip); }
.teca-proposta { width: 100%; padding: var(--e-3); background: var(--superficie-2); border: var(--b) solid var(--borda); border-radius: var(--r-card); }
.teca-sugestoes { display: flex; flex-wrap: wrap; gap: var(--e-2); flex: none; }
.teca-status { min-height: 1.25rem; flex: none; }
.teca-form { display: flex; gap: var(--e-2); align-items: flex-end; flex: none; }
.teca-form input { flex: 1 1 auto; min-width: 0; }
.teca-rodape { flex: none; }

.spec { grid-row: 4; overflow: auto; padding: var(--e-4); background: var(--superficie); border-left: var(--b) solid var(--borda); }
.spec-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--e-3); }
.spec-dl dt { margin-top: var(--e-3); color: var(--tinta-3); }
.spec-dl dd { overflow-wrap: anywhere; }
.spec-medidas { margin: var(--e-2) 0 var(--e-3); }
[data-spec-grade] .conteudo {
  background-image: linear-gradient(var(--spec-grade) var(--b), transparent var(--b)), linear-gradient(90deg, var(--spec-grade) var(--b), transparent var(--b));
  background-size: var(--e-2) var(--e-2);
}
[data-spec-alvos] .conteudo :is(button, a[href], input, select, [role="tab"]) { outline: var(--b) dashed var(--spec-alvo); }

/* layout cheio (login) */
.app[data-layout="cheio"] { display: block; height: auto; min-height: 100vh; }
.app[data-layout="cheio"] :is(.cabecalho, .nav, .status, .teca-trilho, .spec, .aviso-faixa) { display: none; }
.app[data-layout="cheio"] ~ .teca-fab { display: none; }
.app[data-layout="cheio"] .conteudo { padding: 0; overflow: visible; }
.app[data-layout="cheio"] .conteudo > * + * { margin-top: 0; }

.cab-menu { display: none; }
@media (max-width: 339px) {
  .cabecalho { gap: 0; padding: 0 2px; }
  .cabecalho .cab-teca { display: none; } /* a 320 px o FAB da Teca continua abrindo o mesmo painel */
}
@media (max-width: 639px) {
  .cab-menu { display: inline-flex; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .app > .nav, .app .cab-spec, .app .cab-busca-texto, .app .cab-busca .kbd { display: none; }
  .app .cab-caixa { display: none; } /* a fila continua na home, na navegação e na busca; o seletor de perfil ganha o espaço */
  .app .cab-pessoa { display: flex; max-width: 48vw; }
  .app .cab-pessoa-caixa { max-width: 40vw; }
  .cabecalho .marca-nome { display: none; }
  .cabecalho .cab-pessoa select { max-width: 100%; }
  .cab-busca { min-width: var(--alvo-toque); }
  .conteudo { padding: var(--e-4) var(--e-4) var(--respiro-fim); }
  .cabecalho { gap: 2px; padding: 0 var(--e-1); }
  .marca { min-height: var(--alvo-toque); }
  .status .status-opcional { display: none; }
  .status { flex-wrap: wrap; height: auto; }
  .status .status-item:last-child { display: inline-flex; flex: 1 1 100%; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; padding-block: 4px; }
  .status-texto { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- botão ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--alvo-min);
  padding: 0 var(--e-4);
  border: var(--b) solid transparent;
  border-radius: var(--r-card);
  font: var(--t-corpo);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: background-color var(--dur-rapido) var(--ease-padrao);
}

/* ---------- estados de interação (polish, itens 1, 2 e 5) ----------
   Todo controle responde ao ponteiro (hover) e ao clique (active); a troca de fundo usa a camada de movimento do sistema.
   Nenhum controle ganha :active sem hover: o par é a regra. */
:where(.btn, .nav-link, .menu-item, .aba, .th-botao, .teca-fab, .busca-item, .migalhas a[href], .marca, summary, a[href]) {
  transition: background-color var(--dur-rapido) var(--ease-padrao), color var(--dur-rapido) var(--ease-padrao), border-color var(--dur-rapido) var(--ease-padrao);
}
.nav-link:hover, .menu-item:hover, .aba:hover, .th-botao:hover, .busca-item:hover, .migalhas a[href]:hover, .marca:hover, summary:hover { background: var(--borda); }
a[href]:not(.btn):not(.nav-link):not(.menu-item):not(.busca-item):hover { color: var(--acao-hover); text-decoration: underline; text-underline-offset: 2px; }
.teca-fab:hover { transform: translateY(-1px); }
.btn[data-tom="perigo"]:hover:not(:disabled) { background: var(--crit-fundo-hover); }
.nav-link:active, .menu-item:active, .aba:active, .th-botao:active, .busca-item:active, .marca:active, summary:active { background: var(--superficie-2); box-shadow: inset 0 0 0 var(--b) var(--borda); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 0 0 var(--b) var(--borda); }
.btn[data-tom="primario"]:active:not(:disabled) { background: var(--acao-active); }
.btn[data-tom="perigo"]:active:not(:disabled) { background: var(--crit-ativo); }
a[href]:not(.btn):active { color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { :where(.btn, .nav-link, .menu-item, .aba, .th-botao, .teca-fab, .busca-item, a[href]) { transition: none; } .teca-fab:hover { transform: none; } .btn:active { transform: none; } }

.btn[data-tam="toque"] { min-height: var(--alvo-toque); }
.btn:not(:has(.btn-rotulo)) { min-width: var(--alvo-min); padding: 0; }
.btn[data-tom="primario"] { background: var(--acao); color: var(--acao-texto); }
.btn[data-tom="primario"]:hover:not(:disabled) { background: var(--acao-hover); }
.btn[data-tom="secundario"] { background: var(--superficie); color: var(--tinta); border-color: var(--tinta-3); }
.btn[data-tom="secundario"]:hover:not(:disabled) { background: var(--superficie-2); }
.btn[data-tom="perigo"] { background: var(--crit-fundo); color: var(--crit); border-color: var(--crit); }
.btn[data-tom="fantasma"] { background: transparent; color: var(--tinta-2); }
.btn[data-tom="fantasma"]:hover:not(:disabled) { background: var(--superficie-2); }
.btn[aria-pressed="true"] { background: var(--neutro-fundo); color: var(--tinta); border-color: var(--dado); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--neutro-fundo); color: var(--tinta-3); border-color: var(--borda); cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.spinner { display: inline-flex; }
.spinner[data-animate="girar"] { animation: var(--anim-girar); }

/* ---------- campos ---------- */
.field { display: flex; flex-direction: column; gap: var(--e-2); }
.field-rotulo { font: var(--t-corpo); font-weight: 600; color: var(--tinta); }
.field-rodape { display: flex; justify-content: space-between; gap: var(--e-3); min-height: var(--e-5); }
.campo-msg { display: flex; gap: var(--e-2); align-items: flex-start; }
.campo-msg[data-field-state="error"] { color: var(--crit); }
.campo-msg[data-field-state="ok"] { color: var(--ok); }
.campo {
  width: 100%;
  min-height: var(--alvo-min);
  padding: var(--e-2) var(--e-3);
  background: var(--superficie);
  color: var(--tinta);
  border: var(--b) solid var(--tinta-3);
  border-radius: var(--r-chip);
  font: var(--t-campo);
}
.campo-area { min-height: var(--e-8); resize: vertical; }
.campo[aria-invalid="true"] { border-color: var(--crit); }
.campo:disabled { background: var(--neutro-fundo); color: var(--tinta-3); border-color: var(--borda); }
.campo-select-caixa { position: relative; display: block; }
/* WebKit pinta o texto da opção escolhida além da caixa do select e isso entra no scrollWidth do header (325 px a 360); overflow:hidden corta o texto como o Chromium já faz e não corta o anel de foco, que é do próprio elemento */
.campo-select { appearance: none; padding-right: var(--e-6); overflow: hidden; }
.campo-seta { position: absolute; right: var(--e-3); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--tinta-2); }
.cb { display: flex; flex-direction: column; }
.cb-rotulo { display: inline-flex; align-items: center; gap: var(--e-3); min-height: var(--alvo-min); cursor: pointer; }
.cb-caixa { width: var(--e-5); height: var(--e-5); margin: 0; accent-color: var(--acao); }
.radios { display: flex; flex-direction: column; gap: var(--e-1); }
.arq-linha { position: relative; display: inline-flex; }
.arq-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.arq-linha .btn { pointer-events: none; }
.arq-input:focus-visible + .btn { outline: var(--b-foco) solid var(--foco); outline-offset: var(--offset-foco); }
.kbd {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--e-2);
  min-height: var(--e-5);
  border: var(--b) solid var(--tinta-3);
  border-radius: var(--r-chip);
  background: var(--superficie-2);
  color: var(--tinta-2);
  font: var(--t-legenda);
}

/* ---------- alerta, vazio, skeleton, chips ---------- */
.alerta {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-3) var(--e-4);
  border: var(--b) solid var(--tom);
  border-radius: var(--r-card);
  background: var(--tom-fundo);
  color: var(--tom);
}
.alerta-titulo { font-weight: 600; }
.alerta-corpo { flex: 1; color: var(--tinta); }
.alerta .ico { flex: none; margin-top: var(--e-1); }
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-6) var(--e-4);
  text-align: center;
  border: var(--b) solid var(--borda);
  border-radius: var(--r-card);
  background: var(--superficie);
}
.vazio[data-tom="ok"] { background: var(--ok-fundo); border-color: var(--ok); }
.vazio-img { width: var(--teca-vazio); height: var(--teca-vazio); object-fit: contain; filter: var(--teca-halo); }
.vazio-titulo { font: var(--t-hero); font-family: var(--fonte-titulo); }
.vazio-corpo { color: var(--tinta-2); max-width: var(--leitura); }
.skel-grupo { display: flex; flex-direction: column; gap: var(--e-3); }
.skel { height: var(--e-4); border-radius: var(--r-chip); background: var(--superficie-2); border: var(--b) solid var(--borda); }
.skel[data-animate="esqueleto"] { animation: var(--anim-esqueleto); }
.skel[data-l="0"] { width: 100%; }
.skel[data-l="1"] { width: 80%; }
.skel[data-l="2"] { width: 60%; }
.chip, .badge, .score {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-1) var(--e-2);
  border: var(--b) solid var(--tom);
  border-radius: var(--r-chip);
  background: var(--tom-fundo);
  color: var(--tom);
  font: var(--t-apoio);
  font-weight: 600;
  white-space: nowrap;
}
.chip .ico, .badge .ico, .score .ico { flex: none; }
/* entre 640 e 1199 px o chip também quebra: a 683/640 o catálogo de estados estourava o main em 13–34 px */
@media (max-width: 1199px) { .chip, .badge, .score { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } }
.score .score-num { color: inherit; }
.dica { display: inline-flex; }
.spinner-linha { display: inline-flex; align-items: center; gap: var(--e-2); }

/* ---------- card e cabeçalho de página ---------- */
.card { background: var(--superficie); border: var(--b) solid var(--borda); border-radius: var(--r-card); }
.card-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2) var(--e-3); padding: var(--e-4) var(--e-4) 0; }
.card-cab > :first-child { flex: 1 1 12ch; min-width: 0; }
.card-titulo { font: var(--t-titulo); overflow-wrap: anywhere; }
.card-corpo { padding: var(--e-4); overflow-wrap: anywhere; }
.card-rodape { padding: var(--e-3) var(--e-4); border-top: var(--b) solid var(--borda); }
.pagina-cab { display: flex; flex-direction: column; gap: var(--e-2); }
.pagina-linha { display: flex; align-items: flex-start; gap: var(--e-2) var(--e-4); flex-wrap: wrap; }
.pagina-texto { order: 1; flex: 0 1 auto; min-width: 0; }
.pagina-titulo { font: var(--t-pagina); overflow-wrap: anywhere; }
.pagina-acoes { order: 3; display: flex; gap: var(--e-2); flex-wrap: wrap; margin-inline-start: auto; }
/* P-124: a migalha fica ao lado do título (order 2, depois do texto) com o centro alinhado à 1ª linha do h1 (2rem de linha); o link tem a caixa de 40 px do alvo */
.migalhas { order: 2; display: flex; align-items: center; gap: var(--e-1); flex-wrap: wrap; flex: 1 1 auto; margin-block: calc((2rem - var(--alvo)) / 2); }
@media (max-width: 639px) { .pagina-texto { flex-basis: 100%; } .migalhas { flex-basis: 100%; order: 2; } }

/* P-127/P-128: erro com código e entrega falhada em bloco */
.erro-codigo { color: var(--tinta-2); }
.entrega-falhada { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1); }

/* ---------- diálogo e folha ---------- */
.dlg-fundo { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--e-4); background: var(--veu); }
.dlg-fundo[data-variante="folha"] { z-index: var(--z-painel); justify-content: flex-end; align-items: stretch; padding: 0; }
.dlg {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(var(--dlg-md), 100%);
  max-height: 100%;
  background: var(--superficie);
  color: var(--tinta);
  border-radius: var(--r-modal);
  box-shadow: var(--sombra-modal);
}
.dlg[data-tamanho="sm"] { width: min(var(--dlg-sm), 100%); }
.dlg[data-tamanho="lg"] { width: min(var(--dlg-lg), 100%); }
.dlg-fundo[data-variante="folha"] .dlg { width: min(var(--folha-w), 100%); height: 100%; border-radius: var(--r-modal) 0 0 var(--r-modal); }
.dlg[data-animate="entrar-painel"] { animation: var(--anim-entrar-painel); }
.dlg-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-bottom: var(--b) solid var(--borda); }
.dlg-titulo { font: var(--t-titulo); }
.dlg-corpo { flex: 1; overflow: auto; padding: var(--e-4); }
.dlg-acoes { display: flex; justify-content: flex-end; gap: var(--e-2); margin-top: var(--e-4); }

/* ---------- menu, abas, tabela ---------- */
.menu { position: relative; display: inline-block; }
.menu-lista { position: absolute; z-index: var(--z-menu); min-width: 14rem; padding: var(--e-1); background: var(--superficie-elev); border: var(--b) solid var(--borda); border-radius: var(--r-card); box-shadow: var(--sombra-menu); top: 100%; left: 0; margin-top: var(--e-1); }
.menu[data-alinhar="end"] .menu-lista { left: auto; right: 0; }
.menu[data-direcao="cima"] .menu-lista { top: auto; bottom: 100%; margin: 0 0 var(--e-1); }
.menu-item { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; min-height: var(--alvo-min); padding: var(--e-1) var(--e-3); background: transparent; border: 0; border-radius: var(--r-chip); text-align: left; color: var(--tinta); font: var(--t-corpo); }
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--superficie-2); }
.menu-item > .t-apoio { white-space: normal; }
.menu-item[aria-current="true"] { background: var(--neutro-fundo); font-weight: 600; box-shadow: inset var(--e-1) 0 0 var(--dado); }
.menu-item:disabled { color: var(--tinta-3); cursor: not-allowed; }
.abas-lista { display: flex; gap: var(--e-1); border-bottom: var(--b) solid var(--borda); overflow-x: auto; }
/* (crítica 3) a barra de 8 px é a pista de que há mais abas; o contêiner recebe foco no Tabs.js */
.abas-lista::-webkit-scrollbar { height: 8px; }
.abas-lista::-webkit-scrollbar-track { background: var(--superficie-2); }
.abas-lista::-webkit-scrollbar-thumb { background: var(--borda); border-radius: var(--r-pill); }
.aba { flex: none; white-space: nowrap; min-height: var(--alvo-min); padding: 0 var(--e-4); background: transparent; border: 0; border-bottom: var(--b-foco) solid transparent; color: var(--tinta-2); font: var(--t-corpo); font-weight: 600; }
.aba[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--dado); }
.abas { position: relative; }
.abas-painel { padding-top: var(--e-4); }
/* (crítica 3) a 360 o fade na borda direita é a pista de que há mais abas além da última visível */
@media (max-width: 639px) { .abas::after { content: ''; position: absolute; top: 0; right: 0; width: var(--e-6); height: calc(100% - var(--b)); background: linear-gradient(90deg, transparent, var(--superficie)); pointer-events: none; } }
.tabela-caixa { overflow: auto; max-height: 60vh; border: var(--b) solid var(--borda); border-radius: var(--r-card); background: var(--superficie); }
.tabela { border-collapse: separate; border-spacing: 0; } /* P-124: sem a meia borda do collapse, o th mede 32 px em toda tabela */
.tabela th, .tabela td { padding: var(--e-2) var(--e-3); text-align: left; border-bottom: var(--b) solid var(--borda); vertical-align: middle; }
@media (max-width: 639px) { .tabela th, .tabela td { padding-inline: var(--e-2); } } /* P-111: a 360 px o respiro lateral de 12 px vira 8 px; tabela de até ~40 px de excesso passa a caber sem rolagem */
.tabela th { position: sticky; top: 0; z-index: var(--z-fixo); height: calc(var(--e-6) + var(--b)); max-height: calc(var(--e-6) + var(--b)); padding-block: 0; background: var(--superficie-2); font: var(--t-legenda); color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* P-124: 33 px em todo módulo; rótulo maior trunca com title, não estica a linha */
/* P-124: o cabeçalho tem a mesma altura (32 px + 1 de borda = 33) em todo módulo, de 1 ou 2 linhas, com ou sem botão de ordenar; o id vence o .th-botao de 40 px de módulo (th não conta como alvo, P-81) */
#conteudo .tabela th .th-botao { min-height: var(--e-6); vertical-align: top; } /* a exceção do th (P-81) vale em toda largura: o par 639/640 não vira um terceiro corte */
.tabela [data-alinhar="dir"], .tabela [data-alinhar-txt="dir"] { text-align: right; }
.th-botao { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--e-6); min-width: var(--e-6); padding: 0; background: transparent; border: 0; font: inherit; color: inherit; }
.tabela tbody tr:last-child td { border-bottom: 0; }

/* ---------- métrica canônica (cartão nível 3: número tabular --t-numero + rótulo); os módulos migram para esta classe ---------- */
.metrica { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); min-width: 0; padding: var(--e-4); background: var(--superficie); border: var(--b) solid var(--borda); border-radius: var(--r-card); }
/* (polish 7) o rótulo reserva três linhas no desktop e duas no celular: o valor cai na mesma linha de base sem cortar a palavra que qualifica o número */
.metrica-rotulo, .metrica > .t-legenda { min-height: 3lh; }
.metrica-rotulo { font: var(--t-apoio); color: var(--tinta-3); }
@media (max-width: 639px) { .metrica-rotulo, .metrica > .t-legenda { min-height: 2lh; } }
.metrica-valor { font: var(--t-numero); font-variant-numeric: tabular-nums; color: var(--tinta); overflow-wrap: anywhere; }
.metrica-apoio { font: var(--t-apoio); color: var(--tinta-2); }

/* ---------- passo a passo, linha do tempo, gráfico ---------- */
.stepper { display: flex; gap: var(--e-4); flex-wrap: wrap; }
.passo { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--tinta-2); }
.passo-num { display: inline-flex; align-items: center; justify-content: center; width: var(--e-6); height: var(--e-6); border: var(--b) solid var(--tinta-3); border-radius: var(--r-pill); font: var(--t-apoio); font-weight: 600; }
.passo[data-passo="feito"] .passo-num { background: var(--ok-fundo); color: var(--ok); border-color: var(--ok); }
.passo[data-passo="atual"] { color: var(--tinta); font-weight: 600; }
.passo[data-passo="atual"] .passo-num { background: var(--acao); color: var(--acao-texto); border-color: var(--acao); }
.passo[data-animate="step-pulse"] { animation: var(--anim-step-pulse); }
.linha-tempo { display: flex; flex-direction: column; gap: var(--e-4); }
.lt-item { display: flex; gap: var(--e-3); }
.lt-ponto { flex: none; width: var(--e-3); height: var(--e-3); margin-top: var(--e-2); border-radius: var(--r-pill); background: var(--tom); }
.lt-titulo { font-weight: 600; }
.lt-meta { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-1); }
.barras-lista { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-2); }
.barra-linha { display: grid; grid-template-columns: minmax(0, var(--col-lista)) minmax(var(--e-6), 1fr) var(--e-8); gap: var(--e-3); align-items: center; }
.barra-trilho { display: block; height: var(--e-3); border-radius: var(--r-pill); background: var(--superficie-2); border: var(--b) solid var(--borda); overflow: hidden; }
.barra-preench { display: block; width: var(--v, 0%); height: 100%; background: var(--dado); }
.barra-valor { text-align: right; }
.sb-lista { display: flex; flex-direction: column; gap: var(--e-3); }
.sb-linha { display: grid; grid-template-columns: minmax(0, var(--col-lista)) minmax(var(--e-6), 1fr) var(--e-8); gap: var(--e-1) var(--e-3); align-items: center; }
.sb-peso { grid-column: 2 / -1; }
.sb-linha[data-sem-dado] .barra-preench { background: var(--neutro); }
.spark-caixa { display: inline-flex; flex-direction: column; gap: var(--e-1); }
.spark-linha { stroke: var(--dado); stroke-width: var(--b-foco); }
.spark-ponto { fill: var(--dado); }
.spark-marca { stroke: var(--tinta-3); stroke-dasharray: 2 2; }

/* ---------- LineChart e FaixaBar (P-134): só var(--dado), var(--dado-2), var(--tinta-3) e var(--tinta) na marca ---------- */
.lc-caixa { display: flex; flex-direction: column; gap: var(--e-2); }
.lc { width: 100%; max-width: 800px; height: auto; } /* teto de 800 px: acima disso o texto do eixo cresce junto com o viewBox */
.lc-grade { stroke: var(--borda); stroke-width: var(--b); }
.lc-ref { stroke: var(--tinta-3); stroke-width: var(--b); stroke-dasharray: 2 3; }
.lc-eixo { fill: var(--tinta-2); font: var(--t-legenda); }
.lc-linha { fill: none; stroke-width: var(--b-foco); stroke-linejoin: round; stroke-linecap: round; }
.lc-s0 { stroke: var(--dado); }
.lc-s1 { stroke: var(--dado-2); stroke-dasharray: 6 4; }
.lc-s2 { stroke: var(--tinta-3); stroke-dasharray: 2 3; }
.lc-s3 { stroke: var(--tinta); stroke-dasharray: 8 3 2 3; }
.lc-m0 { fill: var(--dado); }
.lc-m1 { fill: var(--dado-2); }
.lc-m2 { fill: var(--tinta-3); }
.lc-m3 { fill: var(--tinta); }
.lc-legenda { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); margin-top: var(--e-2); }
.lc-legenda li { display: inline-flex; align-items: center; gap: var(--e-2); }
.lc-amostra { flex: none; width: 28px; height: 12px; }
.faixa { display: flex; flex-direction: column; gap: var(--e-2); }
.faixa[data-compacto] { gap: var(--e-1); }
.faixa[data-compacto] .faixa-corpo { padding-top: var(--e-2); }
.faixa[data-compacto] .faixa-marcador { top: 0; bottom: 0; }
.faixa-corpo { position: relative; padding-top: var(--e-6); padding-bottom: var(--e-1); }
.faixa-trilho { display: flex; border: var(--b) solid var(--tinta); border-radius: var(--r-chip); overflow: hidden; }
.faixa-zona { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; height: var(--e-6); background: var(--tom-fundo); color: var(--tom); }
.faixa-zona + .faixa-zona { border-inline-start: var(--b-foco) solid var(--tinta); } /* a borda de tinta entre as zonas: a fronteira não depende de cor */
.faixa-legenda { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-5); }
.faixa-item { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--tom); font: var(--t-apoio); }
.faixa-item .ico { flex: none; }
.faixa-item[aria-current="true"] .faixa-nome { font-weight: 700; text-decoration: underline; text-underline-offset: var(--e-1); }
.faixa-limite { color: var(--tinta-2); }
.faixa-marcador { position: absolute; top: calc(var(--e-6) - var(--e-1)); bottom: calc(-1 * var(--e-1)); z-index: var(--z-fixo); width: 0; border-inline-start: var(--e-1) solid var(--tinta); transform: translateX(calc(-1 * var(--e-1) / 2)); }
.faixa-marcador-texto { position: absolute; bottom: 100%; left: 0; transform: translateX(-50%); white-space: nowrap; padding: 0 var(--e-1); font: var(--t-apoio); font-weight: 600; color: var(--tinta); background: var(--superficie); }
.faixa-marcador[data-borda="ini"] .faixa-marcador-texto { transform: none; }
.faixa-marcador[data-borda="fim"] .faixa-marcador-texto { transform: translateX(-100%); }

/* ---------- primitivos do ERP ---------- */
.selo { display: flex; align-items: flex-start; gap: var(--e-2); flex-wrap: wrap; }
.selo > .ico { flex: none; margin-block-start: calc((1lh - 16px) / 2); }
.selo > span { flex: 1 1 0; min-width: 0; }
.selo > a { flex: none; } /* F1: ícone e texto na mesma linha em qualquer largura; só o link «Ver item» pode descer */
.data-age { display: inline-flex; align-items: center; gap: var(--e-1); }
.data-age[data-tom="warn"] { color: var(--warn); }
.origem { display: inline-flex; padding: 0 var(--e-2); border: var(--b) solid var(--tinta-3); border-radius: var(--r-chip); color: var(--tinta-2); font: var(--t-legenda); }
.dv { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4); border: var(--b) solid var(--warn); border-radius: var(--r-card); background: var(--superficie); }
.dv-valores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.dv-valor { font: var(--t-numero); }
.dv-acao { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.aprov { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4); border: var(--b) solid var(--borda); border-radius: var(--r-card); background: var(--superficie); }
.aprov-oque { font: var(--t-titulo); }
.aprov-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e-1) var(--e-4); }
.aprov-dl dt { color: var(--tinta-3); font: var(--t-legenda); align-self: center; }
.aprov-lista { display: flex; flex-direction: column; gap: var(--e-1); }
.aprov-fim { display: flex; flex-direction: column; gap: var(--e-2); }
.aprov-botoes { display: flex; gap: var(--e-2); margin-top: var(--e-2); }
.chave-linha { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 8rem 10rem auto; gap: var(--e-3); align-items: center; padding: var(--e-2) 0; border-bottom: var(--b) solid var(--borda); }
.chave-codigo { font: var(--t-apoio); font-family: var(--fonte-mono); }
.pen { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4); border: var(--b) solid var(--borda); border-radius: var(--r-card); background: var(--superficie); }
.pen[data-bloqueante="sim"] { border-color: var(--warn); }
.pen-cab { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.pen-num { color: var(--tinta-3); font: var(--t-legenda); }
.pen-titulo { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.pen-meta, .pen-estado { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }

/* ---------- login ---------- */
.login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; background: var(--fundo); }
.login-capa { display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-6); padding: var(--e-7); background: var(--capa); color: var(--capa-texto); }
.login-capa img { height: var(--logo-h-login); width: auto; align-self: flex-start; }
.login-capa h1 { font: var(--t-hero); font-family: var(--fonte-titulo); max-width: var(--leitura); }
.login-lado { display: flex; flex-direction: column; justify-content: center; gap: var(--e-5); padding: var(--e-7); }
.login-cartao { display: flex; flex-direction: column; gap: var(--e-4); max-width: var(--dlg-md); padding: var(--e-5); background: var(--superficie); border: var(--b) solid var(--borda); border-radius: var(--r-card); }
.login-cartao h2 { font: var(--t-pagina); font-family: var(--fonte-titulo); }
.login-emerg { display: flex; flex-direction: column; gap: var(--e-3); max-width: var(--dlg-md); }
.login-emerg summary { min-height: var(--alvo-min); display: list-item; cursor: pointer; color: var(--marca-texto); font-weight: 600; padding-block: calc((var(--alvo-min) - 1lh) / 2); }
summary { cursor: pointer; }
.login-rodape { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; color: var(--tinta-3); font: var(--t-apoio); }
.login-estados { display: flex; gap: var(--e-2); flex-wrap: wrap; }
@media (max-width: 1199px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-capa, .login-lado { padding: var(--e-5); }
}

/* ---------- catálogo (#/estados) ---------- */
.cat-sec { display: flex; flex-direction: column; gap: var(--e-4); }
.cat-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--col-lista), 1fr)); gap: var(--e-4); }
.cat-grade > [data-largo] { grid-column: 1 / -1; } /* P-111: a tabela de amostra ocupa a linha inteira; na coluna de 16rem ela ficava 6 a 14 px maior que a caixa */
.cat-temas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.cat-tema { padding: var(--e-4); background: var(--fundo); color: var(--tinta); border: var(--b) solid var(--borda); border-radius: var(--r-card); display: flex; flex-direction: column; gap: var(--e-3); }
.cat-amostra { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.cat-cor { display: flex; align-items: center; gap: var(--e-2); }
.cat-cor-bloco { width: var(--e-6); height: var(--e-6); border-radius: var(--r-chip); border: var(--b) solid var(--borda); }
.cat-linha { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) minmax(6rem, max-content); align-items: center; gap: var(--e-4); padding: var(--e-2) 0; border-bottom: var(--b) solid var(--borda); }
@media (max-width: 639px) { .cat-linha { grid-template-columns: minmax(0, 1fr); } }
.cat-raio { width: var(--e-8); height: var(--e-8); background: var(--superficie-2); border: var(--b) solid var(--tinta-3); display: inline-flex; align-items: center; justify-content: center; font: var(--t-legenda); }
.cat-sombra { padding: var(--e-5); background: var(--superficie); border-radius: var(--r-card); }
.cat-sombra[data-s="menu"] { box-shadow: var(--sombra-menu); }
.cat-sombra[data-s="modal"] { box-shadow: var(--sombra-modal); }
.cat-camadas { position: relative; height: var(--e-8); }
.cat-pilha { padding: var(--e-1) var(--e-3); background: var(--superficie); border: var(--b) solid var(--tinta-3); border-radius: var(--r-chip); font: var(--t-legenda); }
.cat-cinco { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--col-lista), 1fr)); gap: var(--e-4); align-items: start; }
.cat-estado { display: flex; flex-direction: column; gap: var(--e-2); }
.cat-comp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); align-items: start; }
.cat-comp-largo { grid-column: 1 / -1; }
.cat-cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
.cat-detalhe { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--e-4); }
.cat-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.cat-contraste td:first-child { overflow-wrap: anywhere; } /* P-111: o nome do par quebra em vez de estourar a caixa a 360 px */
.cat-contraste th, .cat-contraste td { padding: var(--e-1) var(--e-3); text-align: left; border-bottom: var(--b) solid var(--borda); font: var(--t-apoio); }
.cat-anim { display: inline-flex; align-items: center; gap: var(--e-2); }
.cat-anim-entrar-painel { animation: var(--anim-entrar-painel); }
.cat-anim-entrar-barra { animation: var(--anim-entrar-barra); }
@media (max-width: 1199px) { .cat-temas, .cat-comp, .cat-form, .cat-detalhe { grid-template-columns: minmax(0, 1fr); } .cat-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- busca global ---------- */
.busca-lista { display: flex; flex-direction: column; gap: var(--e-1); margin-top: var(--e-3); max-height: 50vh; overflow: auto; }
.busca-item { display: flex; flex-direction: column; align-items: flex-start; min-height: var(--alvo-min); padding: var(--e-1) var(--e-3); border: 0; background: transparent; border-radius: var(--r-chip); text-align: left; width: 100%; color: var(--tinta); font: var(--t-corpo); text-decoration: none; }
.busca-item[aria-selected="true"] { background: var(--neutro-fundo); box-shadow: inset var(--e-1) 0 0 var(--dado); }
.busca-tipo { color: var(--tinta-3); font: var(--t-legenda); }

/* ---------- cenário ---------- */
.cenario-lista { display: flex; flex-direction: column; gap: var(--e-1); }
.cenario-ativo { color: var(--info); font-weight: 600; }

/* ---------- 403 ---------- */
.p403 { display: flex; flex-direction: column; gap: var(--e-4); max-width: var(--dlg-lg); }
.cat-sec { margin-top: var(--e-6); }

.cab-pessoa-caixa { display: flex; flex-direction: column; gap: 2px; }
.cab-pessoa-rotulo { font: var(--t-legenda); color: var(--tinta-2); }
.faixa-demo { padding: var(--e-2) var(--e-4); background: var(--superficie-elev, var(--superficie)); border-bottom: var(--b) solid var(--borda); font: var(--t-apoio); color: var(--tinta-2); }
.faixa-demo strong { color: var(--tinta); }
.faixa-demo { grid-column: 1 / -1; grid-row: 3; display: block; }
@media (max-width: 639px) { .faixa-demo { display: block; font: var(--t-legenda); padding-block: var(--e-2); } .faixa-demo .btn { display: inline-flex; vertical-align: middle; margin-inline: 2px; } }
.faixa-demo .btn { --alvo-min: var(--alvo); display: inline-flex; vertical-align: middle; margin-inline: 2px; }
@media (max-width: 639px) { .faixa-demo .btn { --alvo-min: var(--alvo-toque); } } /* as duas rotas de toque (item e campo) cobram 44 px */
/* ---------- alvo mínimo global (P-81): zero especificidade, qualquer regra de módulo ou componente ganha ---------- */
:where(#conteudo, #cabecalho, #status, .dlg, .teca-trilho, .spec, .busca-lista, .menu-lista) :where(a[href], summary, select, textarea, input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"]), [role="tab"], [role="button"], [role="menuitem"], [role="option"], [role="link"], button):not(th *) {
  min-height: var(--alvo);
}
:where(#conteudo, #cabecalho, #status, .dlg, .teca-trilho, .spec, .busca-lista, .menu-lista) :where(a[href]):not(th *) {
  display: inline-flex;
  flex-wrap: wrap; /* a sigla (abbr) dentro do link pode descer inteira, em vez de ser esmagada no meio de "NFC-e" */
  align-items: center;
  min-width: var(--alvo);
  max-width: 100%;
}
/* a sigla nunca parte no meio (NFC- / e): vale em qualquer superfície, não só dentro de link */
abbr[data-sigla] { white-space: nowrap; }
/* link que carrega sigla flui como texto (sem item flex que engole o espaço ou desce sozinho); o alvo de 40 px vem do padding */
:where(#conteudo, #cabecalho, #status, .dlg, .teca-trilho, .spec, .busca-lista, .menu-lista) a[href].sigla-fluxo { display: inline-block; }
:where(#conteudo, .dlg, .teca-trilho, .spec) :where(summary):not(th *) {
  display: list-item;
  min-width: var(--alvo);
  padding-block: calc((var(--alvo) - 1lh) / 2);
}
/* P-113: caixa «Ordenar por» das tabelas empilhadas (só a ≤ 639 px) */
.tabela-ordem { display: none; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); border-bottom: var(--b) solid var(--borda); font: var(--t-legenda); color: var(--tinta-2); }
.tabela-ordem .campo-select-caixa { flex: 1; min-width: 0; }
.tabela-ordem .campo-select { inline-size: 100%; }
/* P-115: só conteúdo numérico (número, moeda, data, percentual, duração) trava a quebra; E.empilhar/Table.js tiram .num do texto, que quebra normalmente */
.tabela td.num { white-space: nowrap; }
/* selo dentro de célula nunca vira bloco (um `display:block` de módulo punha o ícone em cima do texto, 29 px abaixo do rótulo): a forma base do selo vale na tabela */
.tabela td :is(.chip, .badge, .score) { display: inline-flex; }
/* link que é a célula inteira não pede largura de ícone */
:where(.tabela td, .tabela-caixa) :where(a[href]) { min-width: 0; }

/* primitivos que não podem vazar a 360 px (declarado por último para ganhar da regra base) */
@media (max-width: 639px) {
  .chave-linha { grid-template-columns: minmax(0, 1fr); gap: var(--e-1); }
  .chip, .badge, .score { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  /* P-113 (substitui P-112): a 360 px a palavra nunca quebra no meio. Até 6 colunas empilha (E.empilhar grava data-empilha e data-rotulo); 7+ rola de propósito, coluna na largura da maior palavra, 1ª coluna fixa */
  .tabela th, .tabela td { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .tabela :is(.chip, .badge, .score) { overflow-wrap: normal; }
  .th-botao { min-width: var(--alvo-min); min-height: var(--alvo-min); }
  #conteudo .tabela:not([data-empilha]) :is(th, td) { overflow-wrap: normal; padding-inline: var(--e-2); } /* o id vence o overflow-wrap:anywhere dos módulos */
  .tabela:not([data-empilha]) :is(th, td) { min-width: var(--min-palavra, 0); }
  .tabela:not([data-empilha]) :is(th, td):first-child { position: sticky; left: 0; background: var(--superficie); }
  .tabela:not([data-empilha]) th:first-child { z-index: calc(var(--z-fixo) + 1); background: var(--superficie-2); }
  .tabela-caixa:has(> .tabela:not([data-empilha])) { padding-inline-end: var(--e-4); } /* respiro no fim da rolagem: a última coluna não fica colada na borda */
  .tabela-caixa:has(> .tabela[data-empilha]) { max-height: none; }
  .tabela-caixa:has(> .tabela[data-empilha]) .tabela-ordem { display: flex; }
  .tabela[data-empilha], .tabela[data-empilha] tbody { display: block; position: relative; }
  .tabela[data-empilha] thead { position: absolute; inline-size: 100%; block-size: 1px; overflow: hidden; clip-path: inset(50%); } /* some só visualmente; os th seguem lidos */
  .tabela[data-empilha] thead :is(tr, th) { display: block; position: static; height: auto; }
  .tabela[data-empilha] .th-botao { visibility: hidden; } /* a ordenação passa para a caixa «Ordenar por» */
  .tabela[data-empilha] tr { display: block; padding: var(--e-2) var(--e-3); border-bottom: var(--b) solid var(--borda); }
  .tabela[data-empilha] tbody tr:last-child { border-bottom: 0; }
  /* P-114: cada célula é uma GRADE de duas colunas (rótulo | valor); E.empilhar envolve todo o conteúdo do td em .td-valor, então texto, selo, link, botão e gráfico moram na 2ª coluna e quebram dentro dela, nunca sob o rótulo */
  .tabela[data-empilha] td { display: flow-root; padding: var(--e-1) 0; border: 0; text-align: left; overflow-wrap: anywhere; }
  .tabela[data-empilha] td[data-rotulo] { display: grid; grid-template-columns: minmax(6rem, 38%) minmax(0, 1fr); column-gap: var(--e-3); align-items: start; }
  .tabela[data-empilha] td[data-rotulo]::before { content: attr(data-rotulo); font: var(--t-legenda); color: var(--tinta-2); overflow-wrap: normal; }
  .tabela[data-empilha] .td-valor { display: block; min-width: 0; }
  /* P-116 (P-132: só link sem caixa recebe o recuo; `button` e `.btn` não, ele colava o botão na célula de cima): o alvo de 44 px vem de padding (alvo-1lh)/2 em cima e embaixo, não de altura mínima; o recuo negativo é a mesma metade, então a 1ª linha do texto cai SEMPRE na linha do rótulo, com link de 1, 2 ou 3 linhas (com min-height, o link de 2 linhas já tinha 44 px e o recuo puxava o texto 10 px acima do rótulo) */
  .tabela[data-empilha] .td-valor > a[href]:not(.btn):first-child,
  .tabela[data-empilha] .td-valor > :first-child > a[href]:not(.btn):first-child { --meio: calc((var(--alvo) - 1lh) / 2); padding-block: var(--meio); min-height: 0; margin-block-start: calc(-1 * var(--meio)); }
  /* P-132: botão (ou link com caixa) como valor NÃO recebe recuo negativo (era ele que o colava na célula de cima, a 3 px ou por cima dela). A célula ganha 8 px de margem em cima e o seu próprio respiro de cima vai a zero, então o botão fica a 8 px da célula anterior e o texto dele cai a 11 px do topo da célula (limite do P-116: 13); o RÓTULO centraliza com o botão, na mesma linha do texto dele */
  .tabela[data-empilha] td[data-rotulo]:has(> .td-valor > :is(button, .btn):first-child, > .td-valor > :first-child > :is(button, .btn):first-child) { align-items: center; margin-block-start: var(--e-2); padding-block-start: 0; }
  /* gráfico: a legenda («de 0 a 0») sobe para a linha do rótulo e o traço fica logo abaixo; a ordem no DOM (e para o leitor de tela) não muda */
  /* selo que quebra em duas linhas: ícone e texto partem do topo, na linha do rótulo (centralizado, o texto desceria meia altura do selo) */
  .tabela[data-empilha] .td-valor :is(.badge, .chip, .score) { align-items: flex-start; }
  .tabela[data-empilha] .td-valor :is(.badge, .chip, .score) > .ico { margin-block-start: calc((1lh - 16px) / 2); }
  .tabela[data-empilha] .spark-caixa { flex-direction: column-reverse; align-items: flex-start; }
  .barra-linha, .sb-linha { grid-template-columns: minmax(0, 1fr) var(--e-8); }
  .barra-linha > :nth-child(2), .sb-linha > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .sb-peso { grid-column: 1 / -1; }
}

/* P-140: sigla com expansão no title */
abbr[data-sigla] { text-decoration: underline dotted; text-underline-offset: 0.2em; cursor: help; }

.cat-pedido { margin-bottom: var(--e-6); }

/* F10: a ação do cabeçalho do cartão não quebra o rótulo («Ver fórmula») */
.card-cab > :is(button, a, .btn, .menu) { flex: none; align-self: flex-start; max-width: 100%; } /* P-124: a ação não estica a linha; rótulo anormal quebra em vez de vazar */
.card-cab > div:first-child { min-width: 0; }
@media (max-width: 639px) { .card-cab { flex-direction: column; align-items: stretch; } .card-cab > :is(button, a, .btn, .menu) { align-self: flex-start; } }
@media (max-width: 639px) {
  /* barra de status: a identidade ganha o espaço que sobra e termina em reticências (o title do texto carrega o nome inteiro) */
  .status-sep { display: none; }
  .status-item:last-child { flex: 1 1 0; min-width: 0; }
  /* PendenciaCard a 360: ID em cima, título em largura total, chip abaixo, ações do cabeçalho sem partir o rótulo */
  .pen-cab { flex-direction: column; align-items: flex-start; gap: var(--e-1); }
  .pen-titulo { flex: none; width: 100%; min-width: 0; overflow-wrap: break-word; }
  .pen-cab :is(.badge, .btn, button) { white-space: nowrap; }
  .pen-estado { align-items: flex-start; }
}
/* silhueta da lista (Skeleton forma:'lista'): reserva a altura da linha para a página não saltar quando o conteúdo entra */
.skel-linha { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4); border: var(--b) solid var(--borda); border-radius: var(--r-card); background: var(--superficie); }
.skel-bloco { width: var(--e-7); height: var(--e-7); border-radius: var(--r-chip); flex: none; }
.skel-barras { flex: 1; display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.skel-barra { height: var(--e-3); }
.skel-curta { width: 55%; }
.skel-chip { width: var(--e-7); height: var(--e-4); flex: none; }

/* carregando com a forma do conteúdo: o conteúdo real vira a silhueta (texto transparente, imagem em cinza, inerte);
   a página não salta quando o dado entra, e o lugar já é o da tabela, do cartão e do passo. O leitor de tela lê o rótulo. */
.skel-host { position: relative; }
.skel-fantasma { display: contents; pointer-events: none; user-select: none; }
.skel-fantasma * { color: transparent !important; text-shadow: none !important; caret-color: transparent !important; }
.skel-fantasma svg, .skel-fantasma img, .skel-fantasma canvas { filter: grayscale(1); opacity: .38; }
.skel-texto { position: absolute; inset-block-start: var(--e-3); inset-inline-start: var(--e-3); z-index: var(--z-fixo); display: inline-flex; align-items: center; gap: var(--e-2); margin: 0; padding: var(--e-2) var(--e-3); background: var(--superficie); border: var(--b) solid var(--borda); border-radius: var(--r-chip); }