/*
 * ESO Backup — interface24-0 (console de uma tela)
 * Um único CSS. Camadas: reset, tokens, base, componentes, telas, utilitarios.
 * Regras: nenhuma cor literal fora dos blocos de tokens (scripts/test-ui-tokens.mjs); cor só para significado
 * (estado, ação principal, item selecionado, foco); cantos de 4–6 px; bordas de 1 px; sem sombras nos blocos.
 * Temas = redefinição de tokens semânticos em [data-tema] + color-scheme. Padrão: Grafite (escuro).
 */
@layer reset, tokens, base, componentes, telas, utilitarios;

/* ------------------------------------------------------------------ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, video, canvas { display: block; max-inline-size: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  button:disabled { cursor: not-allowed; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  [hidden] { display: none !important; }
}

/* ------------------------------------------------------------------ */
/* Tokens de tema. Grafite é a base; Automático usa Claro quando o sistema pede tema claro. */
@layer tokens {
  :root, [data-tema="grafite"] {
    color-scheme: dark;
    --fundo: #14161b;
    --superficie: #1c1f26;
    --superficie-2: #242833;
    --hover: #20242e;
    --borda: #2c313c;
    --borda-forte: #7d8594;
    --texto: #e6e8ec;
    --texto-suave: #9aa1ad;
    --link: #b4abff;
    --acento: #8b7cf6;
    --acento-forte: #a99dff;
    --acento-texto: #14161b;
    --acento-suave: #2a2750;
    --acento-suave-texto: #d9d4ff;
    --perigo: #ef6a62;
    --perigo-forte: #f58a84;
    --perigo-sobre: #14161b;
    --foco: #b4abff;
    --ok-fundo: #17332b;
    --ok-texto: #6fd9a3;
    --ok-forte: #3fb97f;
    --aviso-fundo: #3a2e14;
    --aviso-texto: #f0c06a;
    --aviso-forte: #e5a33a;
    --falha-fundo: #3d1c1f;
    --falha-texto: #ff8d86;
    --falha-forte: #e5534b;
    --info-fundo: #272452;
    --info-texto: #c2b9ff;
    --info-forte: #8b7cf6;
    --neutro-fundo: #2a2f3a;
    --neutro-texto: #b4bac5;
    --neutro-forte: #8b93a1;
    --trilho: #2c313c;
    --grafico-1: #8b7cf6;
    --grafico-2: #e5a33a;
    --grafico-3: #4fd1c5;
    --sombra-1: none;
    --sombra-2: 0 8px 24px rgb(0 0 0 / 0.45);
    --cortina: rgb(0 0 0 / 0.55);
  }

  [data-tema="claro"] {
    color-scheme: light;
    --fundo: #f6f7f9;
    --superficie: #ffffff;
    --superficie-2: #ffffff;
    --hover: #f0f2f5;
    --borda: #e2e5ea;
    --borda-forte: #737a88;
    --texto: #16181d;
    --texto-suave: #5b6270;
    --link: #4646c4;
    --acento: #5b5bd6;
    --acento-forte: #4747bd;
    --acento-texto: #ffffff;
    --acento-suave: #ececfc;
    --acento-suave-texto: #2f2fa0;
    --perigo: #c4302b;
    --perigo-forte: #a52320;
    --perigo-sobre: #ffffff;
    --foco: #3f3fd0;
    --ok-fundo: #dff3e8;
    --ok-texto: #0f5c3a;
    --ok-forte: #1c8a5a;
    --aviso-fundo: #fbecc9;
    --aviso-texto: #6b4300;
    --aviso-forte: #b36b00;
    --falha-fundo: #fbe0de;
    --falha-texto: #8f1d17;
    --falha-forte: #d03a32;
    --info-fundo: #e6e6fb;
    --info-texto: #3a3aa8;
    --info-forte: #5b5bd6;
    --neutro-fundo: #eceef2;
    --neutro-texto: #4a515e;
    --neutro-forte: #6b7280;
    --trilho: #dfe2e8;
    --grafico-1: #5b5bd6;
    --grafico-2: #b36b00;
    --grafico-3: #0e8a7d;
    --sombra-1: none;
    --sombra-2: 0 8px 24px rgb(20 24 40 / 0.16);
    --cortina: rgb(20 24 40 / 0.4);
  }

  [data-tema="noite"] {
    color-scheme: dark;
    --fundo: #0d1220;
    --superficie: #151c2e;
    --superficie-2: #1c2540;
    --hover: #1a2238;
    --borda: #25304a;
    --borda-forte: #7886a3;
    --texto: #e3e8f2;
    --texto-suave: #97a3b8;
    --link: #ffc266;
    --acento: #f0a63a;
    --acento-forte: #ffbd5c;
    --acento-texto: #0d1220;
    --acento-suave: #33270f;
    --acento-suave-texto: #ffdca3;
    --perigo: #ef6a62;
    --perigo-forte: #f58a84;
    --perigo-sobre: #0d1220;
    --foco: #ffc266;
    --ok-fundo: #123027;
    --ok-texto: #6fd9a3;
    --ok-forte: #3fb97f;
    --aviso-fundo: #3a2412;
    --aviso-texto: #f3b27a;
    --aviso-forte: #e58a3a;
    --falha-fundo: #3d1b24;
    --falha-texto: #ff8d86;
    --falha-forte: #e5534b;
    --info-fundo: #3a2c12;
    --info-texto: #f7c877;
    --info-forte: #f0a63a;
    --neutro-fundo: #232b40;
    --neutro-texto: #b4bdcc;
    --neutro-forte: #8b93a1;
    --trilho: #25304a;
    --grafico-1: #f0a63a;
    --grafico-2: #5eb5ff;
    --grafico-3: #b99af0;
    --sombra-1: none;
    --sombra-2: 0 8px 24px rgb(0 0 0 / 0.5);
    --cortina: rgb(0 0 0 / 0.6);
  }

  [data-tema="alto-contraste"] {
    color-scheme: dark;
    --fundo: #000000;
    --superficie: #000000;
    --superficie-2: #0a0a0a;
    --hover: #1a1a1a;
    --borda: #ffffff;
    --borda-forte: #ffffff;
    --texto: #ffffff;
    --texto-suave: #ffffff;
    --link: #8fe0ff;
    --acento: #ffd60a;
    --acento-forte: #ffe55c;
    --acento-texto: #000000;
    --acento-suave: #2a2300;
    --acento-suave-texto: #ffffff;
    --perigo: #ff8a80;
    --perigo-forte: #ffb3ad;
    --perigo-sobre: #000000;
    --foco: #5cf2ff;
    --ok-fundo: #002b12;
    --ok-texto: #9dffc4;
    --ok-forte: #3dff8a;
    --aviso-fundo: #332600;
    --aviso-texto: #ffe08a;
    --aviso-forte: #ffb020;
    --falha-fundo: #3d0000;
    --falha-texto: #ffb3ad;
    --falha-forte: #ff6b60;
    --info-fundo: #2a2400;
    --info-texto: #ffe55c;
    --info-forte: #ffd60a;
    --neutro-fundo: #1f1f1f;
    --neutro-texto: #ffffff;
    --neutro-forte: #d0d0d0;
    --trilho: #4d4d4d;
    --grafico-1: #ffd60a;
    --grafico-2: #5cf2ff;
    --grafico-3: #ff9cf0;
    --sombra-1: none;
    --sombra-2: none;
    --cortina: rgb(0 0 0 / 0.8);
  }

  @media (prefers-color-scheme: light) {
    :root[data-tema="auto"] {
      color-scheme: light;
      --fundo: #f6f7f9;
      --superficie: #ffffff;
      --superficie-2: #ffffff;
      --hover: #f0f2f5;
      --borda: #e2e5ea;
      --borda-forte: #737a88;
      --texto: #16181d;
      --texto-suave: #5b6270;
      --link: #4646c4;
      --acento: #5b5bd6;
      --acento-forte: #4747bd;
      --acento-texto: #ffffff;
      --acento-suave: #ececfc;
      --acento-suave-texto: #2f2fa0;
      --perigo: #c4302b;
      --perigo-forte: #a52320;
      --perigo-sobre: #ffffff;
      --foco: #3f3fd0;
      --ok-fundo: #dff3e8;
      --ok-texto: #0f5c3a;
      --ok-forte: #1c8a5a;
      --aviso-fundo: #fbecc9;
      --aviso-texto: #6b4300;
      --aviso-forte: #b36b00;
      --falha-fundo: #fbe0de;
      --falha-texto: #8f1d17;
      --falha-forte: #d03a32;
      --info-fundo: #e6e6fb;
      --info-texto: #3a3aa8;
      --info-forte: #5b5bd6;
      --neutro-fundo: #eceef2;
      --neutro-texto: #4a515e;
      --neutro-forte: #6b7280;
      --trilho: #dfe2e8;
      --grafico-1: #5b5bd6;
      --grafico-2: #b36b00;
      --grafico-3: #0e8a7d;
      --sombra-1: none;
      --sombra-2: 0 8px 24px rgb(20 24 40 / 0.16);
      --cortina: rgb(20 24 40 / 0.4);
    }
  }

  /* Tokens sem cor: espaçamento em múltiplos de 4 px, 6 tamanhos de texto, dimensões fixas. */
  :root {
    --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem;
    --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.875rem; --fs-md: 0.9375rem; --fs-lg: 1rem; --fs-xl: 1.25rem;
    --raio: 0.25rem; --raio-grande: 0.375rem;
    --fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --alvo: 2rem;
    --topo-altura: 2.75rem;
    --contadores-altura: 2.5rem;
    --linha-altura: 2.25rem;
    --painel-largura: clamp(22.5rem, 28vw, 26.25rem);
    --duracao: 100ms;
  }
  @media (pointer: coarse) { :root { --alvo: 2.5rem; } }
}

/* ------------------------------------------------------------------ */
@layer base {
  html { background: var(--fundo); }
  body {
    min-block-size: 100dvh;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: var(--fs-base);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    text-rendering: optimizeLegibility;
  }
  h1 { font-size: var(--fs-xl); line-height: 1.2; font-weight: 600; }
  h2 { font-size: var(--fs-md); line-height: 1.3; font-weight: 600; }
  h3 { font-size: var(--fs-base); line-height: 1.3; font-weight: 600; }
  h4 { font-size: var(--fs-base); font-weight: 600; }
  p { max-inline-size: 70ch; }
  a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  code, kbd, .mono { font-family: var(--fonte-mono); font-size: var(--fs-sm); }
  small { font-size: var(--fs-xs); }
  strong, b { font-weight: 600; }
  :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 2px; }
  ::selection { background: var(--acento-suave); color: var(--acento-suave-texto); }
  .num, time, td, th, output { font-variant-numeric: tabular-nums; }

  .pular {
    position: absolute; inset-inline-start: var(--e3); inset-block-start: -4rem; z-index: 100;
    background: var(--acento); color: var(--acento-texto); padding: var(--e2) var(--e4); border-radius: var(--raio);
    text-decoration: none; font-weight: 600;
  }
  .pular:focus { inset-block-start: var(--e3); }
}

/* ------------------------------------------------------------------ */
@layer componentes {
  .icone { inline-size: 1.125em; block-size: 1.125em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

  /* Botão: secundário "fantasma"; cor de acento só na ação principal */
  .botao {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
    min-block-size: var(--alvo); padding: 0 var(--e3);
    border: 1px solid var(--borda); border-radius: var(--raio);
    background: transparent; color: var(--texto);
    font-weight: 500; font-size: var(--fs-base); line-height: 1.2; text-decoration: none; white-space: nowrap;
    transition: background-color var(--duracao);
  }
  .botao:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--hover); }
  .botao:disabled, .botao[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
  .botao--primario { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
  .botao--primario:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--acento-forte); border-color: var(--acento-forte); }
  .botao--perigo { background: var(--perigo); border-color: var(--perigo); color: var(--perigo-sobre); }
  .botao--perigo:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--perigo-forte); border-color: var(--perigo-forte); }
  .botao--fantasma { border-color: transparent; }
  .botao--fantasma-perigo { border-color: transparent; color: var(--falha-texto); }
  .botao--compacto { padding: 0 var(--e2); font-size: var(--fs-sm); }
  .botao--icone { padding: 0; inline-size: var(--alvo); }
  .botao--bloco { inline-size: 100%; }
  .botao--relativo { position: relative; }

  /* Estado: ponto colorido + texto. Nunca só cor. */
  .selo {
    display: inline-flex; align-items: center; gap: var(--e2); max-inline-size: 100%;
    color: var(--texto); font-size: var(--fs-sm); line-height: 1.4; white-space: nowrap;
  }
  .selo > span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .selo__ponto { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--selo-forte, var(--neutro-forte)); flex: none; }
  .selo--ok { --selo-fundo: var(--ok-fundo); --selo-texto: var(--ok-texto); --selo-forte: var(--ok-forte); }
  .selo--aviso { --selo-fundo: var(--aviso-fundo); --selo-texto: var(--aviso-texto); --selo-forte: var(--aviso-forte); }
  .selo--falha { --selo-fundo: var(--falha-fundo); --selo-texto: var(--falha-texto); --selo-forte: var(--falha-forte); }
  .selo--info { --selo-fundo: var(--info-fundo); --selo-texto: var(--info-texto); --selo-forte: var(--info-forte); }
  .selo--neutro { --selo-fundo: var(--neutro-fundo); --selo-texto: var(--neutro-texto); --selo-forte: var(--neutro-forte); }
  .selo-fixo { min-inline-size: 7.5rem; }

  /* Campos */
  .campo { display: grid; gap: var(--e1); align-content: start; min-inline-size: 0; }
  .campo__rotulo { font-size: var(--fs-sm); font-weight: 600; color: var(--texto-suave); }
  .campo__controle, .campo select, .campo input:not([type="checkbox"]):not([type="radio"]) {
    inline-size: 100%; min-block-size: var(--alvo);
    padding: 0 var(--e2); border: 1px solid var(--borda-forte); border-radius: var(--raio);
    background: var(--superficie); color: var(--texto); font-size: var(--fs-base);
  }
  .campo input::placeholder { color: var(--texto-suave); opacity: 1; }
  .campo input:read-only { background: var(--superficie-2); }
  .campo__ajuda { font-size: var(--fs-sm); color: var(--texto-suave); }
  .campo__erro, .erro-reservado {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    min-block-size: 2.6em; max-block-size: 2.6em; font-size: var(--fs-sm); line-height: 1.3; color: var(--falha-texto); font-weight: 500;
  }
  .campo-linha { display: flex; gap: var(--e2); align-items: stretch; }
  .campo-linha > .campo { flex: 1 1 auto; min-inline-size: 0; }
  .marcador { display: inline-flex; align-items: center; gap: var(--e2); min-block-size: var(--alvo); font-size: var(--fs-sm); }
  .marcador input { inline-size: 1rem; block-size: 1rem; accent-color: var(--acento); }

  /* Segmentado: seleção neutra */
  .segmentado { display: flex; inline-size: 100%; border: 1px solid var(--borda-forte); border-radius: var(--raio); overflow: hidden; }
  .segmentado button {
    flex: 1 1 0; min-inline-size: 0; min-block-size: var(--alvo); padding: 0 var(--e2); border: 0; border-inline-end: 1px solid var(--borda); background: transparent;
    font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .segmentado button:last-child { border-inline-end: 0; }
  .segmentado button:hover { background: var(--hover); }
  .segmentado button[aria-pressed="true"] { background: var(--superficie-2); font-weight: 600; box-shadow: none; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 2px; }

  /* Bloco de painel: divisor fino, sem moldura */
  .cartao { padding-block: var(--e3); min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); align-content: start; border-block-start: 1px solid var(--borda); }
  .cartao:first-child { border-block-start: 0; padding-block-start: 0; }
  .cartao__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-block-size: 1.75rem; }
  .cartao__cabeca h2, .cartao__cabeca h3 { overflow-wrap: anywhere; }
  .cartao__cabeca:has(.segmentado) { flex-direction: column; align-items: stretch; }

  /* Progresso: espaço sempre reservado */
  .progresso { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e1); min-block-size: 3rem; align-content: start; }
  .progresso--ocioso { visibility: hidden; }
  .progresso__linha { display: flex; justify-content: space-between; gap: var(--e3); font-size: var(--fs-sm); min-block-size: 1.3em; }
  .progresso__linha > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
  .progresso__linha > span:last-child { flex: none; min-inline-size: 5.5ch; text-align: end; }
  .progresso__detalhe { font-size: var(--fs-sm); color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-block-size: 1.3em; }
  .barra { block-size: 0.25rem; border-radius: 999px; background: var(--trilho); overflow: hidden; }
  progress.barra { appearance: none; -webkit-appearance: none; inline-size: 100%; display: block; border: 0; }
  progress.barra::-webkit-progress-bar { background: var(--trilho); }
  progress.barra::-webkit-progress-value { background: var(--acento); border-radius: 999px; }
  progress.barra::-moz-progress-bar { background: var(--acento); border-radius: 999px; }
  progress.medidor::-webkit-progress-value { background: var(--info-forte); }
  progress.medidor::-moz-progress-bar { background: var(--info-forte); }
  progress.medidor--aviso::-webkit-progress-value { background: var(--aviso-forte); }
  progress.medidor--aviso::-moz-progress-bar { background: var(--aviso-forte); }
  progress.medidor--falha::-webkit-progress-value { background: var(--falha-forte); }
  progress.medidor--falha::-moz-progress-bar { background: var(--falha-forte); }
  .barra__preenchimento { block-size: 100%; background: var(--acento); border-radius: 999px; }
  .barra--indeterminada .barra__preenchimento { inline-size: 35%; animation: deslizar 1.8s ease-in-out infinite alternate; }
  @keyframes deslizar { from { transform: translateX(0); } to { transform: translateX(185%); } }

  /* Toast: tamanho fixo */
  .toasts { position: fixed; inset-inline: 0; inset-block-end: var(--e4); z-index: 80; display: grid; justify-items: center; gap: var(--e2); pointer-events: none; padding-inline: var(--e4); }
  .toast {
    inline-size: min(26rem, 100%); min-block-size: 2.75rem; display: flex; align-items: center; gap: var(--e3);
    padding: var(--e2) var(--e3); border-radius: var(--raio); border: 1px solid var(--borda-forte);
    background: var(--superficie-2); color: var(--texto); box-shadow: var(--sombra-2); pointer-events: auto; font-size: var(--fs-sm);
  }
  .toast__texto { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; flex: 1 1 auto; }
  .toast--ok .icone { color: var(--ok-forte); }
  .toast--erro .icone { color: var(--falha-forte); }
  .toast--erro { border-color: var(--falha-forte); }

  /* Diálogo (só confirmações): dimensões reservadas */
  dialog { color: var(--texto); }
  dialog::backdrop { background: var(--cortina); }
  .dialogo {
    padding: 0; border: 1px solid var(--borda-forte); border-radius: var(--raio-grande); background: var(--superficie-2);
    box-shadow: var(--sombra-2); inline-size: min(calc(100vw - 2rem), 26rem); max-block-size: calc(100dvh - 2rem);
    margin: auto; overflow: hidden;
  }
  .dialogo[open] { display: flex; flex-direction: column; }
  .dialogo__cabeca { padding: var(--e4) var(--e4) var(--e2); }
  .dialogo__corpo { padding: var(--e1) var(--e4); min-block-size: 2.5rem; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); align-content: start; }
  .dialogo__rodape { display: flex; justify-content: flex-end; gap: var(--e2); padding: var(--e3) var(--e4); border-block-start: 1px solid var(--borda); min-block-size: 4rem; align-items: center; }
  .dialogo--confirmar .dialogo__corpo { block-size: 5rem; }
  .dialogo--simples .dialogo__corpo { block-size: 0.5rem; min-block-size: 0.5rem; padding-block: 0; overflow: hidden; }
  .dialogo--conteudo { inline-size: min(calc(100vw - 2rem), 40rem); block-size: min(32rem, calc(100dvh - 2rem)); }
  .dialogo--conteudo .dialogo__corpo { flex: 1 1 auto; }
  .dialogo--codigos { inline-size: min(calc(100vw - 2rem), 28rem); }
  .confirmado { display: inline-block; inline-size: 1rem; block-size: 1rem; margin-inline-start: var(--e1); vertical-align: -0.2em; color: var(--texto-suave); }
  .confirmado > .icone { inline-size: 1rem; block-size: 1rem; }
  .confirmado--oculto { visibility: hidden; }

  /* Lista chave-valor, seções e detalhes técnicos */
  .secao { display: grid; gap: var(--e2); align-content: start; grid-template-columns: minmax(0, 1fr); }
  .secao > h3 { font-size: var(--fs-base); color: var(--texto-suave); }
  .fatos { display: grid; grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr); gap: var(--e2) var(--e3); }
  .fatos dt { color: var(--texto-suave); font-size: var(--fs-sm); }
  .fatos dd { overflow-wrap: anywhere; }
  .tecnico { border-block-start: 1px solid var(--borda); }
  .tecnico > summary { cursor: pointer; padding: var(--e1) 0; font-size: var(--fs-sm); color: var(--texto-suave); min-block-size: var(--alvo); display: flex; align-items: center; }
  .tecnico > div { padding: 0 0 var(--e3); display: grid; gap: var(--e2); font-size: var(--fs-sm); overflow-wrap: anywhere; }

  /* Vazio / erro / carregando */
  .vazio { display: grid; justify-items: start; align-content: center; gap: var(--e2); padding: var(--e4) 0; min-block-size: 5rem; color: var(--texto-suave); }
  .vazio h3 { color: var(--texto); font-weight: 500; }
  .vazio--erro { color: var(--falha-texto); }
  .vazio--erro h3 { color: var(--falha-texto); font-weight: 600; }
  .esqueleto { background: var(--superficie-2); border-radius: var(--raio); }
  .esqueleto--linha { block-size: 1.25rem; }
  .esqueleto--cartao { block-size: 6rem; }
  .esqueleto--faixa { block-size: 3rem; }

  .celula-titulo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-inline-size: 0; line-height: 1.25; }
  .celula-titulo > b { font-weight: 600; }
  .celula-titulo > small { color: var(--texto-suave); }
  .celula-titulo--fim { justify-items: end; text-align: end; }
  .truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }

  /* Gráfico */
  .grafico { inline-size: 100%; block-size: 14rem; position: relative; }
  .grafico svg { inline-size: 100%; block-size: 100%; overflow: visible; }
  .grafico__grade { stroke: var(--borda); stroke-width: 1; }
  .grafico__eixo { fill: var(--texto-suave); font-size: 12px; font-variant-numeric: tabular-nums; }
  .grafico__linha { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
  .grafico__linha--1 { stroke: var(--grafico-1); }
  .grafico__linha--2 { stroke: var(--grafico-2); stroke-dasharray: 7 4; }
  .grafico__linha--3 { stroke: var(--grafico-3); stroke-dasharray: 2 4; }
  .grafico__guia { stroke: var(--texto-suave); stroke-width: 1; }
  .legenda { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); font-size: var(--fs-sm); }
  .legenda span { display: inline-flex; align-items: center; gap: var(--e2); }
  .legenda i { inline-size: 1.5rem; block-size: 0; border-block-start: 2px solid var(--grafico-1); }
  .legenda i.l2 { border-block-start-style: dashed; border-block-start-color: var(--grafico-2); }
  .legenda i.l3 { border-block-start-style: dotted; border-block-start-color: var(--grafico-3); }
  .leitura { min-block-size: 2.5rem; font-size: var(--fs-sm); color: var(--texto-suave); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }

  /* Menu suspenso (Mais, tema) */
  .menu-wrap { position: relative; display: inline-flex; }
  .menu {
    position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--e1)); z-index: 60; min-inline-size: 11rem;
    background: var(--superficie-2); border: 1px solid var(--borda-forte); border-radius: var(--raio-grande); box-shadow: var(--sombra-2); padding: var(--e1); display: grid;
  }
  .menu--acima { inset-block-start: auto; inset-block-end: calc(100% + var(--e1)); }
  .menu button { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-block-size: var(--alvo); padding: 0 var(--e2); border: 0; border-radius: var(--raio); background: transparent; font-size: var(--fs-sm); text-align: start; white-space: nowrap; }
  .menu button:hover:not(:disabled) { background: var(--hover); }
  .menu button:disabled { opacity: 0.45; }
  .menu button[aria-checked="true"] { font-weight: 600; }

  /* Listas internas dos painéis */
  .lista-linhas { display: grid; border-block-start: 1px solid var(--borda); }
  .lista-linhas > * { border-block-end: 1px solid var(--borda); }
  .operacao { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--e3); align-items: center; padding: var(--e2) 0; min-block-size: 2.75rem; }
  .volume { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--e1) var(--e3); padding: var(--e2) 0; min-block-size: 2.75rem; align-items: center; font-size: var(--fs-sm); }
  .volume > .suave { grid-column: 1 / -1; }
  .item-retencao { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e3); padding: var(--e2) 0; min-block-size: 3rem; align-items: center; }
  .entrada-conteudo { display: flex; justify-content: space-between; gap: var(--e3); padding: var(--e1) 0; border-block-end: 1px solid var(--borda); font-size: var(--fs-sm); }
  .entrada-conteudo > span { flex: 1 1 auto; }
  .entrada-conteudo small { color: var(--texto-suave); white-space: nowrap; flex: none; }
  .conteudo-bloco { display: grid; gap: var(--e2); padding: var(--e2) 0 var(--e3); }
  .conteudo-lista { max-block-size: 12rem; min-block-size: 3rem; overflow: auto; border: 1px solid var(--borda); border-radius: var(--raio); padding: 0 var(--e2); }
  .filtros-painel { display: grid; gap: var(--e2); }
  .filtros-painel__linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
  .contagem-catalogo { color: var(--texto-suave); font-size: var(--fs-sm); min-block-size: 1.3em; }
  .lista-arquivos { display: grid; border-block-start: 1px solid var(--borda); }
  .arquivo { border-block-end: 1px solid var(--borda); }
  .arquivo__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e2); align-items: center; min-block-size: 3.25rem; }
  .lista-auditoria { display: grid; border-block-start: 1px solid var(--borda); }
  .auditoria { display: grid; gap: var(--e1); padding: var(--e2) 0; border-block-end: 1px solid var(--borda); min-block-size: 3.75rem; align-content: start; }
  .auditoria__linha { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); font-size: var(--fs-sm); min-block-size: 1.3em; }
  .auditoria .tecnico { border-block-start: 0; }
  .auditoria .tecnico > summary { min-block-size: 1.5rem; padding: 0; }
  .excecao { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e3); align-items: center; padding: var(--e2) var(--e3); border-inline-start: 2px solid var(--selo-forte); border-block-end: 1px solid var(--borda); min-block-size: 3.25rem; }
  .excecao p { font-size: var(--fs-sm); color: var(--texto-suave); }
  .excecao__texto { min-inline-size: 0; overflow-wrap: anywhere; }
  .excecao__texto > b, .excecao__texto > p.truncar { display: block; }
  .lista-excecoes { display: grid; border: 1px solid var(--borda); border-radius: var(--raio-grande); overflow: hidden; }
  .lista-excecoes > .excecao:last-child { border-block-end: 0; }
  .alerta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.125rem; padding: var(--e2) var(--e3); border-inline-start: 2px solid var(--selo-forte); }
  .metricas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
  .metrica { display: grid; gap: var(--e1); align-content: start; min-block-size: 5.5rem; padding: var(--e2) var(--e3); border: 1px solid var(--borda); border-radius: var(--raio-grande); background: var(--superficie-2); }
  .metrica__valor { font-size: var(--fs-lg); font-weight: 600; line-height: 1.1; }
  .metrica__nome { color: var(--texto-suave); font-size: var(--fs-sm); }
  .metrica__detalhe { color: var(--texto-suave); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .repo-lista { display: grid; border-block-start: 1px solid var(--borda); }
  .repo { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; grid-template-areas: "marca nome acao" ". estado estado"; gap: var(--e1) var(--e2); align-items: center; padding: var(--e2) 0; border-block-end: 1px solid var(--borda); min-block-size: 4.5rem; }
  .repo > input { grid-area: marca; }
  .repo__nome { grid-area: nome; min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
  .repo__nome small { color: var(--texto-suave); }
  .repo__estado { grid-area: estado; min-inline-size: 0; display: flex; align-items: center; gap: var(--e2); min-block-size: 1.5rem; }
  .repo__estado small { color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .repo > .botao { grid-area: acao; }
  .agendas { display: grid; border-block-start: 1px solid var(--borda); }
  .agenda { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e2) var(--e3); padding: var(--e2) 0; border-block-end: 1px solid var(--borda); align-items: center; min-block-size: 3.5rem; }
  .agenda__acoes { display: flex; gap: var(--e1); }
  .agenda small { color: var(--texto-suave); display: block; }
  .resumo-agenda { padding: var(--e2) 0; min-block-size: 3.5rem; display: grid; gap: 0.125rem; align-content: center; border-block-end: 1px solid var(--borda); }
  .resumo-agenda strong { font-size: var(--fs-md); }
  .resumo-agenda span { color: var(--texto-suave); font-size: var(--fs-sm); }
  .slot-valor { min-block-size: 3.5rem; }
  .cartao-ativacao, .cartao-agente, .cartao-release { min-block-size: 8rem; }
  .form-ativacao { display: grid; gap: var(--e2); }

  /* Temas: amostras (cada amostra usa os tokens do próprio tema) */
  .temas { display: grid; gap: var(--e2); grid-template-columns: minmax(0, 1fr); }
  .tema-opcao { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--e3); align-items: center; padding: var(--e2); border: 1px solid var(--borda); border-radius: var(--raio-grande); background: var(--superficie); text-align: start; min-block-size: 3.25rem; }
  .tema-opcao:hover { background: var(--hover); }
  .tema-opcao[aria-checked="true"] { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-suave-texto); }
  .amostra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; block-size: 1.75rem; padding: 2px; border-radius: var(--raio); border: 1px solid var(--borda-forte); background: var(--fundo); }
  .amostra i { display: block; border-radius: 2px; }
  .amostra i:nth-child(1) { background: var(--superficie-2); }
  .amostra i:nth-child(2) { background: var(--texto); }
  .amostra i:nth-child(3) { background: var(--acento); }
  .amostra i:nth-child(4) { background: var(--ok-forte); }
}

/* ------------------------------------------------------------------ */
@layer telas {
  /* Estrutura do console: barra superior, área (principal + painel). A página não rola; a tabela e o painel rolam por dentro. */
  .console { display: grid; grid-template-rows: auto minmax(0, 1fr); block-size: 100dvh; overflow: hidden; }
  .topo {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e3);
    min-block-size: var(--topo-altura); padding: 0 var(--e3); background: var(--superficie); border-block-end: 1px solid var(--borda); position: relative; z-index: 40;
  }
  .topo__marca { display: inline-flex; align-items: center; gap: var(--e2); color: var(--texto); text-decoration: none; font-weight: 600; white-space: nowrap; }
  .marca-svg { inline-size: 1.5rem; block-size: 1.5rem; flex: none; color: var(--texto); }
  .topo__filtros { display: flex; align-items: center; gap: var(--e2); min-inline-size: 0; }
  .topo__busca, .topo__seletor {
    min-block-size: 1.875rem; padding: 0 var(--e2); border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--fundo); color: var(--texto); font-size: var(--fs-sm);
  }
  .topo__busca { flex: 1 1 12rem; min-inline-size: 6rem; max-inline-size: 20rem; }
  .topo__busca::placeholder { color: var(--texto-suave); opacity: 1; }
  .topo__seletor { flex: 0 1 9.5rem; min-inline-size: 0; }
  .topo__acoes { display: flex; align-items: center; gap: var(--e1); }
  .topo__botao { inline-size: 2rem; min-block-size: 2rem; }
  .topo__botao[aria-expanded="true"] { background: var(--acento-suave); color: var(--acento-suave-texto); }
  .topo__separador { inline-size: 1px; block-size: 1.25rem; background: var(--borda); margin-inline: var(--e1); }
  .chip-conexao { display: inline-flex; align-items: center; justify-content: flex-end; font-size: var(--fs-xs); color: var(--texto-suave); white-space: nowrap; min-inline-size: 9.5rem; margin-inline-end: var(--e2); }
  .contador { position: absolute; inset-block-start: 0; inset-inline-end: 0; min-inline-size: 1rem; block-size: 1rem; padding: 0 0.25rem; border-radius: 999px; background: var(--perigo); color: var(--perigo-sobre); font-size: var(--fs-xs); font-weight: 600; display: grid; place-items: center; line-height: 1; }
  .contador[data-vazio="true"] { visibility: hidden; }

  .area { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-block-size: 0; min-inline-size: 0; }
  .area__principal { min-block-size: 0; min-inline-size: 0; display: grid; }
  .principal { container-type: inline-size; display: grid; grid-template-rows: auto minmax(0, 1fr); min-block-size: 0; min-inline-size: 0; }

  .contadores { display: flex; align-items: center; gap: var(--e1); min-block-size: var(--contadores-altura); padding: 0 var(--e3); border-block-end: 1px solid var(--borda); overflow-x: auto; scrollbar-width: thin; }
  .contagem { display: inline-flex; align-items: center; gap: var(--e2); min-block-size: 1.75rem; padding: 0 var(--e2); border: 1px solid transparent; border-radius: var(--raio); background: transparent; color: var(--texto-suave); font-size: var(--fs-sm); white-space: nowrap; flex: none; }
  .contagem b { color: var(--texto); min-inline-size: 2ch; text-align: end; }
  .contagem:hover { background: var(--hover); }
  .contagem[aria-pressed="true"] { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-suave-texto); }
  .contagem[aria-pressed="true"] b { color: var(--acento-suave-texto); }

  /* Tabela densa: linhas de 36 px, cabeçalho fixo, ordenação por coluna */
  .tabela-wrap { overflow: auto; min-block-size: 0; scrollbar-width: thin; }
  .tabela { inline-size: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
  .tabela th { position: sticky; inset-block-start: 0; z-index: 2; background: var(--fundo); text-align: start; font-size: var(--fs-xs); font-weight: 600; color: var(--texto-suave); padding: 0 var(--e3); block-size: 2rem; border-block-end: 1px solid var(--borda); white-space: nowrap; }
  .tabela th[aria-sort="ascending"], .tabela th[aria-sort="descending"] { color: var(--texto); }
  .ordenar { display: inline-flex; align-items: center; gap: var(--e1); max-inline-size: 100%; min-block-size: 1.5rem; padding: 0; border: 0; background: transparent; color: inherit; font-size: var(--fs-xs); font-weight: 600; }
  .ordenar:hover { color: var(--texto); }
  .ordenar__seta { display: inline-flex; flex: none; }
  .ordenar__seta .icone { inline-size: 0.875rem; block-size: 0.875rem; }
  .ordenar__seta--oculta { visibility: hidden; }
  .tabela td { block-size: var(--linha-altura); padding: 0 var(--e3); border-block-end: 1px solid var(--borda); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); min-inline-size: 0; }
  .tabela .col-estado { inline-size: 10.75rem; }
  .tabela .col-ultimo { inline-size: 11.75rem; }
  .tabela .col-proximo { inline-size: 6.5rem; }
  .tabela .col-tipo { inline-size: 9.5rem; }
  .tabela .col-tam { inline-size: 6rem; text-align: end; }
  .tabela th.col-tam .ordenar { justify-content: flex-end; inline-size: 100%; }
  .tabela .col-acoes { inline-size: 9rem; overflow: visible; }
  .linha { cursor: default; }
  .linha:hover { background: var(--hover); }
  .linha[aria-current="true"] { background: var(--acento-suave); }
  .linha[aria-current="true"] > td:first-child { border-inline-start: 2px solid var(--acento); }
  .linha:focus-visible { outline-offset: -2px; }
  .linha--filha > td:first-child { padding-inline-start: var(--e6); }
  .linha--grupo { font-weight: 600; }
  .linha--grupo .celula-titulo > b { display: flex; align-items: center; gap: var(--e1); }
  .chevron { display: inline-flex; transition: transform var(--duracao); }
  .chevron--aberto { transform: rotate(90deg); }
  .tabela__grupo th { position: static; z-index: 0; block-size: 1.75rem; background: var(--superficie); border-block-end: 1px solid var(--borda); color: var(--texto-suave); font-weight: 600; }
  .tabela__vazio td { block-size: 5rem; color: var(--texto-suave); }
  .tabela .celula-titulo > small { font-size: var(--fs-xs); }
  .acoes { display: flex; align-items: center; gap: var(--e1); }
  .tabela .acoes .botao { min-block-size: 1.75rem; inline-size: 1.75rem; padding: 0; }
  .tabela .acoes .menu-wrap .botao { inline-size: 1.75rem; }

  /* Painel vertical à direita: 360–420 px; tabela visível ao lado a partir de 1280 px, sobreposto abaixo disso */
  .painel { display: flex; flex-direction: column; inline-size: var(--painel-largura); min-block-size: 0; background: var(--superficie); border-inline-start: 1px solid var(--borda); }
  .painel__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); min-block-size: 2.75rem; padding: 0 var(--e2) 0 var(--e4); border-block-end: 1px solid var(--borda); }
  .painel__cabeca h2 { flex: 1 1 auto; min-inline-size: 0; }
  .painel__corpo { flex: 1 1 auto; min-block-size: 0; overflow: auto; padding: var(--e4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); align-content: start; scrollbar-width: thin; }
  .painel__rodape { padding: var(--e2) var(--e4); border-block-start: 1px solid var(--borda); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e2); min-block-size: 3.25rem; align-items: center; }
  @media (min-width: 1280px) {
    .console[data-painel="aberto"] .area { grid-template-columns: minmax(0, 1fr) var(--painel-largura); }
  }
  @media (max-width: 1279.98px) {
    .painel { position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 30; box-shadow: var(--sombra-2); max-inline-size: 100%; }
  }
  @media (max-width: 599.98px) {
    .painel { inline-size: 100%; border-inline-start: 0; }
    .painel__corpo { padding: var(--e3); }
    .painel__rodape { padding-inline: var(--e3); }
  }

  /* Colunas que cedem espaço conforme a largura da área principal (com ou sem painel aberto) */
  @container (max-width: 62rem) {
    .col-tipo, .col-tam { display: none; }
  }
  @container (max-width: 48rem) {
    .col-proximo { display: none; }
  }
  /* Lista compacta de duas linhas por fonte */
  @container (max-width: 39.99rem) {
    .tabela { display: block; }
    .tabela thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .tabela tbody { display: block; }
    .tabela tr.linha { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; grid-template-rows: 1.5rem 1.25rem; align-content: center; column-gap: var(--e2); block-size: 3.5rem; padding: 0 var(--e3); border-block-end: 1px solid var(--borda); }
    .tabela tr.linha > td { display: block; block-size: auto; padding: 0; border: 0; min-inline-size: 0; }
    .tabela tr.linha > td.col-fonte { grid-column: 1 / 3; grid-row: 1; }
    .tabela tr.linha > td.col-estado { grid-column: 1; grid-row: 2; inline-size: auto; }
    .tabela tr.linha > td.col-ultimo { grid-column: 2; grid-row: 2; inline-size: auto; }
    .tabela tr.linha > td.col-acoes { grid-column: 3; grid-row: 1 / 3; align-self: center; inline-size: auto; }
    .tabela tr.linha > td.col-proximo, .tabela tr.linha > td.col-tipo, .tabela tr.linha > td.col-tam { display: none; }
    .tabela tr.linha > td.col-fonte .celula-titulo { display: flex; align-items: baseline; gap: var(--e2); }
    .tabela tr.linha > td.col-fonte small { display: none; }
    .tabela tr.linha > td.col-ultimo .celula-titulo > .num { display: none; }
    .tabela tr.linha > td.col-ultimo small { color: var(--texto-suave); font-size: var(--fs-xs); }
    .tabela tr.linha[aria-current="true"] > td:first-child { border-inline-start: 0; }
    .tabela tr.linha[aria-current="true"] { box-shadow: none; border-inline-start: 2px solid var(--acento); }
    .linha--filha > td:first-child { padding-inline-start: 0; }
    .tabela tr.linha--filha { padding-inline-start: var(--e5); }
    .tabela tr.tabela__grupo { display: block; }
    .tabela tr.tabela__grupo th { display: block; block-size: 1.75rem; line-height: 1.75rem; padding: 0 var(--e3); }
    .tabela tr.tabela__vazio, .tabela tr.tabela__vazio td { display: block; }
  }
  @media (max-width: 899.98px) {
    .topo { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--topo-altura) var(--topo-altura); row-gap: 0; align-content: start; padding-block-end: var(--e1); }
    .topo__filtros { grid-column: 1 / -1; grid-row: 2; }
    .topo__seletor { flex: 0 0 7rem; }
    .topo__busca { max-inline-size: none; }
    .chip-conexao { display: none; }
  }
  @media (max-width: 599.98px) {
    .topo__marca span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .topo__separador { display: none; }
    .topo__acoes { gap: 0; }
    .topo__busca { flex: 1 1 5rem; min-inline-size: 4rem; }
    .topo__seletor { flex: 1 1 7.25rem; }
    .contadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--e1) var(--e2); gap: 0; overflow: visible; }
    .contagem { justify-content: flex-start; min-inline-size: 0; gap: var(--e1); padding: 0 var(--e1); }
    .contagem b { min-inline-size: 1.5ch; }
    .contagem > span { overflow: hidden; text-overflow: ellipsis; }
  }

  /* Janela instalada com Window Controls Overlay: a barra superior vira barra de título */
  @media (display-mode: window-controls-overlay) {
    .topo {
      padding-block-start: env(titlebar-area-y, 0px); padding-inline-start: max(var(--e3), env(titlebar-area-x, 0px)); padding-inline-end: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw));
      min-block-size: env(titlebar-area-height, var(--topo-altura)); -webkit-app-region: drag; app-region: drag;
    }
    .topo button, .topo a, .topo select, .topo input { -webkit-app-region: no-drag; app-region: no-drag; }
  }

  /* Login: tamanho fixo em todos os estados */
  .entrada { min-block-size: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: var(--e5); padding: var(--e4); }
  .entrada__topo { inline-size: min(100%, 22rem); display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
  .entrada__marca { display: inline-flex; align-items: center; gap: var(--e2); color: var(--texto); font-weight: 600; }
  .entrada__marca svg { inline-size: 1.75rem; block-size: 1.75rem; }
  .entrada__centro { align-self: center; inline-size: min(100%, 22rem); }
  .cartao-login { inline-size: 100%; block-size: 27rem; max-block-size: calc(100dvh - 9rem); overflow-y: auto; padding: var(--e5); display: grid; align-content: start; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); }
  .cartao-login .cartao, .publica__cartao.cartao { border-block-start: 0; }
  .pilha-estados { display: grid; }
  .pilha-estados > .estado-login { grid-area: 1 / 1; visibility: hidden; display: grid; gap: var(--e3); align-content: start; }
  .pilha-estados > .estado-login[data-ativo="true"] { visibility: visible; }
  .qr-reservado { inline-size: 8rem; block-size: 8rem; flex: none; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie-2); display: grid; place-items: center; overflow: hidden; }
  .qr-reservado img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .chave-manual { display: grid; gap: var(--e2); justify-items: start; }
  .chave-manual code { max-inline-size: 100%; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: var(--e1) var(--e2); background: var(--superficie-2); border-radius: var(--raio); }
  .entrada__rodape { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); justify-content: center; font-size: var(--fs-sm); color: var(--texto-suave); }
  .codigos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
  .codigos code { padding: var(--e2); background: var(--superficie-2); border-radius: var(--raio); text-align: center; overflow-wrap: anywhere; }

  /* Faixa de aviso (PWA/offline) */
  .faixa { position: fixed; inset-inline-start: var(--e4); inset-block-end: var(--e4); z-index: 70; display: flex; align-items: center; gap: var(--e3); max-inline-size: min(26rem, calc(100vw - 2rem)); padding: var(--e2) var(--e3); border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--superficie-2); color: var(--texto); font-size: var(--fs-sm); min-block-size: 2.75rem; box-shadow: var(--sombra-2); }
  .faixa[hidden] { display: none; }
  noscript .faixa { position: static; margin: var(--e4); }

  /* Páginas públicas */
  .publica { min-block-size: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--e5); padding: var(--e5) var(--e4); justify-items: center; }
  .publica__topo { inline-size: min(100%, 44rem); display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; justify-content: space-between; }
  .publica__nav { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); font-size: var(--fs-sm); }
  .publica__cartao { inline-size: min(100%, 44rem); align-self: start; padding: var(--e5); display: grid; gap: var(--e3); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-grande); }
  .publica__cartao .destaque { padding-inline-start: var(--e3); border-inline-start: 2px solid var(--borda-forte); }
  .publica__rodape { inline-size: min(100%, 44rem); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e3); color: var(--texto-suave); font-size: var(--fs-sm); }
  @media (max-width: 599.98px) {
    .fatos { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .fatos dd { margin-block-end: var(--e2); }
    .operacao { grid-template-columns: minmax(0, 1fr); }
    .excecao { grid-template-columns: minmax(0, 1fr); }
  }
}

/* ------------------------------------------------------------------ */
@layer utilitarios {
  .so-leitor { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .suave { color: var(--texto-suave); }
  .grupo { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
  .grupo--linha { flex-wrap: nowrap; min-block-size: 1.75rem; }
  .grupo--entre { justify-content: space-between; }
  .pilha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
  .tom-ok { --selo-fundo: var(--ok-fundo); --selo-texto: var(--ok-texto); --selo-forte: var(--ok-forte); }
  .tom-aviso { --selo-fundo: var(--aviso-fundo); --selo-texto: var(--aviso-texto); --selo-forte: var(--aviso-forte); }
  .tom-falha { --selo-fundo: var(--falha-fundo); --selo-texto: var(--falha-texto); --selo-forte: var(--falha-forte); }
  .tom-info { --selo-fundo: var(--info-fundo); --selo-texto: var(--info-texto); --selo-forte: var(--info-forte); }
  .tom-neutro { --selo-fundo: var(--neutro-fundo); --selo-texto: var(--neutro-texto); --selo-forte: var(--neutro-forte); }
  .texto-falha { color: var(--falha-texto); }
  .texto-ok { color: var(--ok-texto); }
}

/* Acessibilidade global: fora das camadas para vencer qualquer regra. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .selo__ponto { background: CanvasText; forced-color-adjust: none; }
  .botao, .cartao, .tabela, .excecao, .metrica { border: 1px solid CanvasText; }
  .botao--primario { border-color: ButtonText; }
  .barra__preenchimento { background: Highlight; forced-color-adjust: none; }
  .linha[aria-current="true"] { outline: 2px solid Highlight; }
  .contagem[aria-pressed="true"] { outline: 2px solid Highlight; }
  :focus-visible { outline-color: Highlight; }
}