/*!
 * ============================================================================
 *  ALTHEROH DESIGN SYSTEM  ·  capa de tokens (fundacional)
 * ============================================================================
 *  Realineado con el handoff de MOVIRAH OS (2026-08-28, gate 09.2-V):
 *  se adoptan su ESTRUCTURA, escalas, semantica de estado, geometria,
 *  tipografia (Plus Jakarta Sans / Outfit / JetBrains Mono) y reglas de
 *  accesibilidad. Los COLORES DE MARCA siguen siendo los de Altheroh
 *  (azul #104085 / magenta #E5007D): el handoff es explicito en que la marca
 *  del tenant es reemplazable y solo lo semantico es fijo.
 *
 *  Esta hoja SOLO define variables. Orden de carga (ver _LayoutEmpty.cshtml):
 *      dashmix.css -> ESTE ARCHIVO -> altheroh-components.css -> overrides
 *
 *  Modo oscuro: opt-in via html[data-altheroh-theme="dark"] (altheroh-theme.js).
 *  2026-09-06: se retira el re-fijado a claro de #main-container (existia
 *  para no "romper" pantallas aun sin migrar, pero en la practica dejaba el
 *  modo oscuro limitado al lienzo de fondo/sidebar/header — todo el
 *  contenido interno (tarjetas, tablas, formularios) seguia en claro).
 *  Ahora las superficies/texto oscuros de :root se heredan tambien dentro de
 *  #main-container: todo lo que ya consume tokens --ath-* se oscurece solo.
 *  Los componentes Bootstrap/Dashmix crudos que aun no migraron (.block,
 *  .card, table, .form-control...) reciben un retrofit aparte en
 *  altheroh-brand.css (seccion "MODO OSCURO — retrofit de componentes
 *  legacy") para que tambien oscurezcan sin tener que reescribir cada vista.
 * ========================================================================== */

:root {
    /* ===== Primitivas de marca: Azul Altheroh ========================= */
    --ath-blue-50: #E8EEF7;
    --ath-blue-100: #D4E0F1;
    --ath-blue-200: #A9C0E1;
    --ath-blue-300: #7CA0CE;
    --ath-blue-400: #3C6FB4;
    --ath-blue-500: #104085; /* marca dominante (isotipo/favicon) */
    --ath-blue-600: #0C3266;
    --ath-blue-700: #092647;
    --ath-blue-800: #061A33;

    /* ===== Primitivas de marca: Magenta Altheroh (acento) ============= */
    --ath-magenta-50: #FCE3F0;
    --ath-magenta-100: #F9C7E1;
    --ath-magenta-500: #E5007D;
    --ath-magenta-600: #B80064;
    --ath-magenta-700: #8F004E;

    /* ===== Neutros (escala slate, igual que MOVIRAH) ================= */
    --ath-gray-25: #FBFCFE;
    --ath-gray-50: #F8FAFC;
    --ath-gray-100: #F1F5F9;
    --ath-gray-200: #E2E8F0;
    --ath-gray-300: #CBD5E1;
    --ath-gray-400: #94A3B8;
    --ath-gray-500: #55657A;
    --ath-gray-600: #475569;
    --ath-gray-700: #334155;
    --ath-gray-800: #1E293B;
    --ath-gray-900: #0F172A;

    /* ===== Semanticos de estado (FIJOS: no siguen la marca) =========
       Valores canonicos MOVIRAH runtime. Iguales en claro y oscuro. */
    --ath-success: #20B486;
    --ath-success-bg: rgba(32, 180, 134, .13);
    --ath-warning: #F5B942;
    --ath-warning-bg: rgba(245, 185, 66, .15);
    --ath-danger: #E5484D;
    --ath-danger-bg: rgba(229, 72, 77, .13);
    --ath-info: #00A8C6;
    --ath-info-bg: rgba(0, 168, 198, .13);

    /* ===== Superficies + texto (LIGHT) ==============================
       Nombres MOVIRAH: page / panel / card / modal / popover / input /
       elevated. Se conservan --ath-bg / --ath-surface / -raised / -sunken
       como alias para no romper el CSS ya escrito. */
    --ath-surface-page: #F8FAFC;
    --ath-surface-panel: #FFFFFF;
    --ath-surface-card: #FFFFFF;
    --ath-surface-modal: #FFFFFF;
    --ath-surface-popover: #FFFFFF;
    --ath-surface-input: #FFFFFF;
    --ath-surface-elevated: #F1F5F9;

    --ath-border: #E2E8F0;
    --ath-border-subtle: #F1F5F9;
    --ath-border-strong: #CBD5E1;

    --ath-text-primary: #0F172A;
    --ath-text-secondary: #475569;
    --ath-text-muted: #55657A;
    --ath-text-on-primary: #FFFFFF;

    --ath-overlay: rgba(15, 23, 42, .52);

    /* alias de superficie (compatibilidad) */
    --ath-bg: var(--ath-surface-page);
    --ath-surface: var(--ath-surface-panel);
    --ath-surface-raised: var(--ath-surface-popover);
    --ath-surface-sunken: var(--ath-surface-elevated);

    /* Texto directamente sobre el lienzo (breadcrumb, encabezados de
       dashboard). Sigue el tema real; NO se re-fija a claro en oscuro. */
    --ath-on-canvas-text: #0F172A;
    --ath-on-canvas-muted: #55657A;

    /* ===== Accion / marca ========================================= */
    --ath-primary: var(--ath-blue-500);
    --ath-primary-hover: var(--ath-blue-600);
    --ath-primary-active: var(--ath-blue-700);
    --ath-primary-soft: rgba(16, 64, 133, .12);
    --ath-primary-ink: var(--ath-blue-500); /* texto/marca sobre superficie clara */
    --ath-accent: var(--ath-magenta-500);
    --ath-accent-hover: var(--ath-magenta-600);
    --ath-accent-soft: rgba(229, 0, 125, .12);
    --ath-accent-ink: var(--ath-magenta-600);
    --ath-focus: var(--ath-blue-500);
    --ath-focus-ring: rgba(16, 64, 133, .28);

    /* ===== Radios (escala MOVIRAH) ================================ */
    --ath-radius-xs: 6px;
    --ath-radius-sm: 8px;
    --ath-radius-md: 12px; /* radio preferente de control */
    --ath-radius-lg: 16px; /* cards */
    --ath-radius-xl: 24px; /* shells / heroes */
    --ath-radius-pill: 9999px;

    /* ===== Sombras =============================================== */
    --ath-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --ath-shadow-sm: 0 2px 10px rgba(15, 23, 42, .08);
    --ath-shadow-md: 0 12px 30px rgba(15, 23, 42, .12);
    --ath-shadow-lg: 0 24px 64px rgba(15, 23, 42, .18), 0 8px 24px rgba(15, 23, 42, .10);
    /* "Glow" de marca — halo ambiental azul, sutil en claro, mas presente en
       oscuro (ahi lee como un aro de luz sobre el lienzo). Se usa en .ath-card
       y en el retrofit de .block/.card legacy para que toda tarjeta/formulario
       tenga la misma firma visual en ambos temas, en vez de la sombra plana
       gris de Dashmix (casi invisible en claro). */
    --ath-shadow-glow: 0 2px 4px rgba(15, 23, 42, .06), 0 10px 26px rgba(16, 64, 133, .16), 0 3px 10px rgba(16, 64, 133, .10);
    /* Borde con el mismo tinte azul del glow: el blur de una sombra se
       aplana mucho en capturas/compresion de pantalla, el borde no — asi el
       efecto se nota siempre, no solo mirando la pantalla real. */
    --ath-border-glow: rgba(16, 64, 133, .22);

    /* ===== Espaciado (escala base 4px) ========================== */
    --ath-space-1: .25rem;
    --ath-space-2: .5rem;
    --ath-space-3: .75rem;
    --ath-space-4: 1rem;
    --ath-space-5: 1.5rem;
    --ath-space-6: 2rem;
    --ath-space-8: 3rem;
    --ath-space-10: 4rem;

    /* ===== Tipografia (fuentes MOVIRAH) ========================= */
    --ath-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ath-font-head: "Outfit", "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
    --ath-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --ath-font-num: var(--ath-font-head); /* KPI / metricas grandes: display */

    --ath-fs-eyebrow: .5625rem; /* 9px  · metadata tecnica en mayusculas */
    --ath-fs-xs: .75rem; /* 12px · minimo para texto de lectura */
    --ath-fs-sm: .8125rem;
    --ath-fs-md: .875rem;
    --ath-fs-base: 1rem;
    --ath-fs-lg: 1.125rem;
    --ath-fs-xl: 1.375rem;
    --ath-fs-2xl: 1.75rem;
    --ath-fs-3xl: 2.25rem;

    --ath-lh-tight: 1.2;
    --ath-lh-normal: 1.5;
    --ath-fw-regular: 400;
    --ath-fw-medium: 600;
    --ath-fw-bold: 700;
    --ath-fw-black: 800; /* botones, titulos, labels tecnicas */
    --ath-fw-heavy: 900; /* titulos hero / KPI */
    --ath-tracking-tight: -.02em; /* titulos display */
    --ath-tracking-body: -.01em;
    --ath-tracking-label: .14em; /* eyebrows / labels mono */

    /* ===== Controles ========================================== */
    --ath-target: 44px; /* target tactil minimo (NO negociable) */
    --ath-control-compact: 40px; /* densidad compacta: alto visual, no target */
    --ath-icon: 16px;
    --ath-btn-radius: var(--ath-radius-md);

    /* ===== Movimiento / capas =============================== */
    --ath-ease: cubic-bezier(.4, 0, .2, 1);
    --ath-dur-fast: 180ms;
    --ath-dur: 200ms;
    --ath-dur-slow: 300ms;

    --ath-header-h: 4.375rem; /* header fijo de Dashmix (page-header-fixed) */
    --ath-eventbar-h: 72px; /* command bar compacta */
    --ath-eventbar-h-lg: 80px; /* command bar desktop */

    --ath-z-header: 1030;
    --ath-z-eventbar: 1020;
    --ath-z-sticky-actions: 1010;
    --ath-z-modal: 1050;
    --ath-z-overlay: 1085;
}

/* ==========================================================================
 *  MODO OSCURO — chrome + lienzo de fondo.
 *  Superficies profundas MOVIRAH. Los colores de estado NO cambian.
 * ======================================================================== */
html[data-altheroh-theme="dark"] {
    --ath-surface-page: #060A12;
    --ath-surface-panel: #0D1526;
    --ath-surface-card: #0D1526;
    --ath-surface-modal: #101A2E;
    --ath-surface-popover: #131E36;
    --ath-surface-input: #080D1A;
    --ath-surface-elevated: #131E36;

    --ath-border: rgba(255, 255, 255, .10);
    --ath-border-subtle: rgba(255, 255, 255, .05);
    --ath-border-strong: rgba(255, 255, 255, .20);

    --ath-text-primary: #F8FAFC;
    --ath-text-secondary: #94A3B8;
    --ath-text-muted: #8493A8;
    --ath-text-on-primary: #FFFFFF;

    --ath-overlay: rgba(2, 6, 23, .78);

    --ath-on-canvas-text: #F8FAFC;
    --ath-on-canvas-muted: #8FA0BA;

    --ath-primary: #3F7BD1;
    --ath-primary-hover: #5C95E3;
    --ath-primary-active: #79ABEE;
    --ath-primary-soft: rgba(63, 123, 209, .18);
    --ath-primary-ink: #6FA0E0;
    --ath-accent: #FF3DA0;
    --ath-accent-hover: #FF63B4;
    --ath-accent-soft: rgba(255, 61, 160, .18);
    --ath-accent-ink: #FF6FB8;
    --ath-focus: #5C95E3;
    --ath-focus-ring: rgba(92, 149, 227, .42);

    --ath-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --ath-shadow-sm: 0 2px 12px rgba(0, 0, 0, .42);
    --ath-shadow-md: 0 12px 34px rgba(0, 0, 0, .5);
    --ath-shadow-lg: 0 28px 72px rgba(0, 0, 0, .48), 0 8px 24px rgba(0, 0, 0, .32);
    /* En oscuro el glow se nota de verdad: aro de luz azul sobre el lienzo,
       el mismo efecto (accidental) que ya se veia bien en las tarjetas que
       heredaban la sombra clara de Dashmix — aqui queda intencional. */
    --ath-shadow-glow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(63, 123, 209, .26), 0 0 26px rgba(63, 123, 209, .12);
    --ath-border-glow: rgba(92, 149, 227, .38);

    color-scheme: dark;
}

/* ==========================================================================
 *  Alcance del modo oscuro dentro del CONTENIDO.
 *  #main-container YA NO re-fija sus superficies a claro: hereda las mismas
 *  variables oscuras que :root/html[data-altheroh-theme="dark"], asi que
 *  cualquier componente que consuma tokens --ath-* (tarjetas, tablas,
 *  botones, badges, formularios ya migrados) se oscurece automaticamente.
 *  El retrofit para componentes Bootstrap/Dashmix crudos vive en
 *  altheroh-brand.css.
 * ======================================================================== */