/* ============================================================
   PULSAR · Design System v3.1 — camada de PADRONIZAÇÃO
   Eleva o produto ao nível do site de apresentação (pulsar.html).
   ADITIVA: carrega por ÚLTIMO (após sobrio.css). Esta é a FASE 1 —
   só tokens + fonte display; nada de comportamento muda. As fases
   2–6 (marca viva, nav, componentes, changelog, movimento) reativam
   por cima desta base o que o sobrio.css §3 neutralizou.
   Fonte da verdade: estudio-imersivo/PADRONIZACAO-PULSAR.md §1–§2.

   ⚠ COLISÃO DE NAMESPACE (verificado 2026-07-24):
   o app consome --c-surface / --c-accent / --c-warn como TRIPLAS
   RGB dentro de rgb(var(--c-x)/op) — e --c-accent significa VERDE
   aqui, não o roxo do site. Por isso NÃO os redefinimos como hex.
   O repaint v3.1 passa pelos aliases HEX do app (--bg/--surface/
   --fg/--text/--muted/--border/--grad-pulse) e pelas 4 triplas que
   o app de fato consome. Os nomes --c-* do site que o app NÃO
   consome entram como hex, para as fases 2–6.
   ============================================================ */

/* §1 ── PALETA v3.1 (nomes do site, só os que não colidem) ──── */
:root,
:root[data-theme="dark"] {
  --c-bg: #0E0E16;          /* near-black arroxeado */
  --c-surface2: #1D1B2E;    /* superfície elevada */
  --c-hair: #3C3854;        /* hairlines/bordas */
  --c-fg: #EAEEF6;          /* texto principal */
  --c-dim: #9187B6;         /* texto secundário — lavanda de trabalho */
  --c-faint: rgba(234, 238, 246, .5);
  --c-soft: #CFCBE0;        /* corpo de leitura longa */
  --c-accent2: #9187B6;     /* acento legível em texto */
  --c-good: #7FB89C;        /* positivo (verde sálvia) */
  --c-ring: #8B5CF6;        /* traço de anéis/símbolo cardíaco (fase 2) */
  --c-lilac: #A78BFA;       /* dots, satélites, hover de menu (fases 3/5/7) */
  /* espelhos hex dos 3 nomes colidentes — para o CSS das fases 2–6
     (não dá pra usar --c-accent/--c-surface/--c-warn como hex aqui) */
  --cx-accent: #401C7F;     /* roxo sóbrio — acento chapado */
  --cx-surface: #141428;
  --cx-warn: #C9A227;       /* dourado AG — semântica de atenção, nunca tema */

  /* --grad-pulse: ENERGIA v3.1, gradiente vivo restaurado.
     O sobrio.css havia chapado pra #401C7F; o app só o usa em
     marca circular, wordmark e CTA (spots disciplinados §1), então
     revivê-lo não vaza roxo pra telas inteiras. */
  --grad-pulse: linear-gradient(120deg, #7048E8 0%, #A55EFF 100%) !important;
  --grad-pulse-h: linear-gradient(120deg, #7048E8 0%, #A55EFF 100%) !important;

  /* §2 ── fonte display (títulos, número-mestre, nav) */
  /* 25/08 (régua Finance): o PAINEL do Finance usa Inter nos títulos também —
     display própria saiu; Space Grotesk fica só como fallback histórico. */
  --font-display: 'Inter', 'Inter var', 'Segoe UI', system-ui, sans-serif;

  /* §4 ── vocabulário de movimento (tokens agora; uso nas fases 2–6) */
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .3s;
  --t-med: .6s;
  --t-slow: 1s;

  /* ── ALIASES: nomes HEX antigos do app → v3.1 (transição) ───── */
  --bg: #0E0E16 !important;
  --noite: #141428 !important;
  --surface: #141428 !important;
  --surface-2: #1D1B2E !important;
  --surface-3: #2D2A42 !important;
  --border: #3C3854 !important;          /* hairline v3.1 (era rgba branco .08 / #2A3B5C) */
  --border-strong: #4A4668 !important;
  --fg: #EAEEF6 !important;              /* era #FFFFFF (sobrio) / #F2F5FF (base) */
  --text: #EAEEF6 !important;            /* base nunca sobrescrita por sobrio (129 usos) */
  --fg-soft: #CFCBE0 !important;
  --fg-muted: #9187B6 !important;
  --muted: #9187B6 !important;           /* base nunca sobrescrita por sobrio (459 usos) */
  --accent: #7FB89C !important;          /* verde ação → sálvia v3.1 */

  --pulsar-primary: #401C7F !important;
  --pulsar-accent: #7FB89C !important;
  --state-good: #7FB89C !important;
  --state-warn: #C9A227 !important;

  /* ── triplas RGB-channel que o app consome via rgb(var(--c-x)/op):
     mantê-las na paleta arroxeada pra os poucos usos não ficarem azulados.
     (--c-surface/--c-accent/--c-warn ficam intactas — ver aviso no topo) */
  --c-bd: 60 56 84 !important;           /* #3C3854 */
  --c-text: 234 238 246 !important;      /* #EAEEF6 */
  --c-muted: 145 135 182 !important;     /* #9187B6 */
}

/* §1b ── tema claro: só realinha texto/hairline à v3.1 ───────── */
:root[data-theme="light"] {
  --c-fg: #16102C;
  --c-hair: #C6B7E8;
  --fg: #16102C !important;
  --text: #16102C !important;
  --border: #C6B7E8 !important;
}

/* §2 ── TIPOGRAFIA · Space Grotesk como display ──────────────
   sobrio.css §2 força Inter em h1–h6/[class*=title] com !important;
   esta camada (carregada depois) devolve a display aos TÍTULOS e ao
   NÚMERO-MESTRE — corpo/tabela seguem Inter. §10: "Space Grotesk nos
   títulos/números-mestre; Inter no corpo". */
h1, h2, h3,
.wordmark, [class*="wordmark"],
[class*="title"], [class*="titulo"],
.eyebrow, [class*="eyebrow"] {
  font-family: var(--font-display) !important;
}
h1 { letter-spacing: -.02em !important; }

/* número-mestre = valor grande de KPI (não toda célula numérica) */
.num, .kpi-card .v, .kpi-v2 .v, [class*="kpi"] [class*="value"] {
  font-family: var(--font-display) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

/* §4 ── escape de movimento: ?static=1 → html[data-static] congela
   TUDO (Windows/RDP liga reduced-motion sozinho, então NÃO gateamos
   nele; o escape é explícito). As fases 2–6 dependem deste kill-switch. */
html[data-static] *,
html[data-static] *::before,
html[data-static] *::after {
  animation: none !important;
  transition: none !important;
}

/* ============================================================
   FASE 2 — MARCA VIVA (§3): símbolo cardíaco + splash 1×/sessão
   Revive o que o sobrio.css §3f/§3g/§6 neutralizou, mas SÓ para as
   classes pm-* (a marca). Todo o resto do repouso segue parado (§8.1).
   Carrega depois do sobrio → vence por ordem + especificidade.
   ============================================================ */
@keyframes pm-draw      { to { stroke-dashoffset: 0; } }
@keyframes pm-beat-ping { 0%{transform:scale(.3);opacity:.6} 60%{transform:scale(2.2);opacity:0} 100%{transform:scale(2.2);opacity:0} }
@keyframes pm-ekg-run   { 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:-100.5} }
@keyframes pm-blip-in   { to { opacity: .9; } }

/* batimento em repouso — o ÚNICO loop da marca (§4). Vence o cap do sobrio §6. */
.pm-ping {
  transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: pm-beat-ping 2.6s var(--ease-expo) 1.7s infinite !important;
  animation-iteration-count: infinite !important;
}
/* na marca pequena o anel e o traço são estáticos (só o ping vive) */
.pm-mark .pm-ring, .pm-mark .pm-ekg { animation: none !important; }

/* ---- SPLASH 1×/sessão: anel desenha → EKG traça → blip corre → nome entra → funde ---- */
/* Cores LITERAIS aqui, não tokens de tema: o splash é uma superfície escura fixa nos dois
   temas. Com var(--c-fg)/var(--c-bg) o tema claro escurecia só o texto (o --c-bg claro não
   vence a v31 por ordem de fonte) e o wordmark sumia no próprio fundo — 1.05:1. */
.pv31-splash {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center;
  background: #0E0E16; opacity: 1;
  transition: opacity .55s var(--ease-soft);
}
.pv31-splash.playing { display: flex; }
.pv31-splash.fading  { opacity: 0; pointer-events: none; }
.pv31-lockup { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pv31-pm     { width: clamp(96px, 16vw, 140px); height: auto; overflow: visible; }
.pv31-name {
  font-family: var(--font-display); font-weight: 700; font-size: 30px;
  letter-spacing: .16em; color: #EAEEF6; line-height: 1;
  opacity: 0; animation: pm-blip-in .6s var(--ease-soft) 1.4s forwards;
}
.pv31-name span { color: #9187B6; font-weight: 300; }
.pv31-tag {
  margin-top: 2px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(234, 238, 246, .5); opacity: 0;
  animation: pm-blip-in .6s var(--ease-soft) 1.75s forwards;
}
.pv31-splash .pm-ring {
  stroke-dasharray: 100.5; stroke-dashoffset: 100.5;
  animation: pm-draw .9s cubic-bezier(.5,0,.15,1) .2s forwards !important;
}
.pv31-splash .pm-ekg {
  stroke-dasharray: 100.5; stroke-dashoffset: 100.5;
  animation: pm-draw .8s cubic-bezier(.5,0,.15,1) .6s forwards !important;
}
.pv31-splash .pm-ekg2 {
  stroke-dasharray: 12 88.5; opacity: 0;
  animation: pm-blip-in .3s ease 1.6s forwards, pm-ekg-run 2.6s linear 1.7s infinite !important;
  animation-iteration-count: 1, infinite !important;
}

/* ============================================================
   PALCO DO LOGIN — vitrine (§8.8 do Finance): revive o ambiente do
   index.html que o sobrio §3c/§3f/§6 neutralizou. Exceção de loop
   aprovada pelo Ricaliff (2026-07-26): a PORTA pulsa; o interior
   do sistema continua parado. Guardado por :not([data-static]) para
   o escape ?static=1 seguir funcionando (o kill-switch fica intacto).
   ============================================================ */
html:not([data-static]) .stage .center-rings span,
html:not([data-static]) .stage .pulso-piso span {
  animation-iteration-count: infinite !important;
}
html:not([data-static]) .stage .ambient-line polyline {
  animation: line-flow 4.5s cubic-bezier(.25,.1,.25,1) infinite !important;
}
/* animação explícita (vence o @media prefers-reduced-motion LEGADO do index —
   a doutrina v3.1 não gateia nele; o escape é ?static=1) */
html:not([data-static]) .stage .center-rings span { animation: ring-expand-login 4s cubic-bezier(.16,1,.3,1) infinite !important; }
html:not([data-static]) .stage .center-rings span:nth-child(2) { animation-delay: -1.3s !important; }
html:not([data-static]) .stage .center-rings span:nth-child(3) { animation-delay: -2.6s !important; }
html:not([data-static]) .stage .pulso-piso span { animation: pulso-piso-anel 4s cubic-bezier(.16,1,.3,1) infinite !important; }
html:not([data-static]) .stage .pulso-piso span:nth-child(2) { animation-delay: -1.3s !important; }
html:not([data-static]) .stage .pulso-piso span:nth-child(3) { animation-delay: -2.6s !important; }

.stage .orb { display: none !important; }

/* RAIO DE PULSO (pedido 2026-07-26): blip varrendo o EKG ambiente da esquerda
   pra direita, tipo monitor cardiaco. A 'bola' (orbs difusos) saiu do palco. */
@keyframes pv31-varre { from { stroke-dashoffset: 1500; } to { stroke-dashoffset: -90; } }
.pv31-varre {
  stroke-dasharray: 90 1410;
}
html:not([data-static]) .pv31-varre {
  animation: pv31-varre 3.2s linear infinite !important;
}

/* miniatura de video sem orbs (paridade com a miniatura do Finance) */
.mini-thumb .pl-orb { display: none !important; }

/* ============================================================
   MODAIS LARGOS (pedido do Ricaliff, 2026-07-30): "não precisa
   arrastar pro lado, já mostra completo".
   Regra: a largura segue o CONTEÚDO, e a camada só ALARGA — nunca
   encolhe. Por isso a base vai SEM !important (largura inline maior
   de um modal específico continua vencendo) e só as regras de
   conteúdo largo usam !important (essas precisam vencer o inline).
   Ordem importa: form antes de tabela — modal com os dois é tabela.
   ============================================================ */
.confirm-box { width: min(600px, 94vw); max-width: none; }
.modal       { max-width: min(880px, 94vw); }
.modal-lg    { max-width: min(1240px, 96vw); }
.modal-card  { max-width: min(880px, 94vw); }
.modal-cd.sm { max-width: min(560px, 94vw); }
.modal-cd.md { max-width: min(880px, 94vw); }
.modal-cd.lg { max-width: min(1240px, 96vw); }

/* conteúdo de FORMULÁRIO respira — o gatilho é o agrupador (.form-group/.form-row),
   não um campo solto: "Tipo de Liderança" e "Liderança Imediata" têm 1 select cada e
   ficariam absurdos em 900px. Modal de campo único cai na base (600px). */
.confirm-box:has(.form-group), .confirm-box:has(.form-row), .confirm-box:has(.form-grid),
.modal-card:has(.form-group), .modal-card:has(.form-row), .modal-card:has(.form-grid),
.confirm-box.modal--form, .modal-card.modal--form {
  width: min(900px, 94vw) !important; max-width: min(900px, 94vw) !important;
}
/* par de campos lado a lado vira coluna única no celular */
@media (max-width: 560px) {
  .form-row, .form-grid { grid-template-columns: 1fr !important; }
}
/* conteúdo tabular ocupa a tela: é o que obrigava a arrastar */
.confirm-box:has(table), .confirm-box:has(.table-wrap), .confirm-box:has(.cad-table),
.modal:has(table), .modal:has(.table-wrap),
.modal-card:has(table), .modal-card:has(.table-wrap),
.modal-cd:has(table), .modal-cd:has(.table-wrap) {
  width: min(1280px, 96vw) !important; max-width: min(1280px, 96vw) !important;
}
/* escape explícito quando o markup souber o que quer */
.confirm-box.is-wide, .modal-card.is-wide { width: min(1280px, 96vw) !important; max-width: none !important; }
.confirm-box.is-full, .modal-card.is-full { width: 96vw !important; max-width: none !important; }

/* nada é CORTADO: o que não couber rola dentro do próprio modal */
.confirm-box, .modal, .modal-card, .modal-cd, .modal-cd-body { max-height: min(92dvh, 980px); }
.confirm-box .table-wrap, .modal .table-wrap, .modal-card .table-wrap,
.modal-cd .table-wrap, .modal-body .table-wrap { overflow-x: auto; max-width: 100%; }
.confirm-box table, .modal table, .modal-card table, .modal-cd table { min-width: max-content; }
/* backdrops com respiro nas bordas em telas pequenas */
.confirm-backdrop, .modal-backdrop, .modal-overlay { padding: 16px; }