@charset "UTF-8";

/* ============================================
   BEST_BINAS DESIGN TOKENS - Sistema Centralizado de Variables
   Versi�n: 1.0
Fecha: Enero 2025
   ============================================ */

/*
   Este archivo contiene TODAS las variables CSS del proyecto.
   NUNCA definir variables :root en otros archivos CSS.
   
   Orden de carga: PRIMERO siempre, antes de cualquier otro CSS.
*/

:root {
    /* ============================================
       COLORES PRINCIPALES
   ============================================ */

    /* Paleta de Colores Base (Renamed from Cool) */
    --palette-blue-primary: #4A90E2;
    --palette-blue-secondary: #5DADE2;
    --palette-cyan: #50B8D8;
    --palette-teal: #48C9B0;
    --palette-blue-accent: #7BA7BC;
    --palette-gray-blue: #8B9EB7;
    --palette-light-blue: #B0C4DE;
    --palette-green: #48BB78;
    --palette-purple: #805AD5;
    --palette-indigo: #667EEA;
    --palette-water: #0072BB;
    --palette-orange: #F5A962;
    --palette-red: #E57373;

    /* Chakra UI / Tailwind standard shades (usados en analytics, infra, autogestion) */
    --chakra-teal-500: #38B2AC;
    --chakra-teal-500-rgb: 56, 178, 172;
    --chakra-red-500: #E53E3E;
    --chakra-red-500-rgb: 229, 62, 62;
    --chakra-green-600: #38A169;
    --chakra-orange-600: #DD6B20;
    --chakra-gray-400: #A0AEC0;

    /* Material Design shades (usados en infrastructure-public, reportes) */
    --material-purple: #9c27b0;
    --material-purple-dark: #7b1fa2;
    --material-purple-rgb: 156, 39, 176;
    --material-cyan: #00bcd4;
    --material-cyan-rgb: 0, 188, 212;

    /* Grays de fondo (atlas, catálogos, paneles) */
    --color-gray-100: #f0f2f5;
    --color-gray-50: #fafbfc;
    --color-gray-600: #6b7280;
    --color-gray-500: #718096;
    --color-gray-400b: #9ca3af;

    /* Amber / Alert backgrounds */
    --palette-amber: #ed8936;
    --palette-amber-rgb: 237, 137, 54;
    --alert-bg-amber: #fef3c7;
    --alert-bg-green: #d1fae5;
    --alert-bg-yellow: #fff3cd;

    /* Dark greens (heatmap, status) */
    --green-900: #22543d;
    --green-700: #276749;
    --green-800: #065f46;

    /* Tailwind/Chakra shades adicionales (usados en status, alertas) */
    --amber-900: #92400e;
    --amber-500: #f59e0b;
    --gray-700: #4a5568;
    --red-700: #b91c1c;
    --red-800: #9b2c2c;
    --red-600: #dc2626;
    --emerald-600: #059669;
    --emerald-500: #22c55e;
    --green-600: #16a34a;
    --blue-600: #357abd;
    --blue-700: #1d4ed8;
    --teal-800: #00838f;
    --pink-400: #ed64a6;
    --material-orange: #ff9800;
    --success-dark: #218838;

    /* Chakra / Tailwind gray scale */
    --chakra-gray-50: #f7fafc;
    --chakra-gray-100: #edf2f7;
    --chakra-gray-200: #e2e8f0;
    --chakra-gray-300: #cbd5e0;
    --chakra-gray-700: #2d3748;
    --chakra-gray-800: #1a202c;

    /* Tailwind blue scale */
    --tw-blue-50: #eff6ff;
    --tw-blue-200: #bfdbfe;
    --tw-blue-500: #3b82f6;
    --tw-blue-600: #2563eb;

    /* Fluent UI / Outlook extended neutral */
    --fluent-neutral-lighter: #edebe9;
    --fluent-neutral-light: #f0f0f0;
    --fluent-neutral-dark: #1a1a1a;
    --fluent-neutral-alt: #faf9f8;

    /* Bootstrap 5 primary */
    --bs-primary-500: #0d6efd;

    /* Google Material blue */
    --gm-blue: #1a73e8;

    /* Tailwind gray extras */
    --tw-gray-50: #f9fafb;
    --tw-gray-200: #e5e7eb;
    --tw-gray-300: #d1d5db;
    --tw-gray-100: #f1f3f5;

    /* Tailwind blue extras */
    --tw-blue-100: #dbeafe;

    /* Material Design extra */
    --material-green-700: #388e3c;
    --material-blue-700: #1976d2;

    /* Tailwind red */
    --tw-red-500: #ef4444;

    /* Bootstrap extended grays */
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;

    /* Fluent extras */
    --fluent-neutral-bg: #f3f2f1;

    /* Tailwind extended shades */
    --tw-indigo-700: #4338ca;
    --tw-indigo-600: #4f46e5;
    --tw-violet-500: #8b5cf6;
    --tw-amber-800: #713f12;
    --tw-green-900: #14532d;
    --tw-yellow-100: #fde68a;
    --tw-yellow-50: #fef9c3;
    --tw-green-100: #dcfce7;
    --tw-blue-100b: #e3f2fd;

    /* Chakra extended */
    --chakra-blue-700: #2b6cb0;
    --chakra-purple-700: #553c9a;
    --chakra-yellow-400: #ecc94b;

    /* Neutral grays */
    --neutral-400: #a0a0a0;
    --neutral-border: #e5e5e5;
    --neutral-border-light: #e1e4e8;
    --neutral-200: #d0d4da;

    /* ==========================================
       VALORES RGB PARA rgba()
       Necesarios para opacidad variable
       ============================================ */
    --palette-blue-primary-rgb: 74, 144, 226;
    --palette-blue-secondary-rgb: 93, 173, 226;
    --palette-cyan-rgb: 80, 184, 216;
    --palette-teal-rgb: 72, 201, 176;
    --palette-gray-blue-rgb: 139, 158, 183;
    --palette-red-rgb: 229, 115, 115; /* añadido para disabled red */
    --palette-orange-rgb: 237, 137, 54;
    --palette-purple-rgb: 128, 90, 213;
    --palette-green-rgb: 72, 187, 120;
    --palette-indigo-rgb: 102, 126, 234;
    --palette-water-rgb: 0, 114, 187;
    --palette-gray-neutral-rgb: 113, 128, 150;
    --binas-navy-rgb: 27, 58, 110;
    --binas-magenta-rgb: 162, 59, 114;
    --binas-orange-rgb: 247, 148, 29;
    
    /* Colores semánticos RGB */
    --color-success-rgb: 40, 167, 69;
    --color-danger-rgb: 220, 53, 69;
    --color-warning-rgb: 255, 193, 7;
    --color-info-rgb: 80, 184, 216;

    /* Sistema BINAS (branding específico del proyecto) */
    --binas-navy: #1B3A6E;
    --binas-magenta: #A23B72;
    --binas-orange: #F7941D;
    --binas-yellow: #FFD100;
    --binas-navy-light: #2D5FA0;
    --binas-navy-lighter: #6B95D4;
  --binas-navy-dark: #102342;

    /* === Colores Semánticos Activos === */
    /* Cambiar entre Cool/BINAS según necesidad */
    --color-primary: var(--binas-navy);
    --color-primary-light: var(--binas-navy-light);
    --color-primary-lighter: var(--binas-navy-lighter);
    --color-primary-dark: var(--binas-navy-dark);

    --color-secondary: var(--binas-magenta);
    --color-accent: var(--binas-orange);

    --color-info: var(--palette-cyan);
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;

  /* === Colores de Estado === */
    --color-active: var(--color-success);
  --color-inactive: var(--palette-gray-blue);
    --color-disabled: #e0e0e0;

    /* ============================================
       BACKWARD-COMPATIBILITY ALIASES
       Alias antiguos (usados en vistas o CSS legacy)
       Mantener para evitar variables no resueltas
    ============================================ */

    /* Common legacy names -> canonical tokens */
    --success-color: var(--color-success);
    --success-dark: rgb(var(--bs-success-rgb, 46, 125, 50));
    --primary-color: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --info-color: var(--color-info);
    --warning-color: var(--color-warning);
    --danger-color: var(--color-danger);


    /* ============================================
       ALIASES UNIFICADOS (consolidación de duplicados)
       Reemplazan --census-*, duplicados de módulos
       ============================================ */
    
    /* Census aliases (para retrocompatibilidad) */
    --census-primary: var(--palette-blue-primary);
    --census-secondary: var(--palette-blue-secondary);
    --census-success: var(--palette-teal);
    --census-info: var(--palette-cyan);
    --census-warning: #F39C12;
    --census-danger: #E74C3C;
    --census-explorer: var(--palette-blue-primary);
    --census-indicators: #7CB342;
    --census-geographic: var(--palette-teal);
    --census-maps: var(--palette-blue-secondary);
    --census-data: var(--palette-cyan);
    --census-reports: #F39C12;
    --census-export: var(--binas-magenta);
    
    /* Census grays */
    --census-gray-100: #f8f9fa;
    --census-gray-200: #e9ecef;
    --census-gray-300: #dee2e6;
    --census-gray-600: #6c757d;
    --census-gray-900: #212529;
    
    /* Census utilities */
    --census-border-radius: var(--radius-md);
    --census-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --census-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --census-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    --census-transition: all 0.3s ease;
    
    /* KPI variables */
    --kpi-bg: var(--outlook-bg-primary);
    --kpi-border: var(--outlook-border);
    --kpi-border-hover: var(--outlook-border-hover);
    --kpi-shadow: var(--outlook-shadow-card);
    --kpi-shadow-hover: var(--outlook-shadow-elevated);
    --kpi-padding: 1rem;
    --kpi-gap: 0.75rem;
    
    /* Progress colors */
    --progress-green: var(--color-success);
    --progress-yellow: var(--color-warning);
    --progress-orange: #fd7e14;
    --progress-red: var(--color-danger);
    
    /* Comparison colors */
    --comparison-positive: var(--color-success);
    --comparison-negative: var(--color-danger);
    
    /* ── Analytics: Heatmap scale (5-level divergent red→green) ── */
    --heatmap-low-bg: rgba(252, 129, 129, 0.3);
    --heatmap-low-fg: #c53030;
    --heatmap-medium-low-bg: rgba(246, 173, 85, 0.3);
    --heatmap-medium-low-fg: #c05621;
    --heatmap-medium-bg: rgba(246, 224, 94, 0.3);
    --heatmap-medium-fg: #975a16;
    --heatmap-medium-high-bg: rgba(154, 230, 180, 0.4);
    --heatmap-medium-high-fg: #276749;
    --heatmap-high-bg: rgba(72, 187, 120, 0.4);
    --heatmap-high-fg: #22543d;

    /* ── Analytics: Performance scale (5-level) ── */
    --perf-top: #276749;
    --perf-above: #38a169;
    --perf-average: #d69e2e;
    --perf-below: #dd6b20;
    --perf-bottom: #e53e3e;
    --perf-top-bg: #c6f6d5;
    --perf-above-bg: #c6f6d5;
    --perf-average-bg: #fefcbf;
    --perf-below-bg: #feebc8;
    --perf-bottom-bg: #fed7d7;

    /* ── Analytics: Quantile / zone colors ── */
    --quantile-q1: #bbf7d0;
    --quantile-q2: #d1fae5;
    --quantile-q3: #fef9c3;
    --quantile-q4: #fee2e2;
    --quantile-nd: #f3f4f6;
    --zone-high: #dcfce7;
    --zone-mid: var(--quantile-q3);
    --zone-low: var(--quantile-q4);
    --zone-nd: var(--quantile-nd);

    /* ── Rankings (medal colors) ── */
    --ranking-gold: #FFD700;
    --ranking-silver: #C0C0C0;
    --ranking-bronze: #CD7F32;
    
    /* Insight variables */
    --insight-high: var(--color-danger);
    --insight-high-bg: #f8d7da;
    --insight-high-border: #f5c6cb;
    --insight-medium: var(--color-warning);
    --insight-medium-bg: #fff3cd;
    --insight-medium-border: #ffeaa7;
    --insight-low: #17a2b8;
    --insight-low-bg: #d1ecf1;
    --insight-low-border: #bee5eb;
    --insight-bg: var(--outlook-bg-primary);
    --insight-border: var(--outlook-border);
    --insight-shadow: var(--outlook-shadow-card);
    --insight-shadow-hover: var(--outlook-shadow-elevated);
    --insight-padding: 1rem;
    
    /* Category colors */
    --category-coverage: var(--color-success);
    --category-gap: #fd7e14;
    --category-trend: #007bff;
    --category-comparison: #6f42c1;
    --category-general: #6c757d;
    
    /* Hero section */
    --hero-bg: linear-gradient(135deg, var(--binas-navy) 0%, var(--palette-blue-primary) 100%);
    --hero-text: #ffffff;
    
    /* Sections */
    --section-bg: var(--outlook-bg-primary);
    --section-border: var(--outlook-border);
    --section-padding: 3rem;
    --section-gap: 2rem;
    
    /* Pathways */
    --pathway-icon-region: var(--palette-blue-primary);
    --pathway-icon-compare: var(--palette-blue-secondary);
    --pathway-icon-search: var(--palette-teal);
    
    /* === Colores de Texto === */
    --text-primary: #2C3E50;
    --text-secondary: #6c757d;
  --text-muted: #95a5a6;
    --text-light: #ffffff;
 --text-dark: rgba(0, 0, 0, 0.9);
    
    /* ============================================
       OUTLOOK-INSPIRED TOKENS (NUEVO)
       Colores neutros y profesionales tipo Outlook/Azure
       ============================================ */
    --outlook-bg-primary: #FFFFFF;
    --outlook-bg-secondary: #F5F5F5;
    --outlook-bg-tertiary: #FAFAFA;
    --outlook-bg-hover: #E1E1E1;
    --outlook-bg-selected: #D6E3F0;
    --outlook-bg-pressed: #C7C7C7;
    
    --outlook-border: #D1D1D1;
    --outlook-border-light: #E0E0E0;
    --outlook-border-hover: #A6A6A6;
    --outlook-border-focus: #0078D4;
    
    --outlook-text-primary: #323130;
    --outlook-text-secondary: #605E5C;
    --outlook-text-tertiary: #8A8886;
    --outlook-text-disabled: #C8C6C4;

    --outlook-icon-neutral: #605E5C;
 --outlook-icon-hover: #201F1E;
    --outlook-icon-disabled: #C8C6C4;
    
    --outlook-shadow-subtle: 0 1.6px 3.6px rgba(0,0,0,.04), 0 0.3px 0.9px rgba(0,0,0,.05);
    --outlook-shadow-card: 0 3.2px 7.2px rgba(0,0,0,.07), 0 0.6px 1.8px rgba(0,0,0,.08);
    --outlook-shadow-elevated: 0 6.4px 14.4px rgba(0,0,0,.10), 0 1.2px 3.6px rgba(0,0,0,.11);
    
    /* Aliases para componentes Outlook-style */
    --outlook-button-bg: var(--outlook-bg-primary);
    --outlook-button-border: var(--outlook-border);
    --outlook-button-hover-bg: var(--outlook-bg-hover);
    --outlook-button-pressed-bg: var(--outlook-bg-pressed);
    
    --outlook-input-bg: var(--outlook-bg-terciario);
    --outlook-input-border: var(--outlook-border);
    --outlook-input-focus-border: var(--outlook-border-focus);
    
    --outlook-card-bg: var(--outlook-bg-primary);
    --outlook-card-border: var(--outlook-border-light);
    --outlook-card-shadow: var(--outlook-shadow-card);
    
    /* ============================================
    BOOTSTRAP SYNC
       Sincroniza variables de Bootstrap con sistema de dise�o
       ============================================ */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 27, 58, 110;
    --bs-secondary: #50535C;
    --bs-secondary-rgb: 80, 83, 92;
    --bs-success: var(--color-success);
    --bs-success-rgb: 46, 125, 50;
    --bs-info: var(--color-info);
    --bs-info-rgb: 55, 187, 237;
    --bs-warning: var(--color-warning);
 --bs-warning-rgb: 255, 209, 0;
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 238, 61, 143;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;

    /* Bootstrap disabled button mapping (no existían antes) */
    --bs-btn-disabled-color: var(--outlook-text-disabled);
    --bs-btn-disabled-bg: var(--outlook-bg-secondary);
    --bs-btn-disabled-border-color: var(--outlook-border-light);

    /* Semantic disabled variants (ligeras transparencias) */
    --btn-disabled-opacity: 0.55;
    --btn-disabled-filter: grayscale(20%);
    --btn-add-disabled-bg: rgba(var(--palette-teal-rgb), 0.15);
    --btn-add-disabled-border: rgba(var(--palette-teal-rgb), 0.35);
    --btn-remove-disabled-bg: rgba(var(--palette-red-rgb), 0.15);
    --btn-remove-disabled-border: rgba(var(--palette-red-rgb), 0.35);
    --btn-save-disabled-bg: rgba(var(--binas-navy-rgb), 0.10);
    --btn-save-disabled-border: rgba(var(--binas-navy-rgb), 0.30);
    --btn-edit-disabled-bg: rgba(var(--palette-gray-blue-rgb), 0.15);
    --btn-edit-disabled-border: rgba(var(--palette-gray-blue-rgb), 0.35);
    --btn-export-disabled-bg: rgba(var(--binas-magenta-rgb), 0.12);
    --btn-export-disabled-border: rgba(var(--binas-magenta-rgb), 0.30);
    --btn-search-disabled-bg: rgba(var(--palette-blue-primary-rgb), 0.12);
    --btn-search-disabled-border: rgba(var(--palette-blue-primary-rgb), 0.30);
    
    /* ============================================
       FONDOS Y SUPERFICIES
       ============================================ */
  --bg-base: #F2F2F2;
    --bg-light: #f8fafc;
    --bg-surface: #ffffff;
--bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* Fondos grises BINAS */
    --bg-grey-100: #FFFFFF;
    --bg-grey-200: #F8F8F8;
    --bg-grey-300: #F4F4F4;
    --bg-grey-400: #EFEDED;
    --bg-grey-500: #E1E1E1;
    --bg-grey-600: #BCBCBC;
    
    /* Superficies (Surface System - usado por componentes modernos) */
    --surface-primary: #FFFFFF;
    --surface-secondary: #F5F5F5;
    --surface-tertiary: #FAFAFA;
    --surface-hover: #E1E1E1;
    
    /* Bordes (Border System) */
    --border-light: #E0E0E0;
    --border-medium: #C7C7C7;
    --border-dark: #A6A6A6;
    
    /* Gradientes */
    --gradient-cool: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --gradient-cool-alt: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
    --gradient-primary: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 55%, var(--color-primary-dark) 100%);
    --gradient-primary-reverse: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 45%, var(--color-primary-light) 100%);
    --gradient-blue: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
    --gradient-success: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    --gradient-danger: linear-gradient(90deg, #da2c43 0%, #da7b84 100%);
    --gradient-salmon: linear-gradient(90deg, rgb(255, 160, 122) 0%, rgba(255, 160, 122, 0.8) 100%);
    --gradient-violet: linear-gradient(90deg, rgb(115, 79, 150) 0%, rgba(115, 79, 150, 0.8) 100%);
    
    /* ============================================
       BORDES Y L�NEAS
       ============================================ */
  --border-width: 1px;
    --border-width-thick: 2px;
    --border-width-thicker: 3px;
 --border-width-validation: 4px;
    
    --border-color: rgba(74, 144, 226, 0.2);
    --border-color-light: rgba(74, 144, 226, 0.1);
 --border-color-medium: rgba(74, 144, 226, 0.3);
    --border-color-dark: rgba(74, 144, 226, 0.4);
    --border-color-button: rgb(231, 233, 247);
    
    /* Border Radius */
 --radius-none: 0;
    --radius-xs: 0.25rem; /* 4px */
    --radius-sm: 0.375rem; /* 6px */
    --radius-md: 0.5rem; /* 8px */
    --radius-lg: 0.75rem; /* 12px */
    --radius-xl: 1rem;/* 16px */
    --radius-2xl: 1.5rem; /* 24px */
    --radius-pill: 999px;
    --radius-circle: 50%;
    
    /* Aliases sem�nticos */
    --card-radius: var(--radius-lg);
    --button-radius: var(--radius-pill);
 --input-radius: var(--radius-md);
    
    /* ============================================
       SOMBRAS Y ELEVACI�N
       ============================================ */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow: 0 2px 8px rgba(74, 144, 226, 0.1);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.12);
    --shadow-xl: 0 24px 48px rgba(16, 24, 40, 0.16);
    
    /* Sombras de hover */
    --shadow-hover: 0 4px 12px rgba(74, 144, 226, 0.2);
    --shadow-hover-lg: 0 6px 20px rgba(74, 144, 226, 0.25);
  
    /* Sombras de colores */
    --shadow-primary: 0 2px 8px rgba(27, 58, 110, 0.2);
    --shadow-success: 0 2px 8px rgba(72, 201, 176, 0.2);
    --shadow-danger: 0 2px 8px rgba(229, 115, 115, 0.2);
    --shadow-warning: 0 2px 8px rgba(245, 169, 98, 0.2);
    
    /* Aliases sem�nticos */
  --card-shadow: var(--shadow);
    --card-shadow-hover: var(--shadow-hover);
    
    /* ============================================
       TIPOGRAF�A
       ============================================ */
    
    /* Familias de fuentes */
    --font-primary: "Nunito", sans-serif;
  --font-secondary: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    
    --font-family-base: var(--font-primary);
    --font-family-heading: var(--font-primary);
    
    /* Tama�os de fuente */
    --font-size-xs: 0.688rem;   /* 11px (antes 12px) */
    --font-size-sm: 0.813rem;   /* 13px (antes 14px) */
 --font-size-base: 0.875rem; /* 14px (antes 16px) */
    --font-size-md: 1rem;/* 16px (antes 18px) */
    --font-size-lg: 1.125rem;   /* 18px (antes 20px) */
    --font-size-xl: 1.375rem;   /* 22px (antes 24px) */
    --font-size-2xl: 1.75rem;   /* 28px (antes 32px) */
    --font-size-3xl: 2.25rem;   /* 36px (antes 40px) */
    
    /* Pesos de fuente */
    --font-weight-thin: 100;
    --font-weight-light: 200;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    /* Altura de l�nea */
    --line-height-tight: 1.25;
--line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
    
    /* ============================================
       ESPACIADO
  Escala de espaciado consistente - REDUCIDO para m�s densidad
       ============================================ */
    --spacing-0: 0;
    --spacing-1: 0.188rem;  /* 3px (antes 4px) */
    --spacing-2: 0.375rem;  /* 6px (antes 8px) */
    --spacing-3: 0.563rem;  /* 9px (antes 12px) */
    --spacing-4: 0.75rem;   /* 12px (antes 16px) */
    --spacing-5: 0.938rem;  /* 15px (antes 20px) */
    --spacing-6: 1.125rem;  /* 18px (antes 24px) */
    --spacing-8: 1.5rem;    /* 24px (antes 32px) */
    --spacing-10: 1.875rem; /* 30px (antes 40px) */
    --spacing-12: 2.25rem;/* 36px (antes 48px) */
    --spacing-16: 3rem;     /* 48px (antes 64px) */
    --spacing-20: 3.75rem;  /* 60px (antes 80px) */
    
    /* Aliases sem�nticos */
    --spacing-xs: var(--spacing-1);
    --spacing-sm: var(--spacing-2);
    --spacing-md: var(--spacing-4);
    --spacing-lg: var(--spacing-6);
    --spacing-xl: var(--spacing-8);
    
    /* ============================================
       TAMA�OS Y DIMENSIONES
       ============================================ */
    
    /* Anchos de contenedor */
    --container-xs: 480px;
    --container-sm: 640px;
  --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    
  /* Tama�os de iconos */
    --icon-color-neutral: var(--outlook-icon-neutral);
    --icon-color-hover: var(--outlook-icon-hover);
    --icon-color-success: var(--color-success);
    --icon-color-warning: var(--color-warning);
    --icon-color-danger: var(--color-danger);
    --icon-color-info: var(--color-info);
    
    --icon-size-2xs: 0.625rem;  /* 10px */
    --icon-size-xs: 0.813rem;   /* 13px (antes 14px) */
    --icon-size-sm: 0.938rem;   /* 15px (antes 16px) */
    --icon-size-md: 1.125rem;   /* 18px (antes 20px) */
    --icon-size-lg: 1.5rem;     /* 24px (antes 28px) */
    --icon-size-xl: 1.875rem;   /* 30px (antes 34px) */
  --icon-size-2xl: 2.25rem;   /* 36px (antes 42px) */
    
    /* Tama�os de botones */
    --button-height-sm: 1.75rem;    /* 28px (antes 32px) */
    --button-height-md: 2.125rem;   /* 34px (antes 40px) */
    --button-height-lg: 2.625rem;   /* 42px (antes 48px) */
    
    /* Tama�os de inputs */
    --input-height-sm: 1.75rem;     /* 28px (antes 32px) */
    --input-height-md: 2.125rem;    /* 34px (antes 40px) */
    --input-height-lg: 2.625rem;    /* 42px (antes 48px) */
    
    /* ============================================
       TRANSICIONES Y ANIMACIONES
       ============================================ */
--transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.35s ease;
    --transition-slower: 0.5s ease;
    
    --transition-all: all var(--transition-base);
    --transition-colors: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
    --transition-transform: transform var(--transition-base);
    --transition-opacity: opacity var(--transition-base);
    
    /* Easing functions */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Duraciones de animaci�n */
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 350ms;
    --duration-slower: 500ms;
    
    /* ============================================
       Z-INDEX
       Jerarqu�a de capas
       ============================================ */
    --z-base: 0;
    --z-dropdown: 1000;
--z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
  --z-popover: 1060;
    --z-tooltip: 1070;
    --z-notification: 1080;
    --z-max: 9999;
    
    /* ============================================
   BREAKPOINTS
       Para uso en media queries
       ============================================ */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    
    /* ============================================
       COMPONENTES ESPEC�FICOS
       ============================================ */
    
    /* Activity Lights (sem�foro) */
    --traffic-light-green-on: 45, 201, 55, 1;
    --traffic-light-yellow-on: 231, 180, 22, 1;
 --traffic-light-red-on: 204, 50, 55, 1;
    --traffic-light-green-off: 220, 226, 220, 1;
    --traffic-light-yellow-off: 235, 229, 212, 1;
    --traffic-light-red-off: 230, 218, 218, 1;
    
    /* Scrollbar */
    --scrollbar-width: 8px;
    --scrollbar-track-bg: transparent;
    --scrollbar-thumb-bg: #6A6A6A;
    --scrollbar-thumb-radius: var(--radius-lg);
  
    /* Progress */
    --progress-height: 4px;
    --progress-bg: var(--bg-grey-300);
  
    /* ============================================
    UTILIDADES DE DESARROLLO
    Solo para debugging, remover en producci�n
       ============================================ */
 --debug-border: 1px solid red;
    --debug-bg: rgba(255, 0, 0, 0.1);
}

/* ============================================
   MEDIA QUERY OVERRIDES
   Ajustes de tokens seg�n viewport
   ============================================ */

/* Mobile (< 768px) */
@media (max-width: 767.98px) {
    :root {
    /* Mantener tama�os ya reducidos en m�vil */
        --font-size-base: 0.813rem; /* 13px */
        --font-size-lg: 0.875rem;   /* 14px */
        --font-size-xl: 1rem;       /* 16px */
   
        /* Espaciados ya ajustados */
        --spacing-md: 0.625rem;     /* 10px */
        --spacing-lg: 0.875rem; /* 14px */
        
        /* Sombras m�s sutiles */
        --shadow: 0 1px 3px rgba(74, 144, 226, 0.1);
     
        /* Alturas de componentes compactas */
        --button-height-md: 1.875rem;  /* 30px */
    --input-height-md: 1.875rem;   /* 30px */
    }
}

/* Desktop Large (> 1400px) */
@media (min-width: 1400px) {
    :root {
        /* Mantener tama�o base, no aumentar */
        --font-size-base: 0.938rem; /* 15px (antes 17px) */
    }
}

/* ============================================
   VALIDACI�N DE ACCESIBILIDAD
   Ratios de contraste WCAG AA
   ============================================ */

/*
Colores validados para WCAG AA:
- --color-primary (#232D4F) sobre blanco: 11.8:1 ?
- --color-success (#28a745) sobre blanco: 3.1:1 ?
- --color-danger (#dc3545) sobre blanco: 4.7:1 ?
- --palette-blue-primary (#4A90E2) sobre blanco: 4.3:1 ?

Para validar nuevos colores: https://webaim.org/resources/contrastchecker/
*/

/* ============================================
   NOTAS DE USO
   ============================================ */

/*
IMPORTANTE:
1. NUNCA definir variables :root en otros archivos CSS
2. Usar variables sem�nticas (--color-primary) en lugar de directas (--palette-blue-primary)
3. Mantener consistencia con naming: [categoria]-[propiedad]-[variante]
4. Documentar nuevas variables en este archivo
5. Validar contraste de color antes de agregar nuevos colores

EJEMPLOS DE USO:

// Colores
.btn { 
    background: var(--color-primary); 
    color: var(--text-light);
}

// Espaciado
.card { 
    padding: var(--spacing-md); 
    margin-bottom: var(--spacing-lg);
}

// Sombras
.card { 
    box-shadow: var(--card-shadow);
    border-radius: var(--card-radius);
}

// Transiciones
.btn {
    transition: var(--transition-all);
}

// Tipograf�a
h1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}
*/

/* ============================================
   FIN DEL ARCHIVO
   ============================================ */

    /* Legacy cool-* alias variables (DEPRECATED) - usar --palette-* en nuevo código */
    --cool-blue-primary: var(--palette-blue-primary);
    --cool-blue-secondary: var(--palette-blue-secondary);
    --cool-cyan: var(--palette-cyan);
    --cool-teal: var(--palette-teal);
    --cool-accent: var(--palette-blue-accent);
    --cool-neutral: var(--palette-gray-blue);
    --cool-orange: var(--palette-orange);
    --cool-red: var(--palette-red);

    /* Legacy RGB aliases (solo para compatibilidad con archivos antiguos) */
    --cool-blue-primary-rgb: var(--palette-blue-primary-rgb);
    --cool-blue-secondary-rgb: var(--palette-blue-secondary-rgb);
    --cool-cyan-rgb: var(--palette-cyan-rgb);
    --cool-teal-rgb: var(--palette-teal-rgb);
    --cool-neutral-rgb: var(--palette-gray-blue-rgb);
    --cool-orange-rgb: 245, 169, 98; /* no había palette-orange-rgb crudo, definido directo */
    --cool-red-rgb: var(--palette-red-rgb);

    /* Category semantic tokens (used by simple-explorer) */
--category-agua-bg: rgba(var(--palette-blue-primary-rgb),0.08); /* soft blue background */
--category-agua-fg: var(--palette-blue-primary); /* blue foreground */

--category-saneamiento-bg: rgba(var(--palette-teal-rgb),0.08); /* soft teal background */
--category-saneamiento-fg: var(--palette-teal); /* teal foreground */

--category-calidad-vida-bg: rgba(255,246,219,1); /* soft warm background */
--category-calidad-vida-fg: #7a5a1f; /* warm dark foreground */

--category-indice-compuesto-bg: rgba(147,103,163,0.08); /* soft magenta/violet bg */
--category-indice-compuesto-fg: var(--binas-magenta); /* magenta foreground */

--category-default-bg: var(--outlook-bg-secondary);
--category-default-fg: var(--outlook-text-primary);

/* End category semantic tokens */