/* =====================================================================
   RADAR CIBER BRASIL — identidade visual compartilhada
   Conceito: "céu noturno do Brasil" — azul-anil profundo, com o verde
   e o amarelo da bandeira como luzes de sinal. Vidro escuro, brilho
   suave, movimento calmo. Leve: só CSS, sem bibliotecas.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap");

:root{
  /* superfícies */
  --anil-950:#050816; --anil-900:#080d24; --anil-850:#0c1331; --anil-800:#111a40; --anil-700:#1a2558;
  --vidro:rgba(17,26,64,.62); --vidro-forte:rgba(12,19,49,.86); --borda:rgba(140,160,255,.14); --borda-forte:rgba(140,160,255,.28);
  /* texto */
  --txt:#eef1ff; --txt-2:#a9b1d6; --txt-3:#6f78a3;
  /* sinais (bandeira) */
  --verde:#00d47e; --verde-2:#5cf0b0; --amarelo:#ffd23f; --amarelo-2:#ffe58a; --ciano:#4cc9f0;
  --grad-marca:linear-gradient(120deg,#00d47e 0%,#4cc9f0 55%,#ffd23f 100%);
  /* gravidade */
  --sev-critica:#ff4d6d; --sev-alta:#ff8f3c; --sev-media:#ffd166; --sev-baixa:#4cc9f0; --sev-info:#8b93b8;
  /* forma e ritmo */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px;
  --sombra:0 10px 30px -12px rgba(0,0,0,.6), 0 0 0 1px var(--borda);
  --sombra-brilho:0 0 0 1px rgba(0,212,126,.35), 0 12px 40px -12px rgba(0,212,126,.35);
  --fonte:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fonte-titulo:"Sora","Inter",system-ui,sans-serif;
  --fonte-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --rapido:.18s; --medio:.35s; --lento:.7s;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--anil-950);color:var(--txt);font:15px/1.55 var(--fonte);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--fonte-titulo);letter-spacing:-.01em;margin:0}
a{color:var(--ciano);text-underline-offset:3px}
button,input,select{font:inherit;color:inherit}
::selection{background:rgba(0,212,126,.35)}
:focus-visible{outline:2px solid var(--amarelo);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--anil-700);border-radius:10px;border:2px solid var(--anil-950)}
::-webkit-scrollbar-track{background:transparent}

/* fundo animado: aurora lenta + grade fina (só transform/opacity = leve) */
.fundo-aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:
  radial-gradient(1200px 700px at 85% -10%,rgba(76,201,240,.10),transparent 60%),
  radial-gradient(900px 600px at -10% 110%,rgba(0,212,126,.10),transparent 60%),var(--anil-950)}
.fundo-aurora::before,.fundo-aurora::after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(80px);opacity:.22;will-change:transform}
.fundo-aurora::before{background:#00d47e;top:-25vmax;left:-15vmax;animation:aurora-a 26s var(--ease) infinite alternate}
.fundo-aurora::after{background:#3a4dff;bottom:-30vmax;right:-20vmax;animation:aurora-b 32s var(--ease) infinite alternate}
.fundo-grade{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(140,160,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(140,160,255,.06) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%)}
@keyframes aurora-a{to{transform:translate(18vmax,12vmax) scale(1.15)}}
@keyframes aurora-b{to{transform:translate(-16vmax,-10vmax) scale(1.1)}}

/* componentes básicos */
.vidro{background:var(--vidro);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--borda);border-radius:var(--r-lg)}
.marca-texto{background:var(--grad-marca);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-md);border:1px solid var(--borda-forte);background:rgba(255,255,255,.03);
  cursor:pointer;text-decoration:none;color:var(--txt);transition:transform var(--rapido) var(--ease),border-color var(--rapido),background var(--rapido)}
.btn:hover{border-color:var(--verde);background:rgba(0,212,126,.08);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primario{background:var(--grad-marca);border:none;color:#04140c;font-weight:600}
.btn-primario:hover{filter:brightness(1.08);background:var(--grad-marca)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;border:1px solid var(--borda);background:rgba(255,255,255,.04);color:var(--txt-2)}
.sev{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid currentColor;background:color-mix(in srgb,currentColor 12%,transparent)}
.sev::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.sev-critica{color:var(--sev-critica)} .sev-alta{color:var(--sev-alta)} .sev-media{color:var(--sev-media)} .sev-baixa{color:var(--sev-baixa)} .sev-info{color:var(--sev-info)}
.ponto-vivo{width:8px;height:8px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 0 rgba(0,212,126,.7);animation:vivo 1.8s infinite}
@keyframes vivo{70%{box-shadow:0 0 0 10px rgba(0,212,126,0)}100%{box-shadow:0 0 0 0 rgba(0,212,126,0)}}

/* animações utilitárias */
.entra{animation:entra var(--lento) var(--ease) both}
@keyframes entra{from{opacity:0;transform:translateY(12px)}}
.esqueleto{background:linear-gradient(90deg,var(--anil-850) 0%,var(--anil-800) 50%,var(--anil-850) 100%);background-size:200% 100%;animation:brilho 1.4s linear infinite;border-radius:var(--r-md)}
@keyframes brilho{to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}