@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) */
    --text-light: #FFFFFF;
    --color-white: #FFFFFF;
    --palette-blue-primary: #4A90E2;
    --palette-blue-secondary: #5DADE2;
    --palette-cyan: #50B8D8;
    --palette-teal: #48C9B0;
    --palette-gray-blue: #8B9EB7;
    --palette-light-blue: #B0C4DE;
    --palette-green: #48BB78;
    --palette-purple: #805AD5;
    --palette-indigo: #667EEA;
    --palette-indigo-dark: #764BA2;
    --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-teal-600: #319795;
    --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: #EFEEE9;
    --color-gray-50: #FAF9F7;
    --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;
    /* #007984 — 4.95:1 sobre el tinte de banda census (AA >= 4.5) */
    --teal-900: #007984;
    --pink-400: #ed64a6;
    --material-orange: #ff9800;
    /* 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;
    /* Alias para compatibilidad (--color-gray-* usado extensamente pero no definido) */
    --color-gray-200: var(--chakra-gray-200);
    --color-gray-300: var(--chakra-gray-300);
    --color-gray-400: var(--chakra-gray-400);
    /* Alias --color-blue-* (usado en admin-bundle, analytics, eph-*, dev-permissions-panel pero no definido) */
    /* Cada shade toma el fallback inline dominante ya presente en el código para no alterar el render existente */
    --color-blue-50: var(--tw-blue-50);
    --color-blue-100: var(--tw-blue-100);
    --color-blue-200: var(--tw-blue-200);
    --color-blue-300: #90cdf4;
    --color-blue-400: #63b3ed;
    --color-blue-500: var(--palette-blue-primary);
    --color-blue-600: #3182ce;
    --color-blue-700: var(--chakra-blue-700);
    --color-blue-800: #2c5282;
    --color-blue-900: #2a4365;
    /* Neutral grays */
    --neutral-400: #a0a0a0;
    --neutral-border-light: #e1e4e8;
    --neutral-200: #d0d4da;
    /* ==========================================
       VALORES RGB PARA rgba()
       Necesarios para opacidad variable
       ============================================ */
    --palette-blue-primary-rgb: 74, 144, 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;
    /* RGB adicionales para paridad exacta con literales migrados (slice analytics-competitive-reportshub) */
    --status-success-rgb: 56, 161, 105;
    --status-warning-rgb: 214, 158, 46;
    --green-700-rgb: 39, 103, 73;
    --pink-400-rgb: 237, 100, 166;
    --red-600-rgb: 220, 38, 38;
    --chakra-gray-400-rgb: 160, 174, 192;
    --binas-navy-rgb: 0, 32, 69;
    --binas-magenta-rgb: 162, 59, 114;
    --binas-orange-rgb: 249, 115, 22;
    /* Colores semánticos RGB */
    --color-primary-rgb: var(--binas-navy-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: #002045;
    --binas-magenta: #A23B72;
    --binas-orange: #F97316;
    --binas-yellow: #FFD100;
    --binas-navy-light: #455f88;
    --binas-navy-lighter: #adc7f7;
    --binas-navy-dark: #001a41;

    /* Hydro-Institutional Modern specific tokens */
    --hidro-surface: #f7f9fb;
    --hidro-primary: var(--binas-navy);
    --hidro-secondary: #0059bb;
    --hidro-water-deep: #0F172A;
    --hidro-water-surface: #3B82F6;
    --hidro-algae-green: #10B981;
    --hidro-coming-soon: #8B5CF6;
    --hidro-ui-border: #E2E8F0;
    --hidro-text-main: #334155;
    /* Escala azul institucional (de claro a profundo) */
    --hidro-blue-50: #eef4fb;
    --hidro-blue-100: #d6e3ff;
    --hidro-blue-200: #adc7f7;
    /* Acentos */
    --hidro-orange-500: #F97316;
    --hidro-teal-500: #14b8a6;
    --hidro-teal-600: #0d9488;
    /* RGB helpers (para rgba() en overlays/sombras) */
    --hidro-primary-rgb: 0, 32, 69;
    --hidro-secondary-rgb: 0, 89, 187;
    --hidro-water-surface-rgb: 59, 130, 246;
    --hidro-teal-rgb: 20, 184, 166;
    /* ============================================
       PALETA SEMÁNTICA OKLCH
       Colores armónicos para estados y categorías.
       Mismo chroma/lightness, hue variable.
       ============================================ */
    --oklch-blue: oklch(50% 0.17 248);
    --oklch-blue-bg: oklch(96.5% 0.025 248);
    --oklch-green: oklch(52% 0.15 155);
    --oklch-red: oklch(52% 0.17 22);
    /* === 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);
    /* Valores efectivos actuales (teal/amber/red) — preservados al plegar el bloque "Legacy alias bridge" duplicado */
    --color-success: var(--app-color-success);
    --color-warning: var(--app-color-warning);
    --color-danger: var(--app-color-danger);
    /* === Colores de Estado === */
    --status-error: var(--chakra-red-500);
    --status-error-subtle: rgba(229, 62, 62, 0.12);
    --status-warning-subtle: rgba(214, 158, 46, 0.10);
    --status-success-subtle: rgba(56, 161, 105, 0.08);
    --color-inactive: var(--palette-gray-blue);
    /* ============================================
       BACKWARD-COMPATIBILITY ALIASES
       Alias antiguos (usados en vistas o CSS legacy)
       Mantener para evitar variables no resueltas
    ============================================ */
    /* Common legacy names -> canonical tokens (DEPRECATED — usar --color-* en nuevo código) */
    --success-color: var(--color-success);
    --success-dark: rgb(var(--bs-success-rgb, 46, 125, 50));
    --primary-color: var(--color-primary);
    --info-color: var(--color-info);
    --warning-color: var(--color-warning);
    /* ============================================
       ALIASES UNIFICADOS (consolidación de duplicados)
       Reemplazan --census-*, duplicados de módulos
       ============================================ */
    /* Census aliases (para retrocompatibilidad) */
    --census-primary: var(--palette-blue-primary);
    --census-danger: #E74C3C;
    /* Census grays — solo los que están en uso */
    --census-gray-200: #e9ecef;
    --census-gray-300: #dee2e6;
    --census-gray-600: #6c757d;
    /* 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-gap: 0.75rem;
    /* Progress colors */
    /* Comparison colors */
    /* ── 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-average: #d69e2e;
    --perf-below: #dd6b20;
    /* ── 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-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;
    --insight-count-bg: rgba(0, 0, 0, 0.1);
    /* Category colors */
    --category-trend: #007bff;
    /* ============================================
       OUTLOOK-INSPIRED TOKENS (NUEVO)
       Colores neutros y profesionales tipo Outlook/Azure
       ============================================ */
    --outlook-bg-primary: #FFFFFF;
    --outlook-bg-secondary: #F5F4F1; /* cálido */
    --outlook-bg-tertiary: #FAFAF8; /* cálido */
    --outlook-bg-hover: #EFEEE9; /* cálido */
    --outlook-bg-selected: #E8EDF5;
    --outlook-bg-pressed: #E3E2DD; /* cálido */

    --outlook-border: #E3E2DD; /* cálido */
    --outlook-border-light: #EDECEA; /* cálido */
    --outlook-border-subtle: #E8E8E8;
    --outlook-border-hover: #B5B0AB; /* cálido */
    --outlook-border-focus: #0078D4; /* mantener azul foco */
    --outlook-blue: #0078D4;

    --outlook-text-primary: #1A1814; /* cálido */
    --outlook-text-secondary: #6B6660; /* cálido */
    --outlook-text-tertiary: #B0ACA6; /* cálido */
    --outlook-text-disabled: #C8C6C4;
    --color-disabled: #C8C6C4;
    --outlook-icon-neutral: #605E5C;
    --outlook-icon-hover: #201F1E;
    --outlook-icon-disabled: #C8C6C4;
    --outlook-shadow-subtle: 0 1px 2px rgba(27,24,20,.04), 0 0.5px 1px rgba(27,24,20,.03);
    --outlook-shadow-card: 0 2px 6px rgba(27,24,20,.06), 0 1px 2px rgba(27,24,20,.04);
    --outlook-shadow-elevated: 0 6px 16px rgba(27,24,20,.09), 0 2px 4px rgba(27,24,20,.05);
    /* 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-input-bg: var(--outlook-bg-tertiary);
    /* Panel shadow — unified for .panel-card, .binas-content-panel, etc. */
    --panel-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --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: 35, 45, 79;
    --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);

    /* ============================================
       BUTTON SYSTEM TOKENS (migrados desde binas-button-system.css)
       ============================================ */
    /* Button radii */
    --btn-system-radius: var(--radius-xs);
    --btn-system-radius-sm: var(--radius-xs);
    --btn-system-radius-lg: var(--radius-sm);

    /* Focus rings */
    --btn-focus-ring: 0 0 0 0.2rem rgba(var(--palette-blue-primary-rgb), 0.25);

    /* Button padding by size */
    --btn-padding-x-sm: var(--spacing-3);
    --btn-padding-x-md: var(--spacing-5);
    --btn-padding-x-lg: var(--spacing-6);
    --btn-padding-y-sm: var(--spacing-1);
    --btn-padding-y-md: var(--spacing-2);
    --btn-padding-y-lg: var(--spacing-3);

    /* ============================================
       FONDOS Y SUPERFICIES
       ============================================ */
    --bg-base: #F2F2F2;
    --bg-light: var(--outlook-bg-tertiary);
    --bg-surface: var(--outlook-bg-primary);
    /* Fondos cálidos BINAS (alias para compatibilidad — usar --outlook-bg-* en código nuevo) */
    --bg-grey-100: var(--outlook-bg-primary);
    --bg-grey-200: var(--outlook-bg-tertiary);
    --bg-grey-300: var(--outlook-bg-secondary);
    --bg-grey-400: var(--outlook-bg-hover);
    --bg-grey-500: var(--outlook-bg-pressed);
    --bg-grey-600: #B8B5AF;
    /* Superficies (alias para compatibilidad — usar --outlook-bg-* en código nuevo) */
    --surface-primary: var(--outlook-bg-primary);
    --surface-secondary: var(--outlook-bg-secondary);
    --surface-hover: var(--outlook-bg-hover);
    /* Bordes (Border System) */
    --border-light: #EDECEA;
    --border-medium: #E3E2DD;
    /* ============================================
       BORDES Y L�NEAS
       ============================================ */
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-width-validation: 4px;
    --border-color: rgba(27, 24, 20, 0.12);
    --border-color-light: rgba(27, 24, 20, 0.06);
    --border-color-medium: rgba(27, 24, 20, 0.16);
    --border-color-dark: rgba(27, 24, 20, 0.22);
    --border-color-button: #EDECEA;
    /* Border Radius */
    --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%;
    /* Alias --border-radius-* (referenciado en algunos módulos pero no definido) */
    --border-radius-sm: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    /* Aliases sem�nticos */
    --card-radius: var(--radius-lg);
    --button-radius: var(--radius-sm);
    --input-radius: var(--radius-sm);
    /* ============================================
       SOMBRAS Y ELEVACI�N
       ============================================ */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(27, 24, 20, 0.04);
    --shadow-sm: 0 1px 3px rgba(27, 24, 20, 0.06);
    --shadow: 0 2px 6px rgba(27, 24, 20, 0.07);
    --shadow-md: 0 6px 20px rgba(27, 24, 20, 0.08);
    --shadow-lg: 0 12px 32px rgba(27, 24, 20, 0.10);
    /* Sombras de hover */
    --shadow-hover: 0 4px 12px rgba(27, 24, 20, 0.10);
    --shadow-hover-lg: 0 6px 20px rgba(27, 24, 20, 0.13);
    /* Sombras de colores */
    --shadow-primary: 0 2px 8px rgba(35, 45, 79, 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);
    /* ============================================
       TIPOGRAF�A
       ============================================ */
    /* Familias de fuentes */
    /* NOTA: cargar en _Layout.cshtml:
       <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> */
    --font-display: 'Hanken Grotesk', 'DM Sans', 'Segoe UI', sans-serif;
    /* Valor efectivo actual (familia 'app-*') — preservado al plegar el bloque "Legacy alias bridge" duplicado; --font-display sigue vivo para sus consumidores directos */
    --font-primary: var(--app-font-primary);
    --font-secondary: var(--app-font-secondary);
    --font-monospace: var(--app-font-monospace);
    --font-family-base: var(--app-font-primary);
    --font-family-heading: var(--app-font-primary);
    /* Tamaños de fuente */
    --font-size-xs: 0.688rem; /* 11px */
    --font-size-compact: 0.78rem; /* 12.5px — grid/texto compacto */
    --font-size-sm: 0.813rem; /* 13px */
    --font-size-base: 1rem; /* 16px */
    --font-size-md: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.375rem; /* 22px */
    --font-size-2xl: 1.75rem; /* 28px */
    --font-size-3xl: 2.25rem; /* 36px */
    --font-size-4xl: 2.75rem; /* 44px — hero/display */
    /* Task & display semantic aliases (from DESIGN.md) */
    --task-font-size: var(--font-size-sm); /* 13px — task list items */
    --display-font-size: var(--font-size-4xl); /* 44px — hero/display headings */
    /* Escala heading semántica (mapea h1-h6 a font-size) */
    --heading-h1: var(--font-size-3xl);
    --heading-h2: var(--font-size-2xl);
    --heading-h3: var(--font-size-xl);
    --heading-h4: var(--font-size-lg);
    --heading-h5: var(--font-size-md);
    --heading-h6: var(--font-size-base);
    /* Pesos de fuente */
    --font-weight-light: 200;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* Altura de l�nea */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    /* ============================================
       ESPACIADO
  Escala de espaciado consistente - REDUCIDO para m�s densidad
       ============================================ */
    --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) */
    /* 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-2xl: 1536px;
    /* Tama�os de iconos */
    --icon-color-neutral: var(--outlook-icon-neutral);
    --icon-color-success: var(--color-success);
    --icon-color-warning: var(--color-warning);
    --icon-color-danger: var(--color-danger);
    --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-md: 2.125rem; /* 34px (antes 40px) */
    /* ============================================
       TRANSICIONES Y ANIMACIONES
       ============================================ */
    --transition-fast: 0.15s ease;
    --transition-base: 0.18s ease;
    --transition-slow: 0.35s 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-out: cubic-bezier(0, 0, 0.2, 1);
    /* Duraciones de animaci�n */
    --duration-base: 180ms;
    /* ============================================
       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;
    /* ============================================
   BREAKPOINTS
       Para uso en media queries
       ============================================ */
    /* ============================================
       COMPONENTES ESPEC�FICOS
       ============================================ */
    /* Activity Lights (sem�foro) */
    /* Scrollbar */
    --scrollbar-width: 8px;
    --scrollbar-track-bg: transparent;
    --scrollbar-thumb-bg: #6A6A6A;
    --scrollbar-thumb-radius: var(--radius-lg);
    /* Progress */
    /* ============================================
    UTILIDADES DE DESARROLLO
    Solo para debugging, remover en producci�n
       ============================================ */

    /* Category semantic tokens (used by simple-explorer) */
    --category-agua-bg: rgba(var(--palette-blue-primary-rgb),0.08);
    --category-agua-fg: var(--palette-blue-primary);
    --category-saneamiento-bg: rgba(var(--palette-teal-rgb),0.08);
    --category-saneamiento-fg: var(--palette-teal);
    --category-calidad-vida-bg: rgba(255,246,219,1);
    --category-calidad-vida-fg: #7a5a1f;
    --category-indice-compuesto-bg: rgba(147,103,163,0.08);
    --category-indice-compuesto-fg: var(--binas-magenta);
    --category-default-bg: var(--outlook-bg-secondary);
    --category-default-fg: var(--outlook-text-primary);

    /* Design System Tokens (trasladados desde binas-design-system.css) */
    --module-census-accent: #17A2B8;
    --module-census-accent-rgb: 23, 162, 184;
    --module-census-accent-dark: #138496;
    --module-census-accent-light: #d1ecf1;
    --module-infra-accent: #1565C0;
    --module-infra-accent-rgb: 21, 101, 192;
    --module-infra-accent-dark: #0D47A1;
    --module-infra-accent-light: #BBDEFB;
    --semantic-success: #28A745;
    --semantic-success-light: #d4edda;
    --semantic-success-text: #155724;
    --semantic-warning: #FFC107;
    --semantic-warning-light: #fff3cd;
    --semantic-warning-text: #856404;
    --semantic-danger: #DC3545;
    --semantic-danger-light: #f8d7da;
    --semantic-danger-text: #721c24;
    --semantic-info: #0D6EFD;
    --semantic-info-light: #cfe2ff;
    --semantic-info-text: #084298;
    --semantic-neutral-light: #f8f9fa;
    --semantic-neutral-text: #343a40;
    --semantic-neutral-label: #495057;
    --ds-font-section-title: 1rem;
    --ds-font-kpi-value: 2rem;
    --ds-font-kpi-label: 0.72rem;
    --ds-font-kpi-sublabel: 0.78rem;
    --ds-font-body: var(--font-size-base);
    --ds-font-caption: 0.75rem;
    --ds-card-padding: 1.25rem;
    --ds-card-radius: 0.5rem;
    --ds-card-shadow-hover: 0 4px 12px rgba(0,0,0,.14);
    --ds-header-line-width: 3px;
    --ds-header-line-style: solid;

    /* Canonical app family tokens */
    --app-font-primary: 'DM Sans', 'Segoe UI', sans-serif;
    --app-font-secondary: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --app-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --app-spacing-md: 0.75rem;
    --app-shadow-card: 0 2px 6px rgba(27, 24, 20, 0.07);
    --app-color-success: var(--palette-teal);
    --app-color-warning: var(--palette-amber);
    --app-color-danger: var(--palette-red);
    /* NOTA: el antiguo bloque "Legacy alias bridge" (re-declaraba font/spacing/radius/shadow/
       transition/color/bg/surface/icon una segunda vez dentro de este mismo :root) fue plegado:
       cada propiedad duplicada ahora tiene una única declaración canónica en su ubicación
       original más arriba, con el valor efectivo que ya estaba en vigor (evita el riesgo de
       un futuro "repaint" silencioso al tocar este archivo). */

    /* Migrado desde custom/global.custom.css (:root duplicado) — ese archivo se carga en
       todas las páginas vía _Layout, por lo que estas variables ya eran de facto globales. */
    --mc-color-main: #326587;
    --mc-color-background: #F7FAFC;
    --mc-color-font: #326587;
    --mc-color-border: #b6cddd;
    --mc-text-home-light: #659fc5;
}