/* ============================================================
   WCE TMS - LOGIN
============================================================ */

*{
    box-sizing:border-box;
}

html,
body{
    min-height:100%;
}

body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.LoginBody{
    min-height:100vh;
    overflow:hidden;
    color:#263244;
    background:#f5f6f8;
}

.LoginGlow{
    position:fixed;
    border-radius:50%;
    pointer-events:none;
    filter:blur(20px);
    opacity:.5;
}

.LoginGlowOne{
    width:420px;
    height:420px;
    top:-220px;
    right:-120px;
    background:rgba(200,16,30,.12);
}

.LoginGlowTwo{
    width:380px;
    height:380px;
    bottom:-210px;
    left:32%;
    background:rgba(23,29,39,.08);
}

.LoginShell{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(520px,1.2fr) minmax(420px,.8fr);
}

.LoginVisual{
    position:relative;
    overflow:hidden;
    padding:46px 54px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    color:#fff;
    background:
        radial-gradient(circle at 82% 18%,rgba(255,255,255,.12),transparent 25%),
        linear-gradient(145deg,#151a22,#272f3a 58%,#97101a 160%);
}

.LoginVisual::after{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-240px;
    bottom:-260px;
    border:80px solid rgba(200,16,30,.13);
    border-radius:50%;
}

.LoginBrandBadge{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:15px;
}

.LoginLogo{
    width:170px;
    height:auto;
    display:block;
}

.LoginBrandBadge div{
    padding-left:15px;
    border-left:1px solid rgba(255,255,255,.16);
}

.LoginBrandBadge strong,
.LoginBrandBadge small{
    display:block;
}

.LoginBrandBadge strong{
    font-size:13px;
}

.LoginBrandBadge small{
    margin-top:2px;
    color:rgba(255,255,255,.58);
    font-size:9px;
}

.LoginHeroCopy{
    position:relative;
    z-index:2;
    max-width:680px;
}

.LoginEyebrow{
    display:inline-block;
    color:#ff8b93;
    font-size:9px;
    font-weight:900;
    letter-spacing:.13em;
}

.LoginEyebrowDark{
    color:#b10e19;
}

.LoginHeroCopy h1{
    max-width:650px;
    margin:13px 0 14px;
    font-size:clamp(37px,4vw,58px);
    line-height:1.02;
    font-weight:880;
    letter-spacing:-.035em;
}

.LoginHeroCopy > p{
    max-width:610px;
    margin:0;
    color:rgba(255,255,255,.64);
    font-size:14px;
    line-height:1.65;
}

.LoginFeatureGrid{
    margin-top:30px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
}

.LoginFeatureGrid div{
    min-height:54px;
    padding:0 15px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(255,255,255,.8);
    background:rgba(255,255,255,.035);
    font-size:10px;
    font-weight:700;
}

.LoginFeatureGrid i{
    color:#ff6f78;
    font-size:16px;
}

.LoginVisualFooter{
    position:relative;
    z-index:2;
    color:rgba(255,255,255,.35);
    font-size:9px;
}

.LoginPanel{
    position:relative;
    padding:36px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.LoginCard{
    width:min(100%,430px);
    padding:40px;
    border:1px solid #e3e7ed;
    border-radius:24px;
    background:#fff;
    box-shadow:0 24px 70px rgba(15,23,42,.09);
}

.LoginCard h2{
    margin:8px 0 5px;
    color:#202938;
    font-size:28px;
    font-weight:850;
}

.LoginCard p{
    font-size:11px;
}

.FormFieldModern label{
    display:block;
    margin-bottom:7px;
    color:#425168;
    font-size:9px;
    font-weight:800;
}

.InputIconWrap{
    position:relative;
}

.InputIconWrap > i{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:#9ca7b6;
    font-size:14px;
}

.InputIconWrap input{
    width:100%;
    min-height:49px;
    padding:0 44px 0 41px;
    border:1px solid #dde3eb;
    border-radius:12px;
    outline:0;
    color:#273548;
    background:#fff;
    font-size:11px;
    transition:.18s ease;
}

.InputIconWrap input:focus{
    border-color:#cf5861;
    box-shadow:0 0 0 4px rgba(200,16,30,.07);
}

.BtnPasswordToggle{
    position:absolute;
    right:7px;
    top:50%;
    transform:translateY(-50%);
    width:35px;
    height:35px;
    border:0;
    border-radius:9px;
    display:grid;
    place-items:center;
    color:#7f8a9b;
    background:transparent;
}

.BtnPrimaryModern{
    min-height:50px;
    padding:0 17px;
    border:0;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    color:#fff;
    background:linear-gradient(135deg,#b80e1a,#d52330);
    box-shadow:0 12px 28px rgba(200,16,30,.2);
    font-size:10px;
    font-weight:850;
}

.BtnPrimaryModern:disabled{
    cursor:not-allowed;
    opacity:.7;
}

.LoginSecurityNote{
    margin-top:19px;
    padding-top:17px;
    border-top:1px solid #edf0f4;
    display:flex;
    gap:9px;
    color:#8e99a8;
    font-size:8px;
    line-height:1.45;
}

.LoginSecurityNote i{
    color:#9d0d17;
}

.LoginInstallLink{
    display:block;
    margin-top:14px;
    color:#a0a9b5;
    text-align:center;
    text-decoration:none;
    font-size:8px;
}

.LoginInstallLink:hover{
    color:#a50e18;
}

.LoginMobileBrand{
    margin-bottom:24px;
    padding-bottom:18px;
    border-bottom:1px solid #edf0f4;
}

.LoginMobileLogo{
    width:155px;
    height:auto;
}

@media (max-width:991.98px){
    .LoginBody{
        overflow:auto;
    }

    .LoginShell{
        display:block;
    }

    .LoginPanel{
        min-height:100vh;
        padding:20px;
    }

    .LoginCard{
        width:min(100%,460px);
    }
}

@media (max-width:575.98px){
    .LoginPanel{
        padding:14px;
        align-items:flex-start;
        padding-top:7vh;
    }

    .LoginCard{
        padding:27px 22px;
        border-radius:20px;
    }

    .LoginCard h2{
        font-size:24px;
    }
}

/* ============================================================
   WCE TMS - SEGURIDAD DE SESIÓN
============================================================ */

.LoginSessionAlert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid #f1d1d3;
    border-radius: 13px;
    background: #fff6f7;
    color: #7f1d1d;
    font-size: .86rem;
    line-height: 1.45;
}

.LoginSessionAlert i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #b5121b;
    font-size: 1rem;
}


/* ============================================================
   WCE TMS - LOGIN - FIX MOBILE / IOS AUTOZOOM
   Agregar AL FINAL de tu login.css actual.
   No bloquea el pinch-zoom manual del usuario.
============================================================ */

html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

@media (max-width:767.98px){
    html,
    body,
    .LoginBody,
    .LoginShell,
    .LoginPanel,
    .LoginCard{
        max-width:100%;
    }

    .LoginBody{
        overflow-x:hidden;
    }

    .LoginShell,
    .LoginPanel{
        width:100%;
    }

    .LoginCard{
        min-width:0;
    }

    .InputIconWrap{
        min-width:0;
        max-width:100%;
    }

    /*
     * iPhone / Safari hace auto-zoom al enfocar campos con
     * tipografía menor a 16px. Mantener 16px evita ese efecto.
     */
    .InputIconWrap input,
    .LoginCard input,
    .LoginCard select,
    .LoginCard textarea,
    .LoginCard .form-control,
    .LoginCard .form-select,
    .LoginCard .form-control-sm,
    .LoginCard .form-select-sm{
        width:100%;
        max-width:100%;
        min-width:0;
        font-size:16px!important;
        line-height:1.35;
        -webkit-text-size-adjust:100%;
        text-size-adjust:100%;
        touch-action:manipulation;
    }

    .InputIconWrap input:focus,
    .LoginCard input:focus,
    .LoginCard select:focus,
    .LoginCard textarea:focus,
    .LoginCard .form-control:focus,
    .LoginCard .form-select:focus{
        transform:none!important;
        scale:1!important;
        max-width:100%;
    }

    .BtnPasswordToggle,
    .BtnPrimaryModern{
        touch-action:manipulation;
    }
}

@media (max-width:575.98px){
    .LoginPanel{
        width:100%;
        max-width:100%;
        padding-left:14px;
        padding-right:14px;
    }

    .LoginCard{
        width:100%;
        max-width:100%;
    }

    .InputIconWrap input,
    .LoginCard input,
    .LoginCard select,
    .LoginCard textarea,
    .LoginCard .form-control,
    .LoginCard .form-select{
        font-size:16px!important;
    }
}