/* ============================================================
   One Access — Vista de login
   ============================================================ */

.login-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    background:#ffffff;
}

/* ── Panel izquierdo — marca / patrón / carnet flotante ── */

.login-brand{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:3rem 3.5rem;
    color:#fff;

    background:
        radial-gradient(circle at 15% 15%, rgba(96,165,250,.35), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(37,99,235,.4), transparent 50%),
        linear-gradient(155deg, #0f172a 0%, #16225a 45%, #1d4ed8 100%);
}

.login-dotgrid{
    position:absolute;
    inset:-20px;
    background-image: radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    animation: dotDrift 18s linear infinite;
    pointer-events:none;
}

@keyframes dotDrift{
    0%   { background-position: 0 0; }
    100% { background-position: 130px 130px; }
}

.login-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    pointer-events:none;
    animation: blobPulse 9s ease-in-out infinite;
}

.login-blob-1{ width:260px; height:260px; background:rgba(96,165,250,.45); top:-60px; right:-40px; }
.login-blob-2{ width:220px; height:220px; background:rgba(29,78,216,.5); bottom:-40px; left:-60px; animation-delay:2s; }

@keyframes blobPulse{
    0%, 100% { transform: scale(1);   opacity:.8; }
    50%      { transform: scale(1.15); opacity:1; }
}

.login-brand-top{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:12px;
}

.login-brand-top img{ height:2.2em; }

.login-brand-logo{
    filter: brightness(0) invert(1);
    opacity:.95;
}

.login-brand-mid{
    position:relative;
    z-index:1;
    max-width:420px;
}

.login-brand-mid h1{
    font-size:2.4rem;
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.02em;
    margin-bottom:1rem;
}

.login-brand-mid p{
    color:rgba(255,255,255,.78);
    font-size:1.05rem;
    font-weight:400;
    line-height:1.7;
}

.login-pills{
    position:relative;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:2rem;
}

.login-pill{
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(8px);
    padding:8px 14px;
    border-radius:999px;
    font-size:.85rem;
    font-weight:600;
    color:#fff;
}

.login-pill i{ color:#93c5fd; font-size:.85em; }

/* ── Carnet flotante (glassmorphism) ── */

.login-card-float{
    position:relative;
    z-index:1;
    align-self:flex-end;
    width:260px;
    margin-left:auto;
    padding:20px;
    border-radius:20px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(18px);
    box-shadow: 0 25px 50px rgba(2,6,23,.35);
    transform: rotate(-5deg);
    animation: cardFloat 6s ease-in-out infinite;
}

@keyframes cardFloat{
    0%, 100% { transform: rotate(-5deg) translateY(0); }
    50%      { transform: rotate(-5deg) translateY(-12px); }
}

.login-card-float-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
}

.login-card-badge{
    font-size:.65rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#93c5fd;
}

.login-card-status{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:.65rem;
    font-weight:700;
    color:#86efac;
}

.login-card-status::before{
    content:"";
    width:6px; height:6px;
    border-radius:50%;
    background:#4ade80;
    box-shadow:0 0 0 3px rgba(74,222,128,.25);
}

.login-card-id{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.login-card-avatar{
    width:42px; height:42px;
    border-radius:50%;
    background:linear-gradient(135deg,#60a5fa,#2563eb);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:.85rem;
    color:#fff;
    flex-shrink:0;
}

.login-card-lines{ flex:1; }

.login-card-line{
    height:8px;
    border-radius:4px;
    background:rgba(255,255,255,.35);
}

.login-card-line + .login-card-line{
    margin-top:6px;
    width:65%;
    background:rgba(255,255,255,.2);
}

.login-card-qr{
    display:flex;
    justify-content:flex-end;
}

.login-card-qr svg rect{ fill:#fff; }

/* ── Panel derecho — formulario ── */

.login-form-side{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem;
    background:#fff;
}

.login-form-wrap{
    width:100%;
    max-width:380px;
}

.login-back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#64748b;
    font-size:.85rem;
    text-decoration:none;
    margin-bottom:2rem;
    transition:color .2s;
}

.login-back:hover{ color:#2563eb; }

.login-form-logo{
    display:none;
}

.login-title{
    font-size:1.6rem;
    font-weight:800;
    color:#0f172a;
    margin-bottom:.35rem;
}

.login-subtitle{
    color:#64748b;
    font-size:.95rem;
    font-weight:400;
    margin-bottom:2rem;
}

.login-field{
    margin-bottom:1.1rem;
}

.login-field label{
    display:block;
    font-size:.85rem;
    font-weight:600;
    color:#334155;
    margin-bottom:.4rem;
}

.login-input-wrap{
    position:relative;
}

.login-field-icon{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:#94a3b8;
    font-size:.9rem;
    pointer-events:none;
    transition:color .2s;
}

.login-field input{
    width:100%;
    padding:12px 14px 12px 40px;
    border-radius:12px;
    border:1px solid #e2e8f0;
    font-size:.95rem;
    font-weight:400;
    color:#0f172a;
    background:#f8fafc;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.login-field input:focus{
    outline:none;
    border-color:#2563eb;
    background:#fff;
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.login-field input:focus ~ .login-field-icon{ color:#2563eb; }

.login-field input[readonly]{
    background:#eef2ff;
    color:#1e3a8a;
    font-weight:600;
    border-color:#dbeafe;
}

#login-password{ padding-right:40px; }

.login-toggle-pass{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:#94a3b8;
    font-size:.9rem;
    cursor:pointer;
    padding:4px;
}

.login-toggle-pass:hover{ color:#2563eb; }

.login-empresa-chip{
    display:none;
    align-items:center;
    gap:8px;
    background:#eff6ff;
    border:1px solid #dbeafe;
    color:#1d4ed8;
    font-weight:600;
    font-size:.85rem;
    padding:8px 12px;
    border-radius:10px;
    margin-bottom:1.25rem;
}

.login-row-between{
    display:flex;
    justify-content:flex-end;
    margin:-.4rem 0 1.25rem;
}

.login-row-between a{
    font-size:.82rem;
    color:#2563eb;
    text-decoration:none;
    font-weight:600;
}

.login-row-between a:hover{ text-decoration:underline; }

.login-submit{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#2563eb;
    color:#fff;
    border:none;
    padding:13px 20px;
    border-radius:12px;
    font-weight:700;
    font-size:.95rem;
    box-shadow: 0 4px 12px rgba(37,99,235,.25);
    transition: background .25s ease, transform .2s ease, box-shadow .2s ease;
}

.login-submit:hover{
    background:#1d4ed8;
    transform:translateY(-2px);
    box-shadow: 0 10px 22px rgba(37,99,235,.35);
}

.login-submit:active{ transform:translateY(0); }

.login-submit:disabled{
    opacity:.75;
    cursor:progress;
    transform:none;
}

.login-step-back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:none;
    border:none;
    color:#64748b;
    font-size:.85rem;
    font-weight:600;
    padding:0;
    margin-bottom:1.25rem;
    cursor:pointer;
}

.login-step-back:hover{ color:#2563eb; }

.login-footnote{
    text-align:center;
    color:#94a3b8;
    font-size:.82rem;
    font-weight:400;
    margin-top:2rem;
}

.login-footnote a{ color:#2563eb; text-decoration:none; font-weight:600; }

/* ── Pasos (transición) ── */

.login-step{
    transition: opacity .35s ease, transform .35s ease;
}

.login-step[hidden]{ display:none; }

.login-step.is-leaving{
    opacity:0;
    transform:translateX(-16px);
}

.login-step.is-entering{
    animation: stepIn .4s ease forwards;
}

@keyframes stepIn{
    from{ opacity:0; transform:translateX(16px); }
    to  { opacity:1; transform:translateX(0); }
}

/* ── Toast local ── */

#login-toast{
    position:fixed;
    bottom:1.5rem;
    left:50%;
    transform:translate(-50%, 5rem);
    opacity:0;
    z-index:999;
    display:flex;
    align-items:flex-start;
    gap:10px;
    background:#0f172a;
    color:#f8fafc;
    padding:.9rem 1.15rem;
    border-radius:12px;
    font-size:.85rem;
    max-width:340px;
    box-shadow:0 12px 32px rgba(0,0,0,.25);
    transition: transform .3s ease, opacity .3s ease;
    pointer-events:none;
}

#login-toast.show{ transform:translate(-50%, 0); opacity:1; }
#login-toast i{ color:#60a5fa; margin-top:2px; }

/* ── Responsive ── */

@media (max-width: 980px){
    .login-shell{ grid-template-columns:1fr; }
    .login-brand{ display:none; }
    .login-form-side{ padding:2.5rem 1.5rem; }
    .login-form-logo{
        display:flex;
        justify-content:center;
        margin-bottom:1.75rem;
    }
    .login-form-logo img{ height:2.4em; }
}

@media (max-width: 480px){
    .login-title{ font-size:1.4rem; }
}