/* =========================================================
   LOGIN - Estilos completos (mobile-first) 
   - Burbujas SIEMPRE visibles y animadas
   - Layout estable en escritorio (sin saltos al escribir)
   - Sin cambios de IDs ni estructura HTML
   ========================================================= */

/* --- Reset básico --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    background-color: #3d2cf3;
    overflow-x: hidden; /* evita scroll horizontal */
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mantener siempre la barra vertical en desktop para evitar “saltos” por aparición/desaparición */
@media (min-width: 992px) {
    html, body {
        height: 100%;
        overflow-y: scroll;
        scroll-behavior: auto;
    }
}

/* =========================================================
   Fondo de Burbujas (siempre activas)
   ========================================================= */
.bubbles {
    position: fixed; /* no empuja el layout */
    inset: 0;
    pointer-events: none; /* no interfiere con clics */
    z-index: 0; /* detrás de la tarjeta */
}

    /* Burbujas */
    .bubbles div {
        position: absolute;
        bottom: -100px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        animation: rise 20s infinite ease-in; /* SIEMPRE animadas */
        will-change: transform, opacity;
    }

/* Animación */
@keyframes rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-1200px) scale(1.3);
        opacity: 0;
    }
}

/* Tamaños y velocidades variadas */
.bubbles div:nth-child(1) {
    left: 10%;
    width: 60px;
    height: 60px;
    animation-duration: 18s;
}

.bubbles div:nth-child(2) {
    left: 25%;
    width: 40px;
    height: 40px;
    animation-duration: 12s;
}

.bubbles div:nth-child(3) {
    left: 45%;
    width: 70px;
    height: 70px;
    animation-duration: 16s;
}

.bubbles div:nth-child(4) {
    left: 65%;
    width: 50px;
    height: 50px;
    animation-duration: 20s;
}

.bubbles div:nth-child(5) {
    left: 80%;
    width: 90px;
    height: 90px;
    animation-duration: 25s;
}

/* En móviles muy pequeños reducimos la cantidad visual para no saturar */
@media (max-width: 575.98px) {
    .bubbles div:nth-child(n+4) {
        display: none;
    }
}

/* Nota: incluso si el usuario tiene “reducir movimiento”, aquí mantenemos animación
   porque solicitaste que las burbujas aparezcan en todo momento. 
   (Si luego deseas respetar esa preferencia, podemos pausar la animación con un media query). */

/* =========================================================
   Tarjeta de Login / Card
   ========================================================= */
.card {
    border: 2px solid #fff !important;
}

.login-card {
    background: #fff;
    border: 3px solid #ffffff;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    max-width: 400px;
    width: 100%;
    transition: none; /* sin micro-animaciones */
    position: relative;
    z-index: 1; /* por delante de burbujas */
}

/* En escritorio evitamos efectos hover que causen “saltos” */
@media (min-width: 992px) {
    .login-card:hover {
        transform: none !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
    }
}

/* Contenedor translúcido opcional (si lo usas alrededor) */
.login-container {
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid #ffffff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    max-width: 400px;
    margin: auto;
}

/* =========================================================
   Header de la tarjeta
   ========================================================= */
.login-header {
    background-color: #3d2cf3;
    text-align: center;
    padding: clamp(24px, 4vw, 36px) 0;
}

    .login-header img {
        width: 85px;
        height: 85px;
        border-radius: 50%;
        object-fit: cover;
        background: #fff;
        padding: 5px;
    }

    .login-header h5 {
        color: #fff;
        font-weight: 600;
        margin-top: 10px;
    }

    .login-header small {
        color: rgba(255, 255, 255, 0.8);
    }

/* =========================================================
   Formulario
   ========================================================= */
.card-body {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.form-label {
    font-weight: 600;
    color: #222;
}

.input-group.shadow-sm {
    box-shadow: 0 2px 6px rgba(0,0,0,.06) !important;
}

.input-group-text {
    background-color: #f8f9fa;
    border-radius: 8px 0 0 8px;
}

.form-control {
    border-radius: 0 8px 8px 0;
    font-size: 16px; /* evita zoom de iOS al foco */
    min-height: 44px; /* área táctil mínima */
}

/* Botón principal */
.btn-primary {
    background-color: #3d2cf3;
    border: none;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

    .btn-primary:hover {
        background-color: #3320db;
    }

/* Alertas */
.alert {
    border-radius: 10px;
    font-size: 15px;
}

/* =========================================================
   Footer
   ========================================================= */
footer {
    color: #6c757d;
    font-size: 14px;
}

    footer a {
        color: #3d2cf3;
        text-decoration: none;
    }

        footer a:hover {
            text-decoration: underline;
        }

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 575.98px) {
    body {
        overflow-y: auto;
    }

    .login-card {
        margin: 0 1rem;
    }

    .login-header img {
        width: 70px;
        height: 70px;
    }

    .card-body {
        padding: 1.25rem;
    }

    .btn-primary {
        font-size: 1rem;
        padding: .75rem;
    }
}

/* En desktop, la tarjeta no “salta”: altura controlada y sin overflow del body */
@media (min-width: 992px) {
    .login-card {
        max-height: calc(100vh - 40px);
        overflow: hidden;
    }
}


/* =========================================================
   Ajuste para Zoom y Pantallas Cortas (Applaundry)
   ========================================================= */

/* Esta query se activa cuando el alto disponible es poco, 
   lo cual ocurre al subir el zoom o en pantallas pequeñas */
@media (max-height: 750px) {

    /* Reducimos el espacio del header para que todo suba */
    .login-header {
        padding: 15px 0 !important;
    }

        .login-header img {
            width: 60px !important;
            height: 60px !important;
        }

        .login-header h5 {
            font-size: 1.1rem;
            margin-top: 5px;
        }

    /* Reducimos el padding del cuerpo del formulario */
    .card-body {
        padding-top: 1rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Ajustamos los márgenes de los inputs para ganar espacio */
    .mb-3, .mb-4 {
        margin-bottom: 0.8rem !important;
    }

    /* Reducimos el padding del footer para que el link "Crear Cuenta" suba */
    .card-footer {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

/* Si el zoom es muy alto (pantalla aún más pequeña) */
@media (max-height: 600px) {
    .login-header small {
        display: none; /* Ocultamos el texto secundario para priorizar el link de cuenta */
    }

    .login-card {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}