/**
 * Sistema de Variables CSS Dinámicas - Variavista Theme
 * 
 * Variables CSS con fallback automático para navegadores antiguos.
 * Este archivo se genera dinámicamente mediante PHP.
 * 
 * @package Variavista
 * @version 3.0.0
 * @since 4.5.0
 */

/**
 * ============================================================================
 * 1. FALLBACKS PARA NAVEGADORES ANTIGUOS
 * ============================================================================
 * 
 * Estos valores se usan cuando CSS variables no están soportadas.
 * Se definen primero para que las variables CSS los sobrescriban.
 */

:root {
    /* Fallbacks de colores */
    --fallback-primary: #2271b1;
    --fallback-primary-light: #2a84d0;
    --fallback-primary-dark: #1a5a8f;
    --fallback-secondary: #10b981;
    --fallback-secondary-light: #13d89a;
    --fallback-secondary-dark: #0d9a6d;
    --fallback-accent: #f59e0b;
    --fallback-accent-light: #f7b32d;
    --fallback-accent-dark: #d98a09;
    --fallback-success: #10b981;
    --fallback-warning: #f59e0b;
    --fallback-error: #ef4444;
    --fallback-info: #3b82f6;
    --fallback-neutral: #6b7280;
    
    /* Fallbacks de neutrales */
    --fallback-white: #ffffff;
    --fallback-black: #000000;
    --fallback-gray-50: #f9fafb;
    --fallback-gray-100: #f3f4f6;
    --fallback-gray-200: #e5e7eb;
    --fallback-gray-300: #d1d5db;
    --fallback-gray-400: #9ca3af;
    --fallback-gray-500: #6b7280;
    --fallback-gray-600: #4b5563;
    --fallback-gray-700: #374151;
    --fallback-gray-800: #1f2937;
    --fallback-gray-900: #111827;
    
    /* Fallbacks de tipografía */
    --fallback-font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fallback-font-secondary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fallback-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    
    /* Fallbacks de espaciado */
    --fallback-space-xs: 0.25rem;
    --fallback-space-sm: 0.5rem;
    --fallback-space-md: 1rem;
    --fallback-space-lg: 1.5rem;
    --fallback-space-xl: 2rem;
    --fallback-space-2xl: 3rem;
    --fallback-space-3xl: 4rem;
    --fallback-space-4xl: 6rem;
    
    /* Fallbacks de tamaños de texto */
    --fallback-text-xs: 0.75rem;
    --fallback-text-sm: 0.875rem;
    --fallback-text-base: 1rem;
    --fallback-text-lg: 1.125rem;
    --fallback-text-xl: 1.25rem;
    --fallback-text-2xl: 1.5rem;
    --fallback-text-3xl: 1.875rem;
    --fallback-text-4xl: 2.25rem;
    --fallback-text-5xl: 3rem;
    --fallback-text-6xl: 3.75rem;
    
    /* Fallbacks de pesos de fuente */
    --fallback-font-weight-light: 300;
    --fallback-font-weight-normal: 400;
    --fallback-font-weight-medium: 500;
    --fallback-font-weight-semibold: 600;
    --fallback-font-weight-bold: 700;
    --fallback-font-weight-extrabold: 800;
    
    /* Fallbacks de líneas de texto */
    --fallback-leading-none: 1;
    --fallback-leading-tight: 1.25;
    --fallback-leading-snug: 1.375;
    --fallback-leading-normal: 1.5;
    --fallback-leading-relaxed: 1.625;
    --fallback-leading-loose: 2;
    
    /* Fallbacks de tracking */
    --fallback-tracking-tighter: -0.05em;
    --fallback-tracking-tight: -0.025em;
    --fallback-tracking-normal: 0;
    --fallback-tracking-wide: 0.025em;
    --fallback-tracking-wider: 0.05em;
    --fallback-tracking-widest: 0.1em;
    
    /* Fallbacks de sombras */
    --fallback-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --fallback-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --fallback-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --fallback-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --fallback-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --fallback-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --fallback-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --fallback-shadow-none: none;
    
    /* Fallbacks de bordes */
    --fallback-border-width-thin: 1px;
    --fallback-border-width-medium: 2px;
    --fallback-border-width-thick: 4px;
    
    --fallback-border-radius-none: 0;
    --fallback-border-radius-sm: 0.125rem;
    --fallback-border-radius-md: 0.375rem;
    --fallback-border-radius-lg: 0.5rem;
    --fallback-border-radius-xl: 0.75rem;
    --fallback-border-radius-2xl: 1rem;
    --fallback-border-radius-full: 9999px;
    
    /* Fallbacks de transiciones */
    --fallback-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --fallback-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --fallback-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Fallbacks de z-index */
    --fallback-z-dropdown: 1000;
    --fallback-z-sticky: 1020;
    --fallback-z-fixed: 1030;
    --fallback-z-modal-backdrop: 1040;
    --fallback-z-modal: 1050;
    --fallback-z-popover: 1060;
    --fallback-z-tooltip: 1070;
    
    /* Fallbacks de botones */
    --fallback-button-padding-y: 0.5rem;
    --fallback-button-padding-x: 1rem;
    --fallback-button-font-size: 1rem;
    --fallback-button-font-weight: 500;
    --fallback-button-border-radius: 0.375rem;
    --fallback-button-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Fallbacks de inputs */
    --fallback-input-padding-y: 0.5rem;
    --fallback-input-padding-x: 0.75rem;
    --fallback-input-font-size: 1rem;
    --fallback-input-border-width: 1px;
    --fallback-input-border-radius: 0.375rem;
    --fallback-input-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Fallbacks de tarjetas */
    --fallback-card-padding: 1.5rem;
    --fallback-card-border-radius: 0.5rem;
    --fallback-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --fallback-card-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/**
 * ============================================================================
 * 2. VARIABLES CSS DINÁMICAS (GENERADAS POR PHP)
 * ============================================================================
 * 
 * Estas variables son generadas dinámicamente por el motor de paletas.
 * Se incluyen aquí como referencia de la estructura.
 * 
 * Ejemplo de variables generadas:
 * 
 * :root {
 *     --color-primary-base: #2271b1;
 *     --color-primary-tone-100: #e6f0f9;
 *     --color-primary-tone-200: #b3d1ea;
 *     --color-primary-tone-300: #80b2db;
 *     --color-primary-tone-400: #4d93cc;
 *     --color-primary-tone-500: #2271b1;
 *     --color-primary-tone-600: #1b5a8f;
 *     --color-primary-tone-700: #14436d;
 *     --color-primary-tone-800: #0d2c4b;
 *     --color-primary-tone-900: #061529;
 *     --color-primary-hover: #2a84d0;
 *     --color-primary-active: #1a5a8f;
 *     --color-primary-light: #4d93cc;
 *     --color-primary-dark: #14436d;
 *     --color-primary-text: #ffffff;
 *     --color-primary-text-hover: #ffffff;
 *     
 *     --color-secondary-base: #10b981;
 *     --color-secondary-tone-100: #d1fae5;
 *     ... (similar para todos los colores)
 * }
 */

/**
 * ============================================================================
 * 3. SISTEMA DE DISEÑO COMPLETO
 * ============================================================================
 */

/* Sistema de espaciado */
.space-xs { margin: var(--space-xs, var(--fallback-space-xs)) !important; }
.space-sm { margin: var(--space-sm, var(--fallback-space-sm)) !important; }
.space-md { margin: var(--space-md, var(--fallback-space-md)) !important; }
.space-lg { margin: var(--space-lg, var(--fallback-space-lg)) !important; }
.space-xl { margin: var(--space-xl, var(--fallback-space-xl)) !important; }

.space-x-xs { margin-left: var(--space-xs, var(--fallback-space-xs)) !important; margin-right: var(--space-xs, var(--fallback-space-xs)) !important; }
.space-x-sm { margin-left: var(--space-sm, var(--fallback-space-sm)) !important; margin-right: var(--space-sm, var(--fallback-space-sm)) !important; }
.space-x-md { margin-left: var(--space-md, var(--fallback-space-md)) !important; margin-right: var(--space-md, var(--fallback-space-md)) !important; }
.space-x-lg { margin-left: var(--space-lg, var(--fallback-space-lg)) !important; margin-right: var(--space-lg, var(--fallback-space-lg)) !important; }

.space-y-xs { margin-top: var(--space-xs, var(--fallback-space-xs)) !important; margin-bottom: var(--space-xs, var(--fallback-space-xs)) !important; }
.space-y-sm { margin-top: var(--space-sm, var(--fallback-space-sm)) !important; margin-bottom: var(--space-sm, var(--fallback-space-sm)) !important; }
.space-y-md { margin-top: var(--space-md, var(--fallback-space-md)) !important; margin-bottom: var(--space-md, var(--fallback-space-md)) !important; }
.space-y-lg { margin-top: var(--space-lg, var(--fallback-space-lg)) !important; margin-bottom: var(--space-lg, var(--fallback-space-lg)) !important; }

/* Sistema de tipografía */
.text-xs { font-size: var(--text-xs, var(--fallback-text-xs)) !important; }
.text-sm { font-size: var(--text-sm, var(--fallback-text-sm)) !important; }
.text-base { font-size: var(--text-base, var(--fallback-text-base)) !important; }
.text-lg { font-size: var(--text-lg, var(--fallback-text-lg)) !important; }
.text-xl { font-size: var(--text-xl, var(--fallback-text-xl)) !important; }
.text-2xl { font-size: var(--text-2xl, var(--fallback-text-2xl)) !important; }
.text-3xl { font-size: var(--text-3xl, var(--fallback-text-3xl)) !important; }
.text-4xl { font-size: var(--text-4xl, var(--fallback-text-4xl)) !important; }
.text-5xl { font-size: var(--text-5xl, var(--fallback-text-5xl)) !important; }
.text-6xl { font-size: var(--text-6xl, var(--fallback-text-6xl)) !important; }

.font-light { font-weight: var(--font-weight-light, var(--fallback-font-weight-light)) !important; }
.font-normal { font-weight: var(--font-weight-normal, var(--fallback-font-weight-normal)) !important; }
.font-medium { font-weight: var(--font-weight-medium, var(--fallback-font-weight-medium)) !important; }
.font-semibold { font-weight: var(--font-weight-semibold, var(--fallback-font-weight-semibold)) !important; }
.font-bold { font-weight: var(--font-weight-bold, var(--fallback-font-weight-bold)) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold, var(--fallback-font-weight-extrabold)) !important; }

.leading-none { line-height: var(--leading-none, var(--fallback-leading-none)) !important; }
.leading-tight { line-height: var(--leading-tight, var(--fallback-leading-tight)) !important; }
.leading-snug { line-height: var(--leading-snug, var(--fallback-leading-snug)) !important; }
.leading-normal { line-height: var(--leading-normal, var(--fallback-leading-normal)) !important; }
.leading-relaxed { line-height: var(--leading-relaxed, var(--fallback-leading-relaxed)) !important; }
.leading-loose { line-height: var(--leading-loose, var(--fallback-leading-loose)) !important; }

.tracking-tighter { letter-spacing: var(--tracking-tighter, var(--fallback-tracking-tighter)) !important; }
.tracking-tight { letter-spacing: var(--tracking-tight, var(--fallback-tracking-tight)) !important; }
.tracking-normal { letter-spacing: var(--tracking-normal, var(--fallback-tracking-normal)) !important; }
.tracking-wide { letter-spacing: var(--tracking-wide, var(--fallback-tracking-wide)) !important; }
.tracking-wider { letter-spacing: var(--tracking-wider, var(--fallback-tracking-wider)) !important; }
.tracking-widest { letter-spacing: var(--tracking-widest, var(--fallback-tracking-widest)) !important; }

/* Sistema de sombras */
.shadow-xs { box-shadow: var(--shadow-xs, var(--fallback-shadow-xs)) !important; }
.shadow-sm { box-shadow: var(--shadow-sm, var(--fallback-shadow-sm)) !important; }
.shadow-md { box-shadow: var(--shadow-md, var(--fallback-shadow-md)) !important; }
.shadow-lg { box-shadow: var(--shadow-lg, var(--fallback-shadow-lg)) !important; }
.shadow-xl { box-shadow: var(--shadow-xl, var(--fallback-shadow-xl)) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl, var(--fallback-shadow-2xl)) !important; }
.shadow-inner { box-shadow: var(--shadow-inner, var(--fallback-shadow-inner)) !important; }
.shadow-none { box-shadow: var(--shadow-none, var(--fallback-shadow-none)) !important; }

/* Sistema de bordes */
.border { border-width: var(--border-width-thin, var(--fallback-border-width-thin)) !important; }
.border-2 { border-width: var(--border-width-medium, var(--fallback-border-width-medium)) !important; }
.border-4 { border-width: var(--border-width-thick, var(--fallback-border-width-thick)) !important; }
.border-0 { border-width: 0 !important; }

.rounded-none { border-radius: var(--border-radius-none, var(--fallback-border-radius-none)) !important; }
.rounded-sm { border-radius: var(--border-radius-sm, var(--fallback-border-radius-sm)) !important; }
.rounded-md { border-radius: var(--border-radius-md, var(--fallback-border-radius-md)) !important; }
.rounded-lg { border-radius: var(--border-radius-lg, var(--fallback-border-radius-lg)) !important; }
.rounded-xl { border-radius: var(--border-radius-xl, var(--fallback-border-radius-xl)) !important; }
.rounded-2xl { border-radius: var(--border-radius-2xl, var(--fallback-border-radius-2xl)) !important; }
.rounded-full { border-radius: var(--border-radius-full, var(--fallback-border-radius-full)) !important; }

/* Sistema de transiciones */
.transition-fast { transition-duration: var(--transition-fast, var(--fallback-transition-fast)) !important; }
.transition-base { transition-duration: var(--transition-base, var(--fallback-transition-base)) !important; }
.transition-slow { transition-duration: var(--transition-slow, var(--fallback-transition-slow)) !important; }

/* Sistema de z-index */
.z-dropdown { z-index: var(--z-dropdown, var(--fallback-z-dropdown)) !important; }
.z-sticky { z-index: var(--z-sticky, var(--fallback-z-sticky)) !important; }
.z-fixed { z-index: var(--z-fixed, var(--fallback-z-fixed)) !important; }
.z-modal-backdrop { z-index: var(--z-modal-backdrop, var(--fallback-z-modal-backdrop)) !important; }
.z-modal { z-index: var(--z-modal, var(--fallback-z-modal)) !important; }
.z-popover { z-index: var(--z-popover, var(--fallback-z-popover)) !important; }
.z-tooltip { z-index: var(--z-tooltip, var(--fallback-z-tooltip)) !important; }

/**
 * ============================================================================
 * 4. RESPONSIVE UTILITIES
 * ============================================================================
 */

/* Breakpoints */
@media (max-width: 640px) {
    .sm\:d-none { display: none !important; }
    .sm\:d-block { display: block !important; }
    .sm\:d-flex { display: flex !important; }
}

@media (max-width: 768px) {
    .md\:d-none { display: none !important; }
    .md\:d-block { display: block !important; }
    .md\:d-flex { display: flex !important; }
}

@media (max-width: 1024px) {
    .lg\:d-none { display: none !important; }
    .lg\:d-block { display: block !important; }
    .lg\:d-flex { display: flex !important; }
}

@media (max-width: 1280px) {
    .xl\:d-none { display: none !important; }
    .xl\:d-block { display: block !important; }
    .xl\:d-flex { display: flex !important; }
}

/**
 * ============================================================================
 * 5. PRINT UTILITIES
 * ============================================================================
 */

@media print {
    .print\:d-none { display: none !important; }
    .print\:d-block { display: block !important; }
    
    .no-print {
        display: none !important;
    }
}

/**
 * ============================================================================
 * 6. ACCESSIBILITY UTILITIES
 * ============================================================================
 */

/* Screen reader only */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Focus visible */
.focus\:outline-none:focus {
    outline: none !important;
}

.focus\:ring:focus {
    box-shadow: 0 0 0 3px rgba(var(--color-primary-base, var(--fallback-primary)), 0.3) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/**
 * ============================================================================
 * 7. DARK MODE SUPPORT
 * ============================================================================
 */

@media (prefers-color-scheme: dark) {
    :root {
        /* Variables oscuras (si están definidas) */
        --color-background: var(--color-neutral-tone-900, var(--fallback-gray-900));
        --color-text: var(--color-neutral-tone-100, var(--fallback-gray-100));
    }
}

/**
 * ============================================================================
 * 8. HIGH CONTRAST MODE SUPPORT
 * ============================================================================
 */

@media (prefers-contrast: high) {
    :root {
        --border-width-thin: 2px;
        --border-width-medium: 3px;
        --border-width-thick: 5px;
    }
}

/**
 * ============================================================================
 * 9. FALLBACK PARA CSS VARIABLES NO SOPORTADAS
 * ============================================================================
 * 
 * Para navegadores que no soportan CSS variables, se aplican
 * los valores de fallback directamente a los componentes.
 */

/* Botones sin CSS variables */
.no-cssvariables .btn-primary {
    background-color: var(--fallback-primary);
    color: var(--fallback-white);
    border-color: var(--fallback-primary);
}

.no-cssvariables .btn-secondary {
    background-color: var(--fallback-secondary);
    color: var(--fallback-white);
    border-color: var(--fallback-secondary);
}

.no-cssvariables .btn-accent {
    background-color: var(--fallback-accent);
    color: var(--fallback-white);
    border-color: var(--fallback-accent);
}

/* Header sin CSS variables */
.no-cssvariables .site-header {
    background-color: var(--fallback-primary);
    color: var(--fallback-white);
}

/* Formularios sin CSS variables */
.no-cssvariables .form-control:focus {
    border-color: var(--fallback-primary);
}