/*====================================================================================================
  ROOT_MAIN.CSS - VARIABLES CSS UNIFICADAS Y ORGANIZADAS
  Sistema completo de design tokens limpio y sin duplicados
====================================================================================================*/

:root {
  
  /*================================================================================
    🎨 COLORES PRINCIPALES
  ================================================================================*/
  
  /* Colores Primarios del Sistema */
  --color-yellow: #efa505;
  --color-red: #671921;
  --color-blue: #032c4d;
  --color-green: #4CAF50;
  --color-white: #ffffff;
  --color-black: #000000;
  
  /* Colores de Grises */
  --color-gray: #6c757d;
  --color-gray-light: #adb5bd;
  --color-gray-dark: #495057;
  --color-greed: #333333;
  --color-greed-2: #333;
  
  /* Alias del Sistema */
  --primary-color: #efa505;
  --secondary-color: #495057;
  --accent-color: #efa505;
  --border-color: rgba(239, 165, 5, 0.3);
  
  /* Colores de Texto */
  --text-color-yellow: #efa505;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.8);
  --text-tertiary: #808080;
  --text-disabled: #666666;
  --text-accent: #efa505;
  --text-hover: #ffc533;
  --text-color: rgba(251, 251, 251, 0.9);
  
  /* Colores de Estado */
  --color-success: #4caf50;
  --color-success-light: #81c784;
  --color-success-dark: #388e3c;
  --color-error: #f44336;
  --color-error-light: #ef5350;
  --color-error-dark: #c62828;
  --color-warning: #ffc107;
  --color-warning-light: #ffb74d;
  --color-warning-dark: #f57c00;
  --color-info: #2196f3;
  --color-info-light: #64b5f6;
  --color-info-dark: #1976d2;
  
  /* Variaciones del Primario */
  --primary-color-hover: #ffb91a;
  --primary-color-dark: #cc8f00;
  --primary-color-light: #ffc533;
  --primary-color-alpha-10: rgba(239, 165, 5, 0.1);
  --primary-color-alpha-20: rgba(239, 165, 5, 0.2);
  --primary-color-alpha-30: rgba(239, 165, 5, 0.3);
  --primary-color-alpha-50: rgba(239, 165, 5, 0.5);
  
  /* Colores de Borde */
  --border-color-hover: rgba(239, 165, 5, 0.4);
  --border-color-active: rgba(239, 165, 5, 0.6);
  --border-color-light: rgba(255, 255, 255, 0.1);
  --border-color-dark: rgba(0, 0, 0, 0.3);
  --border-color-input: rgba(239, 165, 5, 0.3);
  --border-color-nav: rgba(239, 165, 5, 0.2);
  --border-color-btn: rgba(239, 165, 5, 0.4);
  --border-color-link: rgba(239, 165, 5, 0.3);
  --border-color-ring: rgba(239, 165, 5, 0.2);
  
  /* Hover Color Legacy */
  --hover-color: rgb(234, 180, 3);
  
  /*================================================================================
    🎨 FONDOS Y BACKGROUNDS
  ================================================================================*/
  
  /* Fondos Principales */
  --background-color-primary: #333;
  --background-primary: #121212;
  --background-secondary: #1e1e1e;
  --background-tertiary: #252525;
  --background-card: #1a1a1a;
  --background-hover: #2a2a2a;
  --background-active: #333333;
  
  /* Fondos de Columnas (Sistema Legacy) */
  --background-color-col-3: hsl(0, 0%, 31%);
  --background-color-col-3-1: rgba(0, 0, 0, 0.5);
  --background-color-col-3-1-2: hsl(0, 0%, 31%);
  --background-color-col-3-1-3: #333;
  --background-color-col-3-1-2-3: hsl(0, 0%, 31%);
  
  /* Fondos de Colores */
  --background-red: #671921;
  --background-yellow: #efa505;
  --background-blue: #032c4d;
  --background-green: #4CAF50;
  --background-white: #ffffff;
  --background-black: #000000;
  --background-transparent: transparent;
  --background-gray-light: #f8f9fa;
  --background-gray-dark: #495057;
  
  /* Fondos Especiales */
  --background-color-05: rgba(0, 0, 0, 0.5);
  --background-color-251: rgb(251 251 251 / 10%);
  --tertiary-color: rgba(0, 0, 0, 0.5);
  
  /* Overlays */
  --bg-overlay: rgba(51, 51, 51, 0.9);
  --bg-overlay-light: rgba(51, 51, 51, 0.7);
  --bg-overlay-dark: rgba(0, 0, 0, 0.8);
  --background-overlay: rgba(0, 0, 0, 0.7);
  
  /* Estados de Fondo */
  --background-success-light: rgba(40, 167, 69, 0.1);
  --background-error-light: rgba(103, 25, 33, 0.1);
  --background-warning-light: rgba(255, 193, 7, 0.1);
  --background-info-light: rgba(239, 165, 5, 0.1);
  --background-valid: rgba(40, 167, 69, 0.1);
  --background-invalid: rgba(103, 25, 33, 0.1);
  --background-btn-hover: rgba(239, 165, 5, 0.1);
  --background-link: rgba(239, 165, 5, 0.05);
  --background-link-hover: rgba(239, 165, 5, 0.1);
  --background-input-focus: rgba(239, 165, 5, 0.05);
  
  /* Propiedades de Fondo */
  --bg-size-cover: cover;
  --bg-size-contain: contain;
  --bg-size-100: 100% 100%;
  --bg-size-grid: 50px 50px;
  --bg-size-particle: 40px 40px, 60px 60px;
  --bg-position-center: center;
  --bg-position-top: top;
  --bg-position-bottom: bottom;
  --bg-position-select: right 12px center;
  --bg-size-select: 16px;
  --bg-repeat-none: no-repeat;
  --bg-repeat: repeat;
  --bg-repeat-x: repeat-x;
  --bg-repeat-y: repeat-y;
  
  /*================================================================================
    🌈 GRADIENTES
  ================================================================================*/
  
  /* Gradientes Principales */
  --primary-gradient: linear-gradient(135deg, #efa505, #ffcc00);
  --secondary-gradient: linear-gradient(135deg, #671921, #8b2635);
  --gradient-primary: linear-gradient(135deg, var(--background-yellow), #ffcc00);
  --gradient-primary-reverse: linear-gradient(135deg, #ffcc00, var(--background-yellow));
  
  /* Gradientes de Efectos */
  --gradient-scanner: linear-gradient(90deg, transparent 0%, var(--color-red) 20%, var(--background-yellow) 50%, var(--color-red) 80%, transparent 100%);
  --gradient-pulse-vertical: linear-gradient(0deg, transparent 0%, var(--color-yellow) 50%, transparent 100%);
  --gradient-circuit: linear-gradient(90deg, transparent 0%, var(--color-yellow) 20%, var(--background-yellow) 50%, var(--color-yellow) 80%, transparent 100%);
  --gradient-alert-scan: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  --gradient-link-shine: linear-gradient(90deg, transparent, rgba(239, 165, 5, 0.2), transparent);
  --gradient-line-flow: linear-gradient(90deg, transparent 0%, rgba(239, 165, 5, 0.3) 20%, rgba(239, 165, 5, 0.6) 50%, rgba(239, 165, 5, 0.3) 80%, transparent 100%);
  
  /* Gradientes de Botones */
  --gradient-btn-glow: linear-gradient(45deg, transparent, rgba(239, 165, 5, 0.2), transparent);
  --gradient-btn-shine: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  --gradient-success: linear-gradient(135deg, #28a745, #20c997);
  
  /* Gradientes Especiales */
  --background-gradient: linear-gradient(145deg, #1a1a1a, #2d2d2d);
  --background-gradient-hover: linear-gradient(145deg, #252525, #333333);
  --background-particle-pattern: radial-gradient(circle at 30% 40%, rgba(239, 165, 5, 0.03) 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(103, 25, 33, 0.03) 1px, transparent 1px);
  
  /* Select Background Image */
  --bg-image-select: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23efa505' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  
  /*================================================================================
    📝 TIPOGRAFÍA
  ================================================================================*/
  
  /* Familias de Fuente */
  --font-family-primary: 'Arial', sans-serif;
  --font-family-mono: 'Courier New', monospace;
  --font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-secondary: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Fira Code', 'Courier New', monospace;
  --toast-font: var(--font-family-primary);
  
  /* Tamaños de Fuente */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  
  /* Tamaños REM y EM */
  --font-size-1rem: 1rem;
  --font-size-1-5em: 1.5em;
  --font-size-1-8rem: 1.8rem;
  --font-size-2rem: 2rem;
  --font-size-2-5rem: 2.5rem;
  
  /* Escala Tipográfica Moderna */
  --font-size-xxs: 0.625rem;   /* 10px */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.125rem;    /* 18px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-xxl: 2rem;       /* 32px */
  --font-size-xxxl: 2.5rem;    /* 40px */
  --font-size-display: 3rem;   /* 48px */
  
  /* Pesos de Fuente */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi: 600;
  --font-weight-semibold: 600;
  --font-weight-600: 600;
  --font-weight-bold: 700;
  --font-weight-700: 700;
  --font-weight-black: 900;
  
  /* Altura de Línea */
  --line-height-1: 1;
  --line-height-1-2: 1.2;
  --line-height-1-4: 1.4;
  --line-height-1-5: 1.5;
  --line-height-1-6: 1.6;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
  
  /* Espaciado de Letras */
  --letter-spacing-normal: normal;
  --letter-spacing-wide: 0.1em;
  --letter-spacing-wider: 0.2em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-widest: 0.1em;
  
  /* Decoración de Texto */
  --text-decoration-none: none;
  --text-decoration-underline: underline;
  --text-decoration-line-through: line-through;
  
  /* Alineación de Texto */
  --text-align-center: center;
  --text-align-justify: justify;
  --text-align-left: left;
  --text-align-right: right;
  
  /* Transformación de Texto */
  --text-transform-uppercase: uppercase;
  --text-transform-lowercase: lowercase;
  --text-transform-capitalize: capitalize;
  --text-transform-none: none;
  
  /* Sombras de Texto */
  --text-shadow-title: 1px 1px 2px rgba(0, 0, 0, 0.5);
  --text-shadow-enhanced: 2px 2px 4px rgba(0, 0, 0, 0.5), 0 0 20px rgba(239, 165, 5, 0.6);
  
  /* Font Style */
  --font-style-italic: italic;
  
  /*================================================================================
    📏 DIMENSIONES
  ================================================================================*/
  
  /* Width Percentages */
  --width-100: 100%;
  --width-auto: auto;
  --width-50: 50%;
  --width-25: 25%;
  --width-75: 75%;
  --width-fit: fit-content;
  --width-max: max-content;
  --width-min: min-content;
  --width-100vw: 100vw;
  
  /* Width Específicos */
  --width-2: 2px;
  --width-4: 4px;
  --width-16: 16px;
  --width-18: 18px;
  --width-20: 20px;
  --width-24: 24px;
  --width-25: 25px;
  --width-28: 28px;
  --width-30: 30px;
  --width-32: 32px;
  --width-40: 40px;
  --width-50: 50px;
  --width-60: 60px;
  --width-70: 70px;
  --width-80: 80px;
  --width-150: 150px;
  --width-180: 180px;
  --width-200: 200px;
  
  /* Height */
  --height-100: 100%;
  --height-auto: auto;
  --height-50: 50%;
  --height-vh: 100vh;
  --height-100vh: 100vh;
  --height-fit: fit-content;
  
  /* Height Específicos */
  --height-2: 2px;
  --height-4: 4px;
  --height-16: 16px;
  --height-18: 18px;
  --height-20: 20px;
  --height-24: 24px;
  --height-25: 25px;
  --height-28: 28px;
  --height-30: 30px;
  --height-32: 32px;
  --height-40: 40px;
  --height-50: 50px;
  --height-60: 60px;
  --height-70: 70px;
  --height-80: 80px;
  --height-150: 150px;
  --height-180: 180px;
  --height-200: 200px;
  --height-300: 300px;
  
  /* Max Width */
  --max-width-350: 350px;
  --max-width-400: 400px;
  --max-width-450: 450px;
  --max-width-500: 500px;
  --max-width-600: 600px;
  --max-width-700: 700px;
  --max-width-800: 800px;
  --max-width-1200: 1200px;
  
  /* Max Height */
  --max-height-500: 500px;
  --max-height-1000: 1000px;
  --max-height-2000: 2000px;
  --max-height-vh: 100vh;
  
  /* Min Height */
  --min-height-24: 24px;
  --min-height-35: 35px;
  --min-height-40: 40px;
  --min-height-60: 60px;
  --min-height-100: 100px;
  --min-height-200: 200px;
  --min-height-300: 300px;
  --min-height-vh: 100vh;
  --min-height-100vh: 100vh;
  --min-height-calc: calc(100vh - 40px);
  
  /* Min Width */
  --min-width-140: 140px;
  --min-width-200: 200px;
  --min-width-250: 250px;
  --min-width-300: 300px;
  --min-width-400: 400px;
  --min-width-500: 500px;
  --min-width-auto: auto;
  
  /*================================================================================
    📦 ESPACIADO - PADDING Y MARGIN
  ================================================================================*/
  
  /* Unidad Base de Espaciado */
  --spacing-unit: 8px;
  
  /* Espaciado Moderno */
  --spacing-xxs: calc(var(--spacing-unit) * 0.5);  /* 4px */
  --spacing-xs: var(--spacing-unit);                /* 8px */
  --spacing-sm: calc(var(--spacing-unit) * 1.5);   /* 12px */
  --spacing-md: calc(var(--spacing-unit) * 2);     /* 16px */
  --spacing-lg: calc(var(--spacing-unit) * 3);     /* 24px */
  --spacing-xl: calc(var(--spacing-unit) * 4);     /* 32px */
  --spacing-xxl: calc(var(--spacing-unit) * 5);    /* 40px */
  --spacing-xxxl: calc(var(--spacing-unit) * 6);   /* 48px */
  
  /* Padding */
  --padding-0: 0;
  --padding-5: 5px;
  --padding-10: 10px;
  --padding-12: 12px;
  --padding-15: 15px;
  --padding-20: 20px;
  --padding-25: 25px;
  --padding-30: 30px;
  --padding-40: 40px;
  --padding-50: 50px;
  
  /* Padding Direccional */
  --padding-top-5: 5px;
  --padding-top-10: 10px;
  --padding-top-20: 20px;
  --padding-top-25: 25px;
  --padding-bottom-5: 5px;
  --padding-bottom-10: 10px;
  --padding-bottom-12: 12px;
  --padding-bottom-15: 15px;
  --padding-bottom-20: 20px;
  --padding-bottom-25: 25px;
  --padding-bottom-30: 30px;
  --padding-left-5: 5px;
  --padding-left-10: 10px;
  --padding-left-20: 20px;
  --padding-right-5: 5px;
  --padding-right-10: 10px;
  --padding-right-20: 20px;
  --padding-right-40: 40px;
  
  /* Padding Combinado */
  --padding-12-24: 12px 24px;
  --padding-15-18: 15px 18px;
  --padding-15-20: 15px 20px;
  --padding-15-25: 15px 25px;
  --padding-18-24: 18px 24px;
  --padding-18-50: 18px 50px 18px 50px;
  
  /* Padding Semántico */
  --padding-button: var(--spacing-sm) var(--spacing-lg);
  --padding-card: var(--spacing-lg);
  --padding-section: var(--spacing-xl);
  --padding-input: var(--spacing-sm) var(--spacing-md);
  --padding-container: var(--spacing-lg) var(--spacing-xl);
  
  /* Margin */
  --margin-0: 0;
  --margin-5: 5px;
  --margin-10: 10px;
  --margin-15: 15px;
  --margin-20: 20px;
  --margin-25: 25px;
  --margin-30: 30px;
  --margin-auto: auto;
  
  /* Margin Direccional */
  --margin-top-0: 0;
  --margin-top-4: 4px;
  --margin-top-5: 5px;
  --margin-top-10: 10px;
  --margin-top-15: 15px;
  --margin-top-20: 20px;
  --margin-top-negative-10: -10px;
  --margin-bottom-0: 0;
  --margin-bottom-4: 4px;
  --margin-bottom-5: 5px;
  --margin-bottom-6: 6px;
  --margin-bottom-8: 8px;
  --margin-bottom-10: 10px;
  --margin-bottom-12: 12px;
  --margin-bottom-15: 15px;
  --margin-bottom-20: 20px;
  --margin-bottom-25: 25px;
  --margin-bottom-30: 30px;
  --margin-bottom-40: 40px;
  --margin-left-5: 5px;
  --margin-left-10: 10px;
  --margin-left-20: 20px;
  --margin-left-auto: auto;
  --margin-right-5: 5px;
  --margin-right-8: 8px;
  --margin-right-10: 10px;
  --margin-right-20: 20px;
  --margin-right-auto: auto;
  
  /* Margin Semántico */
  --margin-section: var(--spacing-xl) 0;
  --margin-element: var(--spacing-md) 0;
  --margin-inline: 0 var(--spacing-xs);
  
  /* Gap */
  --gap-4: 4px;
  --gap-5: 5px;
  --gap-8: 8px;
  --gap-10: 10px;
  --gap-12: 12px;
  --gap-15: 15px;
  --gap-16: 16px;
  --gap-20: 20px;
  --gap-25: 25px;
  --gap-30: 30px;
  --gap-40: 40px;
  --gap-50: 50px;
  
  /* Gap Semántico */
  --gap-xs: var(--spacing-xs);
  --gap-sm: var(--spacing-sm);
  --gap-md: var(--spacing-md);
  --gap-lg: var(--spacing-lg);
  --gap-xl: var(--spacing-xl);
  
  /*================================================================================
    🔲 BORDES
  ================================================================================*/
  
  /* Border Radius */
  --border-radius: 12px;
  --border-radius-none: 0;
  --border-radius-5: 5px;
  --border-radius-10: 10px;
  --border-radius-15: 15px;
  --border-radius-20: 20px;
  --border-radius-25: 25px;
  --border-radius-50: 50%;
  --border-radius-circle: 50%;
  --border-radius-full: 50%;
  
  /* Border Radius Moderno */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-xxl: 24px;
  --toast-border-radius-10: 10px;
  
  /* Border Styles */
  --border-none: none;
  --border-1: 1px solid rgba(0, 0, 0, 0.3);
  --border-2: 2px solid rgba(0, 0, 0, 0.3);
  --border-2-333: 2px solid #333;
  --border-3: 3px solid #333;
  --border-4: 4px solid hsl(0, 0%, 31%);
  --border-5: 5px solid;
  --border-transparent: transparent;
  
  /* Border Colors Específicos */
  --border-yellow: 2px solid #efa505;
  --border-red: 2px solid #671921;
  --border-blue: 2px solid #032c4d;
  
  /* Border Styles Específicos */
  --border-dashed: 1px dashed #333;
  --border-dotted: 1px dotted #333;
  --border-in: inset #efa505;
  --border-style-solid: solid;
  --border-style-dashed: dashed;
  --border-style-dotted: dotted;
  --border-style-double: double;
  --border-style-inset: inset;
  --border-style-outset: outset;
  
  /* Border Direccional */
  --border-top-1: 1px solid rgba(0, 0, 0, 0.3);

    --border-top-2: 2px solid #efa505;
  --border-bottom-1: 1px solid rgba(0, 0, 0, 0.3);
  --border-bottom-2: 2px solid rgba(255, 255, 255, 0.3);
  --border-bottom-3: 3px solid #f8f9fa;
  --border-left-1: 1px solid rgba(0, 0, 0, 0.3);
  --border-left-3: 3px solid var(--color-blue);
  --border-left-5: 5px solid #2196f3;
  --border-right-1: 1px solid rgba(0, 0, 0, 0.3);
  
  /* Border Width */
  --border-width-2: 2px;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
  
  /* Border Semántico */
  --border-default: var(--border-width-thin) solid var(--border-color);
  --border-hover: var(--border-width-thin) solid var(--border-color-hover);
  --border-active: var(--border-width-medium) solid var(--border-color-active);
  --border-focus: var(--border-width-medium) solid var(--primary-color);
  
  /*================================================================================
    🌟 SOMBRAS
  ================================================================================*/
  
  /* Box Shadow Principales Legacy */
  --box-shadow: 1px -1px 0px rgba(0, 0, 0, 0.5), inset 1px 0px 10px #020101, 0 5px 10px rgba(0, 0, 0, 0.3);
  --secondary-box-shadow: 1px -1px 0px rgba(0, 0, 0, 0.5), inset 1px 0px 4px #020101, 0 5px 10px rgba(0, 0, 0, 0.3);
  --box-shadow-none: none;
  --box-shadow-col: 1px -1px 0px rgba(0, 0, 0, 0.5), inset 1px 0px 4px #020101, 0 5px 10px rgba(0, 0, 0, 0.3);
  --box-shadow-col-3-1: 1px -1px 0px #020101, inset 1px 0px 4px #020101;
  --box-shadow-0-10: 0 0 10px rgba(239, 165, 5, 0.5);
  --box-shadow-0-3: 0 0 0 3px rgba(239, 165, 5, 0.5);
  --box-shadow-0-3-3: 1px -1px 0px rgba(0, 0, 0, 0.5), inset 1px 0px 4px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.3);
  
  /* Box Shadow por Niveles */
  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
  --box-shadow-large: 0 8px 16px rgba(0, 0, 0, 0.2);
  --box-shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  
  /* Sombras Modernas */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  
  /* Sombras con Color */
  --shadow-primary: 0 4px 15px var(--primary-color-alpha-30);
  --shadow-primary-hover: 0 6px 20px var(--primary-color-alpha-50);
  --shadow-glow: 0 0 20px var(--primary-color-alpha-50);
  --shadow-glow-lg: 0 0 40px var(--primary-color-alpha-50);
  
  /* Sombras para Elementos Específicos */
  --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-button-hover: 0 6px 16px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);
  
  /* Sombras Mejoradas del Proyecto */
  --box-shadow-enhanced-glow: var(--box-shadow-col), 0 0 25px rgba(239, 165, 5, 0.6);
  --box-shadow-enhanced-login: var(--box-shadow-col), 0 0 30px rgba(239, 165, 5, 0.3), inset 0 0 20px rgba(239, 165, 5, 0.1);
  --box-shadow-enhanced-sidebar: var(--box-shadow-col), 0 0 25px rgba(239, 165, 5, 0.2);
  --box-shadow-enhanced-profile: 0px 0px 20px 20px rgba(0, 0, 0, 0.5), inset 1px 0px 4px #020101, 0px 1px 20px 0px rgba(0, 0, 0, 0.3);
  --box-shadow-btn-enhanced: var(--box-shadow-col), 0 0 20px rgba(239, 165, 5, 0.4);
  --box-shadow-btn-hover: var(--box-shadow-col), 0 0 20px rgba(239, 165, 5, 0.5);
  --box-shadow-btn-hover-enhanced: var(--box-shadow-col), 0 0 30px rgba(239, 165, 5, 0.6), 0 10px 25px rgba(239, 165, 5, 0.3);
  --box-shadow-btn-active: var(--box-shadow-col), 0 0 25px rgba(239, 165, 5, 0.8), 0 8px 16px rgba(239, 165, 5, 0.3);
  --box-shadow-form-focus: 0 0 3px rgba(239, 165, 5, 0.6), 0 0 15px rgba(239, 165, 5, 0.4);
  --box-shadow-input-focus: var(--box-shadow-0-3), 0 0 15px rgba(239, 165, 5, 0.4);
  --box-shadow-link-hover: 0 5px 15px rgba(239, 165, 5, 0.3);
  --box-shadow-success: 0 10px 25px rgba(40, 167, 69, 0.4);
  --box-shadow-toast: var(--box-shadow-col), 0 0 20px rgba(239, 165, 5, 0.4);
  --box-shadow-scanner: 0 0 20px var(--color-yellow);
  --box-shadow-inset-enhanced: inset 0 2px 10px rgba(0, 0, 0, 0.3), var(--box-shadow-col);
  
  /* Toast Shadow */
  --toast-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  
  /*================================================================================
    📱 DISPLAY Y LAYOUT
  ================================================================================*/
  
  /* Display */
  --display-none: none;
  --display-block: block;
  --display-inline: inline;
  --display-inline-block: inline-block;
  --display-flex: flex;
  --display-inline-flex: inline-flex;
  --display-grid: grid;
  
  /* Flexbox Direction */
  --flex-direction-row: row;
  --flex-direction-column: column;
  --flex-direction-row-reverse: row-reverse;
  --flex-direction-column-reverse: column-reverse;
  
  /* Flex Wrap */
  --flex-wrap-nowrap: nowrap;
  --flex-wrap: wrap;
  --flex-wrap-wrap: wrap;
  --flex-wrap-reverse: wrap-reverse;
  
  /* Align Content */
  --align-content-center: center;
  --align-content-start: flex-start;
  --align-content-end: flex-end;
  --align-content-between: space-between;
  --align-content-around: space-around;
  --align-content-stretch: stretch;
  
  /* Align Items */
  --align-items-center: center;
  --align-items-flex: flex-start;
  --align-items-flex-start: flex-start;
  --align-items-end: flex-end;
  --align-items-baseline: baseline;
  --align-items-stretch: stretch;
  --align-self-flex-start: flex-start;
  
  /* Justify Content */
  --justify-content-center: center;
  --justify-content-space: space-between;
  --justify-content-space-between: space-between;
  --justify-content-space-evenly: space-evenly;
  --justify-content-start: flex-start;
  --justify-content-flex-start: flex-start;
  --justify-content-end: flex-end;
  --justify-content-flex-end: flex-end;
  --justify-content-around: space-around;
  --justify-content-evenly: space-evenly;
  
  /* Flex Properties */
  --flex-grow-0: 0;
  --flex-grow-1: 1;
  --flex-shrink-0: 0;
  --flex-shrink-1: 1;
  --flex-1: 1;
  --flex-2: 2;
  --flex-none: none;
  
  /* Grid */
  --grid-cols-1: repeat(1, 1fr);
  --grid-cols-2: repeat(2, 1fr);
  --grid-cols-3: repeat(3, 1fr);
  --grid-cols-4: repeat(4, 1fr);
  --grid-cols-5: repeat(5, 1fr);
  --grid-cols-6: repeat(6, 1fr);
  --grid-cols-7: repeat(7, 1fr);
  --grid-cols-auto: repeat(auto-fit, minmax(250px, 1fr));
  --grid-col-full: 1 / -1;
  
  /* Grid Gap */
  --grid-gap-5: 5px;
  --grid-gap-10: 10px;
  --grid-gap-15: 15px;
  --grid-gap-20: 20px;
  --grid-gap-25: 25px;
  --grid-gap-30: 30px;
  
  /*================================================================================
    📍 POSITION
  ================================================================================*/
  
  /* Position */
  --position-1: relative;
  --position-2: absolute;
  --position-3: fixed;
  --position-4: static;
  --position-5: sticky;
  --position-6: unset;
  --position-fixed: fixed;
  
  /* Position Values */
  --top-0: 0;
  --top-10: 10px;
  --top-20: 20px;
  --top-30: 30px;
  --top-50: 50%;
  --top-negative-50: -50%;
  --top-negative-100: -100px;
  --bottom-0: 0;
  --bottom-10: 10px;
  --bottom-20: 20px;
  --left-0: 0;
  --left-15: 15px;
  --left-50: 50%;
  --left-negative-50: -50%;
  --left-negative-100: -100%;
  --left-100: 100%;
  --right-0: 0;
  --right-10: 10px;
  --right-15: 15px;
  --right-20: 20px;
  --right-30: 30px;
  
  /*================================================================================
    🌊 OVERFLOW
  ================================================================================*/
  
  /* Overflow */
  --overflow-hidden: hidden;
  --overflow-visible: visible;
  --overflow-scroll: scroll;
  --overflow-auto: auto;
  --overflow-x-hidden: hidden;
  --overflow-x-scroll: scroll;
  --overflow-x-auto: auto;
  --overflow-y: scroll;
  --overflow-y-hidden: hidden;
  --overflow-y-auto: auto;
  --overflow-wrap: unset;
  --overflow-wrap-break: break-word;
  
  /*================================================================================
    🔄 TRANSFORMS
  ================================================================================*/
  
  /* Transform Scale */
  --transform-098: scale(0.98);
  --transform-1: scale(1.1);
  --transform-102: scale(1.02);
  --transform-105: scale(1.05);
  --transform-110: scale(1.1);
  --transform-120: scale(1.2);
  --transform-scale-098: scale(0.98);
  --transform-scale-102: scale(1.02);
  --transform-scale-105: scale(1.05);
  --transform-scale-110: scale(1.1);
  --transform-scale-120: scale(1.2);
  --transform-none: none;
  
  /* Transform Rotate */
  --transform-rotate-90: rotate(90deg);
  --transform-rotate-180: rotate(180deg);
  --transform-rotate-270: rotate(270deg);
  
  /* Transform Translate */
  --transform-translate-x-10: translateX(10px);
  --transform-translate-y-10: translateY(10px);
  --transform-translate-y-0: translateY(0);
  --transform-translate-y-50: translateY(-50%);
  --transform-translate-y-minus-1: translateY(-1px);
  --transform-translate-y-minus-2: translateY(-2px);
  --transform-translate-y-minus-3: translateY(-3px);
  --transform-translate-x-0: translateX(0);
  --transform-translate-x-100: translateX(100%);
  --transform-center: translate(-50%, -50%);
  
  /* Transform Específicos */
  --transform-btn-hover: translateY(-5px) scale(1.1);
  --transform-btn-active: translateY(-20px) scale(1.2);
  
  /*================================================================================
    🖱️ CURSOR
  ================================================================================*/
  
  /* Cursor */
  --pointer: pointer;
  --cursor-default: default;
  --cursor-not-allowed: not-allowed;
  --cursor-grab: grab;
  --cursor-grabbing: grabbing;
  --cursor-text: text;
  
  /*================================================================================
    🔍 OPACIDAD
  ================================================================================*/
  
  /* Opacidad */
  --opacity-0: 0;
  --opacity-10: 0.1;
  --opacity-25: 0.25;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-100: 1;
  
  /*================================================================================
    📚 Z-INDEX
  ================================================================================*/
  
  /* Z-Index Sistema */
  --z-base: 0;
  --z-index-negative: -1;
  --z-index-1: 1;
  --z-index-2: 2;
  --z-index-5: 5;
  --z-index-8: 8;
  --z-index-10: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-notification: 800;
  --z-lightbox: 999;
  --z-index-1000: 1000;
  --z-index-9999: 9999;
  --z-index-modal: 10000;
  --z-maximum: 9999;
  
  /*================================================================================
    ⚡ TRANSICIONES Y ANIMACIONES
  ================================================================================*/
  
  /* Duraciones */
  --transition-duration: 0.3s;
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;
  --duration-slowest: 1000ms;
  --animation-fast: 0.2s;
  --animation-normal: 0.3s;
  --animation-slow: 0.5s;
  
  /* Funciones de Tiempo */
  --ease-linear: linear;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Transiciones Predefinidas */
  --transition-fast: all 0.15s ease-in-out;
  --transition-normal: all 0.3s ease-in-out;
  --transition-slow: all 0.5s ease-in-out;
  --transition-all: all var(--duration-normal) var(--ease-in-out);
  --transition-colors: color var(--duration-normal) var(--ease-in-out), background-color var(--duration-normal) var(--ease-in-out), border-color var(--duration-normal) var(--ease-in-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-opacity: opacity var(--duration-normal) var(--ease-in-out);
  --transition-shadow: box-shadow var(--duration-normal) var(--ease-in-out);
  --transition-left: left 0.5s ease;
  --transition-cubic: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Animaciones del Proyecto */
  --animation-grid-move: gridMove 20s linear infinite;
  --animation-data-fall: dataFall 8s linear infinite;
  --animation-scanner-move: scannerMove 8s ease-in-out infinite;
  --animation-pulse-vertical: pulseVertical 5s ease-in-out infinite;
  --animation-circuit-flow: circuitFlow 8s linear infinite;
  --animation-particle-float: particleFloat 15s linear infinite;
  --animation-particle-float-25: particleFloat 25s linear infinite;
  --animation-energy-pulse: energyPulse 6s ease-out infinite;
  --animation-hexagon-float: hexagonFloat 12s ease-in-out infinite;
  --animation-center-pulse: centerPulse 3s ease-in-out infinite;
  --animation-icon-bounce: iconBounce 0.6s ease-out;
  --animation-ring-pulse: ringPulse 4s ease-in-out infinite;
  --animation-line-flow: lineFlow 3s ease-in-out infinite;
  --animation-rotate-glow: rotateGlow 1s linear infinite;
  --animation-active-pulse: activePulse 2s ease-in-out infinite;
  --animation-active-icon-spin: activeIconSpin 0.5s ease-out;
  --animation-content-slide-in: contentSlideIn 0.5s ease-out;
  --animation-container-glow: containerGlow 4s ease-in-out infinite alternate;
  --animation-sidebar-slide-in: sidebarSlideIn 1s ease-out;
  --animation-title-pulse: titlePulse 3s ease-in-out infinite;
  --animation-field-slide-in: fieldSlideIn 0.8s ease-out;
  --animation-icon-pulse: iconPulse 1s ease-in-out;
  --animation-shake: shake 0.5s ease-in-out;
  --animation-fade-in-success: fadeInSuccess 0.5s ease;
  --animation-fade-in-error: fadeInError 0.5s ease;
  --animation-button-entrance: buttonEntrance 1s ease-out 0.8s both;
  --animation-button-spin: buttonSpin 1s linear infinite;
  --animation-link-fade-in: linkFadeIn 1s ease-out;
  --animation-alert-slide-in: alertSlideIn 0.5s ease-out;
  --animation-alert-scan: alertScan 2s ease-in-out infinite;
  --animation-spin: spin 1s linear infinite;
  --animation-pulse-icon: pulse-icon 2s ease-in-out infinite;
  
  /* Configuraciones de Animación */
  --animation-fill-both: both;
  --animation-duration-reduced: 0.01ms;
  --animation-iteration-1: 1;
  --transition-duration-reduced: 0.01ms;
  --animation-none: none;
  
  /*================================================================================
    🌈 FILTROS
  ================================================================================*/
  
  /* Filtros */
  --blur-sm: blur(4px);
  --blur-md: blur(12px);
  --blur-lg: blur(16px);
  --blur-xl: blur(24px);
  
  /* Backdrop Filter */
  --backdrop-filter-blur-sm: blur(4px);
  --backdrop-filter-blur-md: blur(12px);
  --backdrop-filter-blur-lg: blur(16px);
  --backdrop-filter-blur: blur(10px);
  --backdrop-filter-blur-5: blur(5px);
  
  /*================================================================================
    📐 PROPIEDADES ESPECÍFICAS
  ================================================================================*/
  
  /* Object Fit */
  --object-fit-cover: cover;
  --object-fit-contain: contain;
  --object-position-center: center;
  
  /* Resize */
  --resize-vertical: vertical;
  --resize-none: none;
  --resize-both: both;
  
  /* List Style */
  --list-style-none: none;
  --list-style-disc: disc;
  
  /* Table */
  --border-collapse: collapse;
  --border-spacing-0: 0;
  
  /* Scroll */
  --scroll-smooth: smooth;
  --scroll-auto: auto;
  --scroll-margin-10: 10px;
  --scroll-padding-10: 10px;
  
  /* User Select */
  --user-select-none: none;
  --user-select-all: all;
  --user-select-text: text;
  
  /* Pointer Events */
  --pointer-events-none: none;
  --pointer-events-auto: auto;
  
  /* White Space */
  --white-space-nowrap: nowrap;
  --white-space-pre: pre;
  --white-space-pre-wrap: pre-wrap;
  
  /* Word Break */
  --word-break-break-all: break-all;
  --word-break-keep-all: keep-all;
  
  /* Outline */
  --outline-none: none;
  --outline-focus: 2px solid var(--color-yellow);
  --outline-offset-2: 2px;
  
  /* Box Sizing */
  --box-sizing-border: border-box;
  --box-sizing-content: content-box;
  
  /* Appearance */
  --appearance-none: none;
  
  /* Content */
  --content-empty: "";
  --content-space: " ";
  
  /* Float */
  --float-right: right;
  
  /*================================================================================
    🎯 BREAKPOINTS RESPONSIVOS
  ================================================================================*/
  
  /* Breakpoints */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-large: 1200px;
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-xxl: 1536px;
  
  /*================================================================================
    🚀 VARIABLES ESPECÍFICAS DEL PROYECTO
  ================================================================================*/
  
  /* Para reproductores */
  --player-height: 125px;
  --player-height-small: 100px;
  
  /* Para galerías */
  --gallery-item-min: 250px;
  --gallery-item-min-small: 200px;
  
  /* Para usuarios */
  --user-list-item-height: 65px;
  --user-list-item-height-mobile: 55px;
  
  /* Para avatares */
  --avatar-size: 45px;
  --avatar-size-small: 35px;
  
  /* Para layouts */
  --width-sidebar-left: 280px;
  --width-sidebar-right: 320px;
  --width-sidebar-collapsed: 60px;
  --width-content-min: 320px;
  --width-content-max: 1400px;
  --width-container: 1200px;
  --width-modal-sm: 400px;
  --width-modal-md: 600px;
  --width-modal-lg: 900px;
  
  /* Alturas */
  --height-header: 70px;
  --height-footer: 200px;
  --height-navbar: 60px;
  --height-input: 44px;
  --height-button: 44px;
  --height-button-sm: 36px;
  --height-button-lg: 52px;
  
  /*================================================================================
    🍞 VARIABLES PARA TOAST/NOTIFICACIONES
  ================================================================================*/
  
  /* Colores Toast */
  --toast-success: #10b981;
  --toast-error: #ef4444;
  --toast-warning: #f59e0b;
  --toast-info: #3b82f6;
  
  /*================================================================================
    🔧 FORMAS Y CLIPS
  ================================================================================*/
  
  /* Clip Path */
  --clip-path-circle: circle(50%);
  --clip-path-polygon: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  
  /* Column */
  --column-count-2: 2;
  --column-count-3: 3;
  --column-gap-20: 20px;
  
  /* Aspect Ratio */
  --aspect-ratio-square: 1 / 1;
  --aspect-ratio-video: 16 / 9;
  --aspect-ratio-photo: 4 / 3;
  
  /* Stroke Width para SVG */
  --stroke-width-2: 2;
  --stroke-width-25: 2.5;
  
  /*================================================================================
    🌐 GLASSMORPHISM Y EFECTOS MODERNOS
  ================================================================================*/
  
  /* Glassmorphism */
  --glass-background: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  --glass-blur: blur(10px);
  
  /*================================================================================
    🎨 PLACEHOLDER COLOR
  ================================================================================*/
  
  /* Placeholder */
  --placeholder-color: rgba(239, 165, 5, 0.6);
  
  /*================================================================================
    💾 ESCALAS DE ESPACIADO UTILITY
  ================================================================================*/
  
  /* Spacing Scale */
  --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 */
  --space-24: 6rem;    /* 96px */
  --space-32: 8rem;    /* 128px */
  
  /* Typography Scale Utility */
  --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 */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.75rem;   /* 60px */
  
  /*================================================================================
    ⚙️ CONFIGURACIÓN GLOBAL
  ================================================================================*/
  
}