/* ============================================================
   Estudio Martinez - Login
   La paleta viene de tokens.css / _tema_vars.html.
   ============================================================ */

body{
    margin:0;
    height:100vh;
    background:var(--erp-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:var(--erp-on-primary);
    /* Gradiente navy animado (reemplaza la imagen inexistente) */
    background:linear-gradient(120deg, var(--erp-primary-darker), var(--erp-primary), var(--erp-primary-dark), var(--erp-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(var(--erp-accent-rgb),.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:var(--erp-on-primary);
    border-bottom:6px solid var(--erp-accent);
    padding-bottom:4px;
}
.brand-mark .brand-rest{
    font-size:30px;
    font-weight:600;
    letter-spacing:1px;
    color:var(--erp-on-primary);
    padding-bottom:10px;
}
.brand-mark .brand-dot{
    color:var(--erp-accent);
}
.brand-tagline{
    font-size:15px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--erp-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(--erp-surface);
    position:relative;
}

.login-credits{
    position:absolute;
    bottom:16px;
    right:24px;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:.8rem;
    color:var(--erp-text-muted);
    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(--erp-primary);
    border-bottom:3px solid var(--erp-accent);
    line-height:.9;
}
.login-box .panel-brand .pb-rest{
    font-size:18px;
    font-weight:600;
    color:var(--erp-primary);
}

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

/* INPUT GROUP */
.input-group{
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(var(--erp-shadow-rgb),.08);
}
.input-group-text{
    background:var(--erp-subtle-bg);
    border:none;
    color:var(--erp-primary);
}
.form-control{
    height:48px;
    border:1px solid var(--erp-border-strong);
    transition:border-color .2s, box-shadow .2s;
}
.form-control:focus{
    border-color:var(--erp-primary);
    box-shadow:0 0 0 .2rem rgba(var(--erp-shadow-rgb),.15);
    background:var(--erp-card-bg);
}
.password-group .btn{
    border:none;
    background:var(--erp-subtle-bg);
    color:var(--erp-primary);
}

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

/* BOTON */
.btn-login{
    background:var(--erp-primary);
    color:var(--erp-on-primary);
    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(--erp-primary-dark);
    color:var(--erp-on-primary);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(var(--erp-shadow-rgb),.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;
    }
}