@font-face {
    font-family: 'Nunito';
    src: url('../../fonts/nunito/Nunito-Variable.ttf') format('truetype');
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('../../fonts/nunito/Nunito-Italic-Variable.ttf') format('truetype');
    font-weight: 200 1000;
    font-style: italic;
    font-display: swap;
}

/* ============================================================================
   BSM DESIGN SYSTEM — Tokens semánticos (fuente única para las 4 webapps)
   ----------------------------------------------------------------------------
   REGLA DE ORO: PROHIBIDO usar colores hex sueltos en el CSS/JS de módulos.
   Todo color, radio, sombra, espacio y tipografía sale de estas variables.
   Los temas viven en themes.css y SOLO redefinen estos tokens vía
   :root[data-bsm-theme="clave"]. El default de :root es el tema "azul-bsm".
   Nombrar SIEMPRE por rol (--bsm-surface), nunca por color (--bsm-white).
   ============================================================================ */

:root {
    color-scheme: light;

    /* --- Marca / primario ------------------------------------------------- */
    --bsm-primary: #1a2b4b;
    --bsm-primary-hover: #22375d;
    --bsm-primary-active: #142138;
    --bsm-primary-subtle: #e8edf5;
    --bsm-primary-contrast: #ffffff;

    /* Alias heredados (compatibilidad con CSS/JS existente) */
    --bsm-primary-dark: #152238;
    --bsm-primary-light: #243656;
    --bsm-primary-accent: #2d5a8e;

    /* --- Superficies ------------------------------------------------------ */
    --bsm-content-bg: #f5f7fb;
    --bsm-surface: #ffffff;
    --bsm-surface-raised: #ffffff;
    --bsm-surface-sunken: #eef1f7;
    --bsm-overlay: rgba(17, 24, 39, 0.55);

    /* --- Texto ------------------------------------------------------------ */
    --bsm-text: #3a4256;
    --bsm-text-muted: #858796;
    --bsm-text-subtle: #9aa0ac;
    --bsm-text-on-accent: #ffffff;

    /* --- Bordes / separadores -------------------------------------------- */
    --bsm-border: #e3e6ee;
    --bsm-border-strong: #d1d7e3;

    /* --- Estados semánticos ---------------------------------------------- */
    --bsm-success: #1f9d57;
    --bsm-success-hover: #23ac60;
    --bsm-success-subtle: #e6f5ec;
    --bsm-success-contrast: #ffffff;

    --bsm-danger: #d63b48;
    --bsm-danger-hover: #e14453;
    --bsm-danger-subtle: #fdecee;
    --bsm-danger-contrast: #ffffff;

    --bsm-warning: #e0a800;
    --bsm-warning-hover: #f0b70d;
    --bsm-warning-subtle: #fff5db;
    --bsm-warning-contrast: #5b4700;

    --bsm-info: #2d7fe0;
    --bsm-info-hover: #368bee;
    --bsm-info-subtle: #e6f0fc;
    --bsm-info-contrast: #ffffff;

    /* --- Tablas ----------------------------------------------------------- */
    --bsm-table-header-bg: var(--bsm-primary);
    --bsm-table-header-fg: #ffffff;
    --bsm-table-stripe: #f7f9fc;
    --bsm-table-hover: #eef2fb;
    --bsm-table-border: var(--bsm-border);

    /* --- Sidebar ---------------------------------------------------------- */
    --bsm-sidebar-bg: #1a2b4b;
    --bsm-sidebar-bg-2: #152238;
    --bsm-sidebar-fg: #cdd5e4;
    --bsm-sidebar-fg-muted: #8a97b0;
    --bsm-sidebar-active-fg: #ffffff;
    --bsm-sidebar-active-bg: rgba(255, 255, 255, 0.10);
    --bsm-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --bsm-sidebar-border: rgba(255, 255, 255, 0.08);
    --bsm-sidebar-brand-fg: #ffffff;
    /* Indicador de ítem activo: tinte claro derivado del primario de cada tema */
    --bsm-sidebar-accent: color-mix(in srgb, var(--bsm-primary) 42%, #ffffff);

    /* --- Topbar ----------------------------------------------------------- */
    --bsm-topbar-bg: #ffffff;
    --bsm-topbar-fg: var(--bsm-text);
    --bsm-topbar-border: var(--bsm-border);

    /* --- Foco (accesibilidad) -------------------------------------------- */
    --bsm-focus-ring: rgba(45, 90, 142, 0.35);

    /* --- Radios ----------------------------------------------------------- */
    --bsm-radius-sm: 6px;
    --bsm-radius-md: 10px;
    --bsm-radius-lg: 16px;
    --bsm-radius-pill: 999px;

    /* --- Sombras / elevaciones ------------------------------------------- */
    --bsm-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
    --bsm-shadow-2: 0 4px 12px rgba(16, 24, 40, 0.10), 0 2px 4px rgba(16, 24, 40, 0.06);
    --bsm-shadow-3: 0 12px 28px rgba(16, 24, 40, 0.14), 0 6px 12px rgba(16, 24, 40, 0.08);

    /* --- Espaciado -------------------------------------------------------- */
    --bsm-space-1: 4px;
    --bsm-space-2: 8px;
    --bsm-space-3: 12px;
    --bsm-space-4: 16px;
    --bsm-space-5: 24px;
    --bsm-space-6: 32px;

    /* --- Movimiento ------------------------------------------------------- */
    --bsm-transition-fast: 110ms cubic-bezier(0.4, 0, 0.2, 1);
    --bsm-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
    --bsm-transition-slow: 260ms cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Tipografía ------------------------------------------------------- */
    --bsm-font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bsm-font-size-xs: 0.75rem;
    --bsm-font-size-sm: 0.8125rem;
    --bsm-font-size-base: 0.875rem;
    --bsm-font-size-md: 1rem;
    --bsm-font-size-lg: 1.125rem;
    --bsm-font-size-xl: 1.375rem;
    --bsm-font-weight-normal: 400;
    --bsm-font-weight-medium: 600;
    --bsm-font-weight-bold: 700;
    --bsm-font-weight-black: 800;
}

html,
body {
    font-family: var(--bsm-font-family);
    height: 100%;
    min-height: 100%;
}

body {
    color: var(--bsm-text);
}

body#page-top {
    background-color: var(--bsm-content-bg);
}

#content-wrapper {
    background-color: var(--bsm-content-bg);
}

.content-bsm {
    background-color: var(--bsm-content-bg);
}

/* Foco visible y consistente en todos los controles interactivos */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--bsm-focus-ring);
    border-color: var(--bsm-primary-accent);
}

/* Utilidades de superficie reutilizables */
.bsm-surface {
    background-color: var(--bsm-surface);
    border: 1px solid var(--bsm-border);
    border-radius: var(--bsm-radius-md);
    box-shadow: var(--bsm-shadow-1);
}