/*!
 * QUIPU Design System — TOKENS
 * Version: 1.7.4
 * Build:   2026-06-26
 * Fase 1 — Implementación del contrato de tokens (DS-TOKEN-SPECIFICATION).
 * ----------------------------------------------------------------
 * SOLO define variables (3 capas). NO redefine clases de Bootstrap/
 * AdminLTE/plugins (Regla N.º 9). Es aditivo y de cero cambio visual:
 * los componentes q-* consumirán estos tokens en fases posteriores.
 *
 * Arquitectura (Regla N.º 12):
 *   Reference (privado: --q-ref-* / --q-theme-*)
 *     → Semantic (público: --q-color-*, --q-text-*, --q-space-*…)
 *       → Component (público: --q-btn-*, --q-panel-*, --q-modal-*…)
 *
 * El Theme Engine (layout.php) inyecta en :root, vía #q2-theme-vars:
 *   --q-theme-dark/darker/accent + escala (accent-hover/active/light/
 *   border/contrast, focus-ring, sidebar/topbar/surface).
 * ================================================================ */

:root {
  /* ====================== NIVEL 1 · REFERENCE (privados) ====================== */
  /* Escala de grises fríos */
  --q-ref-gray-50:  #F8FAFC;
  --q-ref-gray-100: #F1F5F9;
  --q-ref-gray-200: #E5E7EB;
  --q-ref-gray-300: #CBD5E1;
  --q-ref-gray-400: #94A3B8;
  --q-ref-gray-500: #64748B;
  --q-ref-gray-600: #475569;
  --q-ref-gray-700: #334155;
  --q-ref-gray-800: #1E293B;
  --q-ref-gray-900: #0F172A;
  /* Colores semánticos físicos — elegidos AA con texto blanco (Regla N.º 17) */
  --q-ref-green:  #15803D;   /* success  (AA 4.6:1) */
  --q-ref-amber:  #B26A04;   /* warning  (AA 4.7:1) */
  --q-ref-red:    #DC2626;   /* danger   (AA 4.8:1) */
  --q-ref-cyan:   #0E7FA6;   /* info     (AA) */
  --q-ref-navy:   #1b3a8c;   /* estructura (encabezados) */
  /* Colores para la Guía Semántica de Acciones (AA con texto blanco) */
  --q-ref-red-dark:    #991B1B;   /* PDF (documento) */
  --q-ref-green-excel: #1D6F42;   /* exportar Excel */
  --q-ref-teal:        #0E7490;   /* descargar (azul petróleo) */
  --q-ref-sky:         #0369A1;   /* refrescar / actualizar */
  --q-ref-orange:      #C2410C;   /* ver detalle (variante vívida de fila) */
  /* (El accent de marca es reference vía Theme Engine: --q-theme-accent) */

  /* ====================== NIVEL 2 · SEMANTIC (públicos) ======================= */
  /* Marca — derivada del Theme Engine (no se hardcodea) */
  --q-color-primary:        var(--q-theme-accent);
  --q-color-primary-hover:  var(--q-theme-accent-hover, var(--q-theme-accent));
  --q-color-primary-active: var(--q-theme-accent-active, var(--q-theme-accent));
  --q-color-primary-light:  var(--q-theme-accent-light, rgba(37,99,235,.12));
  --q-color-on-primary:     var(--q-theme-accent-contrast, #ffffff);
  /* Compatibilidad con modern.css (mantiene el fix del Sprint 1: hover/foco siguen la marca) */
  --q-primary:       var(--q-color-primary);
  --q-primary-dark:  var(--q-color-primary-hover);
  --q-primary-light: var(--q-color-primary-light);
  /* Semánticos fijos + su foreground (Regla N.º 16/17) */
  --q-color-success: var(--q-ref-green);   --q-color-on-success: #ffffff;
  --q-color-warning: var(--q-ref-amber);   --q-color-on-warning: #ffffff;
  --q-color-danger:  var(--q-ref-red);     --q-color-on-danger:  #ffffff;
  --q-color-info:    var(--q-ref-cyan);    --q-color-on-info:    #ffffff;
  --q-color-success-light: rgba(21,128,61,.12);
  --q-color-warning-light: rgba(178,106,4,.12);
  --q-color-danger-light:  rgba(220,38,38,.12);
  --q-color-info-light:    rgba(14,127,166,.12);
  /* ===== GUÍA SEMÁNTICA DE ACCIONES — COLORES OFICIALES CONGELADOS (contrato · Regla N.º 28) =====
     1 acción = 1 color, idéntico en TODO el ERP. Colores FIJOS (no derivan del tema).
     Foreground AA AUTOMÁTICO por color (Regla N.º 16/17): blanco si cumple, oscuro si el color es claro.
     [W]=texto blanco · [D]=texto oscuro (#0F172A) por accesibilidad. */
  --q-action-search:   #2563EB;  --q-on-action-search:   #FFFFFF;  /* 🔍 Buscar        [W] */
  --q-action-open:     #F59E0B;  --q-on-action-open:     #0F172A;  /* 👁 Abrir detalle  [D] ámbar */
  --q-action-new:      #22C55E;  --q-on-action-new:      #0F172A;  /* ➕ Nuevo          [D] */
  --q-action-save:     #16A34A;  --q-on-action-save:     #0F172A;  /* 💾 Guardar        [D] */
  --q-action-edit:     #FACC15;  --q-on-action-edit:     #0F172A;  /* ✏ Editar         [D] amarillo */
  --q-action-delete:   #EF4444;  --q-on-action-delete:   #FFFFFF;  /* 🗑 Eliminar       [W] */
  --q-action-print:    #06B6D4;  --q-on-action-print:    #0F172A;  /* 🖨 Imprimir       [D] */
  --q-action-pdf:      #B91C1C;  --q-on-action-pdf:      #FFFFFF;  /* 📄 PDF            [W] */
  --q-action-export:   #16A34A;  --q-on-action-export:   #0F172A;  /* 📤 Exportar Excel [D] */
  --q-action-download: #0891B2;  --q-on-action-download: #0F172A;  /* 📥 Descargar      [D] */
  --q-action-cancel:   #6B7280;  --q-on-action-cancel:   #FFFFFF;  /* ❌ Cancelar/Limpiar [W] */
  --q-action-refresh:  #0EA5E9;  --q-on-action-refresh:  #0F172A;  /* 🔄 Actualizar     [D] */
  --q-on-action:       #FFFFFF;  /* ícono BLANCO en acciones de FILA (q-btn--s) — look vívido del usuario */
  /* Superficies */
  --q-bg:              var(--q-ref-gray-50);
  --q-surface:         #FFFFFF;
  --q-surface-2:       var(--q-ref-gray-100);
  --q-surface-inverse: var(--q-theme-dark, var(--q-ref-navy));
  --q-color-on-inverse:#FFFFFF;
  /* Texto */
  --q-text-1: var(--q-ref-gray-800);
  --q-text-2: var(--q-ref-gray-500);
  --q-text-3: var(--q-ref-gray-400);
  /* Bordes */
  --q-border:       var(--q-ref-gray-200);
  --q-border-width: 1px;
  /* Tipografía */
  --q-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --q-font-size-xs: 11px;  --q-font-size-sm: 12px;  --q-font-size-md: 13px;
  --q-font-size-lg: 16px;  --q-font-size-xl: 18px;
  --q-font-weight-regular: 400;  --q-font-weight-medium: 500;  --q-font-weight-bold: 600;
  --q-line-height-tight: 1.2;    --q-line-height-base: 1.5;
  /* Espaciado (escala 4px) */
  --q-space-1: 4px;  --q-space-2: 8px;  --q-space-3: 12px;  --q-space-4: 16px;
  --q-space-6: 24px; --q-space-8: 32px; --q-space-10: 40px; --q-space-12: 48px;
  /* Radios */
  --q-radius-sm: 6px;  --q-radius-md: 8px;  --q-radius-lg: 10px;  --q-radius-pill: 999px;
  /* Sombras / elevaciones */
  --q-shadow-sm:    0 1px 2px rgba(0,0,0,.06);
  --q-shadow-card:  0 1px 3px rgba(0,0,0,.08);
  --q-shadow-modal: 0 12px 40px rgba(0,0,0,.22);
  /* Foco */
  --q-focus-ring:  var(--q-theme-focus-ring, rgba(37,99,235,.30));
  --q-focus-width: 3px;
  /* Sombra de foco (anillo azul + elevación) → resalta claramente el control activo */
  --q-focus-shadow: 0 0 0 3px var(--q-focus-ring), 0 4px 10px rgba(2,6,23,.20);
  /* Opacidades / estados */
  --q-opacity-disabled: .5;
  --q-opacity-muted: .7;
  --q-overlay: rgba(15,23,42,.45);
  /* Z-index (capas) */
  --q-z-dropdown: 1000;  --q-z-sticky: 1020;  --q-z-fixed: 1030;
  --q-z-modal-backdrop: 1040;  --q-z-modal: 1050;  --q-z-popover: 1060;  --q-z-tooltip: 1070;
  /* Duraciones / transiciones */
  --q-duration-fast: 120ms;  --q-duration-base: 200ms;  --q-ease: cubic-bezier(.4,0,.2,1);

  /* ====================== NIVEL 3 · COMPONENT (públicos) ====================== */
  /* Altura ÚNICA de controles de línea (alineación perfecta: input/select/Select2/btn-M
     comparten exactamente esta altura desde una sola fuente de verdad) */
  --q-control-h: 38px;
  /* Botón */
  --q-btn-bg:        var(--q-color-primary);
  --q-btn-fg:        var(--q-color-on-primary);
  --q-btn-border:    rgba(0,0,0,.08);   /* borde sutil de botón relleno (hallazgo del Lab) */
  --q-btn-hover-bg:  var(--q-color-primary-hover);
  --q-btn-active-bg: var(--q-color-primary-active);
  --q-btn-radius:    var(--q-radius-md);   /* 8px · barra de herramientas (presencia media) */
  --q-btn-radius-s:  10px;                 /* acción de fila: cuadrada y más redondeada */
  --q-btn-weight:    var(--q-font-weight-bold);
  --q-btn-h-s: 30px;  --q-btn-h-m: var(--q-control-h);  --q-btn-h-l: 44px;
  --q-btn-minw-m: 120px;  --q-btn-minw-l: 170px;
  /* Input / form */
  --q-input-h:      var(--q-control-h);
  --q-input-border: var(--q-border);
  --q-input-radius: var(--q-radius-sm);
  --q-input-focus:  var(--q-color-primary);
  /* Panel / card */
  --q-panel-header-bg:    var(--q-surface-inverse);
  --q-panel-header-fg:    var(--q-color-on-inverse);
  --q-panel-header-h:     40px;   /* altura compacta de cabecera (centrado vertical por flex) */
  --q-panel-header-pad-x: 20px;   /* aire horizontal (título no pegado al borde) */
  --q-panel-bg:        var(--q-surface);
  --q-panel-border:    var(--q-border);
  --q-panel-radius:    var(--q-radius-lg);
  /* Tabla */
  --q-table-header-bg: var(--q-surface-2);
  --q-table-header-fg: var(--q-text-2);
  --q-table-border:    var(--q-ref-gray-200);
  --q-table-hover:     #EEF3FB;
  --q-table-row-py:    4px;   /* padding vertical de fila (densidad tipo Excel/SAP; antes 6, orig 8) */
  /* Cabecera de BANDEJA (DataTables) — alternativa elegible en 1 token (ver comparativa) */
  /* Opción C (azul de menor peso): jerarquía bajo el panel navy, legible en jornadas largas */
  --q-table-bandeja-header-bg: var(--q-color-primary-light);
  --q-table-bandeja-header-fg: var(--q-surface-inverse);    /* texto navy, alto contraste */
  --q-table-bandeja-header-accent: var(--q-color-primary);  /* borde inferior de acento */
  /* DataTables (controles del plugin) */
  --q-dt-control-h: 32px;
  /* Modal */
  --q-modal-radius: var(--q-radius-lg);
  --q-modal-shadow: var(--q-shadow-modal);
  --q-modal-header-bg: var(--q-surface-inverse);

  /* ====================== LAYOUT RHYTHM (ritmo vertical del ERP) ====================== */
  /* Densidad estructural única: toda pantalla hereda el mismo ritmo. Compactado (v1.3.0). */
  --q-layout-navbar-gap:  15px;               /* navbar → primer panel (= newsale: padding de .content, sin pull) */
  --q-panel-gap:          14px;               /* panel → panel / footer → panel (= newsale) */
  --q-panel-body-padding: 14px;               /* = newsale: header-pad 11 + body-pad 14 = 25px header→fila */
  --q-form-row-gap:       15px;               /* fila → fila (= newsale: default Bootstrap form-group) */
  --q-group-gap:          var(--q-space-4);   /* 16px · grupo → grupo */
}

/* ── MODO ALTA LEGIBILIDAD (usuarios de larga trayectoria) — solo ajusta tokens, no el diseño ── */
body.q-high-legibility {
  --q-font-weight-regular: 500;
  --q-font-weight-medium:  600;
  --q-border-width: 1.5px;
  --q-focus-width: 4px;
  --q-text-2: var(--q-ref-gray-600);   /* texto secundario más oscuro */
  --q-text-3: var(--q-ref-gray-500);
  --q-table-hover: #E3ECFB;            /* hover de tabla más marcado */
}