/* ============================================================
   VISÃO — Sistema de Design
   Direção: IA viva. Fundo profundo índigo-noite, acento ciano-elétrico
   (cor de "visão"/olho), tipografia geométrica forte. Fluido e respirável.
   ============================================================ */
:root {
  /* Paleta */
  --noite: #0a0b14;          /* fundo base, índigo quase preto */
  --noite-2: #12141f;        /* superfícies elevadas */
  --noite-3: #1a1d2e;        /* cards, inputs */
  --borda: #262a3d;          /* divisores sutis */
  --texto: #e8eaf2;          /* texto principal */
  --texto-2: #9a9fb5;        /* texto secundário */
  --texto-3: #5f6478;        /* texto terciário/placeholder */
  --visao: #22d3ee;          /* acento — ciano elétrico (a "visão") */
  --visao-glow: rgba(34,211,238,0.18);
  --roxo: #818cf8;           /* secundário — usado com parcimônia */
  --verde: #34d399;          /* sucesso */
  --vermelho: #f87171;       /* erro/perigo */
  --ambar: #fbbf24;          /* aviso */

  /* Tipografia */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --corpo: 'Inter', system-ui, sans-serif;

  /* Espaço e forma */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-full: 999px;
  --gap: 16px;
  --header-h: 60px;
  --nav-h: 68px;

  /* Sombra/brilho */
  --sombra: 0 8px 32px rgba(0,0,0,0.4);
  --brilho: 0 0 24px var(--visao-glow);
  --trans: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  background: var(--noite);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  /* atmosfera: leve glow radial no topo, como uma íris */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(34,211,238,0.07), transparent 60%),
    var(--noite);
  min-height: 100vh;
}

h1, h2, h3, .display { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; font-size: 16px; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--borda); border-radius: var(--r-full); }
::selection { background: var(--visao-glow); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Componentes utilitários ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: var(--r-md); font-weight: 600; font-size: 15px;
  transition: transform var(--trans), background var(--trans), box-shadow var(--trans);
}
.btn:active { transform: scale(0.97); }
.btn-primario {
  background: linear-gradient(135deg, var(--visao), #0ea5c4);
  color: #04141a; box-shadow: var(--brilho);
}
.btn-primario:active { box-shadow: 0 0 12px var(--visao-glow); }
.btn-fantasma { background: var(--noite-3); color: var(--texto); border: 1px solid var(--borda); }
.btn-perigo { background: transparent; color: var(--vermelho); border: 1px solid rgba(248,113,113,0.3); }
.btn-bloco { width: 100%; }

.card {
  background: var(--noite-2); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: 20px;
}

.input {
  width: 100%; padding: 14px 16px; background: var(--noite-3);
  border: 1px solid var(--borda); border-radius: var(--r-md);
  color: var(--texto); transition: border-color var(--trans), box-shadow var(--trans);
}
.input::placeholder { color: var(--texto-3); }
.input:focus { outline: none; border-color: var(--visao); box-shadow: 0 0 0 3px var(--visao-glow); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: var(--noite-3); border: 1px solid var(--borda);
  border-radius: var(--r-full); font-size: 13px; color: var(--texto-2);
}

.badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-full); letter-spacing: 0.03em; }
.badge-ok { background: rgba(52,211,153,0.15); color: var(--verde); }
.badge-espera { background: rgba(251,191,36,0.15); color: var(--ambar); }
.badge-erro { background: rgba(248,113,113,0.15); color: var(--vermelho); }

.skeleton {
  background: linear-gradient(90deg, var(--noite-3) 25%, var(--noite-2) 50%, var(--noite-3) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.anim-subir { animation: subir 0.4s var(--trans) both; }