/* ============================================================================
   Tokens IDTA — puente (1.9.0, ADR-015).

   idta-brand-tokens.css es la copia literal del kit de marca y NO se edita. Este archivo:
     1. deriva lo que el kit no trae (tipografía, transición, halo de foco, texto secundario con contraste);
     2. mapea los tokens a las variables de Radzen (--rz-*) y de Bootstrap (--bs-*), que es donde viven los
        colores de los componentes: así los grids, inputs, diálogos, botones y modales cambian de marca sin
        tocar cada página.
   Cualquier color nuevo del front se define aquí y se consume con var(); nunca hexadecimales sueltos.
   ============================================================================ */
:root {
    /* --- Derivados ---------------------------------------------------------------------------------- */
    --idta-fuente: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --idta-transicion: 200ms;
    --idta-transicion-rapida: 150ms;
    --idta-transicion-lenta: 260ms;
    --idta-easing: cubic-bezier(.2, .7, .2, 1);
    /* Azul un paso más oscuro para hover/active de botones (blanco sobre #007BFF queda en 4,0:1). */
    --idta-blue-dark: #0062CC;
    --idta-blue-rgb: 0, 123, 255;
    --idta-navy-rgb: 11, 31, 58;
    --idta-cyan-rgb: 0, 229, 255;
    /* El muted del kit (#94A3B8) solo alcanza 2,9:1 sobre blanco: vale para texto grande o decorativo.
       Para texto normal secundario se usa este (4,8:1). */
    --idta-text-secundario: #64748B;
    --idta-text-inverso: #F5FAFF;
    --idta-borde: #D9E2F2;
    --idta-borde-suave: #E6EDFF;
    --idta-superficie-elevada: #FFFFFF;
    --idta-halo: 0 0 0 3px rgba(var(--idta-cyan-rgb), .28);
    --idta-halo-azul: 0 0 0 3px rgba(var(--idta-blue-rgb), .22);
    --idta-shadow-sm: 0 1px 2px rgba(var(--idta-navy-rgb), .06), 0 1px 3px rgba(var(--idta-navy-rgb), .08);
    --idta-shadow-md: 0 6px 18px rgba(var(--idta-navy-rgb), .10);
    /* Estados en su tono oscuro (texto sobre blanco con AA) y tonos del degradado oscuro del kit. */
    --idta-success-oscuro: #047857;
    --idta-success-medio: #059669;
    --idta-error-oscuro: #B91C1C;
    --idta-error-medio: #DC2626;
    --idta-warning-oscuro: #B45309;
    --idta-warning-medio: #D97706;
    --idta-warning-claro: #FFF6E0;
    --idta-navy-2: #102A5C;
    --idta-navy-3: #171347;
    --idta-surface-hover: #D6E2FF;
    --idta-surface-active: #C9D8FA;
    --idta-borde-activo: #B5C7EE;
    --idta-borde-hover: #C3D3F5;
    /* Tintes de los estados sobre fondo claro (texto del mismo color encima). */
    --idta-success-suave: #DCFCE7;
    --idta-warning-suave: #FEF3C7;
    --idta-error-suave: #FEE2E2;
    --idta-blue-suave: #E5F1FF;
    /* Fondo de la modal «¡Venta exitosa!» (más oscuro que el de Radzen, 2026-09-27). */
    --idta-mascara-fuerte-color: var(--idta-navy-deep);
    --idta-mascara-fuerte-opacidad: .8;
    /* Layout y navegación (css/idta-navegacion.css, ADR-016) */
    --idta-header-alto: 3.5rem;
    --idta-sidebar-ancho: 250px;
    --idta-rail-ancho: 64px;
    --idta-menu-fondo: var(--idta-gradient-dark);
    --idta-menu-flyout-fondo: var(--idta-navy-2);
    --idta-menu-item-color: rgba(245, 250, 255, .88);
    --idta-menu-item-color-2: rgba(245, 250, 255, .78);
    --idta-menu-icono: rgba(245, 250, 255, .75);
    --idta-menu-item-hover: rgba(255, 255, 255, .08);
    --idta-menu-item-activo: var(--idta-blue);
    --idta-menu-z: 1000; /* flyouts y popover: sobre la cabecera (3), bajo los diálogos de Radzen (1100) */

    /* --- Radzen 11 (material-base.css) --------------------------------------------------------------- */
    --rz-text-font-family: var(--idta-fuente);
    --rz-font-family: var(--idta-fuente);
    --rz-primary: var(--idta-blue);
    --rz-primary-dark: var(--idta-blue-dark);
    --rz-primary-light: #3395FF;
    --rz-primary-lighter: rgba(var(--idta-blue-rgb), .12);
    --rz-on-primary-lighter: var(--idta-blue-dark);
    --rz-secondary: var(--idta-aqua);
    --rz-secondary-dark: #0F9488;
    --rz-secondary-light: #2DD4BF;
    --rz-secondary-lighter: rgba(20, 184, 166, .12);
    --rz-on-secondary-lighter: #0F766E;
    --rz-success: var(--idta-success-medio); /* #10B981 con blanco queda en 2,5:1 (revisión R7) */
    --rz-warning: var(--idta-warning);
    --rz-danger: var(--idta-error);
    --rz-info: var(--idta-blue);
    --rz-body-background-color: var(--idta-bg);
    --rz-layout-background-color: var(--idta-bg);
    --rz-base-background-color: var(--idta-superficie-elevada);
    --rz-text-color: var(--idta-text);
    --rz-text-title-color: var(--idta-navy-deep);
    --rz-text-secondary-color: var(--idta-text-secundario);
    --rz-text-tertiary-color: var(--idta-text-secundario);
    --rz-border-radius: var(--idta-radius-sm);
    --rz-button-border-radius: var(--idta-radius-sm);
    --rz-input-border-radius: var(--idta-radius-sm);
    --rz-card-border-radius: var(--idta-radius-md);
    --rz-card-shadow: var(--idta-shadow-card);
    --rz-card-border: 1px solid var(--idta-borde-suave);
    --rz-dialog-border-radius: var(--idta-radius-md);
    --rz-dialog-title-color: var(--idta-navy-deep);
    --rz-dialog-title-font-weight: 600;
    --rz-outline-color: var(--idta-blue);
    --rz-outline-width: 2px;
    --rz-transition: var(--idta-transicion) var(--idta-easing);
    /* Grids */
    --rz-grid-header-background-color: var(--idta-superficie-elevada);
    --rz-grid-header-color: var(--idta-navy-deep);
    --rz-grid-header-font-weight: 600;
    --rz-grid-hover-background-color: rgba(var(--idta-blue-rgb), .06);
    --rz-grid-hover-color: var(--idta-navy-deep);
    --rz-grid-stripe-background-color: #FAFCFF;
    --rz-grid-border: 1px solid var(--idta-borde-suave);
    --rz-grid-cell-border: 1px solid var(--idta-borde-suave);
    --rz-grid-header-cell-border-bottom: 1px solid var(--idta-borde);
    --rz-grid-border-radius: var(--idta-radius-md);
    /* Diálogos por encima del menú móvil (sidebar 995 / telón 994 en idta-theme.css). */
    --rz-dialog-mask-zindex: 1100;
    --rz-dialog-zindex: 1101;
    /* Inputs: borde azul + halo cian al enfocar */
    --rz-input-focus-shadow: var(--idta-halo);
    --rz-input-focus-border: 1px solid var(--idta-blue);
    --rz-input-focus-border-block-end: 1px solid var(--idta-blue);
    --rz-input-focus-outline: none;

    /* --- Bootstrap 5.2 -------------------------------------------------------------------------------- */
    --bs-font-sans-serif: var(--idta-fuente);
    --bs-body-font-family: var(--idta-fuente);
    --bs-body-bg: var(--idta-bg);
    --bs-body-color: var(--idta-text);
    --bs-primary: var(--idta-blue);
    --bs-primary-rgb: var(--idta-blue-rgb);
    --bs-secondary-color: var(--idta-text-secundario);
    --bs-success: var(--idta-success);
    --bs-warning: var(--idta-warning);
    --bs-danger: var(--idta-error);
    --bs-link-color: var(--idta-blue);
    --bs-link-hover-color: var(--idta-blue-dark);
    --bs-border-color: var(--idta-borde);
    --bs-border-radius: var(--idta-radius-sm);
    --bs-border-radius-lg: var(--idta-radius-md);
    --bs-border-radius-xl: var(--idta-radius-lg);
    --bs-heading-color: var(--idta-navy-deep);
}