:root {
  color-scheme: light dark;
  --navy: #1A3058;
  --oro: #D4A843;
  --beige: #F5EFE4;

  --fondo: var(--beige);
  --superficie: #FFFFFF;
  --superficie-2: #EDE5D4;
  --texto: #1A3058;
  --texto-suave: #4C5772;
  --borde: #DCD2BC;
  --acento: var(--oro);
  --acento-texto: #1A3058;
  --primario: var(--navy);
  --primario-texto: #FFFFFF;
  --error: #A32D2D;
  --sombra: 0 1px 2px rgba(26, 48, 88, .08), 0 4px 14px rgba(26, 48, 88, .06);

  --fuente-titulo: "Cormorant Garamond", Georgia, serif;
  --fuente-cuerpo: "Jost", system-ui, -apple-system, sans-serif;

  --radio-s: 8px;
  --radio-m: 14px;
  --radio-l: 20px;
  /* Un radio por nivel de superficie: contenedor (tarjetas grandes, hojas, cabecera), tarjeta (elementos pulsables
     o agrupados dentro de un contenedor) y control (campos, botones, chips). Las píldoras usan 999px. */
  --radio-contenedor: var(--radio-l);
  --radio-tarjeta: var(--radio-m);
  --radio-control: 10px;

  /* ═══ Material «cristal» (único sitio donde se define; se aplica en app.css) ═══
     Nivel 1 (contenedor): --vidrio-fondo + blur. Popovers y hojas: --vidrio-fondo-fuerte.
     Nivel 2 (dentro de un contenedor): solo tinte, sin blur (nada de cristal sobre cristal). */
  --vidrio-fondo: rgba(255, 255, 255, .68);
  --vidrio-fondo-fuerte: rgba(255, 255, 255, .9);
  --vidrio-tinte: rgba(26, 48, 88, .045);
  --vidrio-tinte-fuerte: rgba(26, 48, 88, .085);
  --vidrio-borde: rgba(26, 48, 88, .10);
  --vidrio-borde-alto: rgba(255, 255, 255, .95);   /* brillo del canto superior */
  --vidrio-borde-item: rgba(26, 48, 88, .16);
  --vidrio-divisor: rgba(26, 48, 88, .12);
  --vidrio-blur: blur(16px) saturate(140%);
  --vidrio-brillo: inset 0 1px 0 rgba(255, 255, 255, .85);
  --vidrio-sombra: 0 1px 1px rgba(26, 48, 88, .04), 0 4px 10px rgba(26, 48, 88, .05), 0 16px 32px rgba(26, 48, 88, .07);
  --vidrio-sombra-alta: 0 2px 4px rgba(26, 48, 88, .06), 0 10px 20px rgba(26, 48, 88, .09), 0 28px 56px rgba(26, 48, 88, .14);
  /* Sustitutos opacos (sin backdrop-filter, transparencia reducida o contraste alto) */
  --vidrio-solido: #FBF8F1;
  --vidrio-solido-fuerte: #FFFFFF;
  --vidrio-solido-tinte: #F1EADA;
  --vidrio-solido-tinte-fuerte: #E8DFCB;
  --vidrio-solido-borde: #C9BEA5;

  /* Fondo de app con profundidad: aurora fija, sin imágenes */
  --aurora:
    radial-gradient(70% 46% at 8% -4%, rgba(212, 168, 67, .34), transparent 72%),
    radial-gradient(60% 40% at 104% 22%, rgba(26, 48, 88, .10), transparent 70%),
    radial-gradient(80% 50% at 38% 108%, rgba(232, 201, 126, .42), transparent 70%);
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #0E1A30;
    --superficie: #16264A;
    --superficie-2: #1D3158;
    --texto: #F5EFE4;
    --texto-suave: #A9B4CC;
    --borde: #2A3F6B;
    --acento-texto: #1A3058;
    --primario: var(--oro);
    --primario-texto: #1A3058;
    --error: #F08A8A;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    --vidrio-fondo: rgba(26, 44, 86, .58);
    --vidrio-fondo-fuerte: rgba(22, 38, 74, .9);
    --vidrio-tinte: rgba(255, 255, 255, .05);
    --vidrio-tinte-fuerte: rgba(255, 255, 255, .09);
    --vidrio-borde: rgba(255, 255, 255, .10);
    --vidrio-borde-alto: rgba(255, 255, 255, .24);
    --vidrio-borde-item: rgba(255, 255, 255, .16);
    --vidrio-divisor: rgba(255, 255, 255, .12);
    --vidrio-brillo: inset 0 1px 0 rgba(255, 255, 255, .10);
    --vidrio-sombra: 0 1px 1px rgba(0, 0, 0, .25), 0 4px 10px rgba(0, 0, 0, .22), 0 16px 32px rgba(0, 0, 0, .28);
    --vidrio-sombra-alta: 0 2px 4px rgba(0, 0, 0, .3), 0 10px 20px rgba(0, 0, 0, .35), 0 28px 56px rgba(0, 0, 0, .5);
    --vidrio-solido: #16264A;
    --vidrio-solido-fuerte: #1B2E58;
    --vidrio-solido-tinte: #1D3158;
    --vidrio-solido-tinte-fuerte: #25407A;
    --vidrio-solido-borde: #3D5890;
    --aurora:
      radial-gradient(70% 46% at 6% -4%, rgba(58, 100, 190, .48), transparent 72%),
      radial-gradient(55% 38% at 104% 20%, rgba(212, 168, 67, .11), transparent 70%),
      radial-gradient(80% 50% at 40% 108%, rgba(46, 82, 160, .5), transparent 70%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #0E1A30;
  --superficie: #16264A;
  --superficie-2: #1D3158;
  --texto: #F5EFE4;
  --texto-suave: #A9B4CC;
  --borde: #2A3F6B;
  --acento-texto: #1A3058;
  --primario: var(--oro);
  --primario-texto: #1A3058;
  --error: #F08A8A;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  --vidrio-fondo: rgba(26, 44, 86, .58);
  --vidrio-fondo-fuerte: rgba(22, 38, 74, .9);
  --vidrio-tinte: rgba(255, 255, 255, .05);
  --vidrio-tinte-fuerte: rgba(255, 255, 255, .09);
  --vidrio-borde: rgba(255, 255, 255, .10);
  --vidrio-borde-alto: rgba(255, 255, 255, .24);
  --vidrio-borde-item: rgba(255, 255, 255, .16);
  --vidrio-divisor: rgba(255, 255, 255, .12);
  --vidrio-brillo: inset 0 1px 0 rgba(255, 255, 255, .10);
  --vidrio-sombra: 0 1px 1px rgba(0, 0, 0, .25), 0 4px 10px rgba(0, 0, 0, .22), 0 16px 32px rgba(0, 0, 0, .28);
  --vidrio-sombra-alta: 0 2px 4px rgba(0, 0, 0, .3), 0 10px 20px rgba(0, 0, 0, .35), 0 28px 56px rgba(0, 0, 0, .5);
  --vidrio-solido: #16264A;
  --vidrio-solido-fuerte: #1B2E58;
  --vidrio-solido-tinte: #1D3158;
  --vidrio-solido-tinte-fuerte: #25407A;
  --vidrio-solido-borde: #3D5890;
  --aurora:
    radial-gradient(70% 46% at 6% -4%, rgba(58, 100, 190, .48), transparent 72%),
    radial-gradient(55% 38% at 104% 20%, rgba(212, 168, 67, .11), transparent 70%),
    radial-gradient(80% 50% at 40% 108%, rgba(46, 82, 160, .5), transparent 70%);
}

body {
  background: var(--fondo);
  color: var(--texto);
}

/* Aurora fija detrás de todo (sin imágenes ni JS). Sin ella el cristal no se percibe. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--aurora);
  pointer-events: none;
}

/* ── Degradación: superficies opacas equivalentes ── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:root {
    --vidrio-fondo: var(--vidrio-solido);
    --vidrio-fondo-fuerte: var(--vidrio-solido-fuerte);
    --vidrio-tinte: var(--vidrio-solido-tinte);
    --vidrio-tinte-fuerte: var(--vidrio-solido-tinte-fuerte);
    --vidrio-borde: var(--vidrio-solido-borde);
    --vidrio-blur: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root:root {
    --vidrio-fondo: var(--vidrio-solido);
    --vidrio-fondo-fuerte: var(--vidrio-solido-fuerte);
    --vidrio-tinte: var(--vidrio-solido-tinte);
    --vidrio-tinte-fuerte: var(--vidrio-solido-tinte-fuerte);
    --vidrio-blur: none;
    --aurora: none;
  }
}
@media (prefers-contrast: more) {
  :root:root {
    --vidrio-fondo: var(--vidrio-solido);
    --vidrio-fondo-fuerte: var(--vidrio-solido-fuerte);
    --vidrio-tinte: var(--vidrio-solido-tinte);
    --vidrio-tinte-fuerte: var(--vidrio-solido-tinte-fuerte);
    --vidrio-borde: var(--vidrio-solido-borde);
    --vidrio-borde-alto: var(--vidrio-solido-borde);
    --vidrio-borde-item: var(--vidrio-solido-borde);
    --vidrio-blur: none;
    --aurora: none;
  }
}

/* Cormorant dibuja números de estilo antiguo (el 1 parece una I): forzar cifras alineadas en toda la app. */
html { font-variant-numeric: lining-nums; }