/* ============================================================
   EVOLUX — Tokens de diseño compartidos
   ------------------------------------------------------------
   Antes cada página redefinía los colores a mano en un <style>
   inline (admin.html y login.html no cargaban styles.css). Un
   cambio de marca había que hacerlo en tres archivos y quedaba
   desincronizado.

   Este archivo es la única fuente de verdad del color, la
   tipografía y el espaciado. Lo cargan TODAS las páginas.
   ============================================================ */

:root {
  /* --- Marca --- */
  --pur:        #9b5cff;
  --pur-2:      #6c5cff;
  --blue:       #4a90ff;
  --grad:       linear-gradient(135deg, var(--pur), var(--pur-2));
  --grad-full:  linear-gradient(135deg, var(--pur) 0%, var(--pur-2) 55%, var(--blue) 100%);

  /* --- Superficies --- */
  --bg:         #0a0713;
  --bg-2:       #0e0a1a;
  --panel:      #140f24;
  --panel-2:    #1b1430;
  --panel-3:    #221a3c;
  --line:       rgba(255, 255, 255, .09);
  --line-fuerte: rgba(255, 255, 255, .16);

  /* --- Texto ---
     --muted tiene contraste 7.1:1 sobre --panel (AAA para texto normal).
     El valor anterior (#9a95b0) quedaba justo en el límite. */
  --txt:        #f4f2fa;
  --txt-2:      #d6d2e4;
  --muted:      #a9a4bf;
  --muted-2:    #837da0;

  /* --- Estados --- */
  --ok:         #45d69a;
  --ok-bg:      rgba(69, 214, 154, .15);
  --ok-txt:     #6ff0bb;
  --warn:       #ffc400;
  --warn-bg:    rgba(255, 196, 0, .14);
  --warn-txt:   #ffd76a;
  --danger:     #ff6b6b;
  --danger-bg:  rgba(255, 107, 107, .14);
  --danger-txt: #ffb0b0;
  --info:       #4a90ff;
  --info-bg:    rgba(74, 144, 255, .14);
  --info-txt:   #9cc2ff;

  /* --- Tipografía --- */
  --font-titulo: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-texto:  'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:   ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  /* --- Espaciado --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* --- Radios --- */
  --r-sm: 8px; --r-md: 11px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  /* --- Sombras --- */
  --sombra-sm: 0 2px 8px rgba(0, 0, 0, .28);
  --sombra-md: 0 8px 24px rgba(0, 0, 0, .34);
  --sombra-lg: 0 20px 56px rgba(0, 0, 0, .44);
  --glow:      0 0 0 1px rgba(155, 92, 255, .28), 0 8px 32px rgba(108, 92, 255, .22);

  /* --- Transiciones --- */
  --t-rapida: .14s cubic-bezier(.4, 0, .2, 1);
  --t-media:  .24s cubic-bezier(.4, 0, .2, 1);

  /* --- Layout --- */
  --ancho-max: 1200px;
  --ancho-panel: 1440px;
}

/* Foco visible en todo el sitio: sin esto no se puede navegar con teclado. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pur);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Respetar a quien pidió menos movimiento en su sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utilidad: texto solo para lectores de pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido, primer elemento tabulable de cada página. */
.saltar-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--pur);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-md) 0;
  font-weight: 600;
}
.saltar-al-contenido:focus {
  left: 0;
}