/* ============================================================
   ARCHIVO: login-responsive.css (MOVIL GRANDE - IGUAL QUE PC)
   ============================================================ */

/* Se activa para Tablets y Móviles (menores a 1024px) */
@media screen and (max-width: 1024px) {

    body {
        display: flex !important;           /* Activa el sistema de cajas flexibles */
        flex-direction: column !important;  /* Apila los elementos (Login arriba, Footer abajo) */
        justify-content: center !important; /* Mantiene el Login centrado verticalmente */
        align-items: center !important;     /* Mantiene el Login centrado horizontalmente */
        height: auto !important;            /* La altura se adapta al contenido */
        min-height: 100vh;                  /* Asegura que el fondo ocupe toda la pantalla */
        padding: 50px 0;                    /* Espacio de seguridad arriba y abajo */
        overflow-y: auto !important;        /* Permite bajar si el móvil es pequeño */
        overflow-x: hidden !important;      /* Bloquea el movimiento lateral por Lilith */
    }

    /* 1. LILITH: Ajustada para que no tape los inputs en pantallas estrechas */
    .illustration {
        display: block !important;          /* Se mantiene visible */
        position: absolute;                 /* Se mueve respecto a la caja de login */
        top: -20%;                          /* Posición vertical similar a PC */
        right: -80px;                       /* Asoma por el lateral derecho */
        width: 85%;                         /* Tamaño grande para que se vea imponente */
        z-index: 15;                        /* Capa intermedia (detrás de los textos) */
        opacity: 0.9;                       /* Casi opaca para que resalte */
        pointer-events: none;               /* Los clics atraviesan la imagen */
        filter: drop-shadow(0 0 20px rgba(0,0,0,0.9)); /* Sombra para dar profundidad */
    }

    /* 2. LA CAJA (TAMAÑO PC): Forzamos que no se encoja */
    .login-container {
        width: 20rem !important;            /* 🚩 IGUAL QUE PC: Forzamos el tamaño grande */
        max-width: 95vw;                    /* Solo se encoge si el móvil es físicamente más estrecho que la caja */
        margin: 0 auto !important;          /* Centrado manual */
        position: relative;                 /* Necesario para posicionar a Lilith */
    }

    /* 3. EL FORMULARIO (MÁXIMO CRISTAL) */
    .form-container {
        padding: 3.5rem 2rem !important;    /* Mismo relleno que en escritorio */
        background: rgba(255, 255, 255, 0.01) !important; /* Cristal casi invisible */
        backdrop-filter: blur(40px) !important;           /* Desenfoque máximo */
        border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Borde definido */
        border-radius: 20px;
    }

    /* 4. TEXTOS E INPUTS (COMODIDAD) */
    h1.opacity {
        font-size: 2.2rem !important;       /* Letra grande para el título */
        letter-spacing: 5px !important;     /* Espaciado épico */
        margin-bottom: 2rem !important;
    }

    .login-container form input {
        font-size: 16px !important;         /* Evita el zoom molesto de los iPhones */
        padding: 15px !important;           /* Altura cómoda para pulsar con el dedo */
        margin-bottom: 1.5rem !important;   /* Espacio entre campos */
    }

    /* 5. LINKS DE REGISTRO */
    .register-forget {
        flex-direction: row !important;     /* Intentamos mantenerlos en línea como en PC */
        justify-content: space-between !important;
        width: 100%;
    }

    /* Si el móvil es MUY estrecho, los ponemos uno encima de otro para que no se pisen */
    @media (max-width: 400px) {
        .register-forget {
            flex-direction: column !important;
            gap: 15px;
            text-align: center;
        }
    }

    /* 6. FOOTER Y PALETA (ORDENADOS ABAJO) */
    footer {
        position: relative !important;      /* Se coloca después del login */
        margin-top: 40px !important;        /* Separación del cuadro */
        padding-bottom: 80px !important;    /* Espacio para la paleta de colores */
    }

    .theme-btn-container {
        position: fixed !important;         /* Flota siempre abajo */
        flex-direction: row !important;     /* Horizontal */
        left: 50% !important;               /* Al centro */
        bottom: 20px !important;            /* Separación del suelo */
        transform: translateX(-50%) !important;
        background: rgba(0, 0, 0, 0.5) !important;
        padding: 10px 15px !important;
        border-radius: 30px !important;
        backdrop-filter: blur(10px) !important;
    }
}