/* ═══ EL TEMA DEL CLIENTE ACTIVO · hoy, AMORAMAR ═════════════════════════════════════════
   23 sep 2026, Samuel: «la brújula es un software que adapta su
   diseño según el cliente. Por el momento el único cliente que tenemos es
   Amoramar». El diseño va en DOS CAPAS:
     · el NÚCLEO (assets/tokens.css): escala, espacio, radios, profundidad,
       movimiento y la paleta ESTÁNDAR, que es la de la Brújula (niebla,
       grafito y ultramar; manual de marca, 30 sep 2026);
     · el TEMA de cada cliente (esta hoja): su paleta, sus letras y su logo.
   Esta hoja se carga DESPUÉS de tokens.css y de fonts.css y redefine los
   mismos nombres, así que el portal se ve exactamente igual que antes de la
   separación: son los bloques de siempre, movidos tal cual.

   LAS PÁGINAS ENLAZAN «/assets/tema.css» —el tema del cliente ACTIVO— y no un
   nombre de empresa: así ninguna página nombra al cliente. Hoy el único es
   Amoramar y esta hoja ES la suya. El día que haya un segundo cliente, el
   servidor sirve en esta misma dirección el de la empresa de la sesión (la
   ficha de ajustes de docs/PLATAFORMA-HOJA-DE-RUTA.md), sin tocar una página.

   AL EDITAR: es asset de /assets/ → subir su `?v=` en todas las páginas. */

/* ── Paleta · Modo playa (claro, por defecto) ─────────────────────────────
   Tema "Modo playa": arena cálida + tinta marina + dorado Amoramar. */
:root, :root[data-theme="light"]{
  /* Marca */
  --gold:#c19a4b;            /* dorado Amoramar — acento principal */
  /* El dorado del papel: el de los documentos de siempre, el mismo de día y de
     noche porque el papel se imprime igual. */
  --doc-acento:#b8901f;
  --canto:color-mix(in srgb, #000 11%, var(--bg));   /* el canto del kit, sobre la arena */
  /* Las piezas del símbolo con la marca de Amoramar (manual de marca §10):
     la hoja dorada y el cuarto azul noche. Las usan el mosaico de carga y la
     marca de «hecho». */
  --marca-hoja:#c19a4b;
  --acero:#0a1f33;
  --gold-soft:#d9b876;       /* dorado suave — hovers, realces sutiles */
  /* EL DORADO QUE SE PUEDE LEER. `--gold` es un acento, no un color de texto:
     sobre el chip de Modo playa da 2,06:1 —AA pide 4,5 y el texto grande 3—, y
     así llevaban 98 reglas en 27 archivos, casi todas con letra de 11-12px en
     negrita. Tostado con la tinta sube a 4,66-5,09:1 en playa y se queda en
     8,57-12,63 en mar, con UNA declaración: los dos ingredientes voltean con el
     tema, así que no hace falta escribirlo dos veces. Se usa para TEXTO dorado
     sobre fondo tintado (chips, contadores, etiquetas de estado); el dorado de
     un icono, un borde o un realce sigue siendo `--gold`.
     Lo mide `tests/contraste-tokens.test.mjs`. */
  --gold-text:color-mix(in srgb, var(--gold) 55%, var(--ink));
  /* El aviso que se puede LEER: --warn a secas como texto se queda en 2,68:1
     sobre la arena (3,62:1 en la niebla de la Brújula). Mezclado al 60 % con la tinta llega
     a 5,3:1 o más en los cuatro temas y sigue viéndose naranja. --warn se queda
     para puntos, bordes y rellenos. */
  --warn-text:color-mix(in srgb, var(--warn) 60%, var(--ink));

  /* Superficies */
  --bg:#f3ebd8;              /* fondo de página (arena) */
  --surface:#fffcf5;         /* tarjetas y paneles sólidos — se LEVANTAN de la arena (23 sep 2026; antes #fbf6e8) */
  --surface-2:rgba(243,235,216,.6);  /* paneles translúcidos sobre fondo */

  /* Texto */
  --ink:#0a1f33;            /* texto principal (azul marino casi negro) */
  --muted:#6e6349;          /* texto secundario (AA 4.99:1 sobre --bg; antes #7a6f55 = 4.18) */
  --fondo-trazo:#6b4512;         /* las líneas del fondo animado: bronce sobre la arena */
  --meta:#8a7f63; --apagado:rgba(10,31,51,.12);

  /* Bordes (3 pesos) */
  --border:rgba(193,154,75,.4);   /* dorado — bordes con presencia */
  --border-2:rgba(10,31,51,.15);  /* tinta tenue — divisores, tarjetas */
  --border-3:rgba(10,31,51,.2);   /* tinta media — inputs, separadores */

  /* Texturas de fondo (gradientes radiales del portal) */
  --tex-1:rgba(193,154,75,.22);
  --tex-2:rgba(10,31,51,.075);

  /* Sombra y estados */
  --shadow:rgba(10,31,51,.28);
  --danger:#a33a3a;
  --danger-bg:rgba(163,58,58,.08);
  /* Lavado dorado para TEÑIR una superficie (una fila importante, una tarjeta
     señalada). Es translúcido a propósito: `--gold-soft` es un color sólido y,
     usado de fondo, deja el texto encima peleando contra una plancha de oro. */
  --gold-bg:rgba(193,154,75,.13);
  --ok:#2f7d4f;                          /* éxito / confirmado (verde) */
  --ok-bg:rgba(47,125,79,.1);
  --info:#2f6d9e;                        /* informativo / en curso (azul) */
  --info-bg:rgba(47,109,158,.1);
  --warn:#d97706;                        /* atención / pendiente (ámbar) */
  --warn-bg:rgba(217,119,6,.1);
  --chip:rgba(193,154,75,.1);            /* relleno de chip/etiqueta */
  --topbar:rgba(243,235,216,.8);        /* fondo de barra superior (blur) */
  /* Franja de fila alterna en tablas y listas largas. Lo declaraban por su
     cuenta index, bancos, rutas-activas, rutas y simulador-tarifas, con este
     mismo valor: no era una decisión por pantalla, era el mismo dato escrito
     cinco veces. Sube aquí con el valor que ya tenía. */
  --row-stripe:rgba(193,154,75,.06);

  /* Tinta de contraste sobre dorado sólido (texto en botón dorado) */
  --on-gold:#1a1206;
  /* Globo de ayuda y tinta sobre lo oscuro: iguales en los dos modos. */
  --tip:#0a1f33; --on-velo:#f3ebd8;
  /* Tinta sobre FONDO SÓLIDO de estado. En Modo mar --danger/--ok/--info se
     aclaran (son colores de TEXTO sobre fondo oscuro), así que un `color:#fff`
     fijo encima daba 2.1:1 de contraste — ilegible. Estos tokens voltean con el
     tema: claro → texto blanco; oscuro → tinta profunda sobre el color claro. */
  --on-danger:#fff;
  --on-ok:#fff;
  --on-info:#fff;
  /* Resplandor dorado para hover de botón primario (elevación). */
  --glow-gold:rgba(193,154,75,.45);
  /* El contorno de un control (botón secundario, campo): más firme que
     `--hairline`, que alrededor de un botón en Modo playa no se ve. Sale de
     `--ink`, así que en Modo mar se aclara solo. */
  --borde-control:color-mix(in srgb, var(--ink) 26%, transparent);

  /* ── v2 (jul 2026) · profundidad y calidez — ADITIVOS ──────────────────
     Tercer nivel de superficie + tinta de lectura + acento coral opcional. */
  --surface-raised:#fffefa;        /* modales, menús, popovers (más cerca) */
  --surface-sunken:#ece2c9;        /* wells / inputs tonales (rebajado) — evolución v4 */
  --ink-soft:#3c4e62;              /* cuerpo de texto largo (AAA 7.9:1) */
  --coral:#c96f4a;                 /* acento marino cálido (decorativo) */
  --coral-text:#a5522f;            /* coral para TEXTO (AA 4.6:1) */
  --coral-bg:rgba(201,111,74,.1);
  --hairline:rgba(94,79,48,.17);   /* divisor cálido (reemplazo suave de border-2 en kit) */

  /* ── Liquid Glass cálido (jul 2026) · materiales translúcidos ───────────
     TRES niveles y solo tres: chrome (barras/nav), float (sheets/modales),
     soft (chips flotantes/PTR). Tinte crema/arena — nunca gris iOS. El blur
     vive en las escalas (independiente del tema) y JAMÁS se anima; la capa
     consumidora declara el fondo sólido ANTES del @supports (degradación). */
  --glass-chrome:rgba(251,246,232,.58);
  --glass-float:rgba(251,246,232,.70);
  --glass-soft:rgba(251,246,232,.46);
  --glass-ink:rgba(10,31,51,.60);            /* vidrio oscuro (toast) */
  /* Canto superior: luz. Bajó de .60 a .32 el 23 sep 2026, a petición de
     Samuel al verlo aplicado: «quiero que el canto de luz sea más tenue y
     sutil». Es la perilla de TODO el relieve del portal —botones, tarjetas,
     ventanas y pestañas la leen de aquí—, así que se ajusta en este sitio. */
  --glass-edge:rgba(255,255,255,.32);
  /* La profundidad (23 sep 2026): lo que cambia de un tema a otro. Cómo se
     componen, más abajo junto a la escala de elevación. */
  --labio:rgba(56,44,20,.08);                /* canto inferior: asiento — tenue, como el canto de luz (Samuel: «lo mismo para el labio»; era .16) */
  --sombra-contacto:rgba(56,44,20,.14);      /* la sombra pegada al objeto */
  --sombra-ambiente:rgba(56,44,20,.13);      /* la sombra corta alrededor */
  --sombra-hundido:rgba(56,44,20,.08);       /* lo que se llena, hundido */
  --glass-line:rgba(193,154,75,.28);         /* hairline dorada del vidrio */
  --glass-shadow:0 10px 40px -14px rgba(10,31,51,.30), 0 2px 8px -4px rgba(10,31,51,.12);
  --glass-chrome-solid:rgba(247,240,224,.96);/* fallback sin backdrop-filter */
  --glass-float-solid:#fbf6e8;
}

/* ── Paleta · Modo mar (oscuro) ───────────────────────────────────────────
   Tema "Modo mar": fondo de mar profundo + arena clara como texto. */
:root[data-theme="dark"]{
  --gold:#d9b876; --gold-soft:#e8cc8e;
  --doc-acento:#b8901f;
  --canto:color-mix(in srgb, #000 18%, var(--bg));
  --marca-hoja:#d9b876; --acero:#3b4b5b;
  --bg:#060f1a; --surface:#0d2438; --surface-2:rgba(13,36,56,.5);
  --ink:#f3ebd8; --muted:#9a8f73; --fondo-trazo:#f3ebd8; --meta:#7f7560; --apagado:rgba(243,235,216,.16);
  --border:rgba(217,184,118,.3); --border-2:rgba(217,184,118,.18); --border-3:rgba(217,184,118,.22);
  --tex-1:rgba(217,184,118,.16); --tex-2:rgba(243,235,216,.07);
  --shadow:rgba(0,0,0,.55);
  --danger:#e0a4a4; --danger-bg:rgba(224,164,164,.1); --chip:rgba(217,184,118,.1);
  --gold-bg:rgba(217,184,118,.13);
  --row-stripe:rgba(217,184,118,.05);
  --ok:#5cb98a; --ok-bg:rgba(92,185,138,.12);
  --info:#8fbfe0; --info-bg:rgba(143,191,224,.12);
  --warn:#f59e0b; --warn-bg:rgba(245,158,11,.12);
  --topbar:rgba(6,15,26,.75);
  --velo:rgba(0,0,0,.55);
  --velo-suave:rgba(0,0,0,.45);
  --velo-visor:rgba(0,0,0,.9);
  --tgl-off:#27394d; --tgl-knob:#17354f;
  --on-danger:#3b1414; --on-ok:#0c2a1a; --on-info:#0a2233;

  --on-gold:#1a1206;
  --tip:#0a1f33; --on-velo:#f3ebd8;
  --glow-gold:rgba(217,184,118,.40);
  --surface-raised:#143050;
  --surface-sunken:#0a1828;
  --brass:linear-gradient(180deg,#e2c078,#c6a054);
  --ring:0 0 0 3px rgba(217,184,118,.3);
  --ink-soft:#c8c1ab;
  --coral:#e08a63; --coral-text:#e08a63; --coral-bg:rgba(224,138,99,.12);
  --hairline:rgba(217,184,118,.16);
  --glass-chrome:rgba(13,36,56,.50);
  --glass-float:rgba(13,36,56,.62);
  --glass-soft:rgba(13,36,56,.40);
  --glass-ink:rgba(6,15,26,.66);
  --glass-edge:rgba(243,235,216,.08);
  --marco:color-mix(in srgb, var(--gold) 30%, transparent);   /* sobre el mar el dorado al 55 % grita: Samuel pidió bajarlo */
  --labio:rgba(0,0,0,.22); --sombra-contacto:rgba(0,0,0,.40); --sombra-ambiente:rgba(0,0,0,.36); --sombra-hundido:rgba(0,0,0,.22);
  --glass-line:rgba(217,184,118,.22);
  --glass-shadow:0 12px 44px -14px rgba(0,0,0,.65), 0 2px 8px -4px rgba(0,0,0,.40);
  --glass-chrome-solid:rgba(10,28,46,.96);
  --glass-float-solid:#0d2438;
}
/* Modo mar automático cuando el sistema lo pide y el usuario no eligió tema. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --gold:#d9b876; --gold-soft:#e8cc8e;
    --doc-acento:#b8901f;
    --canto:color-mix(in srgb, #000 18%, var(--bg));
    --marca-hoja:#d9b876; --acero:#3b4b5b;
    --bg:#060f1a; --surface:#0d2438; --surface-2:rgba(13,36,56,.5);
    --ink:#f3ebd8; --muted:#9a8f73; --fondo-trazo:#f3ebd8; --meta:#7f7560; --apagado:rgba(243,235,216,.16);
    --border:rgba(217,184,118,.3); --border-2:rgba(217,184,118,.18); --border-3:rgba(217,184,118,.22);
    --tex-1:rgba(217,184,118,.16); --tex-2:rgba(243,235,216,.07);
    --shadow:rgba(0,0,0,.55);
    --danger:#e0a4a4; --danger-bg:rgba(224,164,164,.1); --chip:rgba(217,184,118,.1);
  --gold-bg:rgba(217,184,118,.13);
    --row-stripe:rgba(217,184,118,.05);
    --ok:#5cb98a; --ok-bg:rgba(92,185,138,.12);
    --info:#8fbfe0; --info-bg:rgba(143,191,224,.12);
    --warn:#f59e0b; --warn-bg:rgba(245,158,11,.12);
    --topbar:rgba(6,15,26,.75);
    --velo:rgba(0,0,0,.55);
    --velo-suave:rgba(0,0,0,.45);
    --velo-visor:rgba(0,0,0,.9);
    --tgl-off:#27394d; --tgl-knob:#17354f;
    --on-danger:#3b1414; --on-ok:#0c2a1a; --on-info:#0a2233;

    --on-gold:#1a1206;
    --tip:#0a1f33; --on-velo:#f3ebd8;
    --glow-gold:rgba(217,184,118,.40);
    --surface-raised:#143050;
  --surface-sunken:#0a1828;
  --brass:linear-gradient(180deg,#e2c078,#c6a054);
  --ring:0 0 0 3px rgba(217,184,118,.3);
    --ink-soft:#c8c1ab;
    --coral:#e08a63; --coral-text:#e08a63; --coral-bg:rgba(224,138,99,.12);
    --hairline:rgba(217,184,118,.16);
    --glass-chrome:rgba(13,36,56,.50);
    --glass-float:rgba(13,36,56,.62);
    --glass-soft:rgba(13,36,56,.40);
    --glass-ink:rgba(6,15,26,.66);
    --glass-edge:rgba(243,235,216,.08);
  --marco:color-mix(in srgb, var(--gold) 30%, transparent);   /* sobre el mar el dorado al 55 % grita: Samuel pidió bajarlo */
    --labio:rgba(0,0,0,.22); --sombra-contacto:rgba(0,0,0,.40); --sombra-ambiente:rgba(0,0,0,.36); --sombra-hundido:rgba(0,0,0,.22);
    --glass-line:rgba(217,184,118,.22);
    --glass-shadow:0 12px 44px -14px rgba(0,0,0,.65), 0 2px 8px -4px rgba(0,0,0,.40);
    --glass-chrome-solid:rgba(10,28,46,.96);
    --glass-float-solid:#0d2438;
  }
}

/* Lo que el núcleo declara fuera de los bloques de tema pero lleva el dorado o
   la tinta de Amoramar: el latón de los principales, el anillo de foco y el
   velo claro. En Modo mar ya los redefinen los dos bloques oscuros de arriba. */
:root, :root[data-theme="light"]{
  --brass:linear-gradient(180deg,#d3ac5e,#b98e42);
  --ring:0 0 0 3px rgba(193,154,75,.28);
  --velo-suave:rgba(6,15,26,.4);
  --velo:rgba(6,15,26,.5);
  --velo-visor:rgba(6,15,26,.9);
  /* Los interruptores de Amoramar: pista de arena y perilla marina. */
  --tgl-off:#cdbf9b; --tgl-knob:#15314a;
}

/* Las letras de Amoramar: Montserrat para trabajar y EB Garamond itálica para
   el toque editorial. Sus @font-face viven en assets/fonts.css. */
:root{
  /* Quién es este cliente y con qué letras escribe. El nombre lo lee el manual
     de marca para decir de quién es el tema puesto, sin escribirlo a mano. */
  --tema-nombre:"Amoramar";
  --tema-letras:"Montserrat y EB Garamond";
  /* Las sombras de lo que flota llevan el marrón de la arena en su sombra corta.
     En el núcleo es el grafito de la Brújula. */
  --elev-1:inset 0 1px 0 var(--glass-edge), 0 1px 2px rgba(56,44,20,.05), 0 10px 28px -14px var(--shadow);
  --elev-2:inset 0 1px 0 var(--glass-edge), 0 2px 4px rgba(56,44,20,.06), 0 24px 56px -18px var(--shadow);
  --elev-3:inset 0 1px 0 var(--glass-edge), 0 6px 16px rgba(56,44,20,.08), 0 28px 60px -20px var(--shadow);
  --elev-toast:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(56,44,20,.06), 0 12px 34px -10px var(--shadow);
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,system-ui,sans-serif;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --font-sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,system-ui,sans-serif;
  --font-serif:"EB Garamond",Georgia,"Times New Roman",serif;
}

/* ── Dónde escribe Amoramar con su serif ──────────────────────────────────
   Vivían en fonts.css, que desde el 23 sep 2026 es el núcleo de la plataforma: son
   decisiones de ESTE cliente —el wordmark en EB Garamond y los subtítulos en su
   cursiva—, así que viajan con su tema. Nombran `--font-serif` en vez de la
   familia, que es la de este tema. */
/* 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:var(--font-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:var(--font-serif) !important;
}

/* EL MOVIMIENTO DE AMORAMAR (30 sep 2026). El núcleo ya lleva los tiempos y las
   curvas del manual de marca, que son del rediseño de la Brújula y hoy solo los
   ve el dueño con el diseño base. Mientras tanto Amoramar se mueve como se movió
   siempre: estos son sus valores, y el diseño base los pierde al apagar esta
   hoja. No son de un modo claro u oscuro, así que van en su propio bloque. */
:root{
  --amr-dur-fast:130ms; --amr-dur:200ms;
  --amr-ease-out:cubic-bezier(.16,1,.3,1);
  --amr-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --amr-ease-press:cubic-bezier(.34,1.24,.64,1);
}
