/* ============================================================
   KB & ASOC — Login (Asesores contables)
   Paleta hardcodeada: este template no incluye _tema_vars.
   ============================================================ */
:root{
    --kb-primary:#1F3D5A;
    --kb-primary-dark:#142A40;
    --kb-primary-darker:#0F1D2B;
    --kb-accent:#F5C518;
    --kb-accent-dark:#D9A800;
    --kb-surface:#F7F9FB;
    --kb-text:#1A2B3C;
}

body{
    margin:0;
    height:100vh;
    background:var(--kb-surface);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* WRAPPER */
.login-wrapper{
    display:flex;
    min-height:100vh;
    width:100%;
}

/* ====================== HERO ====================== */
.login-hero{
    flex:1.15;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff;
    /* Gradiente navy animado (reemplaza la imagen inexistente) */
    background:linear-gradient(120deg, var(--kb-primary-darker), var(--kb-primary), var(--kb-primary-dark), var(--kb-primary-darker));
    background-size:300% 300%;
    animation:kbGradientShift 16s ease infinite;
}

@keyframes kbGradientShift{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* Blobs suaves flotando */
.login-hero .hero-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(40px);
    pointer-events:none;
}
.login-hero .hero-blob.blob-1{
    width:340px;height:340px;
    top:-80px;right:-60px;
    background:rgba(245,197,24,.22);
    animation:kbFloat 11s ease-in-out infinite;
}
.login-hero .hero-blob.blob-2{
    width:280px;height:280px;
    bottom:-70px;left:-40px;
    background:rgba(143,163,182,.30);
    animation:kbFloat 14s ease-in-out infinite reverse;
}

@keyframes kbFloat{
    0%{transform:translate(0,0) scale(1);}
    50%{transform:translate(18px,-26px) scale(1.08);}
    100%{transform:translate(0,0) scale(1);}
}

/* contenido hero */
.hero-content{
    position:relative;
    z-index:2;
    padding:80px;
    max-width:560px;
    animation:heroIn .8s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes heroIn{
    from{opacity:0;transform:translateX(-24px);}
    to{opacity:1;transform:translateX(0);}
}

/* Wordmark de marca por CSS (sin dependencia de imagen) */
.brand-mark{
    display:flex;
    align-items:flex-end;
    gap:14px;
    margin-bottom:34px;
}
.brand-mark .brand-kb{
    font-size:64px;
    font-weight:800;
    line-height:.9;
    letter-spacing:-2px;
    color:#fff;
    border-bottom:6px solid var(--kb-accent);
    padding-bottom:4px;
}
.brand-mark .brand-rest{
    font-size:30px;
    font-weight:600;
    letter-spacing:1px;
    color:#fff;
    padding-bottom:10px;
}
.brand-mark .brand-dot{
    color:var(--kb-accent);
}
.brand-tagline{
    font-size:15px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--kb-accent);
    margin:-22px 0 28px 2px;
    font-weight:600;
}

.hero-content h2{
    font-weight:600;
    font-size:30px;
    margin-bottom:18px;
    line-height:1.25;
}
.hero-content p{
    font-size:16px;
    line-height:1.7;
    opacity:.9;
}

/* ====================== PANEL LOGIN ====================== */
.login-panel{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--kb-surface);
    position:relative;
}

.login-credits{
    position:absolute;
    bottom:16px;
    right:24px;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:.8rem;
    color:#6c757d;
    opacity:.85;
}
.login-credits img{
    max-height:24px;
}

/* LOGIN BOX */
.login-box{
    width:380px;
    animation:boxIn .7s cubic-bezier(.22,.61,.36,1) both;
    animation-delay:.15s;
}

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

.login-box .panel-brand{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-bottom:26px;
}
.login-box .panel-brand .pb-kb{
    font-size:30px;
    font-weight:800;
    letter-spacing:-1px;
    color:var(--kb-primary);
    border-bottom:3px solid var(--kb-accent);
    line-height:.9;
}
.login-box .panel-brand .pb-rest{
    font-size:18px;
    font-weight:600;
    color:var(--kb-primary);
}

.login-box h3{
    font-weight:600;
    color:var(--kb-primary);
    margin-bottom:6px;
}

/* INPUT GROUP */
.input-group{
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(31,61,90,.08);
}
.input-group-text{
    background:#eef1f5;
    border:none;
    color:var(--kb-primary);
}
.form-control{
    height:48px;
    border:1px solid #dfe4ea;
    transition:border-color .2s, box-shadow .2s;
}
.form-control:focus{
    border-color:var(--kb-primary);
    box-shadow:0 0 0 .2rem rgba(31,61,90,.15);
    background:#fff;
}
.password-group .btn{
    border:none;
    background:#eef1f5;
    color:var(--kb-primary);
}

/* CHECK */
.form-check{
    margin-top:10px;
}
.form-check-input:checked{
    background-color:var(--kb-primary);
    border-color:var(--kb-primary);
}

/* BOTON */
.btn-login{
    background:var(--kb-primary);
    color:#fff;
    border:none;
    height:50px;
    font-weight:600;
    letter-spacing:.3px;
    border-radius:10px;
    transition:transform .18s ease, box-shadow .18s ease, background .2s ease;
    position:relative;
    overflow:hidden;
}
.btn-login:hover{
    background:var(--kb-primary-dark);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(31,61,90,.28);
}
.btn-login:active{
    transform:translateY(0);
}
/* shine sutil */
.btn-login::after{
    content:"";
    position:absolute;
    top:0;left:-120%;
    width:60%;height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
}
.btn-login:hover::after{
    left:130%;
}

/* MOBILE */
@media(max-width:900px){
    .login-hero{
        display:none;
    }
    .login-panel{
        flex:1;
    }
}

@media (prefers-reduced-motion: reduce){
    .login-hero,
    .login-hero .hero-blob,
    .hero-content,
    .login-box,
    .btn-login::after{
        animation:none !important;
    }
}