/* Estilos Base para Escritorio (Desktop) */
.sliding-panel {
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 90%;
    min-height: 680px;
}

/* Ocultar botones de móvil en escritorio */
.mobile-toggle-buttons {
    display: none; /* Se mantiene por si se olvidó eliminar del HTML */
}

/* Contenedores individuales de los formularios */
.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
    width: 50%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0;
}

.form-container form {
    height: auto !important; /* Permitir que el formulario interno crezca */
    min-height: 100%;
}

.sign-in-container {
    left: 0;
    z-index: 2; 
    opacity: 1;
}

.sign-up-container {
    left: 0;
    opacity: 0;
    z-index: 1;
}

/* Contenedor de la capa superpuesta (Overlay) */
.overlay-container {
    position: absolute;
    top: 0;
    left: 50%; 
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.overlay {
    background: #001c41; 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    color: #fff;
    position: relative;
    left: -100%; 
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-panel {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left {
    transform: translateX(-20%);
}

.overlay-right {
    right: 0;
    transform: translateX(0);
}

/* --- CLASE DE ACTIVACIÓN (Desktop) --- */

.sliding-panel.right-panel-active .sign-in-container {
    transform: translateX(100%); 
    opacity: 0; 
}

.sliding-panel.right-panel-active .sign-up-container {
    transform: translateX(100%); 
    opacity: 1;
    z-index: 5;
}

.sliding-panel.right-panel-active .overlay-container {
    transform: translateX(-100%); 
}

.sliding-panel.right-panel-active .overlay {
    transform: translateX(50%); 
}

.sliding-panel.right-panel-active .overlay-left {
    transform: translateX(0);
}

.sliding-panel.right-panel-active .overlay-right {
    transform: translateX(20%);
}


/* ################################################################# */
/* MEDIA QUERY: AJUSTE PARA MÓVILES (Max 768px)                     */
/* ################################################################# */

@media (max-width: 768px) {
    
    .sliding-panel {
        width: 95%; 
        position: relative; 
        min-height: auto; 
        height: auto;
        /* SOLO padding-bottom para el Overlay Footer ABSOLUTO */
        padding-bottom: 100px; 
        /* ELIMINAMOS EL padding-top que compensaba los botones de alternancia */
        padding-top: 0; 
        border-radius: 10px; 
    }
    
    /* ELIMINAMOS el margen superior extra de los títulos */
    .form-container h2 {
        margin-top: 0 !important; 
    }
    
    /* 1. Ocultar los elementos grandes del Overlay (desktop) */
    .overlay-panel p, 
    .overlay-panel h1, 
    .overlay-panel button {
        display: none !important; 
    }
    
    /* 2. Reorganización de Elementos */
    .form-container, 
    .overlay-container {
        width: 100%;
        left: 0;
        top: 0;
        transform: none !important; 
        transition: none; 
        padding: 0 !important;
    }
    
    /* 3. Overlay Footer (Absoluto en la parte inferior) */
    .overlay-container {
        position: absolute; 
        bottom: 0; 
        height: 100px; 
        z-index: 10; 
        border-radius: 0 0 10px 10px; 
        overflow: hidden; 
        
        /* Aplicamos el gradiente al contenedor */
        /* background: linear-gradient(to right, #4776E6, #8E54E9); */
        
        /* Ocultamos el overlay interno para usar solo el contenedor */
        .overlay {
            display: none !important;
        }
    }
    
    .sign-in-container, .sign-up-container {
        position: relative; 
        height: auto;
        padding: 20px;
    }

    /* 4. Lógica de Ocultamiento/Visibilidad en Móviles */
    /* El enlace interno de los formularios ahora controlará la vista */
    
    /* Estado por defecto (Login Activo) */
    .sign-in-container {
        display: block; 
        background-color: white; /* Fondo blanco para ocultar cualquier gradiente */
    }
    .sign-up-container {
        display: none; 
        background-color: white; /* Fondo blanco para ocultar cualquier gradiente */
    }
    
    /* Estado 'right-panel-active' (Registro Activo) */
   .sliding-panel.right-panel-active .sign-in-container {
        display: none !important; 
    }
    .sliding-panel.right-panel-active .sign-up-container {
        display: block !important; 
    }
    
    /* Limpieza de animaciones de escritorio en móvil */
    .sliding-panel.right-panel-active .overlay-container,
    .sliding-panel.right-panel-active .overlay {
        transform: none !important;
    }
}