/**
 * ============================================================================
 *    ERP ENSENYEM DESIGN SYSTEM - TOKENS CENTRALIZADOS
 * ============================================================================
 * Este archivo contiene TODOS los tokens de diseño del sistema.
 * Debe ser el PRIMER CSS que se carga en el proyecto.
 * 
 * Organizado por:
 * 1. Colores (Brand, Neutral, Semantic, Status)
 * 2. Tipografía
 * 3. Espaciado (Spacing)
 * 4. Bordes y Radios
 * 5. Sombras
 * 6. Transiciones
 * 7. Z-index
 * 
 * Uso: @import 'design-tokens.css' AL INICIO de style.css
 * ============================================================================
 */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    /* ==========================================================================
       0. TIPOGRAFÍA - Google Style (Outfit)
       ========================================================================== */
    --font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-fallback: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ==========================================================================
       1. COLORES - BRAND (Ensenyem)
       ========================================================================== */
    --color-brand-50:  #fdf2f2;
    --color-brand-100: #fde8e8;
    --color-brand-200: #fbd5d5;
    --color-brand-300: #f8b4b4;
    --color-brand-400: #f98080;
    --color-brand-500: #8B1D1D;  /* Color principal - rojo corporativo Ensenyem */
    --color-brand-600: #721717;  /* Hover state */
    --color-brand-700: #591212;
    --color-brand-800: #450e0e;
    --color-brand-900: #360808;

    /* Google Material Design 3 neutral palette (dashboard) */
    --google-text-primary:   #202124;
    --google-text-secondary: #5F6368;
    --google-surface:        #F8F9FA;
    --google-border:         #E0E0E0;
    --google-brand-soft:     rgba(139, 29, 29, 0.08);

    /* Alias para compatibilidad */
    --primary-50:  var(--color-brand-50);
    --primary-100: var(--color-brand-100);
    --primary-200: var(--color-brand-200);
    --primary-300: var(--color-brand-300);
    --primary-400: var(--color-brand-400);
    --primary-500: var(--color-brand-500);
    --primary-600: var(--color-brand-600);
    --primary-700: var(--color-brand-700);
    --primary-800: var(--color-brand-800);
    --primary-900: var(--color-brand-900);

    /* ==========================================================================
       2. COLORES - NEUTRAL (Grises)
       ========================================================================== */
    --color-gray-50:  #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;
    --color-gray-950: #020617;

    /* Alias para compatibilidad */
    --gray-50:  var(--color-gray-50);
    --gray-100: var(--color-gray-100);
    --gray-200: var(--color-gray-200);
    --gray-300: var(--color-gray-300);
    --gray-400: var(--color-gray-400);
    --gray-500: var(--color-gray-500);
    --gray-600: var(--color-gray-600);
    --gray-700: var(--color-gray-700);
    --gray-800: var(--color-gray-800);
    --gray-900: var(--color-gray-900);

    /* ==========================================================================
       3. COLORES - SEMÁNTICOS (Feedback)
       ========================================================================== */
    /* Success - Verde */
    --color-success-50:  #ecfdf5;
    --color-success-100: #d1fae5;
    --color-success-200: #a7f3d0;
    --color-success-300: #6ee7b7;
    --color-success-400: #34d399;
    --color-success-500: #10b981;
    --color-success-600: #059669;
    --color-success-700: #047857;
    --color-success-800: #065f46;
    --color-success-900: #064e3b;

    /* Danger - Rojo */
    --color-danger-50:  #fef2f2;
    --color-danger-100: #fee2e2;
    --color-danger-200: #fecaca;
    --color-danger-300: #fca5a5;
    --color-danger-400: #f87171;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-danger-700: #b91c1c;
    --color-danger-800: #991b1b;
    --color-danger-900: #7f1d1d;

    /* Warning - Amarillo */
    --color-warning-50:  #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-200: #fde68a;
    --color-warning-300: #fcd34d;
    --color-warning-400: #fbbf24;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;
    --color-warning-800: #92400e;
    --color-warning-900: #78350f;

    /* Info - Azul */
    --color-info-50:  #eff6ff;
    --color-info-100: #dbeafe;
    --color-info-200: #bfdbfe;
    --color-info-300: #93c5fd;
    --color-info-400: #60a5fa;
    --color-info-500: #3b82f6;
    --color-info-600: #2563eb;
    --color-info-700: #1d4ed8;
    --color-info-800: #1e40af;
    --color-info-900: #1e3a8a;

    /* Alias para compatibilidad - Semantic colors */
    --success-bg: var(--color-success-50);
    /* ------------------------------------------------------------------
       Alias cortos de las escalas semanticas. El CSS del ERP escribe
       `var(--danger-600)`, `var(--success-50)`... pero solo existian con el
       prefijo --color-*. Un var() no definido invalida la declaracion ENTERA
       en silencio: `.text-danger` no pintaba de rojo y varios separadores
       `border: 1px solid var(--color-border)` no se dibujaban.
       ------------------------------------------------------------------ */
    --success-50: var(--color-success-50);
    --success-100: var(--color-success-100);
    --success-200: var(--color-success-200);
    --success-300: var(--color-success-300);
    --success-400: var(--color-success-400);
    --success-500: var(--color-success-500);
    --success-600: var(--color-success-600);
    --success-700: var(--color-success-700);
    --success-800: var(--color-success-800);
    --success-900: var(--color-success-900);

    --danger-50: var(--color-danger-50);
    --danger-100: var(--color-danger-100);
    --danger-200: var(--color-danger-200);
    --danger-300: var(--color-danger-300);
    --danger-400: var(--color-danger-400);
    --danger-500: var(--color-danger-500);
    --danger-600: var(--color-danger-600);
    --danger-700: var(--color-danger-700);
    --danger-800: var(--color-danger-800);
    --danger-900: var(--color-danger-900);

    --warning-50: var(--color-warning-50);
    --warning-100: var(--color-warning-100);
    --warning-200: var(--color-warning-200);
    --warning-300: var(--color-warning-300);
    --warning-400: var(--color-warning-400);
    --warning-500: var(--color-warning-500);
    --warning-600: var(--color-warning-600);
    --warning-700: var(--color-warning-700);
    --warning-800: var(--color-warning-800);
    --warning-900: var(--color-warning-900);

    --info-50: var(--color-info-50);
    --info-100: var(--color-info-100);
    --info-200: var(--color-info-200);
    --info-300: var(--color-info-300);
    --info-400: var(--color-info-400);
    --info-500: var(--color-info-500);
    --info-600: var(--color-info-600);
    --info-700: var(--color-info-700);
    --info-800: var(--color-info-800);
    --info-900: var(--color-info-900);

    --success-text: var(--color-success-600);
    --success-border: var(--color-success-200);

    --danger-bg: var(--color-danger-50);
    --danger-text: var(--color-danger-600);
    --danger-border: var(--color-danger-200);

    --warning-bg: var(--color-warning-50);
    --warning-text: var(--color-warning-600);
    --warning-border: var(--color-warning-200);

    --info-bg: var(--color-info-50);
    --info-text: var(--color-info-600);
    --info-border: var(--color-info-200);

    --neutral-bg: var(--color-gray-50);
    --neutral-text: var(--color-gray-600);
    --neutral-border: var(--color-gray-200);

    /* Status colors (para badges/estados) */
    --status-success: var(--color-success-500);
    --status-warning: var(--color-warning-500);
    --status-danger: var(--color-danger-500);
    --status-info: var(--color-info-500);
    --status-pending: #8b5cf6;
    --status-neutral: var(--color-gray-400);

    /* ==========================================================================
       4. TIPOGRAFÍA (Tokens de escala)
       ========================================================================== */

    /* Tamaños de fuente (escala: 12px -> 24px) */
    --text-2xs:   0.66rem;    /* ~10.5px — etiquetas/pills meta muy pequeñas */
    --text-xs:    0.75rem;    /* 12px */
    --text-sm:    0.875rem;   /* 14px */
    --text-base:  1rem;       /* 16px */
    --text-lg:    1.125rem;   /* 18px */
    --text-xl:    1.25rem;    /* 20px */
    --text-2xl:   1.5rem;     /* 24px */
    --text-3xl:   1.875rem;   /* 30px */
    --text-4xl:   2.25rem;    /* 36px */

    /* Alias para compatibilidad */
    --font-size-xs:   var(--text-xs);
    --font-size-sm:   var(--text-sm);
    --font-size-base: var(--text-base);
    --font-size-lg:   var(--text-lg);
    --font-size-xl:   var(--text-xl);
    --font-size-2xl:  var(--text-2xl);

    /* Tamaños de icono (font-size de glyph icons: material-symbols, chevrons) */
    --icon-size-sm:   0.9rem;
    --icon-size-base: 1rem;
    --icon-size-md:   1.05rem;
    --icon-size-lg:   1.15rem;

    /* Pesos de fuente */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ==========================================================================
       5. ESPACIADO (Spacial Scale - múltiplos de 4px)
       ========================================================================== */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */

    /* Alias para compatibilidad */
    --container-padding: var(--space-4);

    /* ==========================================================================
       6. BORDES Y RADIOS
       ========================================================================== */
    --radius-none: 0;
    --radius-sm: 0.25rem;    /* 4px */
    --radius:     0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    /* Alias: `--radius-md` se usaba en 8 reglas del ERP pero NUNCA estuvo
       definido. Sin fallback, `border-radius: var(--radius-md)` es invalido y
       el borde sale cuadrado. Se define aqui en vez de tocar los 8 usos. */
    --radius-md: var(--radius);
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;

    /* Alias para compatibilidad */
    --border-radius-sm: var(--radius-sm);
    --border-radius: var(--radius);
    --border-radius-lg: var(--radius-lg);

    --border-width: 1px;
    --border-color: var(--color-gray-200);

    /* ==========================================================================
       7. SOMBRAS (Elevación estilo Google/Material)
       ========================================================================== */
    --shadow-none: none;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow:     0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* Google Elevation */
    --google-shadow-1: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
    --google-shadow-2: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);

    /* ==========================================================================
       7.5. SURFACES (Estética Google)
       ========================================================================== */
    --surface-default: var(--gray-50);
    --surface-card: #ffffff;
    --surface-header: #ffffff;
    --surface-sidebar: #ffffff;
    
    /* Scrollbar minimalista */
    --scrollbar-width: 8px;
    --scrollbar-track: transparent;
    --scrollbar-thumb: var(--gray-300);
    --scrollbar-thumb-hover: var(--gray-400);

    /* ==========================================================================
       8. TRANSICIONES
       ========================================================================== */
    --transition-fast: 150ms;
    --transition-base: 200ms;
    --transition-slow: 300ms;
    --transition-slower: 500ms;

    /* ==========================================================================
       9. Z-INDEX
       ========================================================================== */
    --z-dropdown:          1000;
    --z-sticky:            1020;
    --z-fixed:            1030;
    --z-modal-backdrop:   1040;
    --z-modal:             1050;
    --z-popover:          1060;
    --z-tooltip:           1070;
    --z-toast:            1080;

    /* ==========================================================================
       10. LAYOUT (Dimensiones del sistema)
       ========================================================================== */
    --header-height: 60px;
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 64px;
    --content-max-width: 1400px;

    /* ==========================================================================
       11. COMPONENTES BASE
       ========================================================================== */
    /* Botones: ver el bloque canonico --btn-* mas abajo. Aqui vivia un segundo
       juego de tokens de boton (--btn-height: 40px, --btn-radius, --btn-padding-x...)
       que NO usaba nadie y que solo servia para chocar con el bueno. */

    /* Inputs */
    --input-height: 40px;
    --input-height-sm: 32px;
    --input-height-lg: 48px;
    --input-padding-x: 0.75rem;
    --input-padding-y: 0.5rem;
    --input-font-size: var(--text-sm);
    --input-radius: var(--radius);
    --input-border-color: var(--color-gray-300);
    --input-focus-ring: 0 0 0 3px rgba(130, 3, 3, 0.1);

    /* Cards */
    --card-padding: var(--space-6);
    --card-radius: var(--radius-lg);
    --card-shadow: var(--shadow);
    --card-bg: white;

    /* Badges */
    --badge-padding-x: 0.5rem;
    --badge-padding-y: 0.125rem;
    --badge-font-size: var(--text-xs);
    --badge-font-weight: var(--font-weight-semibold);
    --badge-radius: var(--radius-full);

    /* ------------------------------------------------------------------
       Botones — FUENTE UNICA DE VERDAD del boton del ERP.
       El ERP tiene UN solo boton: pildora de 2.15rem. Es el que ya usaban
       las cabeceras de listado (Exportar / Nuevo grupo) y ahora vale para
       formularios, modales y tablas. Para cambiar el aspecto del boton en
       todo el ERP se tocan ESTOS tokens, no las reglas.
       ------------------------------------------------------------------ */
    --btn-height: 2.15rem;
    --btn-radius: var(--radius-full);
    --btn-gap: 0.38rem;
    --btn-padding-inline: 0.8rem;
    --btn-font-size: 0.78rem;
    --btn-font-weight: var(--font-weight-medium);
    --btn-icon-size: 1rem;
    --btn-transition: 180ms cubic-bezier(0.2, 0, 0, 1);

    --btn-primary-bg: var(--primary-600);
    --btn-primary-hover-bg: color-mix(in srgb, var(--btn-primary-bg) 90%, #000 10%);
    --btn-primary-fg: #fff;

    --btn-secondary-bg: var(--surface-card, #fff);
    --btn-secondary-hover-bg: color-mix(in srgb, var(--btn-secondary-bg) 94%, var(--gray-100, #f1f5f9) 6%);
    --btn-secondary-pressed-bg: color-mix(in srgb, var(--btn-primary-bg) 10%, var(--btn-secondary-bg) 90%);
    --btn-secondary-fg: var(--gray-900, #111827);
    --btn-secondary-border: color-mix(in srgb, var(--gray-300, #cbd5e1) 82%, var(--btn-primary-bg) 18%);

    /* Ghost: sin fondo pero CON contorno. Es la variante mas usada del ERP (63
       usos, casi todos iconos de accion en tablas); sin borde no se leia como
       boton hasta pasar el raton por encima. */
    --btn-ghost-border: var(--btn-secondary-border);
    --btn-ghost-fg: var(--gray-600, #475569);

    --btn-focus-ring: 0 0 0 3px color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);

    /* Tamanos alternativos (mismo boton, otra densidad) */
    --btn-height-small: 1.75rem;
    --btn-padding-inline-small: 0.6rem;
    --btn-font-size-small: 0.72rem;
    --btn-height-large: 2.6rem;
    --btn-padding-inline-large: 1.15rem;
    --btn-font-size-large: 0.875rem;

    /* Data Buttons (Export/Import) */
    --btn-data-bg: transparent;
    --btn-data-color: var(--color-brand-500);
    --btn-data-border: var(--color-brand-500);
    --btn-data-hover-bg: var(--color-brand-50);
    --btn-data-hover-color: var(--color-brand-600);
    --btn-data-hover-border: var(--color-brand-600);

    /* Filter Button (Añadir filtro) */
    --btn-filter-bg: white;
    --btn-filter-color: var(--color-gray-700);
    --btn-filter-border: var(--color-gray-300);
    --btn-filter-icon-bg: var(--color-gray-100);
    --btn-filter-icon-color: var(--color-gray-600);
    --btn-filter-hover-bg: var(--color-gray-50);
    --btn-filter-hover-border: var(--color-gray-400);
    --btn-filter-active-border: var(--primary-500);
    --btn-filter-active-ring: 0 0 0 3px rgba(130, 3, 3, 0.1);
    --btn-filter-height: 36px;

    /* Filter Dropdown Items */
    --filter-item-color: var(--color-gray-700);
    --filter-item-bg: transparent;
    --filter-item-hover-bg: var(--color-gray-50);
    --filter-item-hover-color: var(--color-gray-900);
    --filter-item-icon-bg: var(--color-gray-100);
    --filter-item-icon-color: var(--color-gray-600);

    /* Active Filter Chips */
    --filter-chip-bg: linear-gradient(180deg, white 0%, var(--color-gray-50) 100%);
    --filter-chip-border: var(--color-gray-200);
    --filter-chip-color: var(--color-gray-700);
    --filter-chip-hover-border: var(--color-info-300);
    --filter-chip-hover-shadow: var(--shadow-md);
    --filter-chip-label-color: var(--color-gray-500);
    --filter-chip-label-size: 0.62rem;
    --filter-chip-radius: var(--radius-lg);
    --filter-chip-shadow: var(--shadow-sm);
    --filter-chip-height: 36px;

    /* Table Columns Button */
    --table-cols-btn-height: 36px;
    --table-cols-btn-bg: linear-gradient(180deg, white 0%, var(--color-gray-50) 100%);
    --table-cols-btn-border: var(--color-gray-300);
    --table-cols-btn-color: var(--color-gray-700);
    --table-cols-btn-radius: var(--radius-lg);
    --table-cols-btn-hover-bg: var(--color-gray-50);
    --table-cols-btn-hover-border: var(--color-gray-400);

    /* Table Styles */
    --table-wrapper-bg: white;
    --table-wrapper-border: var(--color-gray-200);
    --table-wrapper-radius: var(--radius-lg);
    --table-thead-bg: var(--color-gray-50);
    --table-thead-border: var(--color-gray-200);
    --table-thead-color: var(--color-gray-600);
    --table-thead-font-size: var(--text-xs);
    --table-thead-weight: var(--font-weight-semibold);
    --table-tbody-border: var(--color-gray-100);
    --table-tbody-color: var(--color-gray-700);
    --table-tbody-row-hover: var(--color-gray-50);
    --table-cell-padding-x: 0.75rem;
    --table-cell-padding-y: 0.5rem;

    /* Sidebar */
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 72px;
    --sidebar-bg: white;
    --sidebar-border-color: var(--color-gray-200);
    --sidebar-header-height: 44px;
    --sidebar-header-border: var(--color-gray-100);
    --sidebar-brand-color: var(--primary-700);
    --sidebar-brand-bg: var(--primary-600);
    --sidebar-text-color: var(--color-gray-600);
    --sidebar-text-hover: var(--primary-700);
    --sidebar-group-title-color: var(--color-gray-500);
    --sidebar-active-bg: var(--primary-50);
    --sidebar-active-color: var(--primary-700);
    --sidebar-submenu-color: var(--color-gray-500);
    --sidebar-submenu-hover: var(--primary-600);
    --sidebar-submenu-icon-width: 1.25rem;
    --sidebar-footer-border: var(--color-gray-100);
    --sidebar-user-icon-color: var(--color-gray-400);
    --sidebar-toggle-color: var(--color-gray-500);

/* Filter Select Input */
    --filter-select-color: var(--color-gray-700);
    --filter-select-bg: transparent;
    --filter-select-border: none;
    --filter-select-width-min: 2rem;
    --filter-select-width-max: 6rem;

    /* ==========================================================================
        12. PAGINATION (Paginación)
        ========================================================================== */
    /* Contenedor principal */
    --pagination-container-gap: var(--space-2);
    --pagination-container-padding-y: var(--space-3);
    --pagination-container-justify: center;
    --pagination-container-align: center;

    /* Botones de página (números) */
    --pagination-btn-min-width: 2.25rem;
    --pagination-btn-height: 2.25rem;
    --pagination-btn-padding-x: var(--space-2);
    --pagination-btn-bg: white;
    --pagination-btn-border: var(--color-gray-300);
    --pagination-btn-color: var(--color-gray-700);
    --pagination-btn-radius: var(--radius-sm);
    --pagination-btn-font-size: var(--text-sm);
    --pagination-btn-hover-bg: var(--color-gray-50);
    --pagination-btn-hover-border: var(--color-gray-400);
    --pagination-btn-hover-color: var(--color-gray-800);
    --pagination-btn-transition: var(--transition-fast);

    /* Botón activo */
    --pagination-btn-active-bg: var(--primary-700);
    --pagination-btn-active-border: var(--primary-700);
    --pagination-btn-active-color: white;
    --pagination-btn-active-shadow: var(--shadow-sm);

    /* Botón deshabilitado */
    --pagination-btn-disabled-opacity: 0.5;
    --pagination-btn-disabled-pointer-events: none;

    /* Botones Anterior/Siguiente */
    --pagination-nav-padding-x: var(--space-3);
    --pagination-nav-padding-y: var(--space-2);
    --pagination-nav-min-width: auto;

    /* Ellipsis (...) */
    --pagination-ellipsis-color: var(--color-gray-500);
    --pagination-ellipsis-padding-x: var(--space-2);

    /* Info de resultados */
    --pagination-info-color: var(--color-gray-600);
    --pagination-info-font-size: var(--text-sm);

    /* Items por página selector */
    --pagination-per-page-bg: white;
    --pagination-per-page-border: var(--color-gray-300);
    --pagination-per-page-color: var(--color-gray-700);
    --pagination-per-page-height: 2rem;

    /* ==========================================================================
        13. TOAST NOTIFICATIONS
        ========================================================================== */
    /* Contenedor */
    --toast-container-position: fixed;
    --toast-container-bottom: var(--space-8);
    --toast-container-right: var(--space-8);
    --toast-container-z-index: var(--z-toast);
    --toast-container-gap: var(--space-4);

    /* Toast individual */
    --toast-min-width: 300px;
    --toast-max-width: 450px;
    --toast-padding-x: var(--space-6);
    --toast-padding-y: var(--space-4);
    --toast-radius: var(--radius);
    --toast-shadow: var(--shadow-lg);
    --toast-border-width: var(--border-width);
    --toast-border-left-width: 4px;
    --toast-gap: var(--space-4);
    --toast-transition: var(--transition-slow);

    /* Icono */
    --toast-icon-size: var(--text-xl);
    --toast-icon-flex-shrink: 0;

    /* Contenido */
    --toast-title-font-size: var(--text-sm);
    --toast-title-font-weight: var(--font-weight-semibold);
    --toast-title-color: var(--color-gray-900);
    --toast-message-font-size: var(--text-sm);
    --toast-message-color: var(--color-gray-600);
    --toast-message-line-height: 1.4;

    /* Botón cerrar */
    --toast-close-color: var(--color-gray-400);
    --toast-close-hover-color: var(--color-gray-600);
    --toast-close-padding: var(--space-1);

    /* Variantes */
    --toast-success-border: var(--success-text);
    --toast-success-color: var(--success-text);
    --toast-error-border: var(--danger-text);
    --toast-error-color: var(--danger-text);
    --toast-warning-border: var(--warning-text);
    --toast-warning-color: var(--warning-text);
    --toast-info-border: var(--info-text);
    --toast-info-color: var(--info-text);

    /* ==========================================================================
        14. MODAL
        ========================================================================== */
    /* Overlay */
    --modal-overlay-bg: rgba(0, 0, 0, 0.5);
    --modal-overlay-z-index: var(--z-modal-backdrop);
    --modal-overlay-blur: 2px;
    --modal-overlay-transition: var(--transition-base);

    /* Modal */
    --modal-bg: white;
    --modal-max-width: 500px;
    --modal-width: 90%;
    --modal-radius: var(--radius-lg);
    --modal-shadow: var(--shadow-lg);
    --modal-transform-scale: 0.95;
    --modal-transition: var(--transition-base);

    /* Header */
    --modal-header-padding: var(--space-6);
    --modal-header-border: var(--color-gray-100);
    --modal-title-font-size: var(--text-lg);
    --modal-title-font-weight: var(--font-weight-semibold);
    --modal-title-color: var(--color-gray-900);

    /* Close button */
    --modal-close-color: var(--color-gray-400);
    --modal-close-hover-color: var(--color-gray-600);
    --modal-close-bg-hover: var(--color-gray-100);
    --modal-close-padding: var(--space-2);
    --modal-close-radius: var(--radius);

    /* Body */
    --modal-body-padding: var(--space-6);
    --modal-body-color: var(--color-gray-600);
    --modal-body-font-size: var(--text-sm);
    --modal-body-line-height: 1.5;

    /* Footer */
    --modal-footer-padding: var(--space-6);
    --modal-footer-bg: var(--color-gray-50);
    --modal-footer-border: var(--color-gray-100);
    --modal-footer-gap: var(--space-3);
    --modal-footer-radius-bottom: var(--radius-lg);

    /* Large variant */
    --modal-lg-max-width: 1040px;

    /* Info grid */
    --modal-info-grid-gap: var(--space-4);
    --modal-info-grid-min-width: 200px;
    --modal-info-label-font-size: var(--text-xs);
    --modal-info-label-weight: var(--font-weight-semibold);
    --modal-info-label-color: var(--color-gray-500);
    --modal-info-value-font-size: var(--text-sm);
    --modal-info-value-color: var(--color-gray-900);
    --modal-info-value-weight: var(--font-weight-medium);

    /* Section */
    --modal-section-margin: var(--space-6);
    --modal-section-padding: var(--space-6);
    --modal-section-border: var(--color-gray-100);

    /* Financial grid */
    --modal-finance-grid-gap: var(--space-3);
    --modal-finance-item-padding: var(--space-3);
    --modal-finance-item-bg: var(--color-gray-50);
    --modal-finance-highlight-bg: var(--primary-50);
    --modal-finance-highlight-border: var(--primary-500);
    --modal-finance-highlight-left-width: 3px;

    /* Rentability */
    --modal-rent-padding: var(--space-4);
    --modal-rent-gap: var(--space-2);
    --modal-rent-radius: var(--radius);
    --modal-rent-border-width: 4px;
    --modal-rent-label-size: var(--text-sm);
    --modal-rent-value-size: var(--text-2xl);

    /* ==========================================================================
        15. BREADCRUMBS
        ========================================================================== */
    --breadcrumbs-font-size: var(--text-xs);
    --breadcrumbs-color: var(--color-gray-400);
    --breadcrumbs-gap: var(--space-1);
    --breadcrumbs-line-height: 1;
    --breadcrumbs-margin-bottom: 0;

    /* Link */
    --breadcrumbs-link-color: var(--color-gray-400);
    --breadcrumbs-link-hover-color: var(--primary-600);
    --breadcrumbs-link-text-decoration: none;
    --breadcrumbs-link-transition: var(--transition-fast);

    /* Separator */
    --breadcrumbs-sep-margin-x: var(--space-1);
    --breadcrumbs-sep-color: var(--color-gray-300);
    --breadcrumbs-sep-font-size: var(--text-xs);

    /* Current (activo) */
    --breadcrumbs-current-color: var(--color-gray-600);
    --breadcrumbs-current-weight: var(--font-weight-medium);

    /* Step (para wizard) */
    --breadcrumbs-step-padding-x: var(--space-2);
    --breadcrumbs-step-padding-y: var(--space-1);
    --breadcrumbs-step-radius: var(--radius-full);
    --breadcrumbs-step-bg: white;
    --breadcrumbs-step-border: var(--color-gray-200);
    --breadcrumbs-step-color: var(--color-gray-500);
    --breadcrumbs-step-active-bg: var(--color-info-50);
    --breadcrumbs-step-active-border: var(--color-info-300);
    --breadcrumbs-step-active-color: var(--color-info-600);
    --breadcrumbs-step-hover-bg: var(--color-gray-50);

    /* ==========================================================================
        16. CALENDAR
        ========================================================================== */
    /* Viewport & Layout - diseñado para 1920x1080 */
    --calendar-viewport-height: 100%;
    --calendar-viewport-min-height: 0;
    --calendar-content-padding: var(--space-4);
    --calendar-layout-gap: var(--space-2);

    /* Grid */
    --calendar-grid-gap: 1px;
    --calendar-grid-rows: auto repeat(6, minmax(0, 1fr));
    --calendar-grid-radius: var(--radius);

    /* Day headers */
    --calendar-header-bg: var(--color-gray-50);
    --calendar-header-padding-x: var(--space-1);
    --calendar-header-padding-y: var(--space-2);
    --calendar-header-font-size: var(--text-sm);
    --calendar-header-weight: var(--font-weight-semibold);
    --calendar-header-color: var(--color-gray-600);
    --calendar-header-weekend-bg: var(--color-warning-50);
    --calendar-header-weekend-color: var(--warning-text);

    /* Day cells */
    --calendar-day-min-height: 0;
    --calendar-day-padding: var(--space-1);
    --calendar-day-bg: white;
    --calendar-day-empty-bg: var(--color-gray-50);
    --calendar-day-weekend-bg: #fffef7;
    --calendar-day-today-bg: #fefce8;
    --calendar-day-festivo-bg: var(--color-danger-50);

    /* Day number */
    --calendar-daynum-font-size: var(--text-sm);
    --calendar-daynum-font-weight: var(--font-weight-semibold);
    --calendar-daynum-color: var(--color-gray-700);
    --calendar-daynum-margin: var(--space-1);
    --calendar-daynum-today-size: 20px;

    /* Festivo label */
    --calendar-festivo-font-size: var(--text-xs);
    --calendar-festivo-color: var(--danger-text);
    --calendar-festivo-bg: var(--danger-bg);
    --calendar-festivo-padding-x: 4px;
    --calendar-festivo-padding-y: 1px;
    --calendar-festivo-radius: 2px;

    /* Session items */
    --calendar-session-font-size: var(--text-base);
    --calendar-session-padding-x: var(--space-1);
    --calendar-session-padding-y: var(--space-1);
    --calendar-session-margin-bottom: var(--space-1);
    --calendar-session-radius: var(--radius-sm);
    --calendar-session-border-left: 2px;

    /* Session states */
    --calendar-session-bg: var(--info-bg);
    --calendar-session-border: var(--info-text);
    --calendar-session-realizada-bg: var(--success-bg);
    --calendar-session-realizada-border: var(--success-text);
    --calendar-session-cancelada-bg: var(--danger-bg);
    --calendar-session-cancelada-border: var(--danger-text);
    --calendar-session-cancelada-opacity: 0.7;
    --calendar-session-evento-bg: #f3e8ff;
    --calendar-session-evento-border: #a855f7;
    --calendar-session-extra-bg: var(--warning-bg);
    --calendar-session-extra-border: var(--warning-text);

    /* Session text */
    --calendar-sess-time-size: var(--text-sm);
    --calendar-sess-time-weight: var(--font-weight-semibold);
    --calendar-sess-time-color: var(--color-gray-800);
    --calendar-sess-time-gap: var(--space-1);
    --calendar-sess-group-size: var(--text-sm);
    --calendar-sess-group-color: var(--color-gray-600);

    /* Navigation */
    --calendar-nav-padding: var(--space-3);
    --calendar-nav-bg: var(--color-gray-50);
    --calendar-nav-border: var(--color-gray-200);
    --calendar-nav-radius: var(--radius);
    --calendar-title-size: var(--text-lg);
    --calendar-title-weight: var(--font-weight-semibold);
    --calendar-title-color: var(--color-gray-900);

    /* Legend */
    --calendar-legend-gap: var(--space-4);
    --calendar-legend-padding-y: var(--space-2);
    --calendar-legend-font-size: var(--text-xs);
    --calendar-legend-color: var(--color-gray-600);
    --calendar-legend-border: var(--color-gray-200);
    --calendar-dot-size: 8px;

    /* Toolbar */
    --calendar-toolbar-gap: var(--space-2);

    /* Back to group bar */
    --calendar-bar-bg: var(--primary-600);
    --calendar-bar-padding: var(--space-2) var(--space-3);
    --calendar-bar-radius: var(--radius) var(--radius) 0 0;
    --calendar-bar-margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3) calc(-1 * var(--space-4));

    /* Filters */
    --calendar-filter-chip-padding: var(--space-1) var(--space-2);
    --calendar-filter-chip-font-size: var(--text-sm);
    --calendar-filter-chip-gap: var(--space-1);
    --calendar-filter-btn-bg: var(--color-gray-100);
    --calendar-filter-btn-border: var(--color-gray-300);
    --calendar-filter-btn-color: var(--color-gray-700);
    --calendar-filter-select-min-width: 90px;
    --calendar-filter-select-max-width: 180px;

    /* Compact variant */
    --calendar-compact-title-size: var(--text-sm);
    --calendar-compact-title-weight: var(--font-weight-bold);
    --calendar-compact-gap: var(--space-1);

    /* ==========================================================================
        17. AUTOCOMPLETE
        ========================================================================== */
    /* Wrapper */
    --autocomplete-width: 100%;

    /* Input */
    --autocomplete-padding-x: var(--space-3);
    --autocomplete-padding-y: var(--space-2);
    --autocomplete-padding-right-icon: 2.5rem;
    --autocomplete-border: var(--color-gray-300);
    --autocomplete-radius: var(--radius-sm);
    --autocomplete-font-size: var(--text-sm);
    --autocomplete-transition: var(--transition-fast);
    --autocomplete-focus-border: var(--primary-500);
    --autocomplete-focus-ring: 0 0 0 3px rgba(130, 3, 3, 0.1);
    --autocomplete-placeholder-color: var(--color-gray-400);

    /* Clear button */
    --autocomplete-clear-right: var(--space-2);
    --autocomplete-clear-size: var(--text-xl);
    --autocomplete-clear-color: var(--color-gray-400);
    --autocomplete-clear-hover-color: var(--color-gray-600);
    --autocomplete-clear-padding: var(--space-1);

    /* Dropdown */
    --autocomplete-dropdown-margin-top: var(--space-1);
    --autocomplete-dropdown-bg: white;
    --autocomplete-dropdown-border: var(--color-gray-200);
    --autocomplete-dropdown-radius: var(--radius);
    --autocomplete-dropdown-shadow: var(--shadow-md);
    --autocomplete-dropdown-max-height: 300px;
    --autocomplete-dropdown-z-index: var(--z-dropdown);

    /* Items */
    --autocomplete-item-padding-x: var(--space-3);
    --autocomplete-item-padding-y: var(--space-2);
    --autocomplete-item-font-size: var(--text-sm);
    --autocomplete-item-gap: var(--space-2);
    --autocomplete-item-hover-bg: var(--color-gray-50);

    /* Item text */
    --autocomplete-item-text-color: var(--color-gray-900);

    /* Item count (badge) */
    --autocomplete-count-font-size: var(--text-xs);
    --autocomplete-count-color: var(--color-gray-500);
    --autocomplete-count-bg: var(--color-gray-100);
    --autocomplete-count-padding-x: var(--space-1);
    --autocomplete-count-radius: var(--radius-full);

    /* Item "new" */
    --autocomplete-new-bg: var(--color-info-50);
    --autocomplete-new-color: var(--primary-700);
    --autocomplete-new-border: var(--color-gray-200);
    --autocomplete-new-hover-bg: var(--color-info-100);

    /* Empty/Loading states */
    --autocomplete-empty-color: var(--color-gray-500);
    --autocomplete-loading-color: var(--color-gray-500);

    /* Scrollbar */
    --autocomplete-scrollbar-width: var(--space-2);
    --autocomplete-scrollbar-track: var(--color-gray-100);
    --autocomplete-scrollbar-thumb: var(--color-gray-400);
 }

/* ============================================================================
   UTILITY CLASSES - Clases de utilidad rápidas
   ========================================================================== */

/* Colors */
.text-brand { color: var(--color-brand-500); }
.text-gray { color: var(--color-gray-600); }
.text-success { color: var(--color-success-600); }
.text-danger { color: var(--color-danger-600); }
.text-warning { color: var(--color-warning-600); }
.text-info { color: var(--color-info-600); }

.bg-brand { background-color: var(--color-brand-500); }
.bg-gray { background-color: var(--color-gray-100); }
.bg-success { background-color: var(--color-success-50); }
.bg-danger { background-color: var(--color-danger-50); }
.bg-warning { background-color: var(--color-warning-50); }
.bg-info { background-color: var(--color-info-50); }

/* Typography */
.font-xs { font-size: var(--text-xs); }
.font-sm { font-size: var(--text-sm); }
.font-base { font-size: var(--text-base); }
.font-lg { font-size: var(--text-lg); }
.font-xl { font-size: var(--text-xl); }

.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Spacing */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-4 { margin: var(--space-4); }
.m-auto { margin: auto; }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }

/* Radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow */
.shadow-none { box-shadow: var(--shadow-none); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Display */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }

.grid { display: grid; }

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Width/Height */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* ============================================================================
   NOTAS DE USO
   ============================================================================
 * 
 * Cómo usar los tokens:
 * 
 * 1. Colores:
 *    background: var(--color-brand-500);
 *    color: var(--color-gray-700);
 * 
 * 2. Espaciado:
 *    padding: var(--space-4);
 *    margin-bottom: var(--space-2);
 * 
 * 3. Tipografía:
 *    font-size: var(--text-lg);
 *    font-weight: var(--font-weight-semibold);
 * 
 * 4. Sombras:
 *    box-shadow: var(--shadow-md);
 * 
 * 5. Radio:
 *    border-radius: var(--radius-lg);
 * 
 * 6. Utilidades rápidas:
 *    class="text-danger font-semibold p-4 shadow"
 * 
 * ============================================================================
 */