/* Alpha Supplements - Sistema de Temas y Variables Material Design */

/* ============================================
   VARIABLES BASE DE ALPHA SUPPLEMENTS
   ============================================ */
:root {
    /* Paleta principal Alpha Supplements (mantenida del main.css) */
    --primary-color: #3E5F90;
    --secondary-color: #669BEC;
    --accent-color: #F39C12;
    --text-dark: #2C3E50;
    --text-light: #7F8C8D;
    --bg-light: #F8F9FA;
    --bg-main: rgb(221, 222, 223);

    /* ============================================
       MATERIAL DESIGN TOKENS - LIGHT THEME
       ============================================ */
    
    /* Primary Colors */
    --md-primary: var(--primary-color);
    --md-on-primary: #FFFFFF;
    --md-primary-container: #D5E3FF;
    --md-on-primary-container: #001C3C;
    
    /* Secondary Colors */
    --md-secondary: var(--secondary-color);
    --md-on-secondary: #FFFFFF;
    --md-secondary-container: #D9E6FF;
    --md-on-secondary-container: #12273B;
    
    /* Tertiary Colors */
    --md-tertiary: #7A5B6C;
    --md-on-tertiary: #FFFFFF;
    --md-tertiary-container: #FFD8E6;
    --md-on-tertiary-container: #2E1126;
    
    /* Error Colors */
    --md-error: #BA1A1A;
    --md-on-error: #FFFFFF;
    --md-error-container: #FFDAD6;
    --md-on-error-container: #410002;
    
    /* Background & Surface */
    --md-background: #FEFCFF;
    --md-on-background: var(--text-dark);
    --md-surface: #FEFCFF;
    --md-on-surface: var(--text-dark);
    --md-surface-variant: #E0E2EC;
    --md-on-surface-variant: var(--text-light);
    
    /* Surface Containers */
    --md-surface-container-lowest: #FFFFFF;
    --md-surface-container-low: #F3F3FE;
    --md-surface-container: var(--bg-light);
    --md-surface-container-high: #EBEAF2;
    --md-surface-container-highest: #E5E4E9;
    
    /* Outline */
    --md-outline: #74777F;
    --md-outline-variant: #C4C6D0;
    
    /* Other */
    --md-surface-tint: var(--md-primary);
    --md-inverse-surface: #2F3033;
    --md-inverse-on-surface: #F1F0F4;
    --md-inverse-primary: #A7C8FF;
    
    /* ============================================
       TONALES EXTENDIDOS PARA CASOS ESPECÍFICOS
       ============================================ */
    --md-tonal-primary-10: #001C3C;
    --md-tonal-primary-20: #003061;
    --md-tonal-primary-30: #124A82;
    --md-tonal-primary-40: #326BA9;
    --md-tonal-primary-50: #4D87C7;
    --md-tonal-primary-60: #68A3E5;
    --md-tonal-primary-70: #83BFFF;
    --md-tonal-primary-80: #A7C8FF;
    --md-tonal-primary-90: #D5E3FF;
    --md-tonal-primary-95: #EAF1FF;
    --md-tonal-primary-99: #FEFCFF;
}

/* ============================================
   DARK THEME
   ============================================ */
[data-bs-theme="dark"], .dark {
    /* Primary Colors */
    --md-primary: #A7C8FF;
    --md-on-primary: #003061;
    --md-primary-container: #124A82;
    --md-on-primary-container: #D5E3FF;
    
    /* Secondary Colors */
    --md-secondary: #BDC7DC;
    --md-on-secondary: #273141;
    --md-secondary-container: #3D4758;
    --md-on-secondary-container: #D9E6FF;
    
    /* Tertiary Colors */
    --md-tertiary: #E0BBCC;
    --md-on-tertiary: #44263C;
    --md-tertiary-container: #5C3C53;
    --md-on-tertiary-container: #FFD8E6;
    
    /* Error Colors */
    --md-error: #FFB4AB;
    --md-on-error: #690005;
    --md-error-container: #93000A;
    --md-on-error-container: #FFDAD6;
    
    /* Background & Surface */
    --md-background: #111318;
    --md-on-background: #E3E2E6;
    --md-surface: #111318;
    --md-on-surface: #E3E2E6;
    --md-surface-variant: #43474E;
    --md-on-surface-variant: #C4C6D0;
    
    /* Surface Containers */
    --md-surface-container-lowest: #0C0E13;
    --md-surface-container-low: #191C20;
    --md-surface-container: #1D2024;
    --md-surface-container-high: #282A2F;
    --md-surface-container-highest: #33353A;
    
    /* Outline */
    --md-outline: #8E9099;
    --md-outline-variant: #43474E;
    
    /* Other */
    --md-surface-tint: var(--md-primary);
    --md-inverse-surface: #E3E2E6;
    --md-inverse-on-surface: #2F3033;
    --md-inverse-primary: var(--primary-color);
}

/* ============================================
   UTILIDADES DE BOOTSTRAP CON VARIABLES MD
   ============================================ */

/* Override de Bootstrap con variables Material Design */
:root {
    --bs-primary: var(--md-primary);
    --bs-primary-rgb: 62, 95, 144;
    --bs-secondary: var(--md-secondary);
    --bs-secondary-rgb: 102, 155, 236;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: var(--accent-color);
    --bs-danger: var(--md-error);
    --bs-light: var(--md-surface-container-low);
    --bs-dark: var(--md-surface-container-highest);
    
    /* Background colors */
    --bs-body-bg: var(--md-background);
    --bs-body-color: var(--md-on-background);
    
    /* Border colors */
    --bs-border-color: var(--md-outline-variant);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
}

[data-bs-theme="dark"] {
    --bs-body-bg: var(--md-background);
    --bs-body-color: var(--md-on-background);
    --bs-border-color: var(--md-outline-variant);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.175);
}

/* ============================================
   CLASES UTILITARIAS MATERIAL DESIGN
   ============================================ */

/* Backgrounds */
.bg-md-surface { background-color: var(--md-surface) !important; }
.bg-md-surface-container { background-color: var(--md-surface-container) !important; }
.bg-md-surface-container-low { background-color: var(--md-surface-container-low) !important; }
.bg-md-surface-container-high { background-color: var(--md-surface-container-high) !important; }
.bg-md-surface-container-highest { background-color: var(--md-surface-container-highest) !important; }
.bg-md-primary-container { background-color: var(--md-primary-container) !important; }
.bg-md-secondary-container { background-color: var(--md-secondary-container) !important; }
.bg-md-tertiary-container { background-color: var(--md-tertiary-container) !important; }
.bg-md-error-container { background-color: var(--md-error-container) !important; }

/* Text Colors */
.text-md-on-surface { color: var(--md-on-surface) !important; }
.text-md-on-surface-variant { color: var(--md-on-surface-variant) !important; }
.text-md-primary { color: var(--md-primary) !important; }
.text-md-on-primary { color: var(--md-on-primary) !important; }
.text-md-on-primary-container { color: var(--md-on-primary-container) !important; }
.text-md-on-secondary-container { color: var(--md-on-secondary-container) !important; }
.text-md-on-tertiary-container { color: var(--md-on-tertiary-container) !important; }
.text-md-on-error-container { color: var(--md-on-error-container) !important; }

/* Borders */
.border-md-outline { border-color: var(--md-outline) !important; }
.border-md-outline-variant { border-color: var(--md-outline-variant) !important; }

/* ============================================
   COMPATIBILIDAD CON CLASES EXISTENTES
   ============================================ */

/* Mantener compatibilidad con las clases custom del main.css */
.bg-custom-primary { background-color: var(--md-primary) !important; }
.bg-custom-secondary { background-color: var(--md-secondary) !important; }
.text-custom-primary { color: var(--md-primary) !important; }

/* ============================================
   ANIMACIONES Y TRANSICIONES
   ============================================ */

/* Transiciones suaves para cambio de tema */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Estados hover mejorados */
.hover-md-surface:hover {
    background-color: var(--md-surface-container-high) !important;
}

.hover-md-primary:hover {
    background-color: var(--md-primary-container) !important;
    color: var(--md-on-primary-container) !important;
}

/* ============================================
   RESPONSIVIDAD Y MEDIA QUERIES
   ============================================ */

@media (max-width: 768px) {
    :root {
        /* Ajustes específicos para móvil */
        --md-surface-container: var(--md-surface-container-low);
    }
}

/* ============================================
   DEBUGGING (solo en desarrollo)
   ============================================ */
.debug-theme {
    position: fixed;
    top: 10px;
    right: 10px;
    background: var(--md-surface-container);
    border: 1px solid var(--md-outline);
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--md-on-surface);
    z-index: 9999;
}