/* =========================================
   LOGIN RESPONSIVE
   Ajustes para celular/tablet
========================================= */

@media (max-width: 768px){

    /* Fondo mobile más simple */
    .login-body{
        padding:18px;
        box-sizing:border-box;
        align-items:center;
        justify-content:center;
    }

    /* Mancha roja adaptada a mobile */
    .login-body::before{
        top:-360px;
        left:-440px;
        width:850px;
        height:780px;
        border-radius:0 0 80% 0;
    }

    /* Oculta la curva blanca para no ensuciar pantallas chicas */
    .login-body::after{
        display:none;
    }

    /* Oculta decoraciones grandes */
    .login-dots,
    .login-dots-red,
    .login-deco-calendar{
        display:none;
    }

    /* Card del login */
    .login-container{
        margin:0;
        padding:34px 26px;
        max-width:390px;
        border-radius:26px;
    }

    /* Título */
    .login-title{
        font-size:25px;
    }

    /* Modal */
    .custom-modal{
        max-width:100%;
    }

    /* Alta de usuario en una sola columna */
    .modal-form-grid{
        grid-template-columns:1fr;
    }

    .modal-form-full{
        grid-column:auto;
    }

    .custom-modal-footer{
        flex-direction:column-reverse;
    }

    .btn-modal-secondary,
    .btn-modal-primary{
        width:100%;
    }
}

@media (max-width: 420px){

    /* Título más chico para evitar cortes */
    .login-title{
        font-size:22px;
    }

    /* Ícono más compacto */
    .logo-circle{
        width:72px;
        height:72px;
        font-size:30px;
    }
}