.modal-login{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:20px;
    z-index:10000;
    opacity:0;
    visibility:hidden;
    transition:.3s ease;

    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box;
}
.modal-login.activo{
    opacity:1;
    visibility:visible;
}
.login-contenido{
    position:relative;
    width:100%;
    max-width:380px;

    max-height:none;

    box-sizing:border-box;
    background:var(--crema);
    border-radius:22px;
    padding:22px 32px 20px;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,.3);

    transform:translateY(20px) scale(.96);
    transition:.3s ease;

    margin:auto;
    flex-shrink:0;
}
.modal-login.activo .login-contenido{
    transform:translateY(0) scale(1);
}
.login-logo{
    width:105px;
    margin:0 auto 5px;
}
.login-logo img{
    width:100%;
    height:auto;
    margin:auto;
}
.login-contenido h2{
    font-family:"Bree Serif",serif;
    color:#22264a;
    font-size:1.75rem;
    margin:3px 0;
}
.login-subtitulo{
    color:#666;
    font-size:.82rem;
    margin:0 0 17px;
}
.cerrar-login{
    position:absolute;
    top:10px;
    right:10px;
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:transparent;
    color:#555;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:1.6rem;
    transition:.3s;
}
.cerrar-login:hover{
    background:#b62025;
    color:#fff;
    transform:rotate(90deg);
}
.login-campo{
    width:100%;
    height:46px;
    display:flex;
    align-items:center;
    background:#fff;
    border:1px solid #ddd;
    border-radius:11px;
    margin-bottom:9px;
    padding:0 13px;
    transition:.3s;
}
.login-campo:focus-within{
    border-color:var(--verde);
    box-shadow:0 0 0 3px rgba(46,107,63,.1);
}
.login-campo i{
    color:var(--verde);
    font-size:1.15rem;
    margin-right:9px;
}
.login-campo input{
    width:100%;
    height:100%;
    border:none;
    outline:none;
    background:transparent;
    font-family:'Montserrat',sans-serif;
    font-size:.82rem;
}
.btn-login{
    width:100%;
    height:46px;
    border:none;
    border-radius:11px;
    background:var(--verde);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:.82rem;
    cursor:pointer;
    transition:.3s;
    padding:0;
    margin:0;
    box-sizing:border-box;
}
.btn-login:hover{
    background:#245732;
    transform:translateY(-2px);
}
.btn-login:hover{
    background:#245732;
    transform:translateY(-2px);
}
.login-separador{
    display:flex;
    align-items:center;
    gap:12px;
    margin:11px 0;
    color:#888;
    font-size:.78rem;
}
.login-separador::before,
.login-separador::after{
    content:"";
    height:1px;
    flex:1;
    background:#d5cbb9;
}
.login-separador span{
    background:var(--crema);
}
.btn-facebook{
    width:100%;
    height:40px;
    border:1px solid #ddd;
    border-radius:11px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#1877f2;
    font-family:'Montserrat',sans-serif;
    font-size:.82rem;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}
.btn-facebook i{
    font-size:1.3rem;
}
.btn-facebook:hover{
    background:#f5f5f5;
    transform:translateY(-2px);
}
.login-registro{
    margin-top:6px;
    margin-bottom:0;
    font-size:.75rem;
    color:#666;
    line-height:1.2;
}
.login-registro a{
    color:var(--rojo);
    font-weight:700;
}
.login-registro a:hover{
    text-decoration:underline;
}
.btn-google{
    width:100%;
    height:46px;
    border:1px solid #ddd;
    border-radius:11px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#444;
    font-family:'Montserrat',sans-serif;
    font-size:.82rem;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
    margin-top:7px;
    padding:0;
    box-sizing:border-box;
}
.btn-google i{
    font-size:1.3rem;
}
.btn-google:hover{
    background:#f5f5f5;
    transform:translateY(-2px);
}
.registro-contenido{
    width:100%;
    box-sizing:border-box;
}
.registro-contenido form{
    width:100%;
    display:block;
}
.registro-contenido .btn-login{
    width:100%;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    margin:0;
}
.registro-contenido .btn-facebook{
    width:100%;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    margin-left:0;
    margin-right:0;
}

.registro-contenido .btn-google{
    width:100%;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    margin-left:0;
    margin-right:0;
}
.registro-contenido .btn-google{
    margin-top:6px;
}
.ojo-password{
    color:#777 !important;
    font-size:1.25rem !important;
    margin-right:0 !important;
    margin-left:10px;
    cursor:pointer;
    flex-shrink:0;
    transition:.2s;
}

.ojo-password:hover{
    color:var(--verde) !important;
}
.password-rules{
    display:none;
    width:100%;
    text-align:left;
    margin:-1px 0 12px;
    padding:2px 8px 0;
}
.password-rules.show{
    display:block;
}
.password-rules p{
    display:flex;
    align-items:center;
    gap:8px;
    margin:4px 0;
    color:#777;
    font-size:.80rem;
}
.password-rules p i{
    width:17px;
    height:17px;
    min-width:17px;

    display:block;
    position:relative;

    border:2px solid #999;
    border-radius:50%;

    box-sizing:border-box;

    font-size:0 !important;
}

/* Quita el círculo que genera Boxicons */
.password-rules p i::before{
    content:"" !important;
    display:none !important;
}

/* Cuando la condición se cumple */
.password-rules p.ok{
    color:#2e6b3f;
}

/* Cambia el círculo por la cara */
.password-rules p.ok i{
    width:23px;
    height:23px;
    min-width:23px;

    border:none;
    border-radius:0;

    background-image:url("Recursos/LogoPrincipal.png");
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}

.registro-contenido:has(.password-rules.show){
    max-height:none;
}

.login-contenido:has(.password-rules.show){
    max-height:none;
    padding-bottom:24px;
}
.mensaje-error{
    display:none;
    width:100%;
    color:#b62025;
    font-size:.68rem;
    font-weight:600;
    text-align:left;
    margin:-4px 0 8px 4px;
    line-height:1.25;
}

.mensaje-error.mostrar{
    display:block;
}

.mensaje-error-login{
    margin:-2px 0 9px 4px;
}

.login-campo.error{
    border-color:#b62025;
}

.login-campo.error:focus-within{
    border-color:#b62025;
    box-shadow:0 0 0 3px rgba(182,32,37,.10);
}
#googleButton,
#googleButtonRegistro{
    display:flex;
    justify-content:center;
    margin-top:2px;
}

#googleButton > div,
#googleButtonRegistro > div{
    border-radius:11px !important;
    overflow:hidden !important;
}

#googleButton iframe,
#googleButtonRegistro iframe{
    border-radius:11px !important;
}
.btn-reenviar-verificacion{
    width:100%;
    border:none;
    background:transparent;
    color:var(--rojo);
    font-family:'Montserrat',sans-serif;
    font-size:.76rem;
    font-weight:700;
    cursor:pointer;
    margin-top:12px;
    padding:5px;
}

.btn-reenviar-verificacion:hover{
    text-decoration:underline;
}

.mensaje-reenvio{
    display:none;
    margin:10px 0 0;
    font-size:.75rem;
    color:#2e6b3f;
    line-height:1.4;
}

.mensaje-reenvio.mostrar{
    display:block;
}
/* =========================
   OLVIDÉ MI CONTRASEÑA
========================= */

.olvide-password{
    text-align:right;
    margin-top:-2px;
    margin-bottom:12px;
}

.olvide-password a{
    font-family:'Montserrat',sans-serif;
    font-size:.76rem;
    font-weight:600;
    color:var(--rojo);
    text-decoration:none;
}

.olvide-password a:hover{
    text-decoration:underline;
}


/* MENSAJE DE RECUPERACIÓN */

.mensaje-recuperacion{
    display:none;
    font-family:'Montserrat',sans-serif;
    font-size:.78rem;
    line-height:1.5;
    margin-top:14px;
}

.mensaje-recuperacion.mostrar{
    display:block;
}

.mensaje-recuperacion.correcto{
    color:#2e6b3f;
}

.mensaje-recuperacion.error{
    color:#b42318;
}
/* =====================================================
   RESPONSIVE FINAL - TODOS LOS MODALES
   Login / Registro / Verificación / Recuperación
===================================================== */


/* =========================
   TABLET Y CELULAR
========================= */

@media (max-width:768px){

    .modal-login{
        padding:
            max(12px, env(safe-area-inset-top))
            12px
            max(12px, env(safe-area-inset-bottom));

        align-items:flex-start;
        justify-content:center;

        overflow-y:auto;
        overflow-x:hidden;

        -webkit-overflow-scrolling:touch;
    }


    .login-contenido{
        width:100%;
        max-width:360px;

        margin:auto;

        padding:22px 22px 24px;

        border-radius:20px;

        max-height:none;

        flex-shrink:0;
    }


    /* REGISTRO */

    .registro-contenido{
        width:100%;
        max-width:360px;
    }


    /* LOGO */

    .login-logo{
        width:88px;
        margin:0 auto 5px;
    }


    .login-logo img{
        width:100%;
        height:auto;
    }


    /* TÍTULOS */

    .login-contenido h2{
        font-size:1.55rem;
        line-height:1.1;
        margin:4px 0 6px;
    }


    .login-subtitulo{
        font-size:.77rem;
        line-height:1.4;
        margin-bottom:14px;
    }


    /* X */

    .cerrar-login{
        top:8px;
        right:8px;

        width:34px;
        height:34px;

        font-size:1.5rem;

        z-index:5;
    }


    /* CAMPOS */

    .login-campo{
        width:100%;
        height:44px;

        padding:0 12px;

        margin-bottom:8px;

        border-radius:10px;
    }


    .login-campo input{
        min-width:0;

        font-size:16px;
    }


    /*
       IMPORTANTE:
       16px evita que iPhone haga zoom
       automático al tocar el input.
    */


    .login-campo i{
        flex-shrink:0;
    }


    /* OJO */

    .ojo-password{
        margin-left:8px !important;
        margin-right:0 !important;
    }


    /* BOTONES */

    .btn-login{
        width:100%;
        height:44px;

        font-size:.8rem;

        border-radius:10px;
    }


    .btn-facebook{
        width:100%;
        height:42px;

        font-size:.78rem;

        border-radius:10px;
    }


    /* GOOGLE */

/* =========================
   GOOGLE RESPONSIVE
========================= */

#googleButton,
#googleButtonRegistro{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:6px;
    overflow:hidden;
}

#googleButton > div,
#googleButtonRegistro > div{
    max-width:100% !important;
}

#googleButton iframe,
#googleButtonRegistro iframe{
    max-width:100% !important;
}


    /* SEPARADOR */

    .login-separador{
        margin:10px 0;

        gap:10px;

        font-size:.75rem;
    }


    /* CREAR CUENTA / VOLVER */

    .login-registro{
        font-size:.74rem;
        line-height:1.4;

        margin-top:8px;
    }


    /* OLVIDÉ MI CONTRASEÑA */

    .olvide-password{
        margin-top:0;
        margin-bottom:11px;
    }


    .olvide-password a{
        font-size:.74rem;
    }


    /* ERRORES */

    .mensaje-error{
        font-size:.67rem;

        margin:
            -3px
            0
            8px
            3px;
    }


    /* REGLAS DE CONTRASEÑA */

    .password-rules{
        padding:2px 4px 0;

        margin:
            -1px
            0
            11px;
    }


    .password-rules p{
        font-size:.74rem;

        gap:7px;

        margin:4px 0;
    }


    .password-rules p.ok i{
        width:21px;
        height:21px;
        min-width:21px;
    }


    /* REENVIAR VERIFICACIÓN */

    .btn-reenviar-verificacion{
        font-size:.73rem;

        margin-top:10px;
    }


    .mensaje-reenvio{
        font-size:.72rem;

        line-height:1.4;
    }


    /* RECUPERACIÓN */

    .mensaje-recuperacion{
        font-size:.74rem;

        line-height:1.4;
    }
}



/* =========================
   CELULARES
   iPhone / Android
========================= */

@media (max-width:480px){

    .modal-login{
        padding:
            max(10px, env(safe-area-inset-top))
            10px
            max(10px, env(safe-area-inset-bottom));
    }

        #googleButton > div,
    #googleButtonRegistro > div{
        width:321px !important;
        max-width:none !important;
    }

    #googleButton iframe,
    #googleButtonRegistro iframe{
        width:322px !important;
        max-width:none !important;
    }
    .login-contenido{
        width:100%;

        max-width:340px;

        padding:
            19px
            18px
            20px;

        border-radius:18px;
    }


    /* LOGO */

    .login-logo{
        width:78px;

        margin-bottom:3px;
    }


    /* TÍTULO */

    .login-contenido h2{
        font-size:1.4rem;

        margin:
            3px
            0
            5px;
    }


    /* SUBTÍTULO */

    .login-subtitulo{
        font-size:.73rem;

        line-height:1.35;

        margin-bottom:12px;
    }


    /* X */

    .cerrar-login{
        top:6px;
        right:6px;

        width:32px;
        height:32px;

        font-size:1.4rem;
    }


    /* CAMPOS */

    .login-campo{
        height:43px;

        padding:0 11px;

        margin-bottom:7px;
    }


    .login-campo input{
        font-size:16px;
    }


    .login-campo i{
        font-size:1.05rem;
    }


    /* BOTÓN PRINCIPAL */

    .btn-login{
        height:43px;

        font-size:.77rem;
    }


    /* FACEBOOK */

    .btn-facebook{
        height:41px;

        font-size:.75rem;

        gap:7px;
    }


    .btn-facebook i{
        font-size:1.15rem;
    }


    /* GOOGLE */

    #googleButton,
    #googleButtonRegistro{
        transform-origin:center;
    }


    /* SEPARADOR */

    .login-separador{
        margin:9px 0;
    }


    /* TEXTOS INFERIORES */

    .login-registro{
        font-size:.71rem;
    }


    .olvide-password a{
        font-size:.71rem;
    }


    /* REGLAS */

    .password-rules p{
        font-size:.70rem;
    }


    /* MODAL VERIFICACIÓN */

    #modalEstadoCuenta .login-contenido{
        max-width:340px;
        padding:
            22px
            18px
            20px;
    }


    #modalEstadoCuenta .login-subtitulo{
        padding:0 4px;
    }


    /* MODAL RECUPERACIÓN */

    #modalRecuperacion .login-contenido{
        max-width:340px;

        padding:
            22px
            18px
            20px;
    }


    #modalRecuperacion .login-subtitulo{
        padding:0 3px;
    }
}



/* =========================
   CELULARES PEQUEÑOS
========================= */

@media (max-width:360px){

    .modal-login{
        padding:8px;
    }


    .login-contenido{
        max-width:100%;

        padding:
            17px
            14px
            18px;

        border-radius:16px;
    }


    /* LOGO */

    .login-logo{
        width:68px;
    }


    /* TÍTULO */

    .login-contenido h2{
        font-size:1.28rem;
    }


    /* SUBTÍTULO */

    .login-subtitulo{
        font-size:.70rem;
    }


    /* CAMPOS */

    .login-campo{
        height:42px;
    }


    /* BOTONES */

    .btn-login{
        height:42px;

        font-size:.74rem;
    }


    .btn-facebook{
        height:40px;

        font-size:.70rem;
    }


    /* TEXTOS */

    .login-registro{
        font-size:.68rem;
    }


    .olvide-password a{
        font-size:.68rem;
    }


    .password-rules p{
        font-size:.67rem;
    }


    .btn-reenviar-verificacion{
        font-size:.69rem;
    }


    .mensaje-reenvio,
    .mensaje-recuperacion{
        font-size:.69rem;
    }
}



/* =========================
   PANTALLAS BAJITAS
   Ej. celular horizontal
========================= */

@media (max-height:650px){

    .modal-login{
        align-items:flex-start;

        padding-top:8px;
        padding-bottom:8px;
    }


    .login-contenido{
        margin:auto;

        padding-top:16px;
        padding-bottom:16px;
    }


    .login-logo{
        width:65px;

        margin-bottom:1px;
    }


    .login-contenido h2{
        font-size:1.3rem;
    }


    .login-subtitulo{
        margin-bottom:9px;
    }


    .login-campo{
        height:40px;

        margin-bottom:6px;
    }


    .btn-login{
        height:40px;
    }


    .btn-facebook{
        height:38px;
    }


    .login-separador{
        margin:7px 0;
    }


    .password-rules{
        margin-bottom:8px;
    }


    .password-rules p{
        margin:2px 0;
    }
}