/* Author: Thiago Rodrigues Del Negro
   Project: TAEP — Plataforma cognitiva multi-tenant
   Copyright: © 2026 TAEP. All rights reserved.
   Design System canônico (F.2 · WS-C C.6 · spec_canonica_frontend_20260605).

   Regras INVIOLÁVEIS (session note:122-132):
   - NUNCA Tailwind CDN; NUNCA superfície escura (só claro + glass).
   - contorno iridescente via ::after MASCARADO (nunca border colorida).
   - sempre backdrop-filter + -webkit-backdrop-filter em paralelo.
   - sombra de contato obrigatória em flutuantes.
   - paleta iridescente CONGELADA (não alterar os 6 matizes).
   --void canônico = #E6E9EF (vence v4.html #EDEFF4 defasado · D6 verificado). */

:root {
  /* Fundo (claro) */
  --void: #E6E9EF;
  --void-2: #E4E7EE;
  --surface: rgba(255, 255, 255, 0.55);
  --surface-strong: rgba(255, 255, 255, 0.72);
  --ink: #1B2030;          /* texto principal */
  --ink-soft: #515A70;     /* texto secundário */
  --hairline: rgba(27, 32, 48, 0.08);

  /* Paleta iridescente CONGELADA (tokens.css:53-58) */
  --iri-cyan: #5CDCFF;
  --iri-violet: #B4A0FF;
  --iri-gold: #FFE096;
  --iri-mint: #82F5C8;
  --iri-coral: #FFA582;
  --iri-rose: #FF96CD;

  /* Semáforo (under-glow do dock): folga/aperto/risco */
  --sem-ok: var(--iri-cyan);
  --sem-warn: var(--iri-gold);
  --sem-risk: var(--iri-rose);

  /* Espaçamento */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

  /* Tipografia */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-sm: 0.8125rem; --text-base: 1rem; --text-lg: 1.25rem;
  --text-xl: 1.5rem; --text-2xl: 2rem;

  /* Glass */
  --radius: 18px;
  --blur: 18px;
  --glass-bg: var(--surface);
  --shadow-contato: 0 1px 2px rgba(27, 32, 48, 0.10), 0 8px 24px rgba(27, 32, 48, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: radial-gradient(120% 120% at 50% 0%, var(--void-2) 0%, var(--void) 60%);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

#app { padding: var(--sp-4); }

/* ----------------------------------------------------------------------------
   Glass primitivo: superfície clara translúcida com contorno iridescente via
   ::after mascarado (NUNCA border colorida) + sombra de contato.
---------------------------------------------------------------------------- */
.glass {
  position: relative;
  background: var(--glass-bg);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(135%);
  backdrop-filter: blur(var(--blur)) saturate(135%);
  box-shadow: var(--shadow-contato);
}

/* Contorno iridescente: gradiente recortado por máscara (mostra só a borda) */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    var(--iri-cyan), var(--iri-violet), var(--iri-gold), var(--iri-mint));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}

.glass-card { composes: glass; }
.glass-card,
.glass-card--hero,
.glass-card--user {
  position: relative;
  background: var(--glass-bg);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(135%);
  backdrop-filter: blur(var(--blur)) saturate(135%);
  box-shadow: var(--shadow-contato);
  padding: var(--sp-4);
}
.glass-card--hero { background: var(--surface-strong); }
.glass-card--user { background: rgba(255, 245, 230, 0.55); } /* tom de atenção */

/* Badge de semáforo */
.badge-semaforo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.badge-semaforo--ok { background: var(--sem-ok); }
.badge-semaforo--warn { background: var(--sem-warn); }
.badge-semaforo--risk { background: var(--sem-risk); }

h1 { font-size: var(--text-2xl); margin: 0 0 var(--sp-3); }
a { color: var(--ink); }
.landing { max-width: 640px; margin: var(--sp-12) auto; }

/* ----------------------------------------------------------------------------
   Landing institucional PÚBLICA (DEBT-076). Reusa tokens + glass; sem dock, então
   o conteúdo é centralizado em largura própria (a margem do dock vem de #app).
---------------------------------------------------------------------------- */
.landing-page {
  max-width: 980px;
  margin: 0 auto;
  /* anula o recuo do dock lateral (responsive.css #app) — landing não tem dock */
  margin-left: auto; margin-right: auto;
}
.landing-hero { text-align: center; padding: var(--sp-12) var(--sp-4) var(--sp-8); }
.landing-hero h1 { font-size: var(--text-2xl); }
.landing-hero .lead {
  font-size: var(--text-lg); color: var(--ink-soft);
  max-width: 640px; margin: var(--sp-3) auto var(--sp-6);
}
.landing-cta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: var(--sp-3) var(--sp-6); border-radius: 12px;
  text-decoration: none; font-weight: 600; color: var(--ink);
  background: var(--surface-strong); box-shadow: var(--shadow-contato);
}
.btn--primary {
  background: linear-gradient(135deg, var(--iri-cyan), var(--iri-violet));
  color: var(--ink);
}
.landing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4); margin: var(--sp-8) 0;
}
.landing-grid h2 { font-size: var(--text-lg); margin: 0 0 var(--sp-2); }
.landing-grid p { color: var(--ink-soft); margin: 0; }
.landing-foot {
  margin-top: var(--sp-12); padding: var(--sp-6) var(--sp-4);
  border-top: 1px solid var(--hairline); color: var(--ink-soft);
  font-size: var(--text-sm); text-align: center;
}
.landing-foot nav { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-3); }
@media (max-width: 768px) {
  .landing-grid { grid-template-columns: 1fr; }
}

/* Observabilidade do MVP (DEBT-069) — cockpit */
.obs h3 { font-size: var(--text-base); margin: var(--sp-4) 0 var(--sp-2); }
.obs-kpis {
  list-style: none; padding: 0; margin: var(--sp-3) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
}
.obs-kpis li { display: flex; flex-direction: column; gap: var(--sp-1); }
.obs-kpis__num { font-size: var(--text-lg); font-weight: 600; }
.obs-kpis__lbl { font-size: var(--text-sm); color: var(--ink-soft); }
.obs-inline {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
}
.obs-tabela { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.obs-tabela th, .obs-tabela td {
  text-align: left; padding: var(--sp-2); border-bottom: 1px solid rgba(27, 32, 48, 0.08);
}
.obs-tabela th { color: var(--ink-soft); font-weight: 600; }
.obs-tabela td:not(:first-child), .obs-tabela th:not(:first-child) { text-align: right; }