/* --- LAYOUT DIVIDIDO (Caja Izq | Form Der) --- */
.login-split-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12vw;
    /* Mayor separación dinámica basada en pantalla */
    min-height: 85vh;
    padding: 2rem;
    overflow-x: hidden;
}

/* Columna de la Mascota */
.mascot-side {
    flex: 0 1 auto;
    /* Se adapta a la pantalla */
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-mascot-container {
    width: clamp(280px, 45vw, 600px);
    /* Tamaño fluido: mímino 280px, ideal 45% de la pantalla, máximo 600px */
    height: auto;
    aspect-ratio: 1 / 1;
    /* Mantiene la proporción cuadrada */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- OVERRIDE CRÍTICO PARA .box-22 --- */
/* Integramos la mascota al layout Flex (removiendo el absolute problemático) */
.login-split-screen .box-22 {
    position: relative !important;
    /* Importante para anular el absolute del main.css */
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;

    /* Mantenemos la animación de flotar */
    animation: float-rotate-reverse 25s ease-in-out infinite;
}

/* Columna del Formulario */
.form-side {
    flex: 0 1 450px;
    /* Ancho base del form */
    max-width: 100%;
}

/* --- ESTILOS DE LA MANO --- */
#hands-group .hand {
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Estado NORMAL: Mano escondida abajo */
.hand {
    transform: translate(200px, 900px) rotate(-30deg);
    opacity: 0;
}

/* Estado COVERING: Mano tapa ojos */
.covering .hand {
    transform: translate(320px, 250px) rotate(-10deg) !important;
    opacity: 1 !important;
}

/* --- RESPONSIVE (Celulares) --- */
@media (max-width: 900px) {
    .login-split-screen {
        flex-direction: column;
        /* Uno arriba del otro */
        gap: 2rem;
    }

    .mascot-side {
        display: none !important;
    }
}

/* --- TRANSICIONES DE EXPRESIÓN Y MANOS --- */



/* 2. LAS MANOS (Swapping) */
#hands-group .hand-resting,
#hands-group .hand-covering {
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* -- Mano en Reposo -- */
.hand-resting {
    /* Posición inicial relajada (abajo a la derecha del cubo) */
    transform: translate(150px, 500px) rotate(10deg);
    opacity: 1;
}

/* Al escribir, la mano de reposo se va (baja y desaparece) */
.login-mascot-container.covering .hand-resting {
    transform: translate(480px, 170px) rotate(30deg);
    opacity: 0;
}

/* -- Mano para Tapar -- */
.hand-covering {
    /* Empieza invisible y abajo */
    transform: translate(150px, 500px) rotate(-10deg);
    opacity: 0;
}

/* Al escribir, sube y tapa los ojos */
.login-mascot-container.covering .hand-covering {
    transform: translate(480px, 170px) rotate(30deg) !important;
    opacity: 1 !important;
}

/* --- ANIMACIÓN DEL PERSONAJE --- */

/* ============ 1. LAS BOCAS (Sonrisa vs Sorpresa) ============ */

/* Configuración común para ambas bocas */
.mouth-shape {
    transition: opacity 0.2s ease-in-out;
    /* ¡IMPORTANTE! Quitamos 'position: absolute' que rompía el SVG */
}

/* --- Estado NORMAL --- */

/* Sonrisa visible */
.login-mascot-container #smile {
    opacity: 1;
}

/* Boca de sorpresa oculta */
.login-mascot-container #surprised-mouth {
    opacity: 0;
}

/* --- Estado COVERING (Escribiendo) --- */

/* Sonrisa desaparece */
.login-mascot-container.covering #smile {
    opacity: 0;
}

/* Boca de sorpresa aparece */
.login-mascot-container.covering #surprised-mouth {
    opacity: 1;
}