/* ========================================
   VARIABLES GLOBALES - PALETA DE COLORES E ICONOS
   ======================================== */

/* 🌞 MODO CLARO (por defecto) */
:root {
  color-scheme: light dark;

  /* 🎨 Paleta de colores primaria - TUS COLORES PERSONALIZADOS */
  --color-primary: #1375BC;
  --color-primary-dark: #0f5a94;
  --color-primary-light: #4a9dd6;
  
  /* 🎨 Colores de acento */
  --color-accent: #CFD8EE;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #1375BC;
  
  /* 🎨 Colores de texto */
  --color-text-primary: #1e293b;
  --color-text-secondary: #64748b;
  --color-text-tertiary: #94a3b8;
  --color-text-light: #94a3b8;
  
  /* 🎨 Colores de fondo */
  --color-bg-base: #f7f7f7;
  --color-bg-card: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-hover: #CFD8EE;
  
  /* 🎨 Colores de borde */
  --color-border: #e2e8f0;
  --color-border-hover: #cbd5e1;
  
  /* 🎨 Estados de aulas */
  --color-disponible: #d1fae5;
  --color-disponible-border: #AAF8DF;
  --color-ocupada: #fecaca;
  --color-ocupada-border: #F8AAAA;
  
  /* ⭐ NUEVO SPRINT 3: Estados de reservas recurrentes */
  --color-recurrente-bg-light: #fee2e2;      /* Rojo muy claro para fondo patrón */
  --color-recurrente-bg-dark: #fecaca;       /* Rojo claro para contraste patrón */
  --color-recurrente-border: #F8AAAA;        /* Borde rojo */
  --color-recurrente-border-thick: #ef4444;  /* Borde grueso izquierdo */
  
  /* 📏 Tamaños de iconos */
  --icon-size-sm: 18px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --icon-size-xl: 48px;
  
  /* 📏 Espaciado */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-2xl: 48px;
  
  /* 🔤 Tipografía */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  
  /* Sombras sutiles */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  
  /* 🎯 Bordes redondeados */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ✨ GLASSMORPHISM - Light Mode */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-elevated: rgba(255, 255, 255, 0.85);
  --glass-bg-subtle: rgba(255, 255, 255, 0.5);
  --glass-blur: 12px;
  --glass-saturate: 180%;
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  --glass-border-top: 1px solid rgba(255, 255, 255, 0.5);
  --glass-border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* 🌙 MODO OSCURO - Apple iOS Human Interface Guidelines
   Basado en los colores semánticos de iOS para máximo contraste y accesibilidad
   Referencias:
   - https://developer.apple.com/design/human-interface-guidelines/dark-mode
   - https://developer.apple.com/design/human-interface-guidelines/color
   - WCAG 2.1 AAA: ratio mínimo 7:1 para texto normal, 4.5:1 para texto grande
*/
@media (prefers-color-scheme: dark) {
  :root {
    /* 🎨 Colores primarios - iOS systemBlue dark mode */
    --color-primary: #0A84FF;           /* iOS systemBlue dark */
    --color-primary-dark: #409CFF;      /* Más brillante para hover */
    --color-primary-light: #0071E3;     /* Menos brillante */

    /* 🎨 Colores de acento - iOS system colors dark mode */
    --color-accent: #3A3A3C;            /* iOS systemGray4 dark */
    --color-success: #30D158;           /* iOS systemGreen dark */
    --color-danger: #FF453A;            /* iOS systemRed dark */
    --color-warning: #FFD60A;           /* iOS systemYellow dark */
    --color-info: #0A84FF;              /* iOS systemBlue dark */

    /* 🎨 Colores de texto - iOS semantic labels dark mode
       label: #FFFFFF (100% opacidad) - Ratio 21:1 sobre negro
       secondaryLabel: rgba(235,235,245,0.6) - Ratio ~10:1
       tertiaryLabel: rgba(235,235,245,0.3) - Para texto menos importante */
    --color-text-primary: #FFFFFF;      /* iOS label dark - máximo contraste */
    --color-text-secondary: #EBEBF599;  /* iOS secondaryLabel dark (60% opacidad) */
    --color-text-tertiary: #EBEBF580;   /* iOS tertiaryLabel dark (50% opacidad) - legible para timestamps */
    --color-text-light: #EBEBF54C;      /* iOS quaternaryLabel dark (30% opacidad) */

    /* 🎨 Colores de fondo - iOS semantic backgrounds dark mode
       systemBackground: #000000 (negro puro)
       secondarySystemBackground: #1C1C1E
       tertiarySystemBackground: #2C2C2E */
    --color-bg-base: #000000;           /* iOS systemBackground dark */
    --color-bg-card: #1C1C1E;           /* iOS secondarySystemBackground dark */
    --color-bg-elevated: #2C2C2E;       /* iOS tertiarySystemBackground dark */
    --color-bg-hover: #3A3A3C;          /* iOS systemGray4 dark */

    /* 🎨 Colores de borde - iOS separators dark mode
       separator: rgba(84,84,88,0.6) - semitransparente
       opaqueSeparator: #38383A - sólido visible */
    --color-border: #38383A;            /* iOS opaqueSeparator dark - VISIBLE */
    --color-border-hover: #48484A;      /* iOS systemGray3 dark */

    /* 🎨 Estados de aulas (ajustados para oscuro con buen contraste) */
    --color-disponible: #0D3B2E;        /* Verde oscuro con buen contraste */
    --color-disponible-border: #30D158; /* iOS systemGreen dark */
    --color-ocupada: #3B1A1A;           /* Rojo oscuro con buen contraste */
    --color-ocupada-border: #FF453A;    /* iOS systemRed dark */

    /* ⭐ Estados de reservas recurrentes (dark mode) */
    --color-recurrente-bg-light: #3B1A1A;
    --color-recurrente-bg-dark: #4A1F1F;
    --color-recurrente-border: #FF453A;
    --color-recurrente-border-thick: #FF6961;

    /* 🎭 Sombras - más sutiles en modo oscuro (Apple style) */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.6);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.7);

    /* ✨ GLASSMORPHISM - Dark Mode (Apple style) */
    --glass-bg: rgba(28, 28, 30, 0.8);
    --glass-bg-elevated: rgba(44, 44, 46, 0.9);
    --glass-bg-subtle: rgba(28, 28, 30, 0.6);
    --glass-blur: 12px;
    --glass-saturate: 180%;
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    --glass-border-top: 1px solid rgba(255, 255, 255, 0.12);
    --glass-border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
}

/* Clase global para iconos de Google Material */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  font-size: var(--icon-size-md);
  vertical-align: middle;
  user-select: none;
}

/* Tamaños de iconos */
.icon-sm { font-size: var(--icon-size-sm) !important; }
.icon-md { font-size: var(--icon-size-md) !important; }
.icon-lg { font-size: var(--icon-size-lg) !important; }
.icon-xl { font-size: var(--icon-size-xl) !important; }

/* Colores de iconos */
.icon-primary { color: var(--color-primary) !important; }
.icon-success { color: var(--color-success) !important; }
.icon-danger { color: var(--color-danger) !important; }
.icon-warning { color: var(--color-warning) !important; }
.icon-info { color: var(--color-info) !important; }
.icon-text { color: var(--color-text-primary) !important; }
.icon-text-secondary { color: var(--color-text-secondary) !important; }