/* =========================================================
   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;
    }
}