/* ========================================
  ARCHIVO: variables.css
  DESCRIPCIÓN: Define todas las variables CSS globales utilizadas en el proyecto
  OBJETIVO: Centralizar colores, espacios, fuentes y transiciones para mantenimiento fácil
   ======================================== */

  :root {
    /* =====================================
      SECTION 1: GLASSMORPHISM DESIGN SYSTEM
      Estilo visual moderno con efecto de vidrio esmerilado
       ===================================== */
    
    /* Color base del fondo general */
    --bg-color: #0c1222;
    
    /* Superficie semitransparente para componentes (efecto vidrio) */
    --surface-color: rgba(30, 41, 59, 0.45);
    
    /* Variante más opaca de la superficie para estados hover */
    --surface-hover: rgba(51, 65, 85, 0.6);
    
    /* Efecto de desenfoque para glassmorphism (backdrop-filter) */
    --glass-blur: blur(16px);
    
    /* Borde elegante semitransparente para el efecto vidrio esmerilado */
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    
    /* Sombra elegante para darle profundidad a los elementos */
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
  
    /* =====================================
      SECTION 2: COLOR PALETTE (COLORES VIVIDOS)
      Colores principales y alternativas
       ===================================== */
    
    /* Color primario: azul (usado en botones, enlaces, puntos focales) */
    --primary-color: #3b82f6;
    
    /* Versión más oscura del primario para estados hover */
    --primary-hover: #2563eb;
    
    /* Color de acento: naranja/dorado (usado en alertas, énfasis) */
    --accent-color: #f59e0b;
    
    /* Versión más oscura del acento para estados hover */
    --accent-hover: #d97706;
    
    /* Texto principal: blanco muy claro para máximo contraste */
    --text-main: #f8fafc;
    
    /* Texto secundario: gris claro para menor énfasis */
    --text-muted: #94a3b8;
    
    /* Color de bordes sutiles en toda la interfaz */
    --border-color: rgba(255, 255, 255, 0.1);
    
    /* Color para acciones peligrosas/destructivas (eliminar, cancelar) */
    --danger-color: #ef4444;
    
    /* Color para acciones positivas/éxito (completado, guardado) */
    --success-color: #10b981;
  
    /* =====================================
      SECTION 3: TYPOGRAPHY (TIPOGRAFÍA)
      Configuración de fuentes y estilos de texto
       ===================================== */
    
    /* Familia de fuentes: Inter con fallbacks a fuentes del sistema */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    
    /* =====================================
      SECTION 4: LAYOUT (ESPACIOS Y DIMENSIONES)
      Dimensiones clave de la estructura general
       ===================================== */
    
    /* Ancho de la barra lateral (sidebar) - fija en escritorio */
    --sidebar-width: 260px;
    
    /* Alto del encabezado (header) - consistente en toda la aplicación */
    --header-height: 70px;
    
    /* Radio de borde estándar para elementos pequeños */
    --border-radius: 8px;
    
    /* Radio de borde aumentado para elementos grandes (cards, modales) */
    --border-radius-lg: 12px;
    
    /* =====================================
      SECTION 5: TRANSITIONS (ANIMACIONES)
      Tiempos de transición para interactividad suave
       ===================================== */
    
    /* Transición rápida: 200ms para efectos rápidos (hover, focos) */
    --transition-fast: 0.2s ease;
    
    /* Transición normal: 300ms para cambios visuales estándar */
    --transition-normal: 0.3s ease;
  }
  
  /* ========================================
    NOTAS DE IMPLEMENTACIÓN:
    
    1. GLASSMORPHISM: El efecto de vidrio esmerilado se logra con:
        - background-color semitransparente
        - backdrop-filter: blur()
        - border con rgba semicuadrados
    
    2. COLORES: Usar para mantener coherencia visual:
        - --primary-color: botones, enlaces, puntos focales
        - --accent-color: alertas, énfasis
        - --danger-color: acciones destructivas
        - --success-color: confirmaciones, éxito
    
    3. RESPONSIVE: Estas variables se pueden sobrescribir en @media queries
        para cambiar tamaños en dispositivos pequeños
        
    4. VARIABLES EN JAVASCRIPT: Accesibles via:
        getComputedStyle(document.documentElement).getPropertyValue('--primary-color')
     ======================================== */