/* ══════════════════════════════════════════════════════════════════════════
   cd-tokens.css — LOS MATERIALES DE LA INTERFAZ
   ──────────────────────────────────────────────────────────────────────────
   Fase 1 del rediseño. Aquí no se decora nada: se define de qué está hecha la
   interfaz. Lo que se apoye encima hereda coherencia sin tener que acordarse.

   POR QUÉ EXISTE ESTE ARCHIVO
   La auditoría midió, en una sola pantalla:
     · 10 tamaños de letra distintos (16, 12, 11, 9, 13, 14, 15, 10, 19, 54)
     · 8 radios de esquina (7, 8, 11, 12, 13, 16, 22, 999)
     · luminancia media 36/255, con el percentil 2 en 10
   Eso no es un sistema: es lo que sale de ir resolviendo casos uno a uno. Y es
   exactamente lo que el ojo lee como "plantilla".

   Lo que NO se toca: el oro y el violeta de la marca, la tipografía y la
   estructura. Se ordena la materia, no se cambia la identidad.
   ══════════════════════════════════════════════════════════════════════════ */

:root{

  /* ── ESCALONES DE LUZ ───────────────────────────────────────────────────
     El problema real no era la saturación (0.452, sana) sino que TODO vivía
     en el 14% inferior del rango. Fondo y tarjeta se separaban 4 puntos de
     luminancia: el ojo no distinguía planos y lo leía como una pared apagada.

     Tres alturas, con distancia suficiente entre ellas para que se noten:
       fondo    lo que está detrás de todo
       plano    tarjetas, paneles, listas
       relieve  lo que se levanta: menús, modales, lo enfocado             */
  --n-fondo:      #0b0b12;
  --n-fondo-alto: #121220;   /* degradado del fondo, para que no sea liso */
  --n-plano:      #17172a;
  --n-plano-alto: #1d1d33;
  --n-relieve:    #23233c;

  /* Filos: el borde no es una línea gris, es luz que roza el canto. */
  --n-filo:       rgba(255,255,255,.075);
  --n-filo-vivo:  rgba(255,255,255,.14);

  /* ── TINTA ──────────────────────────────────────────────────────────────
     Tres pesos. Más de tres y se pierde la jerarquía; menos, y todo grita. */
  --n-tinta:      #f2f2f8;
  --n-tinta-med:  #b6b6d0;   /* subía de #8888aa: 5.7:1 se quedaba corto */
  --n-tinta-baja: #8484a1;   /* era #7a7a96 (3.96:1, falla AA). Ahora 4.54:1 mínimo */

  /* ── ACENTOS ────────────────────────────────────────────────────────────
     El oro pintaba 1.631 píxeles frente a 4.088 del violeta: el color de la
     marca era minoría en su propia portada. La regla nueva es de uso, no de
     valor: UN elemento dorado por pantalla, el que manda. El violeta pasa a
     ser el color de apoyo, no el protagonista.                             */
  --n-oro:        #f5c842;
  --n-oro-claro:  #ffe9a8;
  --n-oro-hondo:  #c9870f;
  --n-viol:       #9d6bff;
  --n-viol-claro: #c9acff;
  --n-verde:      #2ecc8f;
  --n-rojo:       #ff5c7a;

  /* ── SOMBRAS CON TEMPERATURA ────────────────────────────────────────────
     Iban en negro puro. El negro sobre un fondo violáceo APAGA: baja la
     luminancia y se lleva el tono por delante. Estas llevan violeta muy
     oscuro dentro, así que oscurecen sin desteñir.                          */
  --n-sombra-1: 0 1px 2px rgba(14,8,32,.45);
  --n-sombra-2: 0 4px 14px -4px rgba(14,8,32,.55);
  --n-sombra-3: 0 12px 32px -10px rgba(14,8,32,.62);
  --n-sombra-4: 0 24px 60px -18px rgba(14,8,32,.7);
  /* Brillo del acento: para lo que debe parecer encendido, no elevado. */
  --n-brillo-oro:  0 0 22px -6px rgba(245,200,66,.5);
  --n-brillo-viol: 0 0 22px -6px rgba(157,107,255,.45);

  /* ── ESCALA TIPOGRÁFICA ─────────────────────────────────────────────────
     Seis pasos con proporción fija (≈1.28). Los diez tamaños sueltos que
     había no formaban escala: el salto de 19 a 54 sin nada en medio era lo
     que dejaba los titulares flotando sin relación con el texto.            */
  --t-xs:   11px;   /* etiquetas, sellos */
  --t-sm:   13px;   /* apoyo, pies */
  --t-base: 15px;   /* lectura */
  --t-md:   19px;   /* subtítulos */
  --t-lg:   26px;   /* títulos de sección */
  --t-xl:   38px;   /* titular */
  --t-hero: 54px;   /* la cifra que manda */

  --t-alto-corto: 1.25;   /* titulares */
  --t-alto-largo: 1.65;   /* párrafos */

  /* ── RADIOS ─────────────────────────────────────────────────────────────
     Ocho valores distintos es la señal más rápida de interfaz ensamblada a
     trozos. Tres bastan, más la píldora.                                    */
  --r-sm:  8px;     /* controles: botones, campos, fichas */
  --r-md:  14px;    /* tarjetas y paneles */
  --r-lg:  20px;    /* superficies grandes: modales, hojas */
  --r-full:999px;   /* píldoras y avatares */

  /* ── RITMO ──────────────────────────────────────────────────────────────
     Múltiplos de 4: el espaciado deja de ser una decisión por caso.         */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px;

  /* ── MOVIMIENTO ─────────────────────────────────────────────────────────
     Una sola curva en toda la interfaz: es lo que hace que se sienta de una
     misma mano. La misma que ya usa el sistema de navegación.               */
  --m-curva:cubic-bezier(.22,1.2,.36,1);
  --m-rapido:.18s; --m-medio:.3s; --m-lento:.46s;
}

/* ══ PUENTE DEL SISTEMA ANTIGUO ════════════════════════════════════════════
   FASE 1 DEL REDISEÑO · 3-ago-2026

   Convivían DOS sistemas de tokens: el antiguo de nombres cortos
   (--tx, --tx2, --tx3, --b, --coin…), con 3.592 usos repartidos entre
   cd-main.css y cd-superficies.css, y el nuevo --n-* definido arriba, con 230.

   La primera lectura hizo saltar una alarma que resultó ser FALSA: en
   cd-main.css --tx3 vale #44445a (1.86:1, ilegible), pero cd-superficies.css
   se carga después y lo pisa con #8a8aa6 (5.26:1, correcto). Los valores
   EFECTIVOS ya pasaban AA. Queda anotado porque es la trampa exacta en la que
   se cae al auditar hoja por hoja en vez de por orden de cascada.

   El problema real no era el contraste sino la DUPLICIDAD: dos definiciones
   del mismo token en dos archivos, ganando una por orden de carga. Cualquier
   ajuste del sistema nuevo no llegaba a la interfaz, y cualquiera que leyera
   cd-main.css se llevaría una idea equivocada de los colores reales.

   SOLUCIÓN: los nombres cortos se redefinen EN SUS PROPIOS ARCHIVOS como
   var(--n-*), con el literal de respaldo. Gane el que gane la cascada, el
   valor sale del sistema nuevo. Un solo origen de verdad, sin mover el orden
   de carga y sin reescribir 3.592 llamadas.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ TEXTURA DEL FONDO ═════════════════════════════════════════════════════
   Un degradado liso a 36 de luminancia es una pared. Un grano finísimo da
   MATERIA sin subir el brillo: es lo que separa una interfaz cuidada de una
   plantilla. Va en una capa fija por detrás de todo (z-index -2, por debajo
   del calor de la comunidad que ya vive en -1), sin interceptar el cursor.
   El SVG va incrustado: sin petición de red y sin fichero que desplegar.   */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  /* El grano no debe apagar: en modo pantalla aporta partícula de luz. */
  mix-blend-mode:screen;
}
/* En las páginas legales el fondo lo pinta legal.css; el grano igual les
   sienta bien, así que no se excluye. Sí se excluye en las superposiciones
   de OBS, donde el lienzo TIENE que quedar transparente. */
body.overlay-limpio::before,
html:has(#lienzo) body::before{content:none}

@media (prefers-reduced-motion:reduce){
  :root{ --m-rapido:.01ms; --m-medio:.01ms; --m-lento:.01ms }
}