/* --- Estilos para la Pantalla Dividida --- */

.split-layout-container {
    display: flex;
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    width: 100vw; /* Ocupa todo el ancho de la pantalla */
    overflow: hidden; /* Evita barras de scroll innecesarias */
}

.image-panel {
    flex: 1 1 55%; /* El panel de la imagen ocupa el 55% del ancho */
    background-image: url('/images/imagenUnsplash.jpg');
    background-size: cover;
    background-position: center;
    /* Para poner texto sobre la imagen (opcional) */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinea el texto en la parte inferior */
    padding: 3rem;
    color: white;
}

/* Estilos para la caja de texto sobre la imagen */
.image-panel-text {
    background-color: rgba(0, 0, 0, 0.45); /* Fondo negro semi-transparente */
    padding: 1.5rem;
    border-radius: 0.5rem;
    backdrop-filter: blur(4px); /* Efecto de desenfoque en el fondo (moderno) */
}

    .image-panel-text h2 {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Sombra de texto para legibilidad */
    }

    .image-panel-text p {
        font-size: 1.2rem;
    }

.form-panel {
    flex: 1 1 45%; /* El panel del formulario ocupa el 45% */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: #ffffff; /* Fondo blanco para el formulario */
    overflow-y: auto; /* Permite scroll si el formulario es muy largo */
}

/* --- Estilos para la Tarjeta del Formulario --- */

.account-card {
    max-width: 450px;
    width: 100%;
    padding: 0; /* Quitamos el padding para que el card-body lo controle */
    border: none; /* Quitamos el borde, ya no es necesario */
    box-shadow: none; /* Quitamos la sombra, el diseño ya tiene profundidad */
}

/* Estilos para el focus de los inputs (opcional pero recomendado) */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
    background-color: white;
    padding: 0 0.25rem;
}


/* --- ESTILOS RESPONSIVOS PARA PANTALLAS PEQUEÑAS --- */

/* Se aplica a pantallas con un ancho máximo de 768px (tablets y móviles) */
@media (max-width: 768px) {

    .split-layout-container {
        /* Cambiamos la dirección de flex a columna para apilar los paneles */
        flex-direction: column;
        height: auto; /* La altura ya no necesita ser 100vh */
    }

    .image-panel {
        /* Ocultamos completamente el panel de la imagen en pantallas pequeñas */
        /* Es una distracción y consume espacio valioso. */
        display: none;
    }

    .form-panel {
        /* Hacemos que el panel del formulario ocupe el 100% del ancho */
        flex: 1 1 100%;
        /* Añadimos un poco de padding para que no se pegue a los bordes */
        padding: 1rem;
        min-height: 100vh; /* Ocupa al menos toda la altura de la pantalla */
    }

    /* Ajustamos el contenedor principal del layout para que el fondo sea consistente */
    .login-layout-main {
        /* Sobrescribimos el display flex para que el centrado vertical funcione bien */
        display: block;
        background-color: #ffffff; /* El fondo general en móvil será blanco */
    }
}