/* =====================================================================
   SHAM · Tema "Pulso" sobre Radzen Standard (claro) / Standard Dark (oscuro)
   Especificación: Docs/especificaciones/06-identidad-visual.md

   - Los colores de la marca se definen UNA vez como tokens --sham-*.
   - Las variables de Radzen (--rz-*) se derivan de esos tokens.
   - Modo oscuro: atributo data-sham-tema="oscuro" en <html> (lo pone App.razor
     según la cookie, o site.js según el sistema operativo la primera vez).
   - Regla de contraste: texto >= 4,5:1 e iconos >= 3:1 en ambos modos.
     Nunca claro sobre claro ni oscuro sobre oscuro.
   ===================================================================== */

/* ---------- Fuentes (servidas por SHAM, licencia OFL en /fonts) ---------- */
@font-face { font-family: "Sora"; src: url("../fonts/sora-latin-wght.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Modo claro ---------- */
:root {
    /* Marca */
    --sham-primario: #1A5AA6;
    --sham-profundo: #0E2F57;
    --sham-senal: #E5543E;          /* solo acentos gráficos: no usar para texto pequeño sobre claro */
    --sham-fondo: #F4F6F9;
    --sham-superficie: #FFFFFF;
    --sham-tinta: #0F1B2B;
    --sham-tinta-2: #4A5869;        /* texto secundario */
    --sham-linea: #DDE3EB;
    --sham-suave: #E8EFF8;          /* fondo de elementos activos */
    --sham-sobre-suave: #0E2F57;    /* texto sobre --sham-suave */
    --sham-sobre-primario: #FFFFFF;
    --sham-panel-marca: #0E2F57;    /* panel del login (siempre oscuro) */
    --sham-panel-texto: #FFFFFF;    /* textos del panel del login (iguales en ambos modos) */
    --sham-panel-texto-2: #DCE6F3;
    --sham-panel-texto-3: #C3D2E6;
    --sham-panel-acento: #FF8A75;   /* coral aclarado: 5,8:1 sobre el panel */
    --sham-sombra: 0 8px 24px rgba(15, 27, 43, 0.16);   /* menús desplegables */
    --sham-sombra-hoja: 0 -10px 30px rgba(10, 17, 27, 0.18);   /* hoja del login en el móvil */
    --sham-hover: #E9EDF2;          /* fondo al pasar el ratón sobre filas y opciones */
    --sham-velo: rgba(15, 27, 43, 0.45);   /* fondo detrás del menú desplegable en el móvil */
    --sham-pista: #E3E8EF;          /* pistas de barras, esqueletos y chips neutros */

    --sham-fuente-titulos: "Sora", "Segoe UI", system-ui, sans-serif;
    --sham-fuente-texto: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Neutros de Radzen (50 = más claro, 900 = más oscuro), con tinte azul */
    --rz-white: #FFFFFF;
    --rz-black: #000000;
    --rz-base: #DDE3EB;
    --rz-base-50: #FFFFFF;
    --rz-base-100: #F4F6F9;
    --rz-base-200: #E9EDF2;
    --rz-base-300: #DDE3EB;
    --rz-base-400: #C3CCD8;
    --rz-base-500: #8592A5;
    --rz-base-600: #5A6779;
    --rz-base-700: #4A5869;
    --rz-base-800: #263243;
    --rz-base-900: #0F1B2B;
    --rz-base-light: #E9EDF2;
    --rz-base-lighter: #F4F6F9;
    --rz-base-dark: #4A5869;
    --rz-base-darker: #0F1B2B;
    --rz-on-base: #0F1B2B;
    --rz-on-base-light: #0F1B2B;
    --rz-on-base-lighter: #0F1B2B;
    --rz-on-base-dark: #FFFFFF;
    --rz-on-base-darker: #FFFFFF;

    /* Primario */
    --rz-primary: #1A5AA6;
    --rz-primary-light: #3A74BC;
    --rz-primary-lighter: rgba(26, 90, 166, 0.12);
    --rz-primary-dark: #154C8D;
    --rz-primary-darker: #0E2F57;
    --rz-on-primary: #FFFFFF;
    --rz-on-primary-light: #FFFFFF;
    --rz-on-primary-lighter: #0E2F57;
    --rz-on-primary-dark: #FFFFFF;
    --rz-on-primary-darker: #FFFFFF;

    /* Secundario: azul profundo */
    --rz-secondary: #2B4C7E;
    --rz-secondary-light: #3D6098;
    --rz-secondary-lighter: rgba(43, 76, 126, 0.12);
    --rz-secondary-dark: #213C66;
    --rz-secondary-darker: #0E2F57;
    --rz-on-secondary: #FFFFFF;
    --rz-on-secondary-light: #FFFFFF;
    --rz-on-secondary-lighter: #0E2F57;
    --rz-on-secondary-dark: #FFFFFF;
    --rz-on-secondary-darker: #FFFFFF;

    /* Semánticos (todos >= 4,5:1 con su texto) */
    --rz-info: #1D6A9E;
    --rz-info-light: #2B7DB5;
    --rz-info-lighter: rgba(29, 106, 158, 0.12);
    --rz-info-dark: #175884;
    --rz-info-darker: #124469;
    --rz-on-info: #FFFFFF;
    --rz-on-info-light: #FFFFFF;
    --rz-on-info-lighter: #124469;
    --rz-on-info-dark: #FFFFFF;
    --rz-on-info-darker: #FFFFFF;

    --rz-success: #1C7A50;
    --rz-success-light: #23905F;
    --rz-success-lighter: rgba(28, 122, 80, 0.12);
    --rz-success-dark: #176642;
    --rz-success-darker: #105033;
    --rz-on-success: #FFFFFF;
    --rz-on-success-light: #FFFFFF;
    --rz-on-success-lighter: #105033;
    --rz-on-success-dark: #FFFFFF;
    --rz-on-success-darker: #FFFFFF;

    --rz-warning: #915708;
    --rz-warning-light: #A8660D;
    --rz-warning-lighter: rgba(145, 87, 8, 0.12);
    --rz-warning-dark: #7A4906;
    --rz-warning-darker: #5E3804;
    --rz-on-warning: #FFFFFF;
    --rz-on-warning-light: #FFFFFF;
    --rz-on-warning-lighter: #5E3804;
    --rz-on-warning-dark: #FFFFFF;
    --rz-on-warning-darker: #FFFFFF;

    --rz-danger: #B83227;
    --rz-danger-light: #C8443A;
    --rz-danger-lighter: rgba(184, 50, 39, 0.12);
    --rz-danger-dark: #9C2A20;
    --rz-danger-darker: #7D2119;
    --rz-on-danger: #FFFFFF;
    --rz-on-danger-light: #FFFFFF;
    --rz-on-danger-lighter: #7D2119;
    --rz-on-danger-dark: #FFFFFF;
    --rz-on-danger-darker: #FFFFFF;

    /* Series de gráficos */
    --rz-series-1: #1A5AA6;
    --rz-series-2: #E5543E;
    --rz-series-3: #1C7A50;
    --rz-series-4: #915708;
    --rz-series-5: #6B4FA3;
    --rz-series-6: #0E8C99;
    --rz-series-7: #8592A5;
    --rz-series-8: #0E2F57;

    /* Tipografía, superficies y forma */
    --rz-text-font-family: var(--sham-fuente-texto);
    --rz-body-background-color: var(--sham-fondo);
    --rz-base-background-color: var(--sham-superficie);
    --rz-text-title-color: var(--sham-tinta);
    --rz-text-color: var(--rz-base-800);
    --rz-text-secondary-color: var(--sham-tinta-2);
    --rz-text-tertiary-color: var(--rz-base-600);
    --rz-link-color: var(--rz-primary);
    --rz-link-hover-color: var(--rz-primary-darker);
    --rz-border-radius: 8px;
    --rz-outline-color: var(--rz-primary);

    /* Estructura: encabezado y menú claros */
    --rz-header-background-color: var(--sham-superficie);
    --rz-header-color: var(--sham-tinta);
    --rz-header-border: 1px solid var(--sham-linea);
    --rz-header-shadow: none;
    --rz-sidebar-background-color: var(--sham-superficie);
    --rz-sidebar-color: var(--sham-tinta);
    --rz-grid-header-background-color: var(--sham-fondo);

    /* Bordes de campos con 3:1 frente a su fondo (WCAG 1.4.11) */
    --rz-input-border: var(--rz-border-width) solid var(--rz-base-500);
    --rz-input-border-block-end: var(--rz-border-width) solid var(--rz-base-500);
    --rz-input-hover-border: var(--rz-border-width) solid var(--rz-primary);
    --rz-input-hover-border-block-end: var(--rz-border-width) solid var(--rz-primary);
    --rz-grid-filter-color: var(--rz-text-tertiary-color);   /* el de Radzen (deshabilitado) no llega a 3:1 */

    color-scheme: light;
}

/* ---------- Modo oscuro ---------- */
:root[data-sham-tema="oscuro"] {
    --sham-primario: #64A0EA;
    --sham-profundo: #0A1B31;
    --sham-senal: #FF7A63;
    --sham-fondo: #0A111B;
    --sham-superficie: #111B29;
    --sham-tinta: #E3EAF3;
    --sham-tinta-2: #B4C0D0;
    --sham-linea: #22324A;
    --sham-suave: #16294A;
    --sham-sobre-suave: #A9CBF5;
    --sham-sobre-primario: #0A1B31;
    --sham-panel-marca: #0E2F57;
    --sham-sombra: 0 8px 24px rgba(0, 0, 0, 0.55);
    --sham-sombra-hoja: 0 -10px 30px rgba(0, 0, 0, 0.5);
    --sham-hover: #1A2840;
    --sham-velo: rgba(0, 0, 0, 0.6);
    --sham-pista: #22324A;

    /* Neutros: en Radzen oscuro el 900 es el fondo y el 50 el texto más claro */
    --rz-base: #3A4A60;
    --rz-base-50: #F3F6FA;
    --rz-base-100: #E3EAF3;
    --rz-base-200: #CBD5E2;
    --rz-base-300: #B4C0D0;
    --rz-base-400: #95A3B7;
    --rz-base-500: #4A5A70;   /* fondo de botones y etiquetas "light": 5,7:1 con el texto */
    --rz-base-600: #3A4A60;
    --rz-base-700: #22324A;
    --rz-base-800: #111B29;
    --rz-base-900: #0A111B;
    --rz-base-light: #CBD5E2;
    --rz-base-lighter: #F3F6FA;
    --rz-base-dark: #22324A;
    --rz-base-darker: #0A111B;
    --rz-on-base: #E3EAF3;
    --rz-on-base-light: #0A111B;
    --rz-on-base-lighter: #0A111B;
    --rz-on-base-dark: #E3EAF3;
    --rz-on-base-darker: #E3EAF3;

    --rz-primary: #64A0EA;
    --rz-primary-light: #8AB8F0;
    --rz-primary-lighter: rgba(100, 160, 234, 0.18);
    --rz-primary-dark: #4F8BD6;
    --rz-primary-darker: #2F68B0;
    --rz-on-primary: #0A1B31;
    --rz-on-primary-light: #0A1B31;
    --rz-on-primary-lighter: #A9CBF5;
    --rz-on-primary-dark: #0A1B31;
    --rz-on-primary-darker: #FFFFFF;

    --rz-secondary: #8AB8F0;
    --rz-secondary-light: #A9CBF5;
    --rz-secondary-lighter: rgba(138, 184, 240, 0.18);
    --rz-secondary-dark: #6E9FDA;
    --rz-secondary-darker: #2F68B0;
    --rz-on-secondary: #0A1B31;
    --rz-on-secondary-light: #0A1B31;
    --rz-on-secondary-lighter: #A9CBF5;
    --rz-on-secondary-dark: #0A1B31;
    --rz-on-secondary-darker: #FFFFFF;

    --rz-info: #6FB6E8;
    --rz-info-light: #92C8EE;
    --rz-info-lighter: rgba(111, 182, 232, 0.18);
    --rz-info-dark: #5AA2D6;
    --rz-info-darker: #3F86BB;
    --rz-on-info: #0A1B31;
    --rz-on-info-light: #0A1B31;
    --rz-on-info-lighter: #92C8EE;
    --rz-on-info-dark: #0A1B31;
    --rz-on-info-darker: #0A1B31;

    --rz-success: #4CC38A;
    --rz-success-light: #72D2A4;
    --rz-success-lighter: rgba(76, 195, 138, 0.18);
    --rz-success-dark: #3BAD77;
    --rz-success-darker: #2E9564;
    --rz-on-success: #0A1B31;
    --rz-on-success-light: #0A1B31;
    --rz-on-success-lighter: #72D2A4;
    --rz-on-success-dark: #0A1B31;
    --rz-on-success-darker: #0A1B31;

    --rz-warning: #E3A54A;
    --rz-warning-light: #EBB96E;
    --rz-warning-lighter: rgba(227, 165, 74, 0.18);
    --rz-warning-dark: #CF9035;
    --rz-warning-darker: #B87C25;
    --rz-on-warning: #0A1B31;
    --rz-on-warning-light: #0A1B31;
    --rz-on-warning-lighter: #EBB96E;
    --rz-on-warning-dark: #0A1B31;
    --rz-on-warning-darker: #0A1B31;

    --rz-danger: #FF7A63;
    --rz-danger-light: #FF9886;
    --rz-danger-lighter: rgba(255, 122, 99, 0.18);
    --rz-danger-dark: #EC6650;
    --rz-danger-darker: #D4523D;
    --rz-on-danger: #0A1B31;
    --rz-on-danger-light: #0A1B31;
    --rz-on-danger-lighter: #FF9886;
    --rz-on-danger-dark: #0A1B31;
    --rz-on-danger-darker: #0A1B31;

    --rz-series-1: #64A0EA;
    --rz-series-2: #FF7A63;
    --rz-series-3: #4CC38A;
    --rz-series-4: #E3A54A;
    --rz-series-5: #B49CE6;
    --rz-series-6: #4FC3CF;
    --rz-series-7: #95A3B7;
    --rz-series-8: #CBD5E2;

    --rz-body-background-color: var(--sham-fondo);
    --rz-base-background-color: var(--sham-superficie);
    --rz-text-title-color: var(--rz-base-50);
    --rz-text-color: var(--rz-base-100);
    --rz-text-secondary-color: var(--rz-base-300);
    --rz-text-tertiary-color: var(--rz-base-400);
    --rz-link-color: var(--rz-primary-light);
    --rz-link-hover-color: var(--rz-base-50);

    --rz-header-background-color: var(--sham-superficie);
    --rz-header-color: var(--sham-tinta);
    --rz-header-border: 1px solid var(--sham-linea);
    --rz-sidebar-background-color: var(--sham-superficie);
    --rz-sidebar-color: var(--sham-tinta);
    --rz-grid-header-background-color: var(--sham-fondo);

    /* Bordes de campos con 3:1 frente a la superficie oscura */
    --rz-input-border: var(--rz-border-width) solid #63738A;
    --rz-input-border-block-end: var(--rz-border-width) solid #63738A;

    color-scheme: dark;
}

/* ---------- Base ---------- */
html, body {
    font-family: var(--sham-fuente-texto);
    background-color: var(--sham-fondo);
    background-image: none;   /* quita la decoración de fondo del tema Standard */
    color: var(--rz-text-color);
}

h1, h2, h3, h4, h5, h6,
.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6,
.rz-text-display-h1, .rz-text-display-h2, .rz-text-display-h3,
.rz-text-display-h4, .rz-text-display-h5, .rz-text-display-h6 {
    font-family: var(--sham-fuente-titulos);
    color: var(--rz-text-title-color);
    letter-spacing: -0.01em;
}

a { color: var(--rz-link-color); }
a:hover { color: var(--rz-link-hover-color); }

/* Foco visible y de marca en todo el sistema */
:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 2px; }

/* Logos que cambian con el modo */
.sham-solo-oscuro { display: none !important; }
:root[data-sham-tema="oscuro"] .sham-solo-claro { display: none !important; }
:root[data-sham-tema="oscuro"] .sham-solo-oscuro { display: inline-block !important; }

/* Iconos de Material Symbols sueltos */
.sham-icono { font-family: "Material Symbols"; font-weight: normal; font-style: normal; font-size: 1.25rem; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}