/* === ALQUILA YA STYLE SHEET === */

html, body { 
    height: 100%; 
    margin: 0; 
    overflow: hidden; 
    background-color: #f8fafc; 
    font-feature-settings: "cv02","cv03","cv04","cv11"; 
}

.dark body { 
    background-color: #030712; 
    color: #e2e8f0; 
}

.glass { 
    background: rgba(255,255,255,0.8); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px); 
    border-bottom: 1px solid rgba(255,255,255,0.3); 
}

.dark .glass { 
    background: rgba(10,15,22,0.8); 
    border-bottom-color: rgba(255,255,255,0.04); 
}

.custom-scroll { 
    overflow-y: auto; 
    overflow-x: hidden; 
}

.custom-scroll::-webkit-scrollbar { 
    width: 4px; 
}

.custom-scroll::-webkit-scrollbar-track { 
    background: transparent; 
}

.custom-scroll::-webkit-scrollbar-thumb { 
    background: rgba(148,163,184,0.5); 
    border-radius: 4px; 
}

.dark .custom-scroll::-webkit-scrollbar-thumb { 
    background: rgba(71,85,105,0.6); 
}

.text-gradient { 
    background-clip: text; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-image: linear-gradient(135deg, #f87171 0%, #dc2626 100%); 
}

.btn-primary { 
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); 
    box-shadow: 0 4px 15px rgba(220,38,38,0.3); 
    transition: all 0.3s ease; 
}

.btn-primary:hover:not(:disabled) { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 25px rgba(220,38,38,0.5); 
}

.btn-glass { 
    background: rgba(255,255,255,0.75); 
    backdrop-filter: blur(8px); 
    border: 1px solid rgba(0,0,0,0.05); 
    transition: all 0.2s ease; 
}

.dark .btn-glass { 
    background: rgba(30,35,44,0.75); 
    border-color: rgba(255,255,255,0.08); 
}

.btn-glass:hover { 
    background: rgba(255,255,255,0.95); 
    transform: translateY(-1px); 
}

.dark .btn-glass:hover { 
    background: rgba(40,46,58,0.95); 
}

.toggle-checkbox:checked { 
    right: 0; 
    border-color: #ef4444; 
}

.toggle-checkbox:checked+.toggle-label { 
    background-color: #ef4444; 
}

.toggle-checkbox { 
    right: 0; 
    z-index: 1; 
    border-color: #cbd5e1; 
    transition: all 0.3s; 
}

.toggle-label { 
    width: 3rem; 
    height: 1.5rem; 
    background-color: #cbd5e1; 
    transition: all 0.3s; 
}

.dark .toggle-label { 
    background-color: #3f3f46; 
}

#auth-wrapper { 
    position: relative; 
    overflow: hidden; 
}

.auth-panel-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
    z-index: 10; 
}

.auth-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
    z-index: 20; 
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
}

.view-login, .view-register { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    background: white; 
    transition: opacity 0.4s ease, visibility 0.4s ease; 
}

.dark .view-login, .dark .view-register { 
    background: #0f1117; 
}

.view-login { 
    opacity: 1; 
    visibility: visible; 
}

.view-register { 
    opacity: 0; 
    visibility: hidden; 
}

.auth-overlay-content { 
    position: absolute; 
    width: 100%; 
    padding: 2rem; 
    text-align: center; 
    transition: opacity 0.4s ease, visibility 0.4s ease; 
}

#auth-overlay-login { 
    opacity: 1; 
    visibility: visible; 
}

#auth-overlay-register { 
    opacity: 0; 
    visibility: hidden; 
}

@media (min-width: 768px) {
    .auth-panel-container, .auth-overlay { 
        width: 50%; 
    }
    .auth-panel-container { 
        left: auto; 
        right: 0; 
    }
    .auth-overlay { 
        left: 0; 
        right: auto; 
        border-radius: 0 2rem 2rem 0; 
    }
    .right-panel-active .auth-panel-container { 
        transform: translateX(-100%); 
    }
    .right-panel-active .auth-overlay { 
        transform: translateX(100%); 
        border-radius: 2rem 0 0 2rem; 
    }
    .right-panel-active .view-login { 
        opacity: 0; 
        visibility: hidden; 
    }
    .right-panel-active .view-register { 
        opacity: 1; 
        visibility: visible; 
    }
    .right-panel-active #auth-overlay-login { 
        opacity: 0; 
        visibility: hidden; 
    }
    .right-panel-active #auth-overlay-register { 
        opacity: 1; 
        visibility: visible; 
    }
}

@media (max-width: 767px) {
    .auth-panel-container { 
        width: 100%; 
    }
    .auth-overlay { 
        display: none !important; 
    }
    .right-panel-active .view-login { 
        opacity: 0; 
        visibility: hidden; 
    }
    .right-panel-active .view-register { 
        opacity: 1; 
        visibility: visible; 
    }
}

.swiper-pagination-bullet { 
    background: rgba(255,255,255,0.9)!important; 
    opacity: 1; 
}

.swiper-pagination-bullet-active { 
    background: #ef4444!important; 
    width: 20px; 
    border-radius: 10px; 
    transition: width 0.3s; 
}

input[type=range] { 
    -webkit-appearance: none; 
    width: 100%; 
    background: transparent; 
}

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    height: 22px; 
    width: 22px; 
    border-radius: 50%; 
    background: #ef4444; 
    cursor: pointer; 
    margin-top: -8px; 
    box-shadow: 0 2px 8px rgba(239,68,68,0.5); 
    border: 2px solid white; 
}

.dark input[type=range]::-webkit-slider-thumb { 
    border-color: #1a1d24; 
}

input[type=range]::-webkit-slider-runnable-track { 
    width: 100%; 
    height: 6px; 
    cursor: pointer; 
    background: #e2e8f0; 
    border-radius: 3px; 
}

.dark input[type=range]::-webkit-slider-runnable-track { 
    background: #374151; 
}

@media (max-width: 640px) { 
    #modal-container>div:first-child { 
        padding: 0.25rem; 
    } 
    #modal-content { 
        max-width: 100%!important; 
        margin: 0 0.25rem; 
        border-radius: 1.5rem 1.5rem 1rem 1rem; 
    } 
}

@media (min-width: 1024px) { 
    #app-container { 
        max-width: 1400px; 
        margin: 0 auto; 
    } 
}