/**
 * --------------------------------------------------------------------------
 * DESIGN TOKENS CORE - ADMINISTRATIVE TEMPLATE (V8)
 * --------------------------------------------------------------------------
 * 
 * Este sistema centraliza las variables de diseño base bajo el estándar Soft UI.
 * - Sin estilos de componentes (solo medidas y colores puros).
 * - Sin clases CSS ni media queries.
 * - Especial enfasis en legibilidad y contrastes semánticos fuertes,
 *   pero con superficies y estructuras suaves.
 */

:root {
    /* =========================================================================
       PALETA DE COLORES COMPLETA (Plantilla Profesional)
       ========================================================================= */

    /* Colores Base */
    --color-primary: #6B1A2A;
    /* Sobrescrito dinámicamente */
    --color-primary-rgb: 107, 26, 42;
    /* Sobrescrito dinámicamente */
    --color-primary-hover: #4A0E18;
    --color-primary-active: #320910;
    --color-primary-bg: rgba(var(--color-primary-rgb), 0.1);
    --color-secondary: #D4C5A9;
    --color-secondary-rgb: 212, 197, 169;
    /* Sobrescrito dinámicamente */
    --color-secondary-bg: rgba(var(--color-secondary-rgb), 0.1);

    --color-accent: #Af9042;
    --color-accent-rgb: 175, 144, 66;
    /* Sobrescrito dinámicamente */

    --color-background: #F8F9FA;
    /* Fondo global de la aplicaci├│n */
    --color-surface: #FFFFFF;
    /* Cajas principales, modales, tarjetas */
    --color-surface-alt: #F1F5F9;
    /* Superficies secundarias (header interno, sidebar) */
    --color-border: #E2E8F0;
    /* Separaciones suaves */
    --color-divider: #F1F5F9;
    /* Divisiones muy sutiles dentro de contenedores */

    /* Variantes Originales de Plantilla (Pastel y Divisores) */
    --color-soft-primary: rgba(107, 26, 42, 0.08);
    --color-soft-success: #e6fffa;
    --color-soft-warning: #fffaf0;
    --color-soft-info: #ebf8ff;

    /*  Variantes Gold Premium (Uso Institucional Secundario) */
    --accent-gold: #Af9042;
    --accent-gold-light: #C5A059;
    --accent-gold-soft: rgba(175, 144, 66, 0.2);

    --color-kpi-blue: #4e73df;
    --color-kpi-green: #1cc88a;
    --color-kpi-yellow: #f6c23e;
    --color-kpi-cyan: #36b9cc;
    --color-divider-light: #f8f9fc;

    /* Estados Semanticos */
    --color-success: #10B981;
    --color-success-hover: #059669;
    --color-success-active: #047857;
    --color-success-bg: rgba(16, 185, 129, 0.1);

    --color-warning: #F59E0B;
    --color-warning-hover: #D97706;
    --color-warning-active: #B45309;
    --color-warning-bg: rgba(245, 158, 11, 0.1);

    --color-danger: #EF4444;
    --color-danger-hover: #DC2626;
    --color-danger-active: #B91C1C;
    --color-danger-bg: rgba(239, 68, 68, 0.1);

    --color-info: #3B82F6;
    --color-info-hover: #2563EB;
    --color-info-active: #1D4ED8;
    --color-info-bg: rgba(59, 130, 246, 0.1);

    /* Status Specific Colors (V8) */
    --color-coral: #FF7F50;
    --color-coral-rgb: 255, 127, 80;
    --color-coral-hover: #E66A42;
    --color-coral-active: #CC5C36;
    --color-coral-bg: rgba(var(--color-coral-rgb), 0.15);

    --color-gray: #6B7280;
    --color-gray-rgb: 107, 114, 128;
    --color-gray-hover: #4B5563;
    --color-gray-active: #374151;
    --color-gray-bg: rgba(var(--color-gray-rgb), 0.15);

    --color-teal: #0D9488;
    --color-teal-rgb: 13, 148, 136;
    --color-teal-hover: #0F766E;
    --color-teal-active: #115E59;
    --color-teal-bg: rgba(var(--color-teal-rgb), 0.15);

    /* Retrocompatibilidad con nombres cortos (Opcional, pero recomendado para estabilidad) */
    --coral: var(--color-coral);
    --coral-light: var(--color-coral-bg);
    --gray: var(--color-gray);
    --gray-light: var(--color-gray-bg);
    --teal: var(--color-teal);
    --teal-light: var(--color-teal-bg);


    /* Escala de Grises (System Scaling) */
    --gray-100: #f3f6f9;
    --gray-200: #ebedf3;
    --gray-300: #e4e6ef;
    --gray-400: #d1d3e0;
    --gray-500: #b5b5c3;
    --gray-600: #7e8299;
    --gray-700: #5e6278;
    --gray-800: #3f4254;
    --gray-900: #181c32;

    /*  Tipografía y Texto */
    --text-primary: #1E293B;
    /* Títulos, encabezados y lectura central */
    --text-secondary: #475569;
    /* Texto estándar, lectura prolongada */
    --text-muted: #94A3B8;
    /* Textos auxiliares, placeholders, iconos inactivos */
    --text-inverse: #FFFFFF;
    /* Texto sobre primary o colores oscuros */
    --text-disabled: #CBD5E1;
    /* Estados bloqueados */


    /* =========================================================================
      TIPOGRAFÍA COMPLETA (Armonía y Escalabilidad)
       ========================================================================= */

    /* Familias Tipográficas */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading: var(--font-family-base);

    /*  Escala Tipográfica Profesional */
    --font-size-xs: 0.75rem;
    /* 12px (Metadatos, Badges) */
    --font-size-sm: 0.875rem;
    /* 14px (Tablas, Navegaci├│n secundaria) */
    --font-size-base: 1rem;
    /* 16px (Cuerpo de texto estándar) */
    --font-size-md: 1.125rem;
    /* 18px (H5, subtítulos menores) */
    --font-size-lg: 1.25rem;
    /* 20px (H4) */
    --font-size-xl: 1.5rem;
    /* 24px (H3) */
    --font-size-2xl: 1.875rem;
    /* 30px (H2, H1 secundario) */

    /*  Pesos */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /*  Interlineados (Legibilidad) */
    --line-height-tight: 1.25;
    /* Para Títulos grandes */
    --line-height-base: 1.5;
    /* Textos normales */
    --line-height-relaxed: 1.75;
    /* Párrafos largos */


    /* =========================================================================
       ESPACIADO CONSISTENTE (Escala base 4px/8px)
       ========================================================================= */
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.5rem;
    /* 24px */
    --space-6: 2rem;
    /* 32px */
    --space-7: 2.5rem;
    /* 40px */
    --space-8: 3rem;
    /* 48px */


    /* =========================================================================
       BORDES Y RADIOS (Esencia Soft UI)
       ========================================================================= */
    --border-radius-xs: 0.25rem;
    /* 4px (Elementos muy peque├▒os o chat bubbles) */
    --border-radius-sm: 0.375rem;
    /* 6px */
    --border-radius-md: 0.75rem;
    /* 12px (Cards estándar, Soft UI) */
    --border-radius-lg: 1rem;
    /* 16px (Dashboards modulares) */
    --border-radius-xl: 1.5rem;
    /* 24px (Contenedores gigantes) */
    --border-radius-pill: 9999px;
    /* Botones round, Badges */

    --border-width: 1px;
    --border-width-thick: 4px;
    --border-color: var(--color-border);


    /* =========================================================================
       SOMBRAS (Soft UI Modernas)
       ========================================================================= */
    /* Sombras extremadamente suaves, de alto radio de dispersi├│n. "Flotantes" */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.05);
    /* Efecto levitaci├│n sutil */
    --shadow-lg: 0 10px 25px -4px rgba(0, 0, 0, 0.08);
    /* Tarjetas premium */
    --shadow-soft: 0 20px 40px -8px rgba(0, 0, 0, 0.05);
    /* Modales o Dropdowns flotantes */
    --shadow-focus: 0 0 0 4px rgba(107, 26, 42, 0.15);
    /* Halos de interacci├│n accesibles */


    /* =========================================================================
       TOKENS PARA BOTONES (Medidas estructurales y Variantes)
       ========================================================================= */

    /* Tama├▒os Estructurales */
    --button-height-sm: 32px;
    --button-height-md: 40px;
    --button-height-lg: 48px;
    --button-padding-x: var(--space-4);
    --button-padding-y: var(--space-2);
    --button-font-size: var(--font-size-sm);

    /*  Variantes de Interacci├│n y Estados */
    --button-primary-bg: var(--color-primary);
    --button-primary-hover: var(--color-primary-hover);
    --button-primary-text: var(--text-inverse);

    --button-secondary-bg: var(--color-surface-alt);
    --button-secondary-hover: var(--color-border);
    --button-secondary-text: var(--text-primary);

    --button-success-bg: var(--color-success);
    --button-success-hover: var(--color-success-hover);

    --button-danger-bg: var(--color-danger);
    --button-danger-hover: var(--color-danger-hover);

    --button-warning-bg: var(--color-warning);
    --button-warning-hover: var(--color-warning-hover);

    --button-info-bg: var(--color-info);
    --button-info-hover: var(--color-info-hover);

    --button-outline-border: var(--color-border);
    --button-outline-hover-bg: var(--color-surface-alt);

    --button-ghost-hover-bg: var(--color-background);

    --button-disabled-bg: var(--color-border);
    --button-disabled-text: var(--text-disabled);


    /* =========================================================================
       TOKENS PARA BADGES (Micro Componentes)
       ========================================================================= */

    /* Medidas Estructurales */
    --badge-font-size: var(--font-size-xs);
    --badge-padding-x: var(--space-2);
    --badge-padding-y: 0.125rem;
    /* 2px */
    --badge-radius: var(--border-radius-pill);

    /*  Variantes Visuales (Acorde a Soft UI -> Background Light + Texto Fuerte) */
    --badge-success-bg: var(--color-success-bg);
    --badge-warning-bg: var(--color-warning-bg);
    --badge-danger-bg: var(--color-danger-bg);
    --badge-info-bg: var(--color-info-bg);
    --badge-neutral-bg: var(--color-surface-alt);


    /* =========================================================================
       LAYOUT Y ESTRUCTURA (Wireframing del panel)
       ========================================================================= */
    --container-max-width: 1440px;
    --sidebar-width: 260px;
    --header-height: 72px;

    /*    Componentes Globales (M├®tricas unificadas) */
    --icon-shape-size-xs: 32px;
    --icon-shape-size-sm: 38px;
    --icon-shape-size: 3.5rem;
    /* Tamaño estándar para iconos circulares en KPIs */
    --icon-shape-size-lg: 60px;
    --content-max-height: 400px;
    --content-max-height-lg: 500px;

    /* ­ƒ   ö╣ Z-Index Unificado */
    --z-index-dropdown: 1000;
    --z-index-modal: 1050;
    --z-index-tooltip: 1100;


    /* =========================================================================
       TRANSICIONES Y MOVIMIENTO (Aceleraciones Nativas)
       ========================================================================= */
    --transition-fast: 150ms;
    --transition-base: 250ms;
    --transition-slow: 400ms;

    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
}