/* ==========================================================================
   ENTRENA TU CEREBRO — Tokens de diseño
   Fuente única de verdad: color, forma, ritmo, movimiento.
   Nada de valores mágicos fuera de este archivo.
   ========================================================================== */

:root {
  /* ---- Paleta base (verdes) -------------------------------------------- */
  --verde-950: #051F20;
  --verde-900: #0B2B26;
  --verde-800: #163832;
  --verde-700: #235347;
  --verde-300: #8EB69B;
  --verde-100: #DAF1DE;

  /* Derivados en HSL para mezclas y transparencias */
  --verde-950-rgb: 5 31 32;
  --verde-900-rgb: 11 43 38;
  --verde-800-rgb: 22 56 50;
  --verde-700-rgb: 35 83 71;
  --verde-300-rgb: 142 182 155;
  --verde-100-rgb: 218 241 222;

  /* ---- Semánticos: tema oscuro (por defecto) --------------------------- */
  --bg-base: var(--verde-950);
  --bg-eleva: var(--verde-900);
  --bg-alta: var(--verde-800);

  /* Aurora de fondo: dos halos suaves que dan "aire" */
  --aurora-1: rgb(var(--verde-700-rgb) / 0.55);
  --aurora-2: rgb(var(--verde-300-rgb) / 0.14);
  --aurora-3: rgb(var(--verde-800-rgb) / 0.70);

  --texto: var(--verde-100);
  --texto-suave: rgb(var(--verde-100-rgb) / 0.72);
  --texto-tenue: rgb(var(--verde-100-rgb) / 0.48);
  --texto-sobre-acento: var(--verde-950);

  --acento: var(--verde-300);
  --acento-fuerte: #A6C9B1;
  --acento-tenue: rgb(var(--verde-300-rgb) / 0.16);
  --acento-borde: rgb(var(--verde-300-rgb) / 0.34);

  /* Relleno sólido: lo que está activo, elegido o conseguido.
     En tema oscuro es claro sobre fondo oscuro; en tema claro se invierte,
     porque un relleno claro sobre fondo claro sería invisible.
     Todo lo que se pinta encima usa --relleno-texto, nunca un color crudo. */
  --relleno-desde: var(--verde-100);
  --relleno-hasta: var(--verde-300);
  --relleno-texto: var(--verde-950);

  /* Variante profunda: iconos y fichas que deben pesar menos que un botón */
  --relleno-hondo-desde: var(--verde-300);
  --relleno-hondo-hasta: var(--verde-700);

  /* Estados — siempre en clave positiva, nunca alarmante */
  --logro: #9FD8B0;
  --calma: #8EB69B;
  --atencion: #D9C68E; /* ámbar sereno, sustituye al rojo */
  --brillo: #C7E8D2;

  /* ---- Cristal (glassmorphism) ----------------------------------------- */
  --cristal-fondo: rgb(var(--verde-100-rgb) / 0.055);
  --cristal-fondo-alto: rgb(var(--verde-100-rgb) / 0.085);
  --cristal-borde: rgb(var(--verde-100-rgb) / 0.115);
  --cristal-borde-alto: rgb(var(--verde-100-rgb) / 0.20);
  --cristal-brillo: rgb(var(--verde-100-rgb) / 0.30);
  --cristal-blur: 22px;
  --cristal-blur-sutil: 12px;
  --cristal-satura: 150%;

  /* ---- Relieve (neumorphism) ------------------------------------------- */
  --neu-fondo: linear-gradient(145deg, #10322C, #0A2622);
  --neu-fondo-hundido: linear-gradient(145deg, #0A2622, #10322C);
  --neu-luz: rgb(var(--verde-300-rgb) / 0.13);
  --neu-sombra: rgb(2 14 15 / 0.72);
  --neu-dist: 10px;
  --neu-difuso: 22px;

  --sombra-neu:
    calc(var(--neu-dist) * -1) calc(var(--neu-dist) * -1) var(--neu-difuso) var(--neu-luz),
    var(--neu-dist) var(--neu-dist) var(--neu-difuso) var(--neu-sombra);
  --sombra-neu-hundida:
    inset calc(var(--neu-dist) * -0.6) calc(var(--neu-dist) * -0.6) calc(var(--neu-difuso) * 0.7) var(--neu-luz),
    inset var(--neu-dist) var(--neu-dist) calc(var(--neu-difuso) * 0.7) var(--neu-sombra);
  --sombra-neu-sutil:
    -4px -4px 10px var(--neu-luz),
    4px 4px 10px rgb(2 14 15 / 0.55);

  /* ---- Sombras de profundidad ------------------------------------------ */
  --sombra-1: 0 2px 8px rgb(2 12 13 / 0.30);
  --sombra-2: 0 8px 24px rgb(2 12 13 / 0.38);
  --sombra-3: 0 18px 48px rgb(2 12 13 / 0.48);
  --sombra-flotante: 0 24px 60px rgb(2 12 13 / 0.58);
  --resplandor: 0 0 0 1px rgb(var(--verde-300-rgb) / 0.22), 0 0 32px rgb(var(--verde-300-rgb) / 0.18);

  /* ---- Radios: sin esquinas, nunca ------------------------------------- */
  --r-xs: 12px;
  --r-sm: 16px;
  --r-md: 22px;
  --r-lg: 28px;
  --r-xl: 34px;
  --r-2xl: 42px;
  --r-3xl: 52px;
  --r-full: 999rem;
  /* Radio de "superelipse" para tiles cuadradas grandes */
  --r-tile: 30%;

  /* ---- Espaciado (ritmo de 4) ------------------------------------------ */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-7: 32px;
  --e-8: 40px;
  --e-9: 52px;
  --e-10: 68px;

  /* Márgenes laterales de pantalla, fluidos */
  --margen: clamp(18px, 5.2vw, 28px);

  /* ---- Tipografía ------------------------------------------------------ */
  /*
   * Jost para titulares y cifras: geométrica de aire Bauhaus, círculos casi
   * perfectos y ninguna floritura. Instrument Sans debajo, que es neutra y
   * aguanta bien los tamaños pequeños sin llamar la atención.
   *
   * Las dos se sirven desde /assets/fonts (ver fonts.css).
   */
  /* Los sustitutos también son geométricos, para que el salto mientras carga
     la fuente definitiva no cambie el carácter del texto. */
  --f-display: "Jost", "Century Gothic", "Avenir Next", Futura, system-ui, sans-serif;
  --f-texto: "Instrument Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-numero: "Jost", "Century Gothic", "Avenir Next", Futura, system-ui, sans-serif;

  /*
   * Pesos.
   *
   * Van como tokens y no sueltos por el CSS porque el grosor es propiedad de
   * la tipografía, no del componente. Una grotesca compacta necesita 800
   * para verse firme; Jost a 800 se vuelve pesada y pierde justo la calma
   * que buscábamos. Si algún día cambia la familia, se ajusta aquí y no en
   * setenta reglas repartidas por cuatro archivos.
   *
   * Instrument Sans solo llega a 700: no pongas más en los tokens de texto,
   * porque el navegador lo recorta en silencio.
   */
  --peso-display: 400;        /* titulares grandes: Jost Book, sereno */
  --peso-display-medio: 500;  /* titulares pequeños y cifras compactas */
  --peso-texto: 420;          /* cuerpo */
  --peso-texto-medio: 500;    /* énfasis suave */
  --peso-texto-fuerte: 600;   /* botones, fichas, etiquetas */

  /* Escala fluida, calibrada para 393px (iPhone 15) → 480px */
  --t-display: clamp(2.75rem, 11.5vw, 3.75rem);
  --t-h1: clamp(2rem, 8.2vw, 2.65rem);
  --t-h2: clamp(1.5rem, 6vw, 1.9rem);
  /* Un punto más que el resto de la escala: este escalón lo usan los títulos
     de tarjeta, la cabecera y el marcador, todos en Jost, cuya altura de x es
     un 10 % menor que la del texto. Sin este ajuste se leerían pequeños. */
  --t-h3: clamp(1.25rem, 4.9vw, 1.48rem);
  --t-cuerpo: clamp(0.975rem, 3.85vw, 1.075rem);
  --t-pequeno: clamp(0.875rem, 3.4vw, 0.95rem);
  --t-micro: clamp(0.75rem, 3vw, 0.82rem);
  --t-etiqueta: clamp(0.6875rem, 2.7vw, 0.75rem);

  --interlinea-apretada: 1.02;
  --interlinea-titulo: 1.14;
  --interlinea-cuerpo: 1.62;

  /* Jost tiene formas anchas y abiertas: pide mucho menos interletraje
     negativo que una grotesca compacta. Apretarla igual la ensuciaría. */
  --track-display: -0.01em;
  --track-titulo: -0.008em;
  --track-etiqueta: 0.13em;

  /* ---- Movimiento ------------------------------------------------------ */
  --d-instante: 90ms;
  --d-rapida: 180ms;
  --d-media: 320ms;
  --d-lenta: 520ms;
  --d-pausada: 820ms;

  --ease-suave: cubic-bezier(0.32, 0.72, 0.28, 1);      /* la de casa */
  /* Para lo que el dedo suelta: arranca rápido y frena muy largo, que es
     como se comporta algo que llevaba inercia. */
  --ease-deslizar: cubic-bezier(0.22, 0.9, 0.16, 1);
  --ease-entrada: cubic-bezier(0.16, 1, 0.3, 1);        /* expo out */
  --ease-salida: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-elastico: cubic-bezier(0.34, 1.56, 0.64, 1);   /* rebote leve */
  --ease-respiro: cubic-bezier(0.45, 0, 0.55, 1);

  /* ---- Capas ------------------------------------------------------------ */
  --z-fondo: 0;
  --z-contenido: 1;
  --z-pegajoso: 20;
  --z-nav: 40;
  --z-hoja: 60;
  --z-modal: 70;
  --z-aviso: 80;
  --z-carga: 90;

  /* ---- Zonas seguras (iPhone 15 y familia) ------------------------------ */
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-izq: env(safe-area-inset-left, 0px);
  --seguro-der: env(safe-area-inset-right, 0px);

  /*
   * La barra flota por encima del contenido, así que no ocupa sitio: es cada
   * pantalla la que se deja hueco al final para que lo último que hay no se
   * quede debajo de la pastilla.
   */
  --nav-relleno: 7px;
  --nav-item: 54px;
  --alto-nav: 70px;      /* item + relleno×2 + borde×2 */
  --nav-abajo: max(var(--e-2), calc(var(--seguro-abajo) - var(--e-2)));
  --hueco-nav: calc(var(--alto-nav) + var(--nav-abajo) + var(--e-4));

  /* Objetivo táctil mínimo cómodo */
  --tactil: 48px;

  /* Ancho máximo de la columna de contenido (app móvil centrada) */
  --ancho-app: 520px;
}

/* ==========================================================================
   Tema claro — misma paleta, roles invertidos. Se activa con
   [data-tema="claro"] o por preferencia del sistema si no hay elección.
   ========================================================================== */

[data-tema="claro"] {
  --bg-base: var(--verde-100);
  --bg-eleva: #E9F6EC;
  --bg-alta: #F3FBF5;

  --aurora-1: rgb(var(--verde-300-rgb) / 0.55);
  --aurora-2: rgb(var(--verde-700-rgb) / 0.16);
  --aurora-3: rgb(var(--verde-300-rgb) / 0.30);

  --texto: var(--verde-950);
  --texto-suave: rgb(var(--verde-950-rgb) / 0.70);
  --texto-tenue: rgb(var(--verde-950-rgb) / 0.45);
  --texto-sobre-acento: var(--verde-100);

  --acento: var(--verde-700);
  --acento-fuerte: var(--verde-800);
  --acento-tenue: rgb(var(--verde-700-rgb) / 0.12);
  --acento-borde: rgb(var(--verde-700-rgb) / 0.28);

  --relleno-desde: var(--verde-700);
  --relleno-hasta: var(--verde-800);
  --relleno-texto: var(--verde-100);

  --relleno-hondo-desde: var(--verde-700);
  --relleno-hondo-hasta: var(--verde-950);

  --logro: #2F6B4E;
  --calma: var(--verde-700);
  --atencion: #8A7433;
  --brillo: var(--verde-800);

  --cristal-fondo: rgb(255 255 255 / 0.46);
  --cristal-fondo-alto: rgb(255 255 255 / 0.66);
  --cristal-borde: rgb(255 255 255 / 0.70);
  --cristal-borde-alto: rgb(var(--verde-700-rgb) / 0.16);
  --cristal-brillo: rgb(255 255 255 / 0.90);

  --neu-fondo: linear-gradient(145deg, #FFFFFF, #DCEFE1);
  --neu-fondo-hundido: linear-gradient(145deg, #DCEFE1, #FFFFFF);
  --neu-luz: rgb(255 255 255 / 0.95);
  --neu-sombra: rgb(var(--verde-700-rgb) / 0.22);

  --sombra-1: 0 2px 8px rgb(var(--verde-700-rgb) / 0.10);
  --sombra-2: 0 8px 24px rgb(var(--verde-700-rgb) / 0.13);
  --sombra-3: 0 18px 48px rgb(var(--verde-700-rgb) / 0.16);
  --sombra-flotante: 0 24px 60px rgb(var(--verde-700-rgb) / 0.20);
  --resplandor: 0 0 0 1px rgb(var(--verde-700-rgb) / 0.20), 0 0 32px rgb(var(--verde-700-rgb) / 0.14);

  color-scheme: light;
}

[data-tema="oscuro"] { color-scheme: dark; }
:root { color-scheme: dark; }

/* ==========================================================================
   Accesibilidad de movimiento — respetamos siempre al usuario
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-instante: 1ms;
    --d-rapida: 1ms;
    --d-media: 1ms;
    --d-lenta: 1ms;
    --d-pausada: 1ms;
  }
}