/* static/responsive-auth.css */

@media (max-width: 480px) {
    body { 
        background-color: white !important; 
        padding: 24px !important;
        display: flex !important;
        align-items: flex-start !important; 
        padding-top: 15% !important;
    }
    
    /* Aplica a cualquier contenedor de tarjeta que uses en tus 4 páginas */
    .login-card, .auth-card, .container, #login-box, .firebaseui-container { 
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Inputs y botones más grandes y cómodos para el dedo */
    input, button, .btn, .firebaseui-button {
        height: 48px !important;
        font-size: 16px !important; 
    }

    /* Evita que los QR o logos se desborden en pantallas pequeñas */
    img, svg, canvas {
        max-width: 100% !important;
        height: auto !important;
    }
}