/* ═══════════════════════════════════════════════════════════════════════════
  ADMIN DESIGN SYSTEM - VID Admin Panel
  Sistema de diseño fundamento visual para el admin panel
  ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
  1. GOOGLE FONTS IMPORT
  ───────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────────
  2. VARIABLES CSS - SISTEMA DE DISEÑO
  ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ═══ Paleta por Avatar ═══ */
  /* Kira: Tema Ember (Naranja/Rojo) */
  --kira-primary: #fb923c;
  --kira-secondary: #fdba74;
  --kira-glow: rgba(251, 146, 60, 0.25);
  --kira-bg-accent: rgba(251, 146, 60, 0.08);
  --kira-border: rgba(251, 146, 60, 0.2);

  /* Axiom: Tema Neon (Cyan) */
  --axiom-primary: #22d3ee;
  --axiom-secondary: #67e8f9;
  --axiom-glow: rgba(34, 211, 238, 0.25);
  --axiom-bg-accent: rgba(34, 211, 238, 0.08);
  --axiom-border: rgba(34, 211, 238, 0.2);

  /* Vid: Tema Cripta (Púrpura) */
  --vid-primary: #a855f7;
  --vid-secondary: #c084fc;
  --vid-glow: rgba(168, 85, 247, 0.25);
  --vid-bg-accent: rgba(168, 85, 247, 0.08);
  --vid-border: rgba(168, 85, 247, 0.2);

  /* ═══ Variables dinámicas (cambian según avatar activo) ═══ */
  --active-primary: var(--kira-primary);
  --active-secondary: var(--kira-secondary);
  --active-glow: var(--kira-glow);
  --active-bg-accent: var(--kira-bg-accent);
  --active-border: var(--kira-border);

  /* ═══ Paleta Base del Panel ═══ */
  /* Fondos */
  --bg-0: #08010f;
  --bg-1: #0d0618;
  --bg-2: #130b22;
  --bg-3: #1a1030;
  --card: rgba(13, 6, 24, 0.85);

  /* Texto */
  --text-1: #f0edf5;
  --text-2: #9d93b0;
  --text-3: #5c5475;

  /* Borders */
  --border: rgba(167, 139, 250, 0.12);
  --border-active: rgba(167, 139, 250, 0.3);

  /* Semánticos */
  --ok: #22c55e;
  --err: #ef4444;
  --warn: #f59e0b;

  /* Layout */
  --sidebar-width: 260px;
  --header-height: 58px;

  /* Fuentes */
  --font-display: 'Syne', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

/* ─────────────────────────────────────────────────────────────────────────────
  3. COMPONENTE ORBE CSS
  ───────────────────────────────────────────────────────────────────────────── */

/* Base */
.orb {
  --orb-size: 120px;
  --orb-color: var(--active-primary);
  --orb-glow: var(--active-glow);
  position: relative;
  width: var(--orb-size);
  height: var(--orb-size);
  flex-shrink: 0;
}

.orb-glow {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orb-glow), transparent 70%);
  animation: orbPulse 2.2s ease-in-out infinite;
}

.orb-body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255,255,255,0.15),
    var(--orb-color),
    rgba(0,0,0,0.4)
  );
  box-shadow: inset -12px -8px 24px rgba(0,0,0,0.5),
              inset 4px 4px 16px rgba(255,255,255,0.06);
}

.orb-shine {
  position: absolute;
  top: 14%;
  left: 17%;
  width: 36%;
  height: 36%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent);
}

.orb-ring {
  position: absolute;
  inset: -5%;
  border-radius: 50%;
  border: 1px solid var(--orb-color);
  opacity: 0.25;
  animation: ringRotate 8s linear infinite;
}

.orb-ring-outer {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  border: 1px dashed var(--orb-color);
  opacity: 0.12;
  animation: ringRotate 13s linear infinite reverse;
}

/* Variantes de tamaño */
.orb--xl { --orb-size: 120px; }
.orb--lg { --orb-size: 80px; }
.orb--md { --orb-size: 50px; }
.orb--sm { --orb-size: 28px; }
.orb--xs { --orb-size: 20px; }

/* Animaciones */
@keyframes orbPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}

@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Estados */
.orb:hover .orb-glow { filter: brightness(1.2); }
.orb:active { transform: scale(0.97); }

/* ─────────────────────────────────────────────────────────────────────────────
  4. UTILIDADES DE TIPOGRAFÍA
  ───────────────────────────────────────────────────────────────────────────── */

.text-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.text-body {
  font-family: var(--font-body);
  font-weight: 400;
}

.text-mono {
  font-family: var(--font-mono);
  font-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────────────────
  5. BADGES POR AVATAR
  ───────────────────────────────────────────────────────────────────────────── */

.badge-axiom {
  background: var(--axiom-bg-accent);
  color: var(--axiom-primary);
  border: 1px solid var(--axiom-border);
}

.badge-kira {
  background: var(--kira-bg-accent);
  color: var(--kira-primary);
  border: 1px solid var(--kira-border);
}

.badge-vid {
  background: var(--vid-bg-accent);
  color: var(--vid-primary);
  border: 1px solid var(--vid-border);
}

/* ─────────────────────────────────────────────────────────────────────────────
  6. ESTADOS SEMÁNTICOS
  ───────────────────────────────────────────────────────────────────────────── */

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-ok {
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
}

.status-err {
  background: var(--err);
  box-shadow: 0 0 8px var(--err);
}

.status-warn {
  background: var(--warn);
  box-shadow: 0 0 8px var(--warn);
}