/* ============================================
   NEXPRO CONNECT - CSS VARIABLES
   Variables globales de colores, tipografía y espaciado
   ============================================ */

:root {
    /* Marca oficial (sitio nexpro) — priorizar azul + blanco */
    --nexpro-brand-primary: #1450ff;
    --nexpro-brand-success: #28dc64;
    --nexpro-brand-accent: #f02864;
    --nexpro-brand-primary-soft: rgba(20, 80, 255, 0.12);
    --nexpro-brand-primary-soft-strong: rgba(20, 80, 255, 0.2);
    /* ===== COLORES PRINCIPALES ===== */
    --nexpro-primary: #1450ff;
    /* Componentes del primario, para tintes con alfa: rgba(var(--nexpro-primary-rgb), .08) */
    --nexpro-primary-rgb: 20, 80, 255;
    --nexpro-primary-dark: #0d3dcc;
    --nexpro-primary-light: #5b7cff;
    --nexpro-primary-lighter: #e8efff;
    /* ===== GLASSMORPHISM & SHADOWS ===== */
    --nexpro-glass-bg: rgba(255, 255, 255, 0.82);
    --nexpro-glass-border: rgba(255, 255, 255, 0.6);
    --nexpro-blue-glow: rgba(0, 82, 255, 0.15);
    /* ===== CALIFICACIONES===== */
    --nexpro-score-a: var(--nexpro-success);
    --nexpro-score-b: #8bc34a;
    --nexpro-score-c: var(--nexpro-warning);
    --nexpro-score-d: #ff7043;
    --nexpro-score-e: var(--nexpro-danger);
    /* ===== CALIFICACIONES A-E =====
       Fondo tenue y texto fuerte, no el color pleno: en pleno el verde de marca da
       1,9:1 contra el blanco y la letra no se lee. Contrastes medidos sobre su
       propio fondo: A 4,6:1 · B 4,9:1 · C 4,8:1 · D 4,7:1 · E 4,8:1. */
    --nexpro-grade-a-bg: #e6f4ea;
    --nexpro-grade-a-text: #1e8e3e;
    --nexpro-grade-b-bg: #eef4e4;
    --nexpro-grade-b-text: #4f7a21;
    --nexpro-grade-c-bg: #fff4e0;
    --nexpro-grade-c-text: #b45309;
    --nexpro-grade-d-bg: #ffece0;
    --nexpro-grade-d-text: #c2410c;
    --nexpro-grade-e-bg: #fce8e6;
    --nexpro-grade-e-text: #d93025;
    /* Relleno pleno para las barras y para la pastilla sobre fondo de color. Vivos y con
       tinta oscura encima; al revés, apagados con letra blanca, la escala entera se veía
       sin vida. Son los mismos en claro y en oscuro. */
    --nexpro-grade-a-solid: #2fb457;
    --nexpro-grade-b-solid: #7cb342;
    --nexpro-grade-c-solid: #f5a623;
    --nexpro-grade-d-solid: #f2711c;
    --nexpro-grade-e-solid: #ff5a5f;
    --nexpro-grade-on-solid: #1f2937;
    /* Línea de contorno para la pastilla plena: con los tonos vivos el borde contra un fondo
       claro queda en 1,8:1 y se desdibuja. */
    --nexpro-grade-edge: rgba(0, 0, 0, 0.2);
    /* ===== COMPONENTES ESPECÍFICOS: TABLAS =====
       Los totales son una franja tenue de marca y el peso lo dan el borde superior
       y la negrita. En banda oscura pesaban más que los datos y en modo oscuro
       habrían quedado sin contraste contra la tarjeta. */
    --nexpro-bg-table-footer: var(--nexpro-primary-lighter);
    --nexpro-text-table-footer: var(--nexpro-text-primary);
    /* Etiqueta del grupo (ej. "Total flota"): 5,0:1 sobre la franja clara. */
    --nexpro-text-table-footer-label: var(--nexpro-primary);
    --nexpro-border-table-footer: var(--nexpro-primary);
    /* ===== COMPONENTES ESPECÍFICOS: GRÁFICOS ===== */
    --nexpro-chart-manejo: var(--nexpro-primary);
    --nexpro-chart-ralenti: var(--nexpro-gray-600);
    /* ===== COLORES SECUNDARIOS ===== */
    --nexpro-blue: #134be6;
    --nexpro-blue-dark: #0f3ab8;
    --nexpro-blue-light: #3a6ff0;
    /* ===== COLORES DE ESTADO ===== */
    --nexpro-success: #28dc64;
    --nexpro-success-light: rgba(40, 220, 100, 0.18);
    --nexpro-warning: #ffa500;
    --nexpro-warning-light: #fff4e0;
    --nexpro-danger: #dc3545;
    --nexpro-danger-light: #f8d7da;
    --nexpro-info: #134be6;
    --nexpro-info-light: #e3edff;
    /* ===== ESTADOS (Badges) ===== */
    --nexpro-success-bg: #e6f4ea;
    --nexpro-success-text: #1e8e3e;
    --nexpro-warning-text: #b45309;
    --nexpro-danger-bg: #fce8e6;
    --nexpro-danger-text: #d93025;
    /* ===== AJUSTES FINOS DE INTERFAZ ===== */
    --nexpro-surface-border-subtle: rgba(0, 0, 0, 0.05);
    --nexpro-chart-grid: #edf1f7;
    --nexpro-chart-tick: #8fa1b7;
    --nexpro-dashboard-dot: #cbd5e1;
    /* ===== COLORES NEUTROS ===== */
    --nexpro-white: #ffffff;
    --nexpro-black: #000000;
    --nexpro-gray-50: #f8f9fa;
    --nexpro-gray-100: #e9ecef;
    --nexpro-gray-200: #dee2e6;
    --nexpro-gray-300: #ced4da;
    --nexpro-gray-400: #adb5bd;
    --nexpro-gray-500: #6c757d;
    --nexpro-gray-600: #495057;
    --nexpro-gray-700: #343a40;
    --nexpro-gray-800: #212529;
    --nexpro-gray-900: #0d1117;
    /* ===== COLORES DE FONDO ===== */
    --nexpro-bg-primary: #ffffff;
    --nexpro-bg-secondary: #f0f0f0;
    --nexpro-bg-sidebar: #ffffff;
    --nexpro-bg-card: #ffffff;
    --nexpro-bg-hover: #e8e8e8;
    /* ===== COLORES DE TEXTO ===== */
    --nexpro-text-primary: #000000;
    /*
     * Los tres niveles de gris cumplen WCAG AA (4.5:1) sobre fondo claro, medidos
     * sobre #ffffff: secondary 6.1:1 y muted 4.7:1. El muted anterior (#adb5bd)
     * daba 2.1:1, ilegible para etiquetas y placeholders; corregirlo obligó a
     * oscurecer también el secondary para que siga habiendo un salto perceptible
     * entre ambos niveles.
     */
    --nexpro-text-secondary: #5c636b;
    --nexpro-text-muted: #6e757d;
    --nexpro-text-white: #ffffff;
    /* ===== TIPOGRAFÍA ===== */
    --nexpro-font-family: 'Segoe UI', 'SF Display', -apple-system, BlinkMacSystemFont, sans-serif;
    --nexpro-font-family-condensed: 'Segoe Condensed', 'Segoe UI', sans-serif;
    --nexpro-font-size-xs: 0.75rem;
    /* 12px */
    --nexpro-font-size-sm: 0.875rem;
    /* 14px */
    --nexpro-font-size-base: 1rem;
    /* 16px */
    --nexpro-font-size-lg: 1.125rem;
    /* 18px */
    --nexpro-font-size-xl: 1.25rem;
    /* 20px */
    --nexpro-font-size-2xl: 1.5rem;
    /* 24px */
    --nexpro-font-size-3xl: 1.875rem;
    /* 30px */
    --nexpro-font-size-4xl: 2.25rem;
    /* 36px */
    /* ===== UI KIT: TIPOGRAFIA ===== */
    --nexpro-type-page-title-size: 1.35rem;
    --nexpro-type-page-title-weight: 600;
    --nexpro-type-section-title-size: 1rem;
    --nexpro-type-section-title-weight: 600;
    --nexpro-type-card-label-size: 0.72rem;
    --nexpro-type-card-label-weight: 600;
    --nexpro-type-card-value-size: 1.45rem;
    --nexpro-type-card-value-weight: 700;
    --nexpro-type-eyebrow-spacing: 0.08em;
    --nexpro-type-tight-tracking: -0.02em;

    --nexpro-font-weight-light: 300;
    --nexpro-font-weight-normal: 400;
    --nexpro-font-weight-medium: 500;
    --nexpro-font-weight-semibold: 600;
    --nexpro-font-weight-bold: 700;
    /* ===== ESPACIADO ===== */
    --nexpro-spacing-xs: 0.25rem;
    /* 4px */
    --nexpro-spacing-sm: 0.5rem;
    /* 8px */
    --nexpro-spacing-md: 1rem;
    /* 16px */
    --nexpro-spacing-lg: 1.5rem;
    /* 24px */
    --nexpro-spacing-xl: 2rem;
    /* 32px */
    --nexpro-spacing-2xl: 3rem;
    /* 48px */
    --nexpro-spacing-3xl: 4rem;
    /* 64px */
    /* ===== BORDES ===== */
    --nexpro-border-radius-sm: 0.25rem;
    /* 4px */
    --nexpro-border-radius-md: 0.5rem;
    /* 8px */
    --nexpro-border-radius-lg: 0.75rem;
    /* 12px */
    --nexpro-border-radius-xl: 1rem;
    /* 16px */
    --nexpro-border-radius-full: 9999px;
    --nexpro-border-color: #dee2e6;
    --nexpro-border-width: 1px;
    /* ===== SOMBRAS ===== */
    --nexpro-shadow-xs: 0 1px 1px 0 rgba(0, 0, 0, 0.04);
    --nexpro-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --nexpro-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --nexpro-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --nexpro-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /* ===== TRANSICIONES ===== */
    --nexpro-transition-fast: 150ms ease-in-out;
    --nexpro-transition-base: 250ms ease-in-out;
    --nexpro-transition-slow: 350ms ease-in-out;
    /* ===== Z-INDEX ===== */
    --nexpro-z-dropdown: 1000;
    --nexpro-z-sticky: 1020;
    --nexpro-z-fixed: 1030;
    --nexpro-z-modal-backdrop: 1040;
    --nexpro-z-modal: 1050;
    --nexpro-z-popover: 1060;
    --nexpro-z-tooltip: 1070;
    --nexpro-z-loading: 9999;
    /* ===== SIDEBAR ===== */
    --nexpro-sidebar-width: 280px;
    --nexpro-sidebar-collapsed-width: 80px;
    /* ===== HEADER ===== */
    --nexpro-header-height: 64px;
    --nexpro-mobile-topbar-height: 64px;
}

/* Modo oscuro (para futuro) */
[data-theme="dark"] {
    --nexpro-bg-primary: #0d1117;
    --nexpro-bg-secondary: #161b22;
    --nexpro-bg-sidebar: #161b22;
    --nexpro-bg-card: #212529;
    --nexpro-text-primary: #ffffff;
    /* Sobre superficie oscura los grises se aclaran: 7.5:1 y 5.0:1 sobre #212529. */
    --nexpro-text-secondary: #adb5bd;
    --nexpro-text-muted: #8b949e;
    --nexpro-border-color: #30363d;
    /* La franja de totales se aclara en vez de oscurecerse: sobre #212529 un gris
       más oscuro desaparece. Da 13:1 para los números y 5,9:1 para la etiqueta. */
    /* Los chips de estado siguen el mismo criterio que las calificaciones: fondo apenas
       teñido y texto claro. Sin esto quedaban en su versión clara sobre la tarjeta oscura.
       Contrastes sobre su propio fondo: 9,3:1 el verde, 7,9:1 el ámbar y 7,1:1 el rojo. */
    --nexpro-success-bg: #12301f;
    --nexpro-success-text: #6ee7a0;
    --nexpro-warning-light: #33260f;
    --nexpro-warning-text: #f0b357;
    --nexpro-danger-bg: #341c1a;
    --nexpro-danger-text: #f4948a;

    /* Las calificaciones se invierten: fondo apenas teñido y texto claro. */
    --nexpro-grade-a-bg: #14301f;
    --nexpro-grade-a-text: #6ee7a0;
    --nexpro-grade-b-bg: #22301a;
    --nexpro-grade-b-text: #a3d165;
    --nexpro-grade-c-bg: #33270f;
    --nexpro-grade-c-text: #f0b357;
    --nexpro-grade-d-bg: #35200f;
    --nexpro-grade-d-text: #f59e6b;
    --nexpro-grade-e-bg: #3a1c1a;
    --nexpro-grade-e-text: #f4837c;
    --nexpro-bg-table-footer: #243149;
    --nexpro-text-table-footer: #ffffff;
    --nexpro-text-table-footer-label: #93aaff;
    --nexpro-border-table-footer: var(--nexpro-primary-light);
}