/* ============================================================
   Firma visual de Premium: halo del cursor y textura de grano
   ------------------------------------------------------------
   Capa: layout
   Reúne, en este orden: cursor-halo.css, grano.css
   ============================================================ */

/* ═══════════════════════════════════════════════════
   CURSOR HALO
═══════════════════════════════════════════════════ */
#cursor-light {
  position: fixed; left: 0; top: 0;
  pointer-events: none; z-index: 9998;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,166,35,.06) 0%, transparent 65%);
  /* transform en vez de left/top: solo compositor, cero layout/paint */
  transition: transform .12s ease;
  will-change: transform;
}
@media(hover: none) { #cursor-light { display: none; } }

/* ═══════════════════════════════════════════════════
   GRAIN TEXTURE OVERLAY
═══════════════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9997;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
body.dark-mode::before { opacity: .04; }
/* En mobile, el grain repinta en cada scroll: lo desactivamos para ahorrar batería/GPU. */
@media(max-width: 600px) { body::before { display: none; } }

/* ═══════════════════════════════════════════════════
   COLORES PROPIOS QUE VIVÍAN EN LOS COMPONENTES
   ---------------------------------------------------
   Hasta la Fase 7, estos valores estaban escritos a mano dentro
   de `componentes/` — el índigo del modo oscuro, el crema de las
   burbujas, el azul del hero. Eran ~40 literales que ESTADO.md
   arrastraba como deuda desde la Fase 3b.

   Con un solo layout no molestaban. Con cuatro sí: Neo, Atlas y
   Aurora también usan `.dark-mode`, así que se comían el índigo
   entero y cada uno tenía que taparlo en su propia firma con un
   bloque de parches idéntico. La triplicación fue la señal.

   Ahora los componentes piden una variable con fallback al
   contrato —`var(--gata-bg, var(--card))`— y **este bloque es el
   único lugar donde viven los valores de Premium**. Cada uno es
   exactamente el literal que estaba antes, así que Premium se ve
   igual que siempre; los otros tres layouts caen al fallback y
   sus bloques de parche desaparecieron.

   Para un layout nuevo: no hace falta declarar nada de esto. Si
   querés apartarte del fallback, declarás la variable y listo.
═══════════════════════════════════════════════════ */
:root {
  /* Burbujas de las gatas: fondo normal y fondo al pasar el mouse.
     La cola (::after) tiene que llevar el MISMO valor que el fondo,
     por eso es una variable y no dos literales sueltos. */
  --gata-bg:        var(--card);
  --gata-bg-hover:  #fff8eb;

  /* Definición: el índigo claro del modo oscuro. En modo claro la
     regla no aplica, pero la variable se declara igual para que el
     bloque se lea completo. */
  --def-borde:      #5c6bc0;
  --def-bg:         rgba(92,107,192,.08);
  /* El icono es un indigo MAS CLARO que el borde, no el mismo. */
  --def-icono:      #8c9eff;

  --grafico-bg:     var(--card2);
  --footer-bg:      var(--accent-2);
  --navbtns-bg:     var(--accent-2);
}

/* Blanco sobre --estado-ok: sobre el verde aclarado del modo
   oscuro da 2,63:1. El navy de --on-accent da 5,04:1. Mismo
   arreglo que Neo, Atlas y Aurora. */
html.dark-mode, body.dark-mode { --on-estado: var(--on-accent); }

html.dark-mode,
body.dark-mode {
  --gata-bg:        rgba(26,26,46,.95);
  --gata-bg-hover:  rgba(38,28,12,.95);
  --def-borde:      #5c6bc0;
  --def-bg:         rgba(92,107,192,.08);
  --def-icono:      #8c9eff;
  --grafico-bg:     #1f1f3a;
  --footer-bg:      #090916;
  --navbtns-bg:     #0c0c22;
}