/* ═══════════════════════════════════════════════════════════════════
   AURIAN · DS AURORA · CSS dos componentes canônicos 2026-04-22
   Extraído de preview-dashboard-aurora.html — NÃO modificar valores.
   Depende dos tokens em tokens.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── BOTÕES ── */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 7px;
  font-family: var(--ff-sans); font-size: var(--fs-body-sm); font-weight: 600;
  letter-spacing: -0.005em; cursor: pointer;
  transition: background .28s var(--ease), border-color .28s var(--ease),
              transform .28s var(--ease), box-shadow .35s var(--ease), color .25s var(--ease);
  border: 1px solid transparent; isolation: isolate;
}
.btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%,
    rgba(255,255,255,0.06) 48%, rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.06) 52%, transparent 70%);
  transform: translateX(-110%); transition: transform .9s var(--beam); z-index: 0;
}
.btn:hover::before { transform: translateX(110%); }
.btn svg, .btn span { position: relative; z-index: 1; }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; flex-shrink: 0; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(1px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn-ghost {
  background: transparent; border-color: var(--line); color: var(--ink-3);
  box-shadow: 0 1px 0 var(--inner-glow) inset;
}
.btn-ghost:hover {
  background: var(--card); border-color: var(--line-2); color: var(--ink-1);
  transform: translateY(-1px); box-shadow: 0 1px 0 var(--inner-glow) inset, 0 4px 14px rgba(0,0,0,0.22);
}

.btn-secondary {
  background: var(--card); border-color: var(--line-2); color: var(--ink-2);
  box-shadow: 0 1px 0 var(--inner-glow) inset, 0 1px 2px rgba(0,0,0,0.18);
}
.btn-secondary:hover {
  background: var(--card-hi);
  border-color: color-mix(in srgb, var(--gold-hi) 22%, var(--line-2));
  color: var(--ink-1); transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 18px rgba(0,0,0,0.32), 0 0 0 1px rgba(232,236,242,0.04);
}

/* ── BTN PRIMARY · Metal Premium (inverso do bg) ──
   Filosofia: primary = inverso total do bg pra chamar atencao sempre.
   - Dark: botao BRANCO (platinum) com texto escuro, gradient sutil branco-silver
   - Light: botao PRETO (ink profundo) com texto branco, gradient ink
   Ambos: inner highlight + shimmer forte + lift + glow externo no hover */
.btn-primary {
  background: linear-gradient(180deg, #FFFFFF 0%, #E5E9F0 100%);
  border: 1px solid #CAD0D8;
  color: #0E1117; font-weight: 600;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -1px 0 rgba(14,17,23,0.04) inset,
    0 1px 2px rgba(0,0,0,0.28),
    0 3px 10px rgba(0,0,0,0.22);
  transition:
    background .28s var(--ease),
    border-color .28s var(--ease),
    transform .18s var(--ease),
    box-shadow .35s var(--ease),
    color .25s var(--ease);
}
.btn-primary::before {
  background: linear-gradient(115deg,
    transparent 25%,
    rgba(14,17,23,0.06) 46%,
    rgba(14,17,23,0.14) 50%,
    rgba(14,17,23,0.06) 54%,
    transparent 75%);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F3F8 100%);
  border-color: #B4BAC2;
  color: #000000;
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -1px 0 rgba(14,17,23,0.06) inset,
    0 2px 4px rgba(0,0,0,0.32),
    0 10px 22px rgba(0,0,0,0.30),
    0 0 0 1px rgba(200,205,213,0.20),
    0 0 20px rgba(216,220,227,0.10);
}
.btn-primary:hover svg { transform: translateX(3px); }
.btn-primary:active {
  transform: translateY(0) scale(0.97);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 1px 3px rgba(0,0,0,0.32);
}

/* Light: inverso — botao PRETO com texto branco */
[data-t="light"] .btn-primary {
  background: linear-gradient(180deg, #2A3140 0%, #0E1117 100%);
  border-color: rgba(14,17,23,1);
  color: #FFFFFF;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 -1px 0 rgba(255,255,255,0.03) inset,
    0 1px 2px rgba(14,17,23,0.22),
    0 4px 14px rgba(14,17,23,0.16);
}
[data-t="light"] .btn-primary::before {
  background: linear-gradient(115deg,
    transparent 25%,
    rgba(255,255,255,0.14) 46%,
    rgba(255,255,255,0.42) 50%,
    rgba(255,255,255,0.14) 54%,
    transparent 75%);
}
[data-t="light"] .btn-primary:hover {
  background: linear-gradient(180deg, #3A4050 0%, #1A1F2A 100%);
  border-color: rgba(14,17,23,1);
  color: #FFFFFF;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 2px 4px rgba(14,17,23,0.22),
    0 10px 24px rgba(14,17,23,0.26),
    0 0 0 1px rgba(14,17,23,0.28),
    0 0 22px rgba(14,17,23,0.14);
}
[data-t="light"] .btn-primary:active {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 1px 3px rgba(14,17,23,0.22);
}

/* ── BTN ACTION · CTA central (Disparar aviso, Enviar lote) ──
   Só existe como `AuroraButton variant="action"` (modificador de .btn-primary). Desde
   2026-09-25 é a tecla retroiluminada da família em tecla física: tamanho, material e
   estados moram em `AuroraButton.css`. Aqui fica só o avião, que voa no hover. */
.btn-action svg {
  width: 15px; height: 15px; stroke-width: 1.7;
}
/* Send icon: paper-plane voa diagonal no hover, com trail revelado */
.btn-action .icon-send { transition: transform .42s var(--ease); }
.btn-action:hover:not(:disabled) .icon-send { transform: translate(3px, -3px); }
.btn-action .icon-send-trail { opacity: 0; transition: opacity .25s var(--ease) .12s; }
.btn-action:hover:not(:disabled) .icon-send-trail { opacity: 1; }

.btn-dng {
  background: transparent;
  border-color: color-mix(in srgb, var(--err) 32%, transparent);
  color: var(--err); box-shadow: 0 1px 0 rgba(201,113,96,0.06) inset;
}
.btn-dng::before {
  background: linear-gradient(115deg, transparent 30%,
    rgba(201,113,96,0.10) 48%, rgba(201,113,96,0.20) 50%,
    rgba(201,113,96,0.10) 52%, transparent 70%);
}
.btn-dng:hover {
  background: var(--err-soft);
  border-color: color-mix(in srgb, var(--err) 56%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(201,113,96,0.10) inset, 0 4px 18px rgba(201,113,96,0.22);
}

.btn-slim {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 7px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink-4);
  transition: background .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease);
  isolation: isolate;
}
.btn-slim::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%,
    rgba(255,255,255,0.05) 48%, rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.05) 52%, transparent 70%);
  transform: translateX(-110%); transition: transform .9s var(--beam); z-index: 0;
}
.btn-slim:hover::before { transform: translateX(110%); }
.btn-slim:hover {
  background: var(--card);
  border-color: color-mix(in srgb, var(--gold-hi) 18%, var(--line-2));
  color: var(--ink-1); transform: translateY(-1px);
  box-shadow: 0 1px 0 var(--inner-glow) inset, 0 4px 14px rgba(0,0,0,0.22);
}
.btn-slim:active { transform: translateY(0) scale(0.98); }
.btn-slim svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; position: relative; z-index: 1; }
.btn-slim span { position: relative; z-index: 1; }

/* ── MANUAL ENTRY CARD · superficie elevada para forms inline (Novo aviso, etc) ──
   Padrao reutilizavel para "novo X" inline no topo de pagina. Eyebrow com edge
   gold, top silver line (assinatura DS), inputs recessed (bg-2), footer com
   border-top sutil separando bloco do form do bloco de acao. */
.manual-card {
  position: relative;
  margin-bottom: 24px;
  padding: 22px 24px 20px;
  border: 1px solid var(--silver-line);
  border-radius: 12px;
  background: var(--card);
  box-shadow:
    inset 0 1px 0 var(--inner-glow),
    0 1px 2px rgba(0,0,0,0.18),
    0 14px 36px rgba(0,0,0,0.22);
}
[data-t="light"] .manual-card {
  box-shadow:
    0 1px 2px rgba(14,17,23,0.04),
    0 10px 28px rgba(14,17,23,0.08);
}
/* Top edge silver line — assinatura igual KPICard */
.manual-card::before {
  content: '';
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--silver-line) 14%, var(--silver-line) 86%, transparent);
  pointer-events: none;
}
.manual-card-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.manual-card-eyebrow::before {
  content: '';
  position: absolute;
  left: -24px; top: 8px;
  width: 8px; height: 1px;
  background: var(--gold-hi);
  box-shadow: 0 0 6px var(--gold-glow);
}
.manual-card-eyebrow strong { color: var(--gold-hi); font-weight: 700; }
.manual-card-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
/* Inputs recessed dentro do card: bg-2 + focus ring gold sutil */
.manual-card input[type="text"],
.manual-card input[type="date"],
.manual-card input[type="time"],
.manual-card input[type="tel"],
.manual-card input[type="email"],
.manual-card select,
.manual-card textarea {
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .25s var(--ease);
}
.manual-card input:hover,
.manual-card select:hover,
.manual-card textarea:hover { border-color: var(--silver-line) !important; }
.manual-card input:focus,
.manual-card select:focus,
.manual-card textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--gold-hi) 36%, var(--silver-line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-hi) 12%, transparent);
  background: var(--card) !important;
}

/* ── PENDENCIA BANNER · porta de entrada acionavel para uma metrica em alerta ──
   Padrao reutilizavel para banners de pendencia operacional (Sem resposta, Falhas
   de envio, Cadastros invalidos, etc). Combina icone circular + texto eyebrow/title/sub
   + acoes inline. Border-left 3px com glow warm. Deve aparecer condicional (so quando
   ha de fato pendencia >0) pra evitar ruido visual. */
.pendencia-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  margin: 14px 0;
  border: 1px solid color-mix(in srgb, var(--warn) 32%, var(--line-2));
  border-radius: 12px;
  background: linear-gradient(115deg, var(--card) 30%, color-mix(in srgb, var(--warn-soft) 80%, var(--card)) 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 var(--inner-glow), 0 4px 18px rgba(0,0,0,0.12);
}
[data-t="light"] .pendencia-banner {
  box-shadow: 0 1px 2px rgba(14,17,23,0.04), 0 6px 22px rgba(14,17,23,0.06);
}
.pendencia-banner::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--warn), color-mix(in srgb, var(--warn) 40%, transparent));
  box-shadow: 0 0 12px var(--warn);
}
.pendencia-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pendencia-icon svg {
  width: 18px; height: 18px;
  stroke: var(--warn);
  fill: none;
  stroke-width: 1.8;
}
.pendencia-text { min-width: 0; }
.pendencia-eyebrow {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--warn);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pendencia-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ok-soft);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  color: var(--ok);
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pendencia-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ok);
  margin-right: 6px;
  box-shadow: 0 0 6px var(--ok);
}
.pendencia-title {
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: 3px;
  line-height: 1.3;
}
.pendencia-title strong {
  color: var(--warn);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pendencia-sub {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.pendencia-actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ── PILLS ── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.08em;
  font-weight: 700; border: 1px solid; white-space: nowrap;
  max-inline-size: min(100%, var(--pill-max, 34ch));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.pill::before { content: ''; width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }
.pill-label {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A pill escreve no piso micro/700 — texto PEQUENO. Por isso a tinta sai da família
   --*-text, não da --* base: no escuro os dois são o MESMO valor (--ok == --ok-text
   etc., tokens.css:69-76), então nada muda; no claro a base é meio-tom e reprovava
   AA em texto pequeno (.pill-ok media 3,73:1, .pill-info 3,61:1 — AA pede 4,5:1).
   Ponto (::before) e borda seguem no token base: são cromia, não texto. */
.pill-ok { background: var(--ok-soft); color: var(--ok-text); border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.pill-ok::before { background: var(--ok); }
.pill-warn { background: var(--warn-soft); color: var(--warn-text); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.pill-warn::before { background: var(--warn); }
.pill-err { background: var(--err-soft); color: var(--err-text); border-color: color-mix(in srgb, var(--err) 22%, transparent); }
.pill-err::before { background: var(--err); }
.pill-info { background: var(--info-soft); color: var(--info-text); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.pill-info::before { background: var(--info); }
.pill-pend { background: var(--pend-soft); color: var(--pend-text); border-color: color-mix(in srgb, var(--pend) 22%, transparent); }
.pill-pend::before { background: var(--pend); }
/* Texto micro = texto pequeno: a tinta vem de --gold-text, nunca de --gold-hi.
   No escuro --gold-text É --gold-hi (prata clara), então nada muda; no claro
   --gold-hi é a BASE CLARA (#7DD3FC) e como cor de texto media 1,55:1. */
.pill-gold { background: var(--gold-soft); color: var(--gold-text); border-color: color-mix(in srgb, var(--gold-text) 28%, transparent); }
.pill-gold::before { background: var(--gold-text); }
.pill-mute { background: var(--pill-mute-bg); color: var(--ink-4); border-color: var(--line); }
.pill-mute::before { background: var(--ink-5); }

/* R28/R29: semântica operacional explícita; informação genérica continua info. */
.pill-status-confirmed { --pill-state: var(--status-confirmed); --pill-state-soft: var(--status-confirmed-soft); --pill-state-text: var(--status-confirmed-text); }
.pill-status-sent { --pill-state: var(--status-sent); --pill-state-soft: var(--status-sent-soft); --pill-state-text: var(--status-sent-text); }
.pill-status-scheduled { --pill-state: var(--status-scheduled); --pill-state-soft: var(--status-scheduled-soft); --pill-state-text: var(--status-scheduled-text); }
.pill-status-pending { --pill-state: var(--status-pending); --pill-state-soft: var(--status-pending-soft); --pill-state-text: var(--status-pending-text); }
.pill-status-error { --pill-state: var(--status-error); --pill-state-soft: var(--status-error-soft); --pill-state-text: var(--status-error-text); }
.pill-status { background: var(--pill-state-soft); color: var(--pill-state-text); border-color: color-mix(in srgb, var(--pill-state) 22%, transparent); }
.pill-status::before { background: var(--pill-state); }
.pill-with-icon { gap: 0; }
.pill-with-icon::before { content: none; }
.pill-with-icon .pill-label { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pill-with-icon .ds-stroke-icon { flex-shrink: 0; }
.pill-with-icon .pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Habitat `card` (construção nova · 2026-09-24): o estado mora fora da tabela densa —
   card, cabeçalho, modal, lista de leitura — e precisa DESCOLAR do fundo. Corpo na dose
   do tingimento categórico e borda em CAMADAS, como toda peça do DS: aro de tom por
   dentro (no lugar da borda de 1 px, com o mesmo tamanho final), bevel de luz no topo e
   assento de tinta embaixo — a pill pousa no card em vez de parecer recortada nele.
   Ponto com halo; a tinta sobe só onde o corpo mais forte tiraria o AA (pend/err).
   Uma receita só: cada estado declara o tom (`--pill-tone`) e a família de status troca
   a dose. O default `linha` (acima) não muda. Mute, gold e warn ficam só com o bevel:
   mute é calmo por desenho; warn é legado aposentado. */
.pill--card { box-shadow: inset 0 1px 0 var(--pill-card-bevel); }
.pill--card::before { width: 5px; height: 5px; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor var(--pill-card-halo), transparent); }
.pill--card.pill-ok, .pill--card.pill-info, .pill--card.pill-pend, .pill--card.pill-err, .pill--card.pill-status {
  padding: 4px 10px;
  border: 0;
  background: color-mix(in srgb, var(--pill-tone) var(--pill-card-fill), transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pill-tone) var(--pill-card-edge), transparent),
    inset 0 1px 0 var(--pill-card-bevel),
    0 1px 2px -1px var(--pill-card-seat);
}
.pill--card.pill-ok { --pill-tone: var(--ok); }
.pill--card.pill-info { --pill-tone: var(--info); }
.pill--card.pill-pend { --pill-tone: var(--pend); color: color-mix(in srgb, var(--ink-1) var(--pill-card-ink-pend), var(--pend-text)); }
.pill--card.pill-err { --pill-tone: var(--err); color: color-mix(in srgb, var(--ink-1) var(--pill-card-ink-err), var(--err-text)); }
/* Status: dose própria — no claro os tons da família são mais leves e pedem mais cor. */
.pill--card.pill-status { --pill-tone: var(--pill-state); background: color-mix(in srgb, var(--pill-tone) var(--pill-card-fill-status), transparent); }

/* ── TABS ── */
.tab-group { display: flex; gap: 0; }
.tab {
  position: relative; padding: 10px 16px 12px;
  font-family: var(--ff-mono); font-size: var(--fs-meta); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
  cursor: pointer; border: none; background: transparent;
  transition: color .25s var(--ease);
  display: flex; align-items: center; gap: 7px;
  --tabAccent: var(--ink-2);
  --tabAccentText: var(--tabAccent);
  --tabAccentSoft: var(--tab-count-bg);
  --tabAccentBrd: var(--line-2);
  /* Fio da Prata viva (padrão desde 2026-09-25): nasce no acento da aba e esfria na luz.
     Aba com acento semântico próprio (--tabAccent) mantém a cor dela na origem do fio. */
  --tabFio: linear-gradient(90deg, var(--tabAccent), var(--luz));
}
.tab::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  border-radius: 2px;
  background: var(--tabFio);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .35s var(--ease-expo), box-shadow .3s var(--ease);
}
.tab:hover { color: var(--ink-2); }
.tab:hover::after { transform: scaleX(1); opacity: .45; }
.tab.active { color: var(--ink-1); }
.tab.active::after { transform: scaleX(1); opacity: 1; box-shadow: 0 0 10px var(--luz-brilho), 0 1px 3px var(--luz-halo); }
.tab-count {
  font-family: var(--ff-mono); font-size: var(--fs-meta);
  background: var(--tabAccentSoft); border: 1px solid var(--tabAccentBrd);
  border-radius: 5px; padding: 2px 6px; font-variant-numeric: tabular-nums;
  color: var(--ink-3); transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.tab.active .tab-count { background: var(--tabAccentSoft); border-color: var(--tabAccentBrd); color: var(--tabAccentText); }
.tab:hover .tab-count { color: var(--tabAccentText); border-color: var(--tabAccentBrd); }
/* Cores semânticas por tab */
.tab-prontos   { --tabAccent: var(--gold-hi); --tabAccentSoft: var(--gold-soft); --tabAccentBrd: color-mix(in srgb, var(--gold-hi) 32%, var(--line-2)); }
.tab-pendencia { --tabAccent: var(--pend); --tabAccentText: var(--pend-text); --tabAccentSoft: var(--pend-soft); --tabAccentBrd: color-mix(in srgb, var(--pend) 40%, transparent); }
.tab-enviados  { --tabAccent: var(--ok); --tabAccentSoft: var(--ok-soft); --tabAccentBrd: color-mix(in srgb, var(--ok) 32%, var(--line-2)); }
.tab-arquivo   { --tabAccent: var(--ink-3); --tabAccentSoft: var(--tab-count-bg); --tabAccentBrd: var(--line-2); }
/* ── AUDIT STRIP + REVIEW PANEL (catálogo) ──
   Promovidos de pages/Reagendamentos.css em 2026-07-06, quando o fluxo de
   cancelamento por lista mínima (CancelamentosListaFlow) passou a montar na
   porta Colar de Lotes — 2+ superfícies usando = componente de catálogo.
   Nomes `reag-*` mantidos (renomear = churn sem ganho; são o idioma de
   conferência de lote, nascido em Reagendamentos). */
.reag-audit-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.reag-audit-card {
  min-height: 76px;
  padding: 13px 14px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.reag-audit-card strong {
  color: var(--ink-1);
  font: 800 24px var(--ff-sans);
  line-height: 1;
}

.reag-audit-card span {
  color: var(--ink-4);
  font: 700 10px var(--ff-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.reag-audit-card-ok {
  border-color: color-mix(in srgb, var(--ok) 26%, var(--line-2));
  background: color-mix(in srgb, var(--ok-soft) 54%, var(--card));
}

.reag-audit-card-warn {
  border-color: color-mix(in srgb, var(--warn) 28%, var(--line-2));
  background: color-mix(in srgb, var(--warn-soft) 58%, var(--card));
}

.reag-audit-card-info {
  border-color: color-mix(in srgb, var(--info) 24%, var(--line-2));
  background: color-mix(in srgb, var(--info-soft) 56%, var(--card));
}

.reag-audit-note {
  grid-column: 1 / -1;
  padding: 9px 12px;
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--ink-3);
  font-size: 12px;
}

.reag-review-panel {
  margin: 0 0 16px;
  border: 1px solid color-mix(in srgb, var(--warn) 24%, var(--line-2));
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn-soft) 36%, var(--card));
  overflow: hidden;
}

.reag-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
}

.reag-review-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reag-review-head strong {
  color: var(--ink-1);
  font-size: 14px;
}

.reag-review-head span,
.reag-review-more,
.reag-review-doc {
  color: var(--ink-4);
  font-size: 12px;
  line-height: 1.5;
}

.reag-review-table {
  margin: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  max-height: 420px;
  overflow: auto;
}

.reag-review-doc {
  display: block;
  margin-top: 3px;
  font-family: var(--ff-mono);
  letter-spacing: .04em;
}

.reag-review-more {
  padding: 10px 14px 13px;
  border-top: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--card) 70%, transparent);
}

@media (max-width: 780px) {
  .reag-audit-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reag-review-head {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ── FILTER CHIPS ── */
.filter-chips {
  display: inline-flex; gap: 0;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px;
}
.filter-chip {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); padding: 5px 10px; border-radius: 5px;
  cursor: pointer; border: none; background: transparent;
  transition: color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); font-weight: 600;
}
.filter-chip:hover { color: var(--ink-2); }
.filter-chip.active {
  background: var(--card-hi); color: var(--ink-1);
  box-shadow: 0 1px 0 var(--inner-glow) inset, 0 0 0 1px color-mix(in srgb, var(--gold-hi) 24%, transparent);
}

/* ── KPI STRIP + CARDS ── */
.kpi-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border-bottom: 1px solid var(--line); margin: 0;
}
.kpi-card {
  position: relative; overflow: hidden;
  padding: 20px 24px 18px; background: var(--bg);
  cursor: default;
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  border-top: 1px solid transparent;
}
.kpi-card--clickable { cursor: pointer; }
.kpi-card--clickable:focus-visible { outline: 2px solid var(--silver-line); outline-offset: -2px; }
.kpi-card--clickable::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.kpi-card--clickable .kpi-drill-hint {
  position: absolute; top: 14px; right: 16px;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ff-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4);
  opacity: 0; transform: translateX(4px); transition: opacity .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
  pointer-events: none;
}
.kpi-card--clickable .kpi-drill-hint svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }
.kpi-card--clickable:hover .kpi-drill-hint { opacity: 1; transform: translateX(0); color: var(--ink-2); }
.kpi-card::after {
  content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--silver-line) 30%, var(--silver-line) 70%, transparent);
  opacity: 0.45; transition: opacity .3s var(--ease); pointer-events: none;
}
.kpi-card:hover::after { opacity: 0.85; }
.kpi-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%,
    var(--kpi-beam) 48%, var(--kpi-beam-peak) 50%, var(--kpi-beam) 52%, transparent 70%);
  transform: translateX(-110%); transition: transform .9s var(--beam);
}
.kpi-card:hover { background: var(--card); transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--inner-glow), 0 4px 20px rgba(0,0,0,0.08); }
.kpi-card:hover::before { transform: translateX(110%); }
.kpi-card.featured:hover { box-shadow: inset 0 1px 0 rgba(232,237,242,0.12), 0 0 0 1px rgba(232,237,242,0.06), 0 4px 24px rgba(0,0,0,0.08); }
.kpi-card.info-featured:hover { box-shadow: inset 0 1px 0 rgba(168,192,224,0.14), 0 0 0 1px rgba(168,192,224,0.10), 0 4px 24px rgba(0,0,0,0.08); }
.kpi-card.info-featured:hover .kpi-sparkline { opacity: 0.85; }
.kpi-card.info-featured .kpi-label svg { color: var(--info); opacity: 0.9; }
.kpi-card.info-featured .kpi-value { color: var(--info); text-shadow: 0 0 18px rgba(168,192,224,0.32); }
[data-t="light"] .kpi-card.info-featured .kpi-value { color: var(--info); text-shadow: none; }

/* ── KPICard variant warn-featured · sinaliza pendencia operacional (Sem resposta) ── */
.kpi-card.warn-featured {
  border-color: color-mix(in srgb, var(--warn) 38%, var(--line-2));
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--warn-soft) 50%, var(--card)));
}
.kpi-card.warn-featured::before {
  background: linear-gradient(115deg, transparent 25%,
    color-mix(in srgb, var(--warn) 14%, transparent) 50%,
    transparent 75%);
}
.kpi-card.warn-featured .kpi-label svg { stroke: var(--warn); opacity: 0.95; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--warn) 38%, transparent)); }
.kpi-card.warn-featured .kpi-value { color: var(--warn); text-shadow: 0 0 18px color-mix(in srgb, var(--warn) 28%, transparent); }
[data-t="light"] .kpi-card.warn-featured .kpi-value { color: var(--warn); text-shadow: none; }
.kpi-card.warn-featured:hover {
  border-color: color-mix(in srgb, var(--warn) 60%, var(--line-2));
  box-shadow: inset 0 1px 0 var(--inner-glow), 0 0 0 1px color-mix(in srgb, var(--warn) 24%, transparent), 0 8px 26px color-mix(in srgb, var(--warn) 16%, transparent);
}
.kpi-card.warn-featured:hover .kpi-sparkline { opacity: 0.92; }
.kpi-card.warn-featured .kpi-sparkline polyline { stroke: var(--warn) !important; }
.kpi-card.warn-featured .kpi-sparkline polygon { fill: color-mix(in srgb, var(--warn) 20%, transparent) !important; }
.kpi-delta.warn { background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); }
.kpi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kpi-label {
  font-family: var(--ff-mono); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
  display: flex; align-items: center; gap: 7px;
}
.kpi-label svg {
  width: 13px; height: 13px; stroke: var(--silver); fill: none; stroke-width: 1.5;
  opacity: 0.85; transition: stroke .25s var(--ease), opacity .25s var(--ease);
  filter: drop-shadow(0 0 4px var(--silver-glow));
}
.kpi-card:hover .kpi-label svg { opacity: 1; }
.kpi-sparkline { width: 64px; height: 24px; opacity: 0.55; transition: opacity .3s; }
.kpi-card:hover .kpi-sparkline { opacity: 0.95; }
.kpi-body { display: flex; align-items: flex-end; gap: 10px; }
.kpi-value {
  font-family: var(--ff-mono); font-size: var(--fs-kpi); font-weight: 700;
  letter-spacing: -0.04em; color: var(--ink-1); line-height: 0.92;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}
.kpi-delta {
  font-family: var(--ff-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em; margin-bottom: 7px; font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius: 5px; display: inline-flex; align-items: center; gap: 3px;
}
.kpi-delta.up { background: var(--ok-soft); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent); }
.kpi-delta.dn { background: var(--err-soft); color: var(--err); border: 1px solid color-mix(in srgb, var(--err) 28%, transparent); }
.kpi-delta.neutral { background: var(--silver-soft); color: var(--ink-3); border: 0; box-shadow: var(--hairline); }
.kpi-footer { margin-top: 10px; font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.16em; color: var(--ink-4); font-variant-numeric: tabular-nums; text-transform: uppercase; }

/* Light: featured sparkline gold */
[data-t="light"] .kpi-card.featured .kpi-sparkline polyline { stroke: #1479B8 !important; }
[data-t="light"] .kpi-card.featured .kpi-sparkline polygon { fill: rgba(20,121,184,0.12) !important; }
/* Bright: chart cinza */
[data-sb-shade="bright"] .kpi-card.featured .kpi-sparkline polyline { stroke: #7E848F !important; }
[data-sb-shade="bright"] .kpi-card.featured .kpi-sparkline polygon { fill: rgba(126,132,143,0.12) !important; }

/* ── TABLE CARD ── */
.tablecard { margin: 0; background: var(--bg); position: relative; }
.tablecard-edge {
  position: absolute; top: 0; right: 0; width: 1px; height: 280px;
  background: linear-gradient(180deg, transparent 0%, rgba(232,236,242,0.18) 14%, rgba(232,236,242,0.08) 45%, transparent 100%);
  pointer-events: none; z-index: 2;
}
.tablecard-ticks {
  position: absolute; top: 60px; bottom: 0; right: 0; width: 6px;
  pointer-events: none; z-index: 2;
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent 19px, rgba(232,236,242,0.10) 19px, rgba(232,236,242,0.10) 20px);
  mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.tablecard-toolbar {
  padding: 16px 40px 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
/* Sem espaço, o grupo quebra linha: espremer a tecla cortaria o rótulo (o `.btn` tem overflow). */
.toolbar-right { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; padding-bottom: 12px; }

/* ── TABLE ── */
.tbl-wrap,
.aurora-table-wrap { overflow-x: auto; }
table,
.aurora-table { width: 100%; border-collapse: collapse; }
thead tr,
.aurora-table thead tr { border-bottom: 1px solid var(--line); }
th,
.aurora-table th {
  font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
  padding: 10px 12px; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums;
}
th:first-child,
.aurora-table th:first-child { padding-left: 40px; }
th:last-child,
.aurora-table th:last-child  { padding-right: 40px; }
td,
.aurora-table td {
  padding: 0 12px; height: 44px; vertical-align: middle;
  font-family: var(--ff-sans); font-size: 13px; color: var(--ink-2);
  border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
td:first-child,
.aurora-table td:first-child { padding-left: 40px; }
td:last-child,
.aurora-table td:last-child  { padding-right: 40px; }
tbody tr,
.aurora-table tbody tr {
  position: relative; overflow: hidden; isolation: isolate;
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease);
}
/* Luizinha lateral canônica */
tbody tr td:first-child::before,
.aurora-table tbody tr td:first-child::before {
  content: ''; position: absolute; left: 0; top: 8%; bottom: 8%;
  width: 0; border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, transparent 0%, #E8EDF2 30%, #E8EDF2 70%, transparent 100%);
  box-shadow: 0 0 0 rgba(232,237,242,0);
  opacity: 0; transform-origin: left center;
  transition: width .35s var(--ease-expo), opacity .35s var(--ease),
              box-shadow .45s var(--ease), top .35s var(--ease), bottom .35s var(--ease);
  pointer-events: none;
}
tbody tr:hover,
.aurora-table tbody tr:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 4px 14px -4px rgba(0,0,0,0.30);
}
tbody tr:hover td:first-child::before,
.aurora-table tbody tr:hover td:first-child::before {
  width: 3px; opacity: 1; top: 0; bottom: 0;
  box-shadow: 0 0 14px rgba(232,237,242,0.55), 0 0 4px rgba(232,237,242,0.85), 3px 0 18px rgba(232,237,242,0.18);
}
tbody tr.selected,
.aurora-table tbody tr.selected {
  background: rgba(255,255,255,0.06);
}
tbody tr.selected td:first-child::before,
.aurora-table tbody tr.selected td:first-child::before {
  width: 3px; opacity: 1; top: 0; bottom: 0;
  box-shadow: 0 0 16px rgba(232,237,242,0.65), 0 0 5px rgba(232,237,242,1), 3px 0 20px rgba(232,237,242,0.22);
}

/* Light: luizinha prata escura */
[data-t="light"] tbody tr:hover,
[data-t="light"] .aurora-table tbody tr:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -1px 0 rgba(14,17,23,0.04) inset,
    0 4px 14px -4px rgba(14,17,23,0.10);
}
[data-t="light"] tbody tr td:first-child::before,
[data-t="light"] .aurora-table tbody tr td:first-child::before { background: linear-gradient(180deg, transparent 0%, #9DA3AE 30%, #9DA3AE 70%, transparent 100%); }
[data-t="light"] tbody tr:hover td:first-child::before,
[data-t="light"] .aurora-table tbody tr:hover td:first-child::before { box-shadow: 0 0 14px rgba(157,163,174,0.50), 0 0 4px rgba(157,163,174,0.85), 3px 0 18px rgba(157,163,174,0.18); }
[data-t="light"] tbody tr.selected td:first-child::before,
[data-t="light"] .aurora-table tbody tr.selected td:first-child::before { box-shadow: 0 0 16px rgba(157,163,174,0.60), 0 0 5px rgba(157,163,174,0.95), 3px 0 20px rgba(157,163,174,0.22); }
[data-t="light"] tbody tr.selected,
[data-t="light"] .aurora-table tbody tr.selected { background: rgba(14,17,23,0.05); }

/* Bright: luizinha cinza */
[data-sb-shade="bright"] tbody tr td:first-child::before,
[data-sb-shade="bright"] .aurora-table tbody tr td:first-child::before { background: linear-gradient(180deg, transparent 0%, #C8CDD5 30%, #C8CDD5 70%, transparent 100%); }
[data-sb-shade="bright"] tbody tr:hover td:first-child::before,
[data-sb-shade="bright"] .aurora-table tbody tr:hover td:first-child::before { box-shadow: 0 0 14px rgba(200,205,213,0.55), 0 0 4px rgba(200,205,213,0.80), 3px 0 18px rgba(200,205,213,0.18); }
[data-sb-shade="bright"] tbody tr.selected td:first-child::before,
[data-sb-shade="bright"] .aurora-table tbody tr.selected td:first-child::before { box-shadow: 0 0 16px rgba(200,205,213,0.65), 0 0 5px rgba(200,205,213,0.95), 3px 0 20px rgba(200,205,213,0.22); }
[data-sb-shade="bright"] tbody tr:hover,
[data-sb-shade="bright"] .aurora-table tbody tr:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 -1px 0 rgba(14,17,23,0.04) inset, 0 4px 14px -4px rgba(14,17,23,0.10);
}
[data-sb-shade="bright"] tbody tr.selected,
[data-sb-shade="bright"] .aurora-table tbody tr.selected { background: linear-gradient(90deg, rgba(14,17,23,0.06) 0%, rgba(14,17,23,0.02) 30%, transparent 100%); }

/* Calm/Radiant */
tbody tr td,
.aurora-table tbody tr td { transition: opacity .3s var(--ease); }
tbody tr td > *,
.aurora-table tbody tr td > * { position: relative; z-index: 1; opacity: .58; transition: opacity .3s var(--ease); }
tbody tr:hover td > *,
tbody tr.selected td > *,
.aurora-table tbody tr:hover td > *,
.aurora-table tbody tr.selected td > * { opacity: 1; }

/* Action icons staggered */
.cell-actions { opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--ease), transform .35s var(--ease-expo); display: flex; align-items: center; gap: var(--sp-1); }
tbody tr:hover .cell-actions,
.aurora-table tbody tr:hover .cell-actions { opacity: 1; transform: translateX(0); }
.row-action { transform: scale(.92); transition: transform .25s var(--ease-expo) var(--row-action-delay,0s), background .15s, border-color .15s, color .15s; }
tbody tr:hover .row-action,
.aurora-table tbody tr:hover .row-action { transform: scale(1); }
tbody tr:hover .row-action:nth-child(1),
.aurora-table tbody tr:hover .row-action:nth-child(1) { --row-action-delay: 0.04s; }
tbody tr:hover .row-action:nth-child(2),
.aurora-table tbody tr:hover .row-action:nth-child(2) { --row-action-delay: 0.10s; }
tbody tr:hover .row-action:nth-child(3),
.aurora-table tbody tr:hover .row-action:nth-child(3) { --row-action-delay: 0.16s; }
.row-action { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--ink-4); }
.row-action:hover { background: var(--card-hi); border-color: var(--line-2); color: var(--ink-2); }
.row-action svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.row-action--danger:hover { background: rgba(201,113,96,0.10); border-color: rgba(201,113,96,0.32); color: var(--err); }
[data-t="light"] .row-action--danger:hover { background: rgba(201,113,96,0.08); border-color: rgba(201,113,96,0.28); color: var(--err); }

/* Cell types */
.cell-id { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); }
.cell-patient { font-weight: 600; color: var(--ink-1); }
.cell-exam { color: var(--ink-3); font-size: var(--fs-body-sm); }
.cell-date { font-family: var(--ff-mono); font-size: var(--fs-label); color: var(--ink-3); letter-spacing: 0.04em; }
.cell-channel { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.10em; color: var(--ink-4); text-transform: uppercase; }

/* Checkbox */
.chk-cell { width: 36px; }
.chk { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; flex-shrink: 0; }
.chk:hover { border-color: var(--ink-3); }
.chk.checked { background: var(--ink-1); border-color: var(--ink-1); }
.chk.checked::after { content: ''; display: block; width: 8px; height: 5px; border-left: 1.5px solid var(--chk-tick); border-bottom: 1.5px solid var(--chk-tick); transform: rotate(-45deg) translate(1px,-1px); }

/* Table footer */
.tbl-footer { padding: 14px 40px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.tbl-total { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-4); text-transform: uppercase; }
.pagination { display: flex; align-items: center; gap: var(--sp-1); }

/* ── SECTION MARK ── */
.section-mark {
  position: relative; height: 1px; margin: 6px 0 2px;
  background: linear-gradient(90deg, transparent 0%, var(--line) 8%, var(--line) 92%, transparent 100%);
  z-index: 1;
}
.section-mark::before {
  content: ''; position: absolute; left: 0; top: 0; width: 48px; height: 1px;
  background: linear-gradient(90deg, var(--stage-mark), transparent);
  box-shadow: 0 0 8px var(--gold-glow);
}
.section-mark::after {
  content: ''; position: absolute; right: 0; top: -3px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--silver); opacity: 0.5;
  box-shadow: 0 0 6px var(--silver-glow);
  animation: dotPulse 4.2s ease-in-out infinite;
}
[data-t="light"] .section-mark::after { background: var(--silver); box-shadow: 0 0 6px var(--silver-glow); }

/* ── STAGE / PAGE STRUCTURE ── */
.stage {
  margin-left: 280px; min-height: 100vh; background: var(--bg);
  position: relative; overflow: hidden;
}
.stage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: var(--stage-noise-op);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.stage::after {
  content: ''; position: absolute; top: 120px; bottom: 120px; right: 0; width: 6px;
  pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent 23px, var(--stage-tick) 23px, var(--stage-tick) 24px);
  mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 92%, transparent 100%);
  opacity: 0.25;
}
.stage-aurora { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.stage-aurora::before { content: ''; position: absolute; width: 600px; height: 600px; top: -10%; right: -5%; border-radius: 50%; filter: blur(120px); background: radial-gradient(circle, var(--stage-aurora-1) 0%, transparent 70%); animation: stageBlob1 38s ease-in-out infinite; }
.stage-aurora::after  { content: ''; position: absolute; width: 500px; height: 500px; bottom: -5%; left: 10%; border-radius: 50%; filter: blur(100px); background: radial-gradient(circle, var(--stage-aurora-2) 0%, transparent 70%); animation: stageBlob2 44s ease-in-out infinite; }
@keyframes stageBlob1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-60px,80px) scale(1.1); } }
@keyframes stageBlob2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(80px,-60px) scale(0.9); } }
.stage-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.012; background-image: repeating-linear-gradient(0deg, transparent 0, transparent 39px, var(--stage-grid-line) 39px, var(--stage-grid-line) 40px); mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%); }
.stage-inner { position: relative; z-index: 1; padding-bottom: 40px; }

/* ── TOPBAR ── */
.topbar { height: 56px; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 40px; gap: var(--sp-4); background: var(--topbar-bg); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: var(--z-sticky); }
.topbar-breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); }
.topbar-breadcrumb span { color: var(--ink-3); }
.topbar-breadcrumb .sep { color: var(--ink-5); }
.topbar-search { flex: 1; max-width: 320px; margin-left: auto; }
.topbar-search-btn { display: flex; align-items: center; gap: var(--sp-2); padding: 7px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-4); transition: border-color .25s, background .25s; width: 100%; }
.topbar-search-btn:hover { border-color: var(--line-2); background: var(--card-hi); color: var(--ink-3); }
.topbar-search-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; flex-shrink: 0; }
.topbar-search-btn kbd { margin-left: auto; font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--ink-5); border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 5px; background: var(--kbd-bg); }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); }
.topbar-icon { position: relative; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--line); background: transparent; cursor: pointer; transition: background .2s, border-color .2s; color: var(--ink-3); }
.topbar-icon:hover { background: var(--card); border-color: var(--line-2); color: var(--ink-1); }
.topbar-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.topbar-pip { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--bg); transition: border-color .3s ease; }
.topbar-pip.live { background: var(--ok); box-shadow: 0 0 6px var(--ok); animation: dotPulse 2.4s infinite; }
.topbar-pip.warn { background: var(--warn); }

/* ── PAGE HEADER ── */
.page-header { padding: 28px 40px 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); border-bottom: 1px solid var(--line); }
.page-header-left { display: flex; flex-direction: column; gap: var(--sp-2); }
.page-eyebrow { display: flex; align-items: center; gap: 10px; }
.page-eyebrow-label { font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-4); }
.page-eyebrow-badge { font-family: var(--ff-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 3px 8px; }
.page-title { font-family: var(--ff-sans); font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.04em; color: var(--ink-1); line-height: 1.05; display: flex; align-items: baseline; gap: var(--sp-3); }
.page-title::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 12px var(--gold-glow), 0 0 4px var(--gold-hi); animation: titleDot 2.6s ease-in-out infinite; align-self: center; margin-bottom: 6px; }
@keyframes titleDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
.page-sub { font-family: var(--ff-sans); font-size: 13px; color: var(--ink-4); letter-spacing: -0.005em; line-height: 1.5; max-width: 480px; }
.page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; margin-top: 4px; }

/* ── DASH CARD ── */
.dash-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden;
  padding: 18px 22px 16px;
  box-shadow: 0 1px 0 rgba(200,205,213,0.04) inset, 0 4px 16px rgba(0,0,0,0.18);
}
[data-t="light"] .dash-card { box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 16px rgba(14,17,23,0.06); }
.dash-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; gap: var(--sp-3); }
.dash-card-eyebrow { font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; }
.dash-card-title { font-family: var(--ff-sans); font-size: 16px; font-weight: 600; letter-spacing: -0.018em; color: var(--ink-1); }

/* ── BAR CHART ── */
.chart-card { display: flex; flex-direction: column; overflow: visible !important; }
.chart-card .dash-card-head { padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 0; }
.chart-tools { display: flex; align-items: center; gap: 14px; }
.chart-legend { display: flex; gap: var(--sp-3); font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--ink-4); text-transform: uppercase; }
.leg-item { display: inline-flex; align-items: center; gap: 5px; }
.leg-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.leg-ok .leg-dot { background: var(--gold-hi); box-shadow: 0 0 6px var(--gold-glow); }
.leg-warn .leg-dot { background: var(--warn); }
.leg-err .leg-dot { background: var(--pend); }
[data-t="light"] .leg-ok .leg-dot { background: var(--gold); }

.bars-zone {
  position: relative; display: grid; grid-template-columns: 36px 1fr;
  height: 220px; padding: 32px 4px 4px; overflow: visible;
}
.bars-yaxis {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 4px 8px 24px 0; align-items: flex-end;
  font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--ink-5);
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}
.bars-plot {
  position: relative; height: 100%;
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  cursor: crosshair; overflow: visible;
}
.bars-gridline { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); opacity: 0.6; pointer-events: none; }
.bars-crosshair {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-hi) 30%, var(--gold-hi) 70%, transparent);
  box-shadow: 0 0 8px var(--gold-glow);
  opacity: 0; transform: translateX(-50%); transition: opacity .2s var(--ease);
  pointer-events: none; z-index: 5;
}
.bars-zone.hovering .bars-crosshair { opacity: 0.6; }
[data-sb-shade="bright"] .bars-crosshair { background: linear-gradient(180deg, transparent, #9DA3AE 30%, #9DA3AE 70%, transparent); box-shadow: 0 0 8px rgba(157,163,174,0.28); }

/* Tooltip — Aurora v2: material vem do .ds-glass-clear (classe no JSX);
   aqui fica posição, entrada e o notch conector (casado com o vidro). */
.bars-tooltip {
  position: absolute; top: 0; left: 0;
  border-radius: 12px;
  padding: 14px 16px 12px; min-width: 188px;
  pointer-events: none; opacity: 0; filter: blur(3px);
  transform: translate(-50%, -100%) translateY(-8px) scale(0.94);
  transform-origin: bottom center;
  transition: opacity .26s var(--ease), transform .42s var(--ease-expo), filter .26s var(--ease), left .32s var(--ease-expo);
  z-index: 6;
  overflow: hidden;
}
.bars-zone.hovering .bars-tooltip { opacity: 1; filter: blur(0); transform: translate(-50%, -100%) translateY(-22px) scale(1); }
.bars-tooltip::before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 1px; height: 14px; background: linear-gradient(180deg, var(--line-2), transparent); }
.bars-tooltip::after { content: ''; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: var(--glass-clear-bg); border-right: 1px solid var(--glass-edge); border-bottom: 1px solid var(--glass-edge); border-radius: 0 0 3px 0; }
@keyframes ttBorderFlash {
  0%   { box-shadow: 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-rim), 0 8px 24px rgba(0,0,0,0.22); }
  20%  { box-shadow: 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-rim), 0 8px 24px rgba(0,0,0,0.22), 0 0 0 1px rgba(232,237,242,0.32), 0 0 18px rgba(232,237,242,0.20); }
  100% { box-shadow: 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-rim), 0 8px 24px rgba(0,0,0,0.22); }
}
.bars-tooltip.flash { animation: ttBorderFlash .55s var(--ease); }
.bt-day { font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-weight: 600; }
.bt-row { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em; line-height: 1.7; }
.bt-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.bt-dot.ok   { background: var(--gold-hi); box-shadow: 0 0 6px var(--gold-glow); }
.bt-dot.warn { background: var(--warn); }
.bt-dot.err  { background: var(--pend); }
.bt-lbl { color: var(--ink-4); flex: 1; text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: 0.14em; }
.bt-val { color: var(--ink-1); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12px; }
.bt-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.22em; color: var(--ink-4); text-transform: uppercase; }
.bt-tot-val { color: var(--ink-1); font-size: var(--fs-read); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* Bars */
.bars-group { position: absolute; bottom: 0; width: 14%; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
/* Altura via transition em var(--h) em vez de CSS animation+forwards.
   Fix: animation+forwards travava as barras em height: 0 quando groups chegava
   vazio do fetch (render 1) e depois populava (render 2) — forwards segurava
   o estado terminal da primeira animacao. Transition reage a qualquer mudanca
   de --h, com escalonamento preservado via delay (--d). */
.bar { width: 65%; border-radius: 4px 4px 0 0; height: var(--h, 0); transition: height .9s cubic-bezier(0.16,1,0.3,1) var(--d, 0s), filter .25s var(--ease), transform .25s var(--ease), box-shadow .35s var(--ease); position: relative; }
.bar-ok {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 95%, color-mix(in srgb, var(--gold) 70%, transparent) 100%);
  box-shadow: 0 0 0 1px rgba(232,236,242,0.18) inset, 0 0 16px rgba(232,236,242,0.18);
}
.bars-zone.hovering .bar-ok { filter: brightness(0.6) saturate(0.7); }
.bars-zone.hovering .bars-group.is-active .bar-ok { filter: brightness(1.15) saturate(1.1); box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset, 0 -4px 18px rgba(232,236,242,0.42); }

[data-sb-shade="bright"] .bar-ok { background: linear-gradient(180deg, #B5BAC3, #7E848F) !important; box-shadow: 0 0 0 1px rgba(181,186,195,0.20) inset, 0 0 12px rgba(126,132,143,0.18) !important; }
[data-sb-shade="bright"] .bars-zone.hovering .bars-group.is-active .bar-ok { box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset, 0 -4px 18px rgba(126,132,143,0.32) !important; }
[data-t="light"] .bar-ok { background: linear-gradient(180deg, #2E90C9, #1479B8) !important; box-shadow: 0 0 0 1px rgba(20,121,184,0.20) inset, 0 0 16px rgba(20,121,184,0.18) !important; }
/* Palette overrides — after light/bright so cascade order wins (same specificity) */
[data-chart-palette] .bar-ok { background: linear-gradient(180deg, var(--cpalette-hi), var(--cpalette)) !important; box-shadow: 0 0 0 1px var(--cpalette-glow) inset, 0 0 14px var(--cpalette-glow) !important; }
[data-chart-palette] .bars-zone.hovering .bars-group.is-active .bar-ok { box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset, 0 -4px 18px var(--cpalette-glow) !important; }
[data-chart-palette] .bars-crosshair { background: linear-gradient(180deg, transparent, var(--cpalette-hi) 30%, var(--cpalette-hi) 70%, transparent); box-shadow: 0 0 8px var(--cpalette-glow); }
[data-chart-palette] .bar-peak-mark { color: var(--cpalette-hi); background: color-mix(in srgb, var(--cpalette) 15%, transparent); border-color: color-mix(in srgb, var(--cpalette-hi) 40%, transparent); }
[data-chart-palette] .kpi-card.featured .kpi-sparkline polyline { stroke: var(--cpalette) !important; }
[data-chart-palette] .kpi-card.featured .kpi-sparkline polygon { fill: color-mix(in srgb, var(--cpalette) 15%, transparent) !important; }
[data-chart-palette] .leg-ok .leg-dot { background: var(--cpalette-hi); box-shadow: 0 0 6px var(--cpalette-glow); }

.bar-peak-mark {
  position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  font-family: var(--ff-mono); font-size: 8.5px; letter-spacing: 0.22em;
  color: var(--gold-hi); background: var(--gold-soft);
  border: 1px solid color-mix(in srgb, var(--gold-hi) 32%, transparent);
  padding: 3px 9px; border-radius: 4px; text-transform: uppercase; font-weight: 600;
  opacity: 0; animation: peakAppear .5s var(--ease) 1.6s forwards; white-space: nowrap;
}
@keyframes peakAppear { to { opacity: 1; } }
[data-t="light"] .bar-peak-mark { color: var(--gold); }
[data-sb-shade="bright"] .bar-peak-mark { color: #7E848F; background: rgba(126,132,143,0.10); border-color: rgba(157,163,174,0.32); }

.bars-xaxis {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 8px 4px 16px 36px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--ink-4); text-align: center; border-bottom: 1px solid var(--line);
}

/* Bar inline (rankings) */
.rank-bar-cell { display: block; padding: 2px 0; }
.rank-bar-line { display: block; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; position: relative; }
.rank-bar-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-hi) 100%); border-radius: 3px; box-shadow: 0 0 6px var(--gold-glow); animation: rankFill 1.4s cubic-bezier(0.4,0,0.2,1) .8s forwards; }
@keyframes rankFill { to { width: var(--w); } }

/* ── SUMMARY CELLS (Glass Hover) ── */
.bars-summary {
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 18px 0 4px; gap: 0;
  border-top: 1px solid var(--line); margin-top: 0; position: relative;
}
.bars-summary::before {
  content: ''; position: absolute; top: -1px; left: 0; width: 48px; height: 1px;
  background: linear-gradient(90deg, var(--gold-hi), transparent);
  box-shadow: 0 0 8px var(--gold-glow);
}
.bsum-cell {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: 10px 18px 12px; cursor: default;
  transition: transform .3s var(--ease-expo), background .35s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease);
  border-radius: 10px; border: 1px solid transparent; isolation: isolate; overflow: hidden;
}
.bsum-cell::after { content: ''; position: absolute; right: 0; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(180deg, transparent, var(--line) 30%, var(--line) 70%, transparent); transition: opacity .3s var(--ease); }
.bsum-cell:hover::after { opacity: 0; }
.bsum-cell:last-child::after { display: none; }
.bsum-cell:first-child { padding-left: 14px; }
.bsum-cell::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.08) 48%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.08) 52%, transparent 70%); transform: translateX(-110%); transition: transform .9s var(--beam); }
.bsum-cell:hover::before { transform: translateX(110%); }
.bsum-cell > * { position: relative; z-index: 1; }
.bsum-cell:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border-color: color-mix(in srgb, var(--silver-line) 28%, var(--line-2));
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -1px 0 rgba(0,0,0,0.18) inset,
              0 8px 24px -8px rgba(0,0,0,0.45), 0 0 0 1px rgba(232,237,242,0.40);
}
[data-t="light"] .bsum-cell:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  border-color: color-mix(in srgb, var(--gold) 40%, var(--line-2));
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 -1px 0 rgba(14,17,23,0.04) inset,
              0 8px 24px -8px rgba(14,17,23,0.14), 0 0 0 1px color-mix(in srgb, var(--gold) 25%, transparent);
}
.bsum-cell:hover .bsum-k { color: var(--gold-hi); }
[data-t="light"] .bsum-cell:hover .bsum-k { color: var(--gold); }
.bsum-cell:hover .bsum-v { text-shadow: 0 0 18px var(--gold-glow); }
.bsum-k { font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-4); display: flex; align-items: center; gap: 6px; transition: color .25s var(--ease); }
.bsum-k::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-5); transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.bsum-cell:hover .bsum-k::before { background: var(--gold-hi); box-shadow: 0 0 6px var(--gold-glow); }
.bsum-v { display: flex; align-items: baseline; gap: 5px; font-family: var(--ff-sans); font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink-1); font-variant-numeric: tabular-nums; line-height: 1; transition: text-shadow .35s var(--ease); }
.bsum-v.up { color: var(--ok); }
.bsum-v.dn { color: var(--err); }
.bsum-pct { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.06em; font-weight: 500; }

/* ── ARC GAUGE ── */
.gauge-card { padding: 18px 22px 16px; display: flex; flex-direction: column; }
.gauge-zone { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; height: 160px; }
.gauge-svg { width: 100%; height: 100%; max-width: 240px; }
.arc-bg { fill: none; stroke: var(--line); stroke-width: 8; stroke-linecap: round; }
.arc-fg { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 0 100; filter: drop-shadow(0 0 8px var(--gold-glow)); }
.arc-ball-group { opacity: 0; animation: cgFade .5s ease-out 2.1s forwards; }
.arc-ball-halo { fill: var(--gold-hi); opacity: 0.18; animation: arcHaloPulse 2.6s ease-in-out infinite; }
.arc-ball-wave { fill: none; stroke: var(--gold-hi); stroke-width: 1; animation: arcWaveExpand 2.6s ease-out infinite; }
.arc-ball-dot  { fill: var(--gold-hi); filter: drop-shadow(0 0 6px var(--gold-glow)); }
@keyframes arcHaloPulse { 0%,100% { opacity: 0.18; } 50% { opacity: 0.42; } }
@keyframes arcWaveExpand { 0% { r: 5; opacity: 0.5; } 100% { r: 22; opacity: 0; } }
@keyframes cgFade { to { opacity: 1; } }
.gauge-center { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -30%); text-align: center; display: flex; flex-direction: column; align-items: center; }
.gauge-value { font-family: var(--ff-mono); font-size: var(--fs-gauge); font-weight: 700; letter-spacing: -0.04em; color: var(--ink-1); font-variant-numeric: tabular-nums; line-height: 0.95; display: inline-block; }
.gauge-suffix { font-family: var(--ff-mono); font-size: var(--fs-read); color: var(--ink-3); letter-spacing: 0.05em; margin-top: -30px; margin-left: 60px; }
.gauge-label  { font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.22em; color: var(--ink-4); text-transform: uppercase; margin-top: 6px; }
.gauge-foot { font-family: var(--ff-mono); font-size: var(--fs-meta); color: var(--ink-4); letter-spacing: 0.05em; text-align: center; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; }

[data-t="light"] .arc-bg { stroke: rgba(14,17,23,0.10); }
[data-t="light"] .arc-fg { filter: drop-shadow(0 0 6px rgba(20,121,184,0.32)); }
[data-t="light"] .arc-ball-halo { fill: #1479B8; }
[data-t="light"] .arc-ball-dot  { fill: #1479B8; filter: drop-shadow(0 0 4px rgba(20,121,184,0.45)); }
[data-t="light"] .arc-ball-wave { stroke: #1479B8; }
[data-sb-shade="bright"] .arc-fg { filter: drop-shadow(0 0 6px rgba(157,163,174,0.30)); }
[data-sb-shade="bright"] .arc-ball-halo, [data-sb-shade="bright"] .arc-ball-dot { fill: #9DA3AE; }
[data-sb-shade="bright"] .arc-ball-wave { stroke: #9DA3AE; }
/* Palette overrides for gauge — after light/bright so cascade order wins (same specificity) */
[data-chart-palette] .arc-fg { filter: drop-shadow(0 0 8px var(--cpalette-glow)); }
[data-chart-palette] linearGradient#arcGold stop:nth-child(1) { stop-color: color-mix(in srgb, var(--cpalette) 70%, #000); }
[data-chart-palette] linearGradient#arcGold stop:nth-child(2) { stop-color: var(--cpalette); }
[data-chart-palette] linearGradient#arcGold stop:nth-child(3) { stop-color: var(--cpalette-hi); }
[data-chart-palette] .arc-ball-halo, [data-chart-palette] .arc-ball-dot { fill: var(--cpalette-hi); }
[data-chart-palette] .arc-ball-wave { stroke: var(--cpalette-hi); }

/* ── TOAST ── */
.toast-zone {
  position: fixed;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  width: min(360px, calc(100vw - var(--sp-5) * 2));
  pointer-events: none;
}
.toast-zone .toast {
  width: 100%;
  max-width: 100%;
  pointer-events: auto;
}

.toast {
  position: relative;
  width: min(360px, 100%);
  min-width: 0;
  /* O estado tinge a peça; Toast.jsx acrescenta o material canônico abaixo. */
  background: color-mix(in srgb, var(--toastAccent, var(--info)) 7%, var(--card-hi));
  border: 0;
  border-radius: var(--rad-lg);      /* mesma curvatura do modal e do drawer */
  overflow: hidden;
  /* edge em 4 camadas — a física da célula da Agenda, âncora de acabamento do DS */
  box-shadow:
    inset 0 1px 0 var(--bevel-hi),
    0 0 0 1px color-mix(in srgb, var(--toastAccent, var(--info)) 26%, transparent),
    var(--sh-md),
    0 18px 40px -16px rgba(14, 17, 23, 0.22);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  transform: translateY(-10px) scale(.97); opacity: 0;
  animation: toastRise var(--dur-4) var(--spring) forwards;
  isolation: isolate;
}
/* R5 aprovada: frame translúcido, tinta de estado e edge em quatro camadas.
   A classe do material também vence o blur legado de index.css. */
.toast.ds-glass-clear {
  background: color-mix(in srgb, var(--toastAccent, var(--info)) 4%, var(--glass-clear-bg));
  box-shadow: inset 0 1px 0 var(--glass-rim),
    inset 0 0 0 1px color-mix(in srgb, var(--toastAccent, var(--info)) 13%, transparent),
    var(--sh-md), var(--sh-lg);
}
@keyframes toastRise { to { transform: none; opacity: 1; } }
.toast .ds-stroke-icon { margin-top: 0; color: var(--toastAccent, var(--info)); }
/* título na tinta do estado: em alerta, o estado É o dado. Os tokens `-text`
   existem exatamente para isso (contraste calibrado por tema). */
.toast .toast-title { color: var(--toastAccentText, var(--ink-1)); }

/* prazo: fio que ESVAZIA no tempo do auto-fechamento — movimento que diz quanto
   falta, no lugar do shimmer infinito que não dizia nada. Recuado da borda: colado
   no limite externo ele lia como mais uma borda dura. */
.toast-prazo {
  position: absolute;
  bottom: var(--sp-2); left: var(--sp-4); right: var(--sp-4);
  height: 1px;
  opacity: .65;
  border-radius: var(--rad-full);
  background: var(--line-micro);
  overflow: hidden;
}
.toast-prazo::after {
  content: ''; display: block; height: 100%;
  border-radius: inherit;
  background: var(--toastAccent, var(--info));
  transform-origin: left;
  animation: toastPrazo var(--toast-prazo, 4000ms) linear forwards;
}
@keyframes toastPrazo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; opacity: 1; transform: none; }
  .toast-prazo::after { animation: none; }
}
/* Anatomia emitida por components/ds/Toast.jsx. O trilho de acento e o brilho
   ficam no próprio componente canônico; demos e consumidores não recriam o
   acabamento localmente. */
.toast .toast-body {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0;
  overflow-wrap: anywhere;
}
.toast .toast-body .toast-title, .toast .toast-body .toast-msg { display: inline; font-size: var(--fs-body-sm); line-height: 1.65; margin: 0; }
.toast .toast-body .toast-msg { color: var(--ink-2); }
.toast-close {
  /* Item da 3ª coluna do grid, não elemento flutuante. Enquanto era `absolute`
     a coluna nascia vazia e o `.toast-body` precisava reservar 48px à direita na
     mão — espaço morto que roubava largura do texto sem nunca ser ocupado. */
  align-self: center;
  display: inline-grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--rad-full);
  background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.toast-close:hover { background: var(--panel-zone-bg); color: var(--ink-1); }
.toast-close:active { transform: scale(.96); }
.toast-close:focus-visible { outline: 2px solid var(--silver); outline-offset: 2px; box-shadow: none; }
.toast-close svg { width: 14px; height: 14px; }
@keyframes toastBarShimmer { 0% { top: -30px; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.toast-info { --toastAccent: var(--info); --toastAccentText: var(--info-text); }
.toast-ok   { --toastAccent: var(--ok);  --toastAccentText: var(--ok-text); }
.toast-warn { --toastAccent: var(--pend); --toastAccentText: var(--pend-text); }
.toast-err  { --toastAccent: var(--err); --toastAccentText: var(--err-text); }
.toast-info,
.toast.t-info { --toastAccent: var(--info); }
.toast.t-success { --toastAccent: var(--ok); }
.toast.t-error { --toastAccent: var(--err); }
@keyframes toastRipple { 0% { transform: scale(.85); opacity: .55; } 80% { transform: scale(1.85); opacity: 0; } 100% { transform: scale(1.85); opacity: 0; } }
.toast-content { flex: 1; min-width: 0; }
.toast-title { font-family: var(--ff-sans); font-size: var(--fs-body); font-weight: 600; color: var(--ink-1); letter-spacing: -0.012em; }
.toast-msg   { font-family: var(--ff-sans); font-size: 12px; color: var(--ink-4); margin-top: 3px; letter-spacing: -0.005em; }
.toast-progress { height: 2px; background: var(--toast-progress-track); position: relative; overflow: hidden; }
.toast-progress-fill { height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--toastAccent) 65%, transparent) 0%, var(--toastAccent) 100%); box-shadow: 0 0 8px color-mix(in srgb, var(--toastAccent) 55%, transparent); animation: toastProg 4s linear forwards; }
@keyframes toastProg { from { width: 100%; } to { width: 0%; } }

/* ── DRAWER ── */
.drawer { background: var(--card); border: 1px solid var(--line); border-radius: 14px; position: relative; overflow: hidden; box-shadow: 0 8px 40px var(--drawer-shadow), 0 0 0 1px var(--inner-glow); }
.drawer-corners .dc { position: absolute; width: 14px; height: 14px; border: 1px solid rgba(232,236,242,0.28); transition: width .5s var(--ease), height .5s var(--ease), border-color .5s var(--ease); }
.drawer-corners .dc.tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.drawer-corners .dc.tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.drawer-corners .dc.bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.drawer-corners .dc.br { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.drawer:hover .dc { border-color: rgba(232,236,242,0.60); width: 16px; height: 16px; }
.drawer-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.drawer-eyebrow { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; opacity: 0.85; }
.drawer-title { font-family: var(--ff-sans); font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.02em; color: var(--ink-1); }
.drawer-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--ink-4); transition: background .15s, color .15s; }
.drawer-close:hover { background: var(--card-hi); color: var(--ink-2); }
.drawer-close svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.drawer-body { padding: 20px 24px; }
.drawer-footer { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; gap: var(--sp-2); background: var(--drawer-footer-bg); }
.drawer-footer .btn { flex: 1; justify-content: center; }

/* ── MODAL ──
   Aurora v2 (2026-06-10): material vem das classes canônicas no JSX do
   AuroraModal (.ds-scrim no scrim · .ds-glass.ds-glass-rich no host).
   Aqui fica só posição, entrada com mola e stagger interno. */
.modal-scrim {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  animation: scrimIn var(--dur-4) ease forwards;
}
.modal-scrim--nested { z-index: calc(var(--z-modal) + 1); }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  /* HABITAT (contrato do DS · plano 2026-08-30): a largura vem do token do
     habitat; decisao e o default, para o markup existente nao mudar. */
  width: var(--modal-w, var(--modal-decisao));
  height: var(--modal-h, auto);
  /* DENSIDADE: o modal e portal no body e fica FORA do .mn-zoom do shell
     (App.jsx), entao ele ignorava a escala escolhida no menu de Aparencia.
     Herdar aqui e o que faz a preferencia do usuario valer no overlay. */
  zoom: calc(var(--font-scale, 1) * var(--modal-scale, 1));
  /* ESQUELETO: head e foot sao zonas FIXAS; so o corpo rola. Antes o
     contêiner inteiro rolava e o rodape com a acao saia de vista.
     Sem orçamento vertical, .modal-rolagem reúne corpo e ações; head fica fixo. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  position: fixed; top: 50%; left: 50%;
  /* BUG 1 FIX: transform locked via will-change + animation-fill-mode: forwards.
     The static translate(-50%,-50%) is the ONLY transform in rest state.
     animation-fill-mode:forwards locks the @keyframes final state (which also
     ends at translate(-50%,-50%) scale(1)) so no hover/repaint can clobber it. */
  transform: translate(-50%, -50%);
  will-change: transform;
  z-index: var(--z-modal);
  animation: modalSpring var(--spring-t) var(--spring) forwards;
}
/* O limite físico é do DS, inclusive quando CSS legado da tela define max-height.
   Só estes tetos ganham especificidade; material, posição e largura não mudam. */
.modal, .modal[data-habitat] {
  max-width: calc((100vw - var(--sp-6)) / (var(--font-scale, 1) * var(--modal-scale, 1)));
  max-height: calc((100vh - var(--sp-6)) / (var(--font-scale, 1) * var(--modal-scale, 1)));
  max-height: calc((100dvh - var(--sp-6)) / (var(--font-scale, 1) * var(--modal-scale, 1)));
}
/* alias legado: size="lg" do AuroraModal = habitat LEITURA. Mantido para os
   consumidores existentes; codigo novo declara habitat. */
.modal--formulario { --modal-w: var(--modal-form); }
.modal--leitura    { --modal-w: var(--modal-leitura); }
.modal--trabalho   { --modal-w: var(--modal-trabalho); }
.modal--nested { z-index: calc(var(--z-modal) + 2); }

@keyframes modalSpring {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 18px)) scale(0.94);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0px);
  }
}

/* Conteúdo staggered (showcase §05: 40/110/170ms) */
.modal-head, .modal-body, .modal-foot { opacity: 0; animation: dsRise var(--dur-5) var(--spring) forwards; }
.modal-head { animation-delay: 40ms; }
.modal-body { animation-delay: 110ms; }
.modal-foot { animation-delay: 170ms; }
@media (prefers-reduced-motion: reduce) {
  .modal, .modal-head, .modal-body, .modal-foot { animation-duration: 0.01ms; }
}

/* Edge top gold/silver line with glow */
.modal::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 10%, var(--gold-hi) 50%, transparent 90%);
  box-shadow: 0 0 12px var(--gold-glow);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
  z-index: 2;
}

/* (tint atrás do header removido no v2 — o wash do .ds-glass-rich e o
   grão do .ds-glass::after cuidam da luz; ::after fica livre pro grão) */

/* HUD corner brackets */
.modal-corners .mc {
  position: absolute; width: 12px; height: 12px;
  border: 1px solid rgba(157,163,174,0.36);
  background: transparent;
  transition: border-color .3s var(--ease), width .3s var(--ease), height .3s var(--ease);
}
.modal:hover .modal-corners .mc { border-color: rgba(216,220,227,0.55); width: 14px; height: 14px; }
[data-t="light"] .modal-corners .mc { border-color: rgba(20,121,184,0.36); }
[data-t="light"] .modal:hover .modal-corners .mc { border-color: rgba(20,121,184,0.60); }
.modal-corners .mc.tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.modal-corners .mc.tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.modal-corners .mc.bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.modal-corners .mc.br { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap;
  padding: 18px 20px 16px 26px;
  position: relative; z-index: 1;
  /* Zona: degrau TONAL de verdade (não 3% de alpha, que some dessaturado) +
     rim de luz no topo + groove que fecha embaixo. O corpo fica elevado entre
     as duas zonas — mesma física de 4 camadas da célula da Agenda. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ink-1) 5%, transparent),
    color-mix(in srgb, var(--ink-1) 2%, transparent));
  box-shadow: inset 0 1px 0 var(--glass-rim),
              inset 0 -1px 0 var(--bevel-lo),
              0 1px 0 var(--bevel-hi);
}
/* Gold edge 32px accent on left of header bottom border */
.modal-head::after {
  content: '';
  position: absolute; bottom: -1px; left: 26px;
  width: 32px; height: 1px;
  background: var(--gold-hi);
  box-shadow: 0 0 8px var(--gold-glow);
}

.modal-head > :first-child { flex: 1 1 min-content; min-width: 0; max-width: 100%; }

.modal-eyebrow {
  font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold); font-weight: 700;
  margin-bottom: 5px; opacity: 0.85;
}

.modal-title {
  font-family: var(--ff-sans); font-size: var(--fs-title); font-weight: 600;
  letter-spacing: -0.005em; color: var(--ink-1); margin-bottom: 0;
  line-height: 1.2;
}

.modal-close {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-4); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); flex-shrink: 0;
  position: relative; z-index: 1;
}
.modal-close:hover {
  background: var(--err-soft);
  border-color: color-mix(in srgb, var(--err) 32%, transparent);
  color: var(--err);
}
/* O fechar é o primeiro focável do modal, então ele recebe o foco quando o
   overlay abre — e era o único botão de overlay sem :focus-visible próprio
   (.toast-close e .ds-seg-opt já tinham o mesmo gesto). Sem ele o navegador
   desenhava o anel azul do sistema operacional, que não é do DS. */
.modal-close:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--gold) 40%, transparent);
  box-shadow: 0 0 0 3px var(--gold-soft);
  color: var(--ink-2);
}
.modal-close:disabled { opacity: .45; cursor: default; }
.modal-close svg { width: 14px; height: 14px; }

.modal-body {
  padding: 24px 26px; position: relative; z-index: 1;
  flex: 1; min-height: 0; overflow-y: auto;   /* unico trecho rolavel do modal */
  scrollbar-gutter: stable;      /* a régua não pula quando a barra aparece */
  transition: mask-image var(--dur-3) var(--ease);
}
/* O fade é dirigido por OVERFLOW MEDIDO (data-rola), não por contagem de filhos:
   conteúdo real vem embrulhado num wrapper, e a heurística de filhos nunca ligava.
   `--fade-topo/--fade-base` acompanham a posição da rolagem: no início não há
   véu em cima (nada foi escondido ainda), no fim não há véu embaixo. */
.modal-body[data-rola="true"] {
  mask-image: linear-gradient(180deg,
    rgb(0 0 0 / 0) 0,
    rgb(0 0 0 / 1) var(--fade-topo, 0px),
    rgb(0 0 0 / 1) calc(100% - var(--fade-base, 0px)),
    rgb(0 0 0 / 0) 100%);
}
/* O véu de leitura não pode apagar um campo, botão ou seu anel de foco. */
.modal-body[data-rola="true"]:focus-within { mask-image: none; }
.modal-head, .modal-foot { flex: none; }

/* Sem caixa no modo normal: preserva o layout flex anterior. A exceção é
   medida pelo AuroraModal, nunca selecionada por uma tela ou por breakpoint. */
.modal-rolagem { display: contents; }
.modal-rolagem[data-modo="compartilhada"] {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-gutter: stable;
}
/* Vence também overflow-y de consumidores, sem !important ou rolagem dupla. */
.modal .modal-rolagem[data-modo="compartilhada"] > .modal-body {
  flex: none; overflow: visible;
}

/* Caixa técnica sem conteúdo/foco, só na área cuja capacidade foi medida.
   Ausente quando desligada: não participa do display:contents ou do grid. */
.modal-body[data-terminal-compensation="true"]::after,
.modal-rolagem[data-terminal-compensation="true"]::after {
  content: ''; display: block; position: static;
  height: var(--modal-terminal-size); flex: none;
  margin: 0; padding: 0; border: 0; pointer-events: none;
}

/* contexto do rodapé: o que a ação vai fazer, à esquerda das ações */
.modal-foot-info {
  margin-right: auto; min-width: 0;
  color: var(--ink-4); font: 600 var(--fs-meta)/1.5 var(--ff-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-foot {
  padding: 16px 26px;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--ink-1) 5%, transparent),
    color-mix(in srgb, var(--ink-1) 2%, transparent));
  box-shadow: inset 0 -1px 0 var(--bevel-hi),
              inset 0 1px 0 var(--bevel-lo),
              0 -1px 0 var(--glass-rim);
  display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end;
  position: relative; z-index: 1;
  border-radius: 0 0 14px 14px;
}

.modal-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; position: relative; z-index: 1; }
.modal-icon.danger { background: var(--err-soft); border: 1px solid color-mix(in srgb, var(--err) 25%, transparent); }
.modal-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.modal-icon.danger svg { color: var(--err); }
.modal-msg { font-family: var(--ff-sans); font-size: var(--fs-body); color: var(--ink-3); line-height: 1.55; letter-spacing: -0.005em; }
.modal-footer { padding: 16px 32px 24px; display: flex; gap: var(--sp-2); justify-content: flex-end; }


/* ── OVERLAY AJUSTÁVEL (contrato do DS · plano 2026-08-30) ──
   Controles do usuário no cabeçalho + alça no canto. Só aparecem nos habitats
   que os declaram (useModalSize.CAPACIDADE_HABITAT): decisão curta não ganha
   nenhum, porque redimensionar uma pergunta de dois botões é ruído. */
/* Estado compartilhado do host de janela: o `[data-habitat]` à esquerda não é
   decoração — ele sobe a especificidade acima da largura declarada pela própria
   peça (`.modal`, `.dc-panel`), para o expandido vencer sem `!important` e sem
   cada host repetir este cálculo. */
[data-habitat].modal--expandido {
  /* Folga de `--sp-6` POR LADO (era `--sp-5` no total, 10px de cada lado): o overlay
     do DS nunca encosta na borda — colado, o vidro perde a moldura, a sombra some e
     o conteúdo lê como cortado. Mesma doutrina do drawer flutuante. */
  width: calc((100vw - var(--sp-6) * 2) / (var(--font-scale, 1) * var(--modal-scale, 1)));
  height: calc((100vh - var(--sp-6) * 2) / (var(--font-scale, 1) * var(--modal-scale, 1)));
  height: calc((100dvh - var(--sp-6) * 2) / (var(--font-scale, 1) * var(--modal-scale, 1)));
  max-width: none;
  max-height: none;   /* sem isto o max-height do base (sp-6) clampava a altura pedida (sp-5) */
}
.modal--arrastando { user-select: none; }

/* Barra de ferramentas do overlay: os AJUSTES vivem numa bandeja embutida
   (tray), e o FECHAR fica fora dela, atrás de um fio — ajustar e sair são
   gestos de natureza diferente e não devem parecer o mesmo botão. */
.modal-tools { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.modal-tools::after {
  content: ''; align-self: stretch; width: 1px; margin: 3px 0 3px 2px;
  background: linear-gradient(180deg, transparent, var(--line-2), transparent);
  order: 98;
}
.modal-tools .modal-close { order: 99; }
.modal-head .modal-tools {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  flex-wrap: wrap; justify-content: flex-end; margin-left: auto;
}

/* bandeja: fundo rebaixado, como o groove dos controles do app */
.modal-tool-grp {
  display: flex; gap: 2px; padding: 3px;
  border-radius: 9px;
  background: var(--bg-2);
  box-shadow: var(--sh-tray), inset 0 0 0 1px var(--line-micro);
}

/* tecla: repouso liso na bandeja, hover VIRA PLACA (bevel + aro + sombra),
   press assenta. Mesma física da célula da Agenda e dos cards. */
.modal-tool {
  position: relative;
  min-width: 28px; height: 26px; padding: 0 7px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-4); cursor: pointer;
  font-family: var(--ff-mono); font-weight: 700; letter-spacing: .02em; line-height: 1;
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.modal-tool:hover:not(:disabled) {
  color: var(--ink-1);
  background: var(--card-hi);
  box-shadow: inset 0 1px 0 var(--bevel-hi),
              0 0 0 1px color-mix(in srgb, var(--ink-1) 10%, transparent),
              var(--sh-sm);
}
.modal-tool:active:not(:disabled) {
  transform: translateY(0.5px);
  box-shadow: var(--sh-tray);
  transition-duration: var(--dur-1);
}
.modal-tool:disabled { opacity: .32; cursor: default; }
/* ativo (expandido): tecla pressionada permanente, com o acento no dado */
.modal-tool[aria-pressed="true"] {
  color: var(--ink-1);
  background: var(--card-hi);
  box-shadow: inset 0 1px 0 var(--bevel-hi),
              0 0 0 1px color-mix(in srgb, var(--gold) 26%, transparent),
              var(--sh-sm);
}
.modal-tool svg { width: 13px; height: 13px; stroke-width: 1.7; }
/* o par A− / A+ conta a escala pelo próprio tamanho da letra */
.modal-tool--a-sm { font-size: 10px; align-items: end; padding-bottom: 5px; }
.modal-tool--a-lg { font-size: 16px; letter-spacing: -.02em; }
/* a bandeja de texto acende quando a escala saiu do padrão — o usuário vê que mexeu.
   O gancho é `[data-habitat]`, não `.modal`: todo host de janela do DS declara o
   habitat (o overlay "Dia completo" da Agenda é o segundo), e o realce tem de valer
   para os dois sem uma segunda regra. */
[data-habitat][style*="--modal-scale"] .modal-tool-grp {
  box-shadow: var(--sh-tray), inset 0 0 0 1px color-mix(in srgb, var(--gold) 24%, transparent);
}

/* fechar: mesma família das teclas, mas fora da bandeja e com a semântica
   de saída (o vermelho canônico do app fica no hover) */
.modal-tools .modal-close {
  width: 28px; height: 26px; border-radius: 6px;
  border: 0; background: transparent;
  box-shadow: 0 0 0 1px var(--line);
}
.modal-tools .modal-close:hover:not(:disabled) {
  background: var(--err-soft);
  box-shadow: inset 0 1px 0 var(--bevel-hi),
              0 0 0 1px color-mix(in srgb, var(--err) 30%, transparent),
              var(--sh-sm);
  color: var(--err);
}
.modal-tools .modal-close:focus-visible {
  outline: 2px solid var(--silver);
  outline-offset: 2px;
}
.modal-tools .modal-close svg { width: 12px; height: 12px; }
@media (pointer: coarse) {
  .modal-tool, .modal-tools .modal-close { min-width: var(--touch-target-min); height: var(--touch-target-min); }
}

/* Área móvel: a bandeja de ajustes come a largura do título, e sem `min-width: 0`
   o bloco de texto se recusa a encolher — o eyebrow quebrava em duas linhas e o
   cabeçalho crescia uma linha inteira. Aqui ele trunca em vez de quebrar, e o
   perímetro aperta junto (o groove de acento acompanha o padding, senão descola). */
@media (max-width: 560px) {
  .modal-head { padding: 16px 14px 14px 18px; gap: var(--sp-2); }
  .modal-head > :first-child { min-width: 0; }
  .modal-head::after { left: 18px; }
  .modal-eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.modal-medida {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  padding: 4px 9px; border-radius: var(--rad-full);
  background: var(--card-hi);
  box-shadow: inset 0 1px 0 var(--bevel-hi), 0 0 0 1px var(--line-2), var(--sh-md);
  color: var(--ink-2); font: 700 var(--fs-micro)/1.4 var(--ff-mono);
  font-variant-numeric: tabular-nums; letter-spacing: .06em; white-space: nowrap;
  opacity: 0; transform: translateY(4px) scale(.96); pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--spring);
}
.modal--arrastando .modal-medida { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .modal-medida { transition-duration: 0.01ms; } }

/* ALÇA: dois fios diagonais que acendem no hover. A área de pegada é maior
   que o desenho — alça bonita que ninguém acerta não serve. */
.modal-grip {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: 28px; height: 28px;
  cursor: nwse-resize;
  transition: opacity var(--dur-2) var(--ease);
}
/* três fios diagonais — visíveis em repouso (alça que ninguém vê não é alça),
   desenhados com gradiente para não pedir markup extra */
.modal-grip::before {
  content: ''; position: absolute; right: 4px; bottom: 4px;
  width: 13px; height: 13px;
  background:
    linear-gradient(135deg, transparent 42%, var(--line-2) 42%, var(--line-2) 58%, transparent 58%) no-repeat right bottom / 13px 13px,
    linear-gradient(135deg, transparent 42%, var(--line-2) 42%, var(--line-2) 58%, transparent 58%) no-repeat right bottom / 8px 8px;
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.modal-grip:hover::before {
  background:
    linear-gradient(135deg, transparent 42%, var(--ink-3) 42%, var(--ink-3) 58%, transparent 58%) no-repeat right bottom / 13px 13px,
    linear-gradient(135deg, transparent 42%, var(--ink-3) 42%, var(--ink-3) 58%, transparent 58%) no-repeat right bottom / 8px 8px;
  transform: scale(1.06);
}
.modal-grip svg { display: none; }
.modal--arrastando .modal-grip::before {
  background:
    linear-gradient(135deg, transparent 42%, var(--gold-hi) 42%, var(--gold-hi) 58%, transparent 58%) no-repeat right bottom / 13px 13px,
    linear-gradient(135deg, transparent 42%, var(--gold-hi) 42%, var(--gold-hi) 58%, transparent 58%) no-repeat right bottom / 8px 8px;
}
@media (pointer: coarse) { .modal-grip { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .modal-tool, .modal-grip, .modal-grip::before { transition-duration: 0.01ms; }
}

/* ── CHART PALETTE BUTTON ── */
.chart-palette-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 7px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--line-2);
  color: var(--ink-3); cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); isolation: isolate;
}
.chart-palette-btn::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.08) 48%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.08) 52%, transparent 70%); transform: translateX(-110%); transition: transform .9s var(--beam); }
.chart-palette-btn:hover::before { transform: translateX(110%); }
.chart-palette-btn:hover { border-color: var(--cpalette, #9DA3AE); color: var(--ink-1); transform: translateY(-1px); box-shadow: 0 1px 0 var(--inner-glow) inset, 0 4px 12px rgba(0,0,0,0.18); }
.chart-palette-btn:active { transform: translateY(0) scale(0.97); }
.chart-palette-btn svg { width: 13px; height: 13px; position: relative; z-index: 1; }
.cpb-swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--cpalette, #9DA3AE); border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 0 0 1px var(--bg) inset, 0 0 8px var(--cpalette-glow, rgba(157,163,174,0.42)); flex-shrink: 0; position: relative; z-index: 1; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
/* No Prisma o ambiente define a cor dos gráficos por token — o botão fica
   inerte (mesma regra do AppearanceMenu; a escolha do usuário segue salva e
   volta a valer ao sair do Prisma). */
html[data-theme="prisma"] .chart-palette-btn { opacity: .45; pointer-events: none; }

/* ── BULK BAR ── */
.bulk-bar { margin: 0 40px; padding: 12px 20px; background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; display: flex; align-items: center; gap: var(--sp-3); box-shadow: 0 4px 20px var(--bulk-shadow); }
.bulk-count { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bulk-actions { display: flex; align-items: center; gap: 6px; }

/* Global theme transition — .modal excluded: it manages its own transform via will-change */
.stage, .topbar, .page-header, .kpi-card, .tablecard, .tablecard-toolbar,
table, th, td, .drawer, .toast, .bulk-bar, .tab, .btn,
.dash-card, .drawer-footer, .tbl-footer, .pagination, .btn-slim,
.topbar-search-btn, .topbar-icon {
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Modal surfaces get theme transition too, but transform is excluded to prevent clobbering centering */
.modal, .modal-head, .modal-body, .modal-foot, .modal-scrim {
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* ATENÇÃO: este bloco tem a mesma especificidade do `.modal` lá em cima e vem
   DEPOIS — por isso a transição de tamanho precisa ser redeclarada AQUI, senão
   a mola do redimensionar vira código morto (foi o que aconteceu). */
.modal {
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease,
              width var(--dur-4) var(--spring), height var(--dur-4) var(--spring);
}
.modal--arrastando { transition: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONVERSAO CARD — Data Flow animado (paleta P3 Outono + particles + cursor)
   Aplicado no card de Conversão do dashboard. Silver base + warn como acentos;
   no light mode, 2 partículas viram ouro real (#1479B8) pra garantir contraste.
   Valor (% aceitaram) em ink-1 puro, sem gradient dourado.
   Respeita prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */
.conversao-card {
  position: relative;
  overflow: hidden;
  cursor: default;
  --mx: 50%; --my: 50%; --ma: 0;
  transition:
    border-color .35s var(--ease, cubic-bezier(0.22,1,0.36,1)),
    box-shadow .45s var(--ease, cubic-bezier(0.22,1,0.36,1)),
    transform .45s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.conversao-card::before {
  content: "";
  position: absolute; inset: -20%;
  background:
    radial-gradient(280px 80px at 10% 50%, rgba(200,205,213,0.08), transparent 60%),
    radial-gradient(200px 60px at 35% 35%, rgba(200,205,213,0.05), transparent 60%),
    radial-gradient(260px 70px at 70% 65%, rgba(201,160,104,0.06), transparent 60%);
  filter: blur(6px);
  animation: conversaoFlowLR 14s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes conversaoFlowLR {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(30%); }
}
.conversao-card::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(180px 140px at var(--mx) var(--my),
    rgba(200,205,213,0.14), rgba(201,160,104,0.05) 40%, transparent 70%);
  opacity: var(--ma);
  transition: opacity .25s var(--ease, cubic-bezier(0.22,1,0.36,1));
  z-index: 0;
}
.conversao-card .conv-dot {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--silver, #C8CDD5); opacity: 0;
  box-shadow: 0 0 4px rgba(200,205,213,0.6);
  pointer-events: none;
  z-index: 0;
}
.conversao-card .conv-dot.p1 { top: 22%; animation: conversaoDrift 7s  linear infinite; }
.conversao-card .conv-dot.p2 { top: 45%; animation: conversaoDrift 9s  linear infinite 1.5s; }
.conversao-card .conv-dot.p3 { top: 68%; animation: conversaoDrift 6s  linear infinite 3s; }
.conversao-card .conv-dot.p4 { top: 80%; animation: conversaoDrift 11s linear infinite 2s; }
.conversao-card .conv-dot.p5 { top: 35%; animation: conversaoDrift 8s  linear infinite 4s; }
@keyframes conversaoDrift {
  0%   { left: -3%;  opacity: 0; }
  15%  { opacity: .7; }
  85%  { opacity: .7; }
  100% { left: 103%; opacity: 0; }
}
.conversao-card > *:not(.conv-dot) { position: relative; z-index: 1; }
.conversao-card:hover {
  border-color: var(--silver-line, rgba(200,205,213,0.32));
  box-shadow:
    0 1px 0 rgba(200,205,213,0.08) inset,
    0 8px 28px rgba(0,0,0,0.28),
    0 0 0 1px rgba(200,205,213,0.08);
  transform: translateY(-1px);
}
.conversao-card:hover { --ma: 1; }
.conversao-card:hover::before { animation-duration: 7s; }
.conversao-card:hover .conv-dot { animation-duration: 3.5s !important; }

[data-t="light"] .conversao-card::before {
  background:
    radial-gradient(280px 80px at 10% 50%, rgba(92,100,112,0.14), transparent 60%),
    radial-gradient(200px 60px at 35% 35%, rgba(92,100,112,0.10), transparent 60%),
    radial-gradient(260px 70px at 70% 65%, rgba(20,121,184,0.14), transparent 60%);
  filter: blur(8px);
}
[data-t="light"] .conversao-card::after {
  background: radial-gradient(200px 160px at var(--mx) var(--my),
    rgba(20,121,184,0.18), rgba(92,100,112,0.08) 45%, transparent 72%);
}
[data-t="light"] .conversao-card .conv-dot {
  width: 2.5px; height: 2.5px;
  background: #5C6470;
  box-shadow: 0 0 5px rgba(92,100,112,0.55), 0 0 2px rgba(92,100,112,0.8);
}
[data-t="light"] .conversao-card .conv-dot.p3,
[data-t="light"] .conversao-card .conv-dot.p5 {
  background: #1479B8;
  box-shadow: 0 0 6px rgba(20,121,184,0.65), 0 0 2px rgba(20,121,184,0.9);
}
[data-t="light"] .conversao-card:hover {
  border-color: rgba(20,121,184,0.28);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 8px 28px rgba(14,17,23,0.08),
    0 0 0 1px rgba(20,121,184,0.10);
}

@media (prefers-reduced-motion: reduce) {
  .conversao-card::before,
  .conversao-card::after,
  .conversao-card .conv-dot {
    animation: none !important;
    transition: none !important;
  }
  .conversao-card:hover { transform: none; }
}

/* ── Resgatado da Control Bench 2.2 (2026-07-25): foco visível, loading
   com a marca e alvo de toque em ponteiro grosso. ── */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gold-soft), 0 0 0 1px var(--gold-hi);
}
.btn[aria-busy="true"] { cursor: progress; }
.btn .btn-loading-mark {
  width: 14px;
  height: 14px;
  flex: none;
  transform: none;
}
@media (pointer: coarse) {
  .btn {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }
  .tab,
  .modal-close,
  .toast-close {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }
}