/* Brújula · sistema tipográfico (auto-alojado, offline-ready)
   ────────────────────────────────────────────────────────────────────────
   Montserrat = INTERFAZ (protagonista): cuerpo, títulos, datos, controles, cifras.
   EB Garamond = wordmark "Brújula" + cursivas de acento (subtítulo hero, citas).

   Lo carga theme.js en TODAS las páginas (punto único). Las páginas ya no usan
   "SF Pro Display": ese stack fue reemplazado por "Montserrat" en todo el sitio.
   Las ETIQUETAS impresas usan Georgia/Arial propios → no se ven afectadas.

   Las fuentes (.woff2) viven en assets/fonts/ y están en el precache del SW. */

/* ── Montserrat (interfaz) ── */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/montserrat-400.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/montserrat-500.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/montserrat-600.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/montserrat-700.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/montserrat-400-italic.woff2") format("woff2")}

/* ── EB Garamond (wordmark + cursivas de acento) ── */
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ebgaramond-400.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ebgaramond-500.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/ebgaramond-600.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/ebgaramond-400-italic.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("/assets/fonts/ebgaramond-500-italic.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:600;font-display:swap;src:url("/assets/fonts/ebgaramond-600-italic.woff2") format("woff2")}

:root{
  --font-sans:"Montserrat",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
}

/* Wordmark "Brújula" → EB Garamond (único uso recto de la serif) */
.brand-name,.brand-name-link,.ui-brand-name,.bt-brand,.bt-brand-link,.wordmark,.brand-title{
  font-family:"EB Garamond",Georgia,"Times New Roman",serif !important;
}
/* SUBTÍTULOS y textos descriptivos → EB Garamond (más presencia de la serif).
   Mantiene su font-style propio (los que son cursiva siguen en cursiva).
   IMPORTANTE: lo principal se queda en Montserrat — títulos, cifras, botones,
   datos, y los eyebrows/labels estructurales (.brand-sub, .ui-brand-sub,
   .brand-pill-sub) NO se incluyen aquí a propósito. */
.hero-sub,.ds-hero,.amp,
.page-sub,.card-sub,.hub-card-desc,.hub-subtitle,.modal-sub,.sess-subtitle,
.session-expired-sub,.locked-sub,.notif-pref-sub,.pdm-option-sub,.tarifa-sub,
.kpi-sub,.kpi-card-sub,.k-sub,.ra-sub,.ss-sub,.hs-sub,.z-sub,
.field-hint,.upload-hint,.step-hint,.sheet-hint,.sched-hint,.sort-hint,.subsidio-hint,.adm-sum-hint{
  font-family:"EB Garamond",Georgia,"Times New Roman",serif !important;
}

/* ── PATRÓN DE FONDO TEMÁTICO POR MODO (líneas que aparecen) ─────────────────────
   Capa fija .amr-bg (la inyecta theme.js con un SVG real adentro) detrás del
   contenido, DESENFOCADA (queda suave/onírica). Movimiento "aparecer líneas":
   una malla densa de ondas finas donde cada línea surge y se desvanece de forma
   escalonada (cascada de arriba a abajo) → siempre hay textura, nunca se vacía.
   Color por tema vía currentColor: Playa = dorado; Mar = crema. theme.js genera
   las ondas y hornea su animation-delay inline (fracción de --wd), así el número
   de líneas se cambia en un solo sitio. Solo opacity; respeta reduced-motion;
   no sale al imprimir. Duración por tema: --wd. */
/* Estas dos reglas SOLO en el índice (<html data-amr-bg="on">): dejan ver la
   capa .amr-bg. Los módulos no la llevan y conservan su propio fondo. */
html[data-amr-bg]{
  background-color:var(--bg) !important;
  /* Sombra/degradado cálido que se despliega desde el borde superior (el de
     antes, que vivía en el body del inicio). Va en <html>, DETRÁS de las ondas
     (.amr-bg) y del contenido, sin desenfoque. Playa va más marcado (.36, con más
     alcance); el mar conserva su intensidad (--tex-1, .16) en el override de abajo. */
  background-image:radial-gradient(ellipse at 50% 0%, rgba(193,154,75,.36), transparent 68%) !important;
  background-repeat:no-repeat !important;
}
html[data-amr-bg][data-theme="dark"]{
  background-image:radial-gradient(ellipse at 50% 0%, var(--tex-1,rgba(217,184,118,.16)), transparent 65%) !important;
}
html[data-amr-bg] body{background:transparent !important;animation:none !important}
.amr-bg{
  position:fixed;inset:-14%;z-index:-1;pointer-events:none;
  color:#6b4512;            /* Modo playa: bronce/café profundo (alto contraste sobre la crema) */
  --wd:16s;
  filter:blur(2.4px);
}
[data-theme="dark"] .amr-bg{
  color:#f3ebd8;            /* Modo mar: crema */
  --wd:20s;
}
.amr-bg svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Ondas: trazo fino crema/dorado; cada línea aparece y se desvanece, escalonada.
   El stroke-opacity (intensidad por línea) y el animation-delay van inline desde
   theme.js; aquí solo el trazo común y la animación. */
/* opacity:.12 base = el valle del keyframe: si el primer frame se pinta antes de
   que arranque la animación, sale tenue (no a tope) → sin parpadeo al recargar. */
.amr-waves path{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;opacity:.12;animation:amrFade var(--wd) ease-in-out infinite}
@keyframes amrFade{0%,100%{opacity:.12}48%,52%{opacity:1}}
@media(prefers-reduced-motion:reduce){.amr-bg *{animation:none !important}}
@media print{.amr-bg{display:none !important}}