:root{
    --login-vino:#8b0f43;
    --login-vino-oscuro:#710d35;
    --login-fondo:#f4f4f5;
    --login-texto:#2f343d;
    --login-suave:#6f7480;
    --login-borde:#d9d9de;
    --login-sombra:0 18px 42px rgba(0,0,0,.12);
}

body.login-externo{
    min-height:100svh;
    margin:0;
    background:var(--login-fondo);
    color:var(--login-texto);
    overflow-x:hidden;
}

.login-externo::before,
.login-externo::after{
    content:"";
    position:fixed;
    left:0;
    right:0;
    height:10px;
    background:var(--login-vino);
    z-index:0;
}

.login-externo::before{
    top:0;
}

.login-externo::after{
    bottom:0;
}

.externo-login-page{
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px 12px;
    position:relative;
    z-index:1;
}

.externo-login-card{
    width:min(100%,420px);
    background:#fff;
    border-radius:20px;
    box-shadow:var(--login-sombra);
    padding:22px 30px 16px;
    text-align:center;
}

.externo-login-logo{
    width:min(100%,278px);
    height:auto;
    margin-bottom:8px;
}

.externo-login-title{
    margin:0 auto;
    color:#9b0303;
    font-size:1.2rem;
    font-weight:800;
    line-height:1.2;
    max-width:340px;
}

.externo-login-subtitle{
    margin:6px auto 14px;
    color:#555;
    font-size:.78rem;
    line-height:1.3;
    max-width:320px;
}

.externo-login-form{
    width:min(100%,340px);
    margin:0 auto;
    display:grid;
    gap:8px;
}

.externo-field{
    position:relative;
}

.externo-field .form-control{
    min-height:42px;
    border:1px solid var(--login-borde);
    border-radius:12px;
    padding-left:44px;
    color:var(--login-texto);
    font-size:.9rem;
    box-shadow:none;
}

.externo-field .form-control:focus{
    border-color:#c9a9b8;
    box-shadow:0 0 0 .2rem rgba(139,15,67,.10);
}

.externo-field i{
    position:absolute;
    left:16px;
    top:50%;
    z-index:5;
    transform:translateY(-50%);
    color:var(--login-suave);
    font-size:1rem;
}

.externo-captcha{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.externo-captcha .captcha-image{
    min-height:42px;
    border:1px solid var(--login-borde);
    border-radius:12px;
    background:#fff;
    padding:6px 12px;
}

.externo-refresh{
    color:var(--login-vino);
    font-size:1.6rem;
    cursor:pointer;
}

.externo-submit{
    min-height:44px;
    border:0;
    border-radius:12px;
    background:var(--login-vino);
    color:#fff;
    font-weight:800;
    font-size:.86rem;
    text-transform:uppercase;
    letter-spacing:.02em;
}

.externo-submit:hover,
.externo-submit:focus{
    background:var(--login-vino-oscuro);
    color:#fff;
}

.externo-message{
    min-height:16px;
    margin-top:6px;
    color:#a00000;
    font-weight:700;
    font-size:.8rem;
    line-height:1.25;
}

.externo-links{
    display:grid;
    gap:4px;
    margin-top:7px;
}

.externo-links a{
    color:#7a1238;
    font-weight:800;
    font-size:.8rem;
    line-height:1.25;
    text-decoration:none;
}

.externo-links a:hover{
    text-decoration:underline;
}

.externo-note{
    margin:8px auto 0;
    color:#777;
    font-size:.74rem;
    line-height:1.22;
    max-width:340px;
}

.externo-note strong{
    display:block;
    color:#777;
}

@media (max-width:575.98px){
    .externo-login-page{
        align-items:center;
        padding:12px;
    }

    .externo-login-card{
        width:min(100%,360px);
        padding:18px 16px 14px;
        border-radius:18px;
    }

    .externo-login-logo{
        width:min(100%,255px);
        margin-bottom:8px;
    }

    .externo-login-title{
        font-size:1.08rem;
    }

    .externo-field .form-control,
    .externo-submit{
        min-height:42px;
    }
}

@media (max-height:760px){
    .externo-login-page{
        padding-top:12px;
        padding-bottom:12px;
    }

    .externo-login-card{
        padding-top:14px;
        padding-bottom:12px;
    }

    .externo-login-logo{
        width:min(100%,240px);
        margin-bottom:6px;
    }

    .externo-login-title{
        font-size:1.05rem;
    }

    .externo-login-subtitle{
        margin:4px auto 10px;
        font-size:.72rem;
    }

    .externo-field .form-control,
    .externo-submit{
        min-height:38px;
    }

    .externo-login-form{
        gap:6px;
    }

    .externo-links{
        margin-top:5px;
    }

    .externo-note{
        margin-top:6px;
    }
}