/*
 * Novox — Design Tokens
 *
 * Extraídos por análisis de las pantallas V3 (TailwindCSS + Feather Icons + SweetAlert2)
 * y de la capa de diseño en DisenoLogin/. Cada valor lleva en su línea un
 * comentario que apunta al archivo fuente donde fue observado.
 *
 * Alcance: tokens del estilo V3 (pantallas nuevas). Las pantallas legacy con DevExpress
 * no aportan tokens a este archivo — serán reemplazadas o envueltas por V3.
 *
 * Uso previsto: este archivo vive como documentación (no se consume en producción
 * todavía). Si se integra a bundles, revisar antes el theming global de Tailwind.
 */

:root {
    /* ============================================================
     * 1. COLORES — PALETA PRIMARIA
     * ============================================================ */

    --color-primary:       #0078D4; /* Azure Blue — Unified.Master:25,29,36,793 */
    --color-primary-hover: #0062A9; /* darken ~10% del primario (derivado) */
    --color-primary-soft:  #E0F2FE; /* blue-100 — usado en .btn-refresh gradient */

    /* ============================================================
     * 2. COLORES — ESTADOS (badge / pill)
     * Patrón: <estado>-bg = tint claro, <estado>-text = shade intenso
     * ============================================================ */

    /* Éxito / Activo / OK */
    --color-success:        #10B981; /* green-500 — PistoleoEntrada.aspx:29 (flash) */
    --color-success-bg:     #DCFCE7; /* green-100 — EntradaSalidaV3.aspx:123 */
    --color-success-text:   #166534; /* green-700 — EntradaSalidaV3.aspx:124 */

    /* Warning / Pendiente / Sin OT */
    --color-warning:        #F59E0B; /* amber-500 */
    --color-warning-bg:     #FEF3C7; /* amber-100 — EntradaSalidaV3.aspx:118 */
    --color-warning-text:   #92400E; /* amber-700 — EntradaSalidaV3.aspx:119 */

    /* Error / Castigado / Anulado */
    --color-error:          #EF4444; /* red-500 */
    --color-error-bg:       #FEE2E2; /* red-100 — EntradaSalidaV3.aspx:128 */
    --color-error-text:     #B91C1C; /* red-700 — EntradaSalidaV3.aspx:129 */

    /* Info / Terminado */
    --color-info:           #3B82F6; /* blue-500 — focus de inputs */
    --color-info-bg:        #DBEAFE; /* blue-100 — EntradaSalidaV3.aspx:143, hover tablas */
    --color-info-text:      #1E40AF; /* blue-700 — EntradaSalidaV3.aspx:144 */

    /* Inactivo / Cerrado */
    --color-inactive-bg:    #E5E7EB; /* gray-200 — EntradaSalidaV3.aspx:138 */
    --color-inactive-text:  #374151; /* gray-700 — EntradaSalidaV3.aspx:139 */

    /* ============================================================
     * 3. COLORES — NEUTRALES (texto, fondos, bordes)
     * ============================================================ */

    --color-text-primary:   #37474F; /* slate — .gv-material td (EntradaSalidaV3.aspx:198) */
    --color-text-secondary: #374151; /* gray-700 — labels (OTListado.aspx:91) */
    --color-text-muted:     #6B7280; /* gray-500 — hints auxiliares */
    --color-text-tertiary:  #94A3B8; /* slate-400 — .filtro-label (EntradaSalidaV3.aspx:85) */

    --color-bg-page:        #FFFFFF; /* fondo general */
    --color-bg-card:        #FFFFFF; /* .modal-card (EntradaSalidaV3.aspx:32) */
    --color-bg-table-head:  #F5F5F5; /* header de .gv-material (EntradaSalidaV3.aspx:167) */
    --color-bg-row-alt:     #FAFAFA; /* filas pares (EntradaSalidaV3.aspx:284) */
    --color-bg-subtle:      #F3F4F6; /* gray-100 — hover de .searchable-select-option */

    --color-border-light:   #E2E8F0; /* slate-200 — .filtro-select (EntradaSalidaV3.aspx:92) */
    --color-border-medium:  #D1D5DB; /* gray-300 — .searchable-select-menu (EntradaSalidaV3.aspx:245) */
    --color-border-strong:  #CBD5E1; /* slate-300 — .pistoleo-input (PistoleoEntrada.aspx:15) */
    --color-border-focus:   #3B82F6; /* blue-500 — focus rings (EntradaSalidaV3.aspx:102) */

    /* Backdrop de modales */
    --color-backdrop:       rgba(0, 0, 0, 0.55); /* .modal-backdrop (EntradaSalidaV3.aspx:16) */

    /* ============================================================
     * 4. TIPOGRAFÍA
     * ============================================================ */

    --font-family-base: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    /* DisenoLogin/src/sass/components/_global.scss:16 */

    --font-size-xxs:   0.70rem;  /* 11.2px — labels uppercase (.filtro-label) */
    --font-size-xs:    0.75rem;  /* 12px — header de tabla */
    --font-size-sm:    0.85rem;  /* 13.6px — celdas .gv-material td */
    --font-size-base:  0.875rem; /* 14px — body (Tailwind default) */
    --font-size-md:    1rem;     /* 16px */
    --font-size-lg:    1.125rem; /* 18px — títulos modal (EntradaSalidaV3.aspx:317) */
    --font-size-xl:    1.35rem;  /* 21.6px — .pistoleo-input (PistoleoEntrada.aspx:16) */
    --font-size-2xl:   1.5rem;

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600; /* header de tabla (EntradaSalidaV3.aspx:170) */
    --font-weight-bold:     700;

    --line-height-tight:  1.25;
    --line-height-normal: 1.5;

    --letter-spacing-wide: 0.05em; /* labels uppercase (.filtro-label) */

    /* ============================================================
     * 5. ESPACIADOS (escala Tailwind — ratio 1:4)
     * ============================================================ */

    --space-1:  0.25rem; /*  4px */
    --space-2:  0.5rem;  /*  8px */
    --space-3:  0.75rem; /* 12px */
    --space-4:  1rem;    /* 16px */
    --space-5:  1.25rem; /* 20px — padding horizontal default en .box */
    --space-6:  1.5rem;  /* 24px — padding botones */
    --space-8:  2rem;    /* 32px — padding vertical de .box */
    --space-10: 2.5rem;  /* 40px — .box en breakpoint sm */

    /* ============================================================
     * 6. BORDES Y RADIOS
     * ============================================================ */

    --radius-sm:   0.375rem; /*  6px — botones, inputs (Tailwind md) */
    --radius-md:   0.5rem;   /*  8px — tablas (Tailwind lg) */
    --radius-lg:   0.75rem;  /* 12px — .modal-card, .pistoleo-input, filas de tabla (Tailwind xl) */
    --radius-xl:   1rem;     /* 16px */
    --radius-pill: 9999px;   /* pills, badges, .btn-filtrar, .filtro-select */

    --border-width-thin:   1px; /* default inputs/cards */
    --border-width-medium: 2px; /* focus states */
    --border-width-thick:  3px; /* .pistoleo-input */

    /* ============================================================
     * 7. SOMBRAS
     * ============================================================ */

    --shadow-sm:        0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:        0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-row:       0 2px 6px rgba(0, 0, 0, 0.05);            /* fila de tabla (EntradaSalidaV3.aspx:181) */
    --shadow-row-hover: 0 4px 12px rgba(28, 63, 170, 0.25);       /* hover fila (EntradaSalidaV3.aspx:190) */
    --shadow-modal:     0 20px 40px rgba(15, 23, 42, 0.25);       /* .modal-card (EntradaSalidaV3.aspx:37) */
    --shadow-focus-ring: 0 0 0 4px rgba(59, 130, 246, 0.25);      /* .pistoleo-input:focus */

    --blur-backdrop: 6px; /* backdrop-filter del modal overlay */

    /* ============================================================
     * 8. TRANSICIONES / MOTION
     * ============================================================ */

    --transition-fast:   all 0.15s ease; /* filtros, inputs */
    --transition-normal: all 0.30s ease; /* menús, botones */
    --transition-slow:   all 0.60s ease-out; /* flashPulse pistoleo */

    /* ============================================================
     * 9. Z-INDEX (stacking)
     * ============================================================ */

    --z-dropdown:         20;  /* .searchable-select-menu */
    --z-modal-backdrop:   900;
    --z-modal:            901;
}

/* ============================================================
 * ANIMACIONES COMPARTIDAS (flashPulse — PistoleoEntrada.aspx:24)
 * ============================================================ */

@keyframes flashPulse {
    0%   { box-shadow: 0 0 0 0    currentColor; }
    70%  { box-shadow: 0 0 0 16px rgba(0, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0    rgba(0, 0, 0, 0); }
}

/* ============================================================
 * NOTAS / CONTRADICCIONES
 *
 * 1. `.estado-terminado` está definido dos veces en EntradaSalidaV3.aspx
 *    (líneas ~123 y ~143) con valores distintos (verde vs azul). Al consumir
 *    estos tokens, mapear a un único significado: sugerido
 *      - "terminado/completado" → --color-info-bg / --color-info-text (azul)
 *      - "activo/éxito"         → --color-success-bg / --color-success-text (verde)
 *
 * 2. La paleta legacy (DevExpress, DashBoard_Legacy/, Arriendo/) no está
 *    incluida. Si una pantalla legacy necesita refresh visual, aplicar estos
 *    tokens y descartar los estilos ad-hoc originales.
 *
 * 3. El primario #0078D4 solo aparece en Unified.Master como overrides del
 *    tema; el resto de la app V3 se apoya en clases Tailwind de la paleta
 *    blue-*. Migrar a var(--color-primary) requeriría tocar el theme de
 *    Tailwind en DisenoLogin/.
 * ============================================================ */