/**
 * TOGGLE DE TEMA - OVERRIDE COMPLETO
 * Fuerza la aplicación del nuevo diseño del toggle
 */

/* Forzar el nuevo diseño del toggle */
.theme-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    min-width: 110px !important;
    padding: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 30px !important;
    backdrop-filter: blur(10px) !important;
}

.theme-toggle-label {
    cursor: pointer !important;
    width: 95px !important;
    height: 40px !important;
    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%) !important;
    display: block !important;
    border-radius: 50px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    border: 3px solid rgba(255, 255, 255, 0.5) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.theme-toggle-checkbox {
    display: none !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
}

.theme-icon-sun,
.theme-icon-moon {
    font-size: 18px !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    transition: all 0.4s ease !important;
    font-weight: 900 !important;
    font-family: 'Font Awesome 6 Free' !important;
}

.theme-icon-sun {
    left: 15px !important;
    opacity: 1 !important;
    color: #ff4500 !important;
    text-shadow: 
        0 0 15px rgba(255, 69, 0, 0.9),
        0 0 25px rgba(255, 140, 0, 0.6),
        0 2px 6px rgba(0, 0, 0, 0.8) !important;
}

.theme-icon-moon {
    right: 15px !important;
    opacity: 0.6 !important;
    color: #f0f0f0 !important;
    text-shadow: 
        0 0 10px rgba(240, 240, 240, 0.7),
        0 2px 6px rgba(0, 0, 0, 0.8) !important;
}

.theme-toggle-button {
    content: '' !important;
    width: 32px !important;
    height: 32px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.8) !important;
    z-index: 15 !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
}

/* Estado activado (modo oscuro) */
.theme-toggle-checkbox:checked + .theme-toggle-label {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-button {
    transform: translateX(58px) !important;
    background: linear-gradient(135deg, #2c2c54 0%, #1a1a2e 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.theme-toggle-checkbox:checked + .theme-toggle-label .theme-icon-sun {
    opacity: 0.3 !important;
    color: #ffd54f !important;
    transform: translateY(-50%) scale(0.8) !important;
    text-shadow: 
        0 0 8px rgba(255, 213, 79, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.theme-toggle-checkbox:checked + .theme-toggle-label .theme-icon-moon {
    opacity: 1 !important;
    color: #ffffff !important;
    text-shadow: 
        0 0 20px rgba(255, 255, 255, 1),
        0 0 30px rgba(255, 255, 255, 0.8),
        0 2px 6px rgba(0, 0, 0, 0.8) !important;
    transform: translateY(-50%) scale(1.2) !important;
}

/* Hover effects */
.theme-toggle-label:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

.theme-toggle-label:hover .theme-icon-sun,
.theme-toggle-label:hover .theme-icon-moon {
    transform: translateY(-50%) scale(1.1) !important;
}

/* Asegurar visibilidad en cualquier fondo */
.navbar .theme-toggle,
.nav-item .theme-toggle {
    background: rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    margin-top: 0 !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
}

/* Estilo final del toggle - sin debug */
.theme-toggle {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(0, 0, 0, 0.1) !important;
}