/* ═══════════════════════════════════════════════════════════
   MOTOR DE AGENTES DE VOZ · SKIN "ANDRÓMEDA" (tokens — el ÚNICO lugar con colores)
   ------------------------------------------------------------
   Portada de Jarvis-OS (rama shell-orbe, theme-andromeda.css).
   Re-skin = crear theme-<marca>.css con ESTOS mismos nombres de
   token y otros valores, y apuntar el <link> de index.html.
   El canvas de partículas (orbe.js) LEE los tokens --orbe-* con
   getComputedStyle: jamás un color dentro del JS.
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  /* ── Bases ── */
  --bg-page:#03050E;
  --surface-1:#0A1020;
  --surface-2:#11172F;
  --surface-glass:rgba(255,255,255,.03);
  --surface-glass-2:rgba(255,255,255,.06);

  /* ── Texto ── */
  --text-1:#FFFFFF;
  --text-2:rgba(255,255,255,.72);
  --text-3:#A3A8B3;
  --text-4:#6B7180;

  /* ── Acentos ── */
  --accent:#9B5CFF;
  --accent-2:#23DDF2;
  --accent-3:#C052FF;
  --grad-firma:linear-gradient(90deg,#23DDF2 0%,#9B5CFF 55%,#C052FF 100%);
  --grad-firma-soft:linear-gradient(90deg,rgba(35,221,242,.16),rgba(155,92,255,.16) 55%,rgba(192,82,255,.16));

  /* ── Semánticos (estado: siempre con ícono/texto, nunca color solo) ── */
  --ok:#23DDF2;
  --warn:#F2B23D;
  --danger:#FF5C7A;
  --ok-bg:rgba(35,221,242,.10);
  --warn-bg:rgba(242,178,61,.12);
  --danger-bg:rgba(255,92,122,.12);

  /* ── Bordes / sombras ── */
  --border-1:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.14);
  --border-accent:rgba(155,92,255,.35);
  --shadow-card:0 20px 60px -24px rgba(0,0,0,.55);
  --shadow-lift:0 14px 40px -10px rgba(155,92,255,.5);
  --backdrop:rgba(3,5,14,.72);

  /* ── Fondo galaxia ── */
  --galaxy:
    radial-gradient(ellipse 45% 32% at 12% 8%, rgba(35,221,242,.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 88% 92%, rgba(155,92,255,.10), transparent 60%),
    radial-gradient(ellipse 38% 30% at 78% 12%, rgba(192,82,255,.06), transparent 60%),
    linear-gradient(180deg,#0A1020,#03050E 55%);

  /* ── Orbe (identidad; la mecánica vive en orbe.css + orbe.js) ── */
  --orbe-nucleo:radial-gradient(circle at 32% 28%,
      rgba(255,255,255,.92) 0%, rgba(35,221,242,.62) 13%,
      rgba(70,130,255,.50) 36%, rgba(155,92,255,.74) 60%,
      rgba(192,82,255,.58) 79%, rgba(3,5,14,.94) 100%);
  --orbe-halo:radial-gradient(circle,
      rgba(35,221,242,.30) 0%, rgba(155,92,255,.22) 38%,
      rgba(192,82,255,.10) 58%, transparent 72%);
  --orbe-onda:rgba(35,221,242,.45);
  --orbe-p1:#23DDF2;
  --orbe-p2:#9B5CFF;
  --orbe-p3:#C052FF;
  --orbe-p-blanco:#FFFFFF;
  --orbe-tinte-idle:#9B5CFF;
  --orbe-tinte-escuchando:#23DDF2;
  --orbe-tinte-pensando:#9B5CFF;
  --orbe-tinte-hablando:#C052FF;

  /* ── Cielo cósmico (capas que orbe.js inyecta en .bg-galaxy) ── */
  --fondo-nebulosa-a:
    radial-gradient(ellipse 26% 20% at 30% 42%, rgba(155,92,255,.14), transparent 60%),
    radial-gradient(ellipse 20% 16% at 72% 30%, rgba(35,221,242,.09), transparent 60%);
  --fondo-nebulosa-b:
    radial-gradient(ellipse 22% 18% at 62% 68%, rgba(192,82,255,.11), transparent 60%),
    radial-gradient(ellipse 16% 14% at 18% 76%, rgba(35,221,242,.07), transparent 60%);
  --fondo-estrellas-1:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.9), transparent 50%),
    radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(1px 1px at 44% 12%, rgba(255,255,255,.8), transparent 50%),
    radial-gradient(1.5px 1.5px at 55% 78%, rgba(255,255,255,.95), transparent 50%),
    radial-gradient(1px 1px at 71% 38%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(1px 1px at 83% 22%, rgba(255,255,255,.8), transparent 50%),
    radial-gradient(1px 1px at 92% 58%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(1px 1px at 6% 82%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(1px 1px at 38% 92%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(1.5px 1.5px at 64% 6%, rgba(255,255,255,.9), transparent 50%);
  --fondo-estrellas-2:
    radial-gradient(1.5px 1.5px at 33% 8%, rgba(35,221,242,.9), transparent 50%),
    radial-gradient(1px 1px at 66% 22%, rgba(192,82,255,.8), transparent 50%),
    radial-gradient(1px 1px at 18% 32%, rgba(255,255,255,.85), transparent 50%),
    radial-gradient(1.5px 1.5px at 78% 70%, rgba(255,255,255,.9), transparent 50%),
    radial-gradient(1px 1px at 88% 12%, rgba(35,221,242,.7), transparent 50%),
    radial-gradient(1px 1px at 42% 84%, rgba(155,92,255,.75), transparent 50%),
    radial-gradient(1px 1px at 51% 61%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(1px 1px at 8% 58%, rgba(255,255,255,.6), transparent 50%);
  --fondo-fugaz:linear-gradient(90deg,transparent,rgba(35,221,242,.5) 55%,#FFFFFF);
  --fondo-fugaz-nucleo:#FFFFFF;
  --fondo-fugaz-halo:rgba(35,221,242,.8);

  /* ── Tipografías ── */
  --font-display:'Poppins','Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'Space Grotesk','Inter',ui-sans-serif,sans-serif;

  /* ── Gestos ── */
  --r-btn:14px;
  --r-card:20px;
  --r-pill:999px;
  --focus-ring:#9B5CFF;
}