:root{
    --login-rojo:#8d1903;
    --login-rojo-2:#b72b14;
    --login-texto:#1f2933;
    --login-muted:#6b7280;
    --login-soft:#fff7f5;
    --login-borde:#eee;
    --login-shadow:0 18px 45px rgba(0,0,0,.12);
}

body{
    margin:0;
    min-height:100vh;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:#f7f7f7;
    color:var(--login-texto);
    overflow-x:hidden;
}

.imagen-fondo{
    position:fixed;
    right:0;
    bottom:0;
    width:min(720px,60vw);
    opacity:.55;
    z-index:-1;
}

/* Banner */
.clabss-banner-home{
    position:relative;
    height:330px;
    overflow:hidden;
    background:#111;
    box-shadow:0 14px 34px rgba(0,0,0,.16);
}

.clabss-banner-home img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    filter:none;
    animation:heroFade 1s ease-out;
}

/* Card login */
.ancho-contenido{
    max-width:460px !important;
    margin:-58px auto 0 !important;
    position:relative;
    z-index:3;
    animation:loginCard .7s ease-out .2s both;
}

.ancho-contenido .margenes-laterales{
    background:#fff;
    border:1px solid var(--login-borde);
    border-radius:26px;
    padding:34px 38px 30px !important;
    box-shadow:var(--login-shadow);
}

.fuente-grande{
    color:var(--login-rojo) !important;
    font-size:30px !important;
    font-weight:900;
    margin:0 0 6px;
}

.fuente-grande::after{
    content:"Ingresa tus credenciales para acceder al sistema.";
    display:block;
    color:var(--login-muted);
    font-size:15px;
    font-weight:500;
    margin-top:8px;
}

/* Inputs */
input{
    width:100% !important;
    height:52px !important;
    border:1px solid #ddd !important;
    border-radius:15px !important;
    background:#fff !important;
    color:var(--login-texto);
    font-size:15px;
    padding:0 16px !important;
    box-sizing:border-box;
    outline:none;
    transition:.18s ease;
}

input:focus{
    border-color:var(--login-rojo) !important;
    box-shadow:0 0 0 4px rgba(141,25,3,.10);
}

.campo-correo{
    margin-top:4px;
}

/* Botón */
.boton{
    width:100% !important;
    min-height:52px;
    border-radius:16px;
    background:linear-gradient(135deg,var(--login-rojo),var(--login-rojo-2));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    font-weight:900;
    letter-spacing:.12em;
    box-shadow:0 14px 26px rgba(141,25,3,.22);
    transition:.18s ease;
    position:relative;
    overflow:hidden;
}

.boton::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:50%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.22),
        transparent
    );
    transition:left .6s ease;
}

.boton:hover::before{
    left:140%;
}

.boton:hover{
    background:linear-gradient(135deg,#741302,var(--login-rojo));
    transform:translateY(-1px);
}

.boton[disabled]{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
}

/* Recuperación */
.link-recuperar{
    display:block !important;
    color:var(--login-rojo) !important;
    font-size:13px !important;
    font-weight:800;
    margin-top:14px !important;
}

.link-recuperar:hover{
    text-decoration:underline;
}

.msg-bloqueo{
    background:var(--login-soft);
    border:1px solid #f0d4cd;
    color:var(--login-rojo) !important;
    border-radius:14px;
    padding:12px 14px;
    margin-top:12px !important;
    font-size:13px;
}

/* Separaciones */
.margen-superior{
    margin-top:16px !important;
}

/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes heroFade{
    from{
        opacity:0;
        transform:scale(1.04);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes loginCard{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Responsive */
@media screen and (max-width:768px){
    .clabss-banner-home{
        height:270px;
    }

    .ancho-contenido{
        width:calc(100% - 32px) !important;
        margin:-42px auto 0 !important;
    }

    .ancho-contenido .margenes-laterales{
        padding:28px 22px !important;
        border-radius:22px;
    }

    .fuente-grande{
        font-size:26px !important;
    }

    .imagen-fondo{
        width:90vw;
        opacity:.35;
    }
}

@media screen and (max-width:480px){
    .clabss-banner-home{
        height:230px;
    }

    .ancho-contenido{
        margin-top:-34px !important;
    }
}

@media screen and (max-width:480px){
    .clabss-banner-home{
        height:200px;
    }

    .ancho-contenido .margenes-laterales{
        padding:24px 18px !important;
    }

    input,
    .boton{
        min-height:48px;
        height:48px !important;
    }
}

@media screen and (max-width:480px){
    .clabss-banner-home img{
        animation:heroFade 1s ease-out !important;
        transform:none !important;
        object-position:center center;
    }
}

.clabss-banner-home{
    height:clamp(300px, 34vh, 430px);
}

.ancho-contenido{
    margin:clamp(-90px, -7vh, -58px) auto 0 !important;
}

.ancho-contenido{
    max-width:clamp(460px, 30vw, 560px) !important;
}