/*  ─────────────────────────────────────────────────────────────────────
 *  i9aware — camada premium ("aware-premium")
 *  Carregada DEPOIS de site.css. Override de cosmética: gradientes,
 *  glows, animações, gauges SVG. Não muda layout — só eleva o ar do
 *  produto. Paleta acordada Manuel 2026-06-12:
 *     #050608 (preto base),  #ff5a5f (vermelho crítico),
 *     #2dd4a7 (verde sucesso/NIS2), #f5b942 (amarelo aviso/RGPD),
 *     #38e1ff (cyan info/CIS), #a78bfa (violeta IA Act),
 *     #ffffff (texto principal — opacidade variável).
 *  ───────────────────────────────────────────────────────────────────── */

:root {
  /* Acentos premium — não substituem os tokens existentes, somam. */
  --aw-base: #050608;
  --aw-surface-1: rgba(255,255,255,0.025);
  --aw-surface-2: rgba(255,255,255,0.045);
  --aw-surface-3: rgba(255,255,255,0.075);
  --aw-line: rgba(255,255,255,0.10);
  --aw-line-strong: rgba(255,255,255,0.18);
  --aw-glow-info: 0 0 20px rgba(56,225,255,0.18);
  --aw-glow-sucesso: 0 0 20px rgba(45,212,167,0.20);
  --aw-glow-aviso: 0 0 22px rgba(245,185,66,0.22);
  --aw-glow-critico: 0 0 22px rgba(255,90,95,0.24);
  --aw-mono: ui-monospace, "JetBrains Mono", "Space Mono", Menlo, Consolas, monospace;
  --aw-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Background com gradiente radial subtil ─────────────────────── */
body {
  background:
    radial-gradient(ellipse at top, rgba(56,225,255,0.04), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(167,139,250,0.03), transparent 60%),
    var(--aw-base);
  min-height: 100vh;
}

/* ─── Sidebar com accent glow no item activo ─────────────────────── */
.side-nav a.active {
  position: relative;
  background: linear-gradient(90deg, rgba(56,225,255,0.10), transparent 70%);
}
.side-nav a.active::before {
  content: "";
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 3px;
  background: var(--sev-info);
  border-radius: 0 2px 2px 0;
  box-shadow: var(--aw-glow-info);
}
.side-nav a {
  transition: background 200ms var(--aw-easing), color 200ms var(--aw-easing);
}
.side-nav a:hover:not(.active) {
  background: rgba(56,225,255,0.04);
}

.brand-mark {
  background: linear-gradient(135deg, var(--sev-info), var(--sev-sucesso));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* ─── Stat-strip premium: gradiente diagonal + glow on hover ──── */
.stat-card {
  background: linear-gradient(135deg, var(--aw-surface-1), rgba(0,0,0,0.20));
  transition: transform 220ms var(--aw-easing),
              border-color 220ms var(--aw-easing),
              box-shadow 220ms var(--aw-easing);
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.04), transparent 40%);
  pointer-events: none;
}
.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--aw-line-strong);
}
.stat-card--info:hover { box-shadow: var(--aw-glow-info); }
.stat-card--sucesso:hover { box-shadow: var(--aw-glow-sucesso); }
.stat-card--aviso:hover { box-shadow: var(--aw-glow-aviso); }
.stat-card--critico:hover { box-shadow: var(--aw-glow-critico); }

/* Números grandes — Space Mono. Aplica-se a .val sem refactorar HTML. */
.stat-card .val,
.fw-card-num,
.dep-card-n,
.aw-gauge text,
.aw-num {
  font-family: var(--aw-mono);
  letter-spacing: -0.01em;
}

/* ─── Headings em letterspacing tighter, peso confortável ──────── */
h1, h2, h3 {
  letter-spacing: -0.02em;
}

/* ─── Buttons primários: gradiente + sombra subtil ─────────────── */
.btn-primary,
button[type="submit"]:not(.link-button):not(.btn-revogar):not(.btn-ghost) {
  background: linear-gradient(135deg, #2a6fdc, #1a4fbe) !important;
  border: 1px solid rgba(120,180,255,0.35) !important;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 4px 14px rgba(26,79,190,0.25);
  transition: transform 160ms var(--aw-easing), box-shadow 220ms var(--aw-easing);
}
.btn-primary:hover,
button[type="submit"]:not(.link-button):not(.btn-revogar):not(.btn-ghost):hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px rgba(26,79,190,0.40);
}

/* ─── Gauge SVG: classe base. Donut score 0-100 com cor por health ─ */
.aw-gauge {
  display: inline-block;
  vertical-align: middle;
}
.aw-gauge-track {
  fill: none;
  stroke: rgba(255,255,255,0.08);
}
.aw-gauge-fill {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 700ms var(--aw-easing);
  filter: drop-shadow(0 0 4px currentColor);
}
.aw-gauge-fill--sucesso { stroke: var(--sev-sucesso); color: var(--sev-sucesso); }
.aw-gauge-fill--info { stroke: var(--sev-info); color: var(--sev-info); }
.aw-gauge-fill--aviso { stroke: var(--sev-aviso); color: var(--sev-aviso); }
.aw-gauge-fill--critico { stroke: var(--sev-critico); color: var(--sev-critico); }
.aw-gauge-fill--neutro { stroke: rgba(255,255,255,0.30); color: rgba(255,255,255,0.30); }
.aw-gauge-fill--rgpd { stroke: var(--sev-aviso); color: var(--sev-aviso); }
.aw-gauge-fill--nis2 { stroke: var(--sev-sucesso); color: var(--sev-sucesso); }
.aw-gauge-fill--cis { stroke: var(--sev-info); color: var(--sev-info); }
.aw-gauge-fill--iaact { stroke: #a78bfa; color: #a78bfa; }
.aw-gauge text {
  fill: #fff;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
}
.aw-gauge-num { font-size: 36px; }
.aw-gauge-suffix { font-size: 12px; opacity: 0.55; }
/* Small variant para listagens/tabelas — 56px ou menor exige fonte menor. */
.aw-gauge[width="56"] .aw-gauge-num,
.aw-gauge[width="50"] .aw-gauge-num,
.aw-gauge[width="48"] .aw-gauge-num { font-size: 20px; }
.aw-gauge[width="72"] .aw-gauge-num,
.aw-gauge[width="78"] .aw-gauge-num { font-size: 22px; }

/* ─── FW-card upgrade: gauge no lugar do número plano ──────────── */
.fw-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.025), rgba(0,0,0,0.30));
  position: relative;
  /* overflow visible para o popover poder sair do card; ::after usa
     border-radius para não escapar visualmente. */
}
.fw-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%, var(--fw-cor, transparent), transparent 40%);
  opacity: 0.06;
  pointer-events: none;
  border-radius: inherit;
}
.fw-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.fw-card-num { text-shadow: 0 0 12px var(--fw-cor); }

/* ─── Dep-cards upgrade ─────────────────────────────────────────── */
.dep-card {
  background: linear-gradient(135deg, var(--aw-surface-1), rgba(0,0,0,0.30));
}
.dep-card:hover {
  border-color: var(--aw-line-strong);
  box-shadow: var(--aw-glow-info);
}

/* ─── Area-cards do detail empresa: gradient + glow lateral ────── */
.area-card {
  background: linear-gradient(135deg, var(--aw-surface-1), rgba(0,0,0,0.18)) !important;
  transition: transform 220ms var(--aw-easing), border-color 220ms var(--aw-easing), box-shadow 220ms var(--aw-easing);
}
.area-card:hover {
  transform: translateY(-2px);
}

/* ─── Header "vital strip" do detail empresa — destaca o título ─ */
.emp-head h1 {
  font-size: 1.8rem;
  background: linear-gradient(135deg, #fff, rgba(255,255,255,0.65));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── Tabelas mais legíveis ──────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
table th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.55;
  font-weight: 600;
  border-bottom: 1px solid var(--aw-line);
  padding: 0.6rem 0.8rem;
  text-align: left;
}
table td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
table tr:hover td { background: rgba(255,255,255,0.018); }

/* ─── Forms: inputs maiores e legíveis ──────────────────────────── */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number],
select, textarea {
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--aw-line-strong);
  border-radius: 5px;
  color: #fff;
  padding: 0.6rem 0.8rem;
  font: inherit;
  transition: border-color 180ms var(--aw-easing), box-shadow 180ms var(--aw-easing);
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=date]:focus, input[type=number]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--sev-info);
  box-shadow: 0 0 0 3px rgba(56,225,255,0.18);
}

/* ─── Links: cyan accent + hover underline ──────────────────────── */
a:not(.btn-primary):not(.btn-ghost):not(.btn-secondary):not(.btn-i9):not(.fam-chip):not(.tipo-chip):not(.estado-chip):not(.fam-tag):not(.eng-tag):not(.fw-qw-cta) {
  color: rgba(180,210,255,0.92);
}
a:not(.btn-primary):not(.btn-ghost):not(.btn-secondary):not(.btn-i9):hover {
  color: var(--sev-info);
}

/* ─── Pulse no chip de severidade crítico ──────────────────────── */
@keyframes aw-pulse-critico {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,95,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(255,90,95,0); }
}
.sev-badge--critico,
.stat-card--critico {
  animation: aw-pulse-critico 2.2s ease-out infinite;
}

/* ─── Fade-in ao entrar na página ─────────────────────────────────
   Sem translateY — só opacidade. translateY(4px) provocava salto
   visual em páginas com hero (decisão Manuel 2026-06-12). */
@keyframes aw-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.stat-strip, .fw-cards, .dep-cards, .areas-grid {
  animation: aw-fade-in 400ms var(--aw-easing) both;
}

/* ─── Texto seleccionado: accent cyan ──────────────────────────── */
::selection { background: rgba(56,225,255,0.30); color: #fff; }

/* ─── Crumbs mais discretas ─────────────────────────────────────── */
.crumb a, .crumbs a { color: rgba(180,210,255,0.7); }
.crumb a:hover, .crumbs a:hover { color: var(--sev-info); }

/* ─── PT-PT: emoji guardrail (não usar) — assume Inter limpo ────── */