/* ======================================================
   LOGIN MODERNO
   ====================================================== */

body{
    margin:0;
    min-height:100vh;
    background:
      radial-gradient(700px 400px at 20% 20%, rgba(22,50,74,.08), transparent 60%),
      radial-gradient(700px 400px at 80% 80%, rgba(214,183,97,.08), transparent 60%),
      linear-gradient(135deg,#eef1f7,#e4e8f2);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.login-modern{
    min-height:10vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    position:relative;
}

.login-modern .box-shadow-2{
    width:100%;
    max-width:540px;
    padding:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    position:relative;
    top:-36px; /* sube el login en desktop */
}

.login-modern .d-flex{
    width:100%;
}

.login-modern .card{
    width:100%;
    margin:0 !important;
    border:none !important;
    border-radius:24px !important;
    background:rgba(255,255,255,.94) !important;
    box-shadow:0 24px 60px rgba(0,0,0,.12) !important;
    backdrop-filter: blur(10px);
    overflow:hidden;
}

.login-modern .card-header{
    background:transparent !important;
    border:0 !important;
    padding:30px 34px 10px !important;
}

.login-modern .card-title{
    margin:0;
}

.login-modern .card-header img{
    display:block;
    margin:0 auto;
    max-width:240px;
    width:100%;
    height:auto !important;
    object-fit:contain;
}

.login-modern .card-content{
    padding:0 34px 30px;
}

.login-modern .card-subtitle{
    margin:6px 0 22px !important;
    font-size:14px;
    font-weight:600;
    color:#727a91 !important;
    letter-spacing:.2px;
    line-height:1.4;
}

.login-modern .line-on-side{
    position:relative;
    text-align:center;
}

.login-modern .line-on-side::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:rgba(18,27,88,.10);
}

.login-modern .line-on-side span{
    position:relative;
    z-index:1;
    background:rgba(255,255,255,.94);
    padding:0 14px;
}

.login-modern fieldset{
    margin:0 0 14px !important;
}

.login-modern .form-group{
    margin-bottom:0 !important;
    position:relative;
}

.login-modern .form-control{
    height:56px;
    border-radius:14px !important;
    border:1px solid rgba(18,27,88,.12) !important;
    background:#fff !important;
    font-size:16px !important;
    font-weight:600 !important;
    color:#2d3148 !important;
    padding:12px 16px 12px 50px !important;
    box-shadow:none !important;
    transition:all .15s ease;
}

.login-modern .form-control::placeholder{
    color:#98a1b7 !important;
    font-weight:500;
}

.login-modern .form-control:focus{
    border-color:#16324a !important;
    box-shadow:0 0 0 .18rem rgba(22,50,74,.08) !important;
}

.login-modern .form-control-position{
    position:absolute !important;
    left:16px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    color:#7b839a !important;
    pointer-events:none;
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
}

.login-modern .form-control-position i{
    font-size:18px !important;
    line-height:1 !important;
    display:inline-block !important;
    font-style:normal !important;
}

/* botón */
.login-modern .btn-outline-primary{
    width:100%;
    height:54px;
    margin-top:8px;
    border-radius:14px !important;
    border:none !important;
    background:#16324a !important;
    color:#fff !important;
    font-size:16px !important;
    font-weight:700 !important;
    letter-spacing:.2px;
    box-shadow:0 12px 24px rgba(22,50,74,.18);
    transition:all .15s ease;
}

.login-modern .btn-outline-primary:hover{
    background:#1c405f !important;
    transform:translateY(-1px);
}

.login-modern .btn-outline-primary i{
    margin-right:6px;
    font-style:normal !important;
}

/* FIX ICONOS */
.login-modern i.la,
.login-modern i.las,
.login-modern i.lar,
.login-modern i.lab,
.login-modern i.ft-unlock{
    display:inline-block !important;
    font-style:normal !important;
    line-height:1 !important;
}

.login-modern i.la::before,
.login-modern i.las::before,
.login-modern i.lar::before{
    font-family: "Line Awesome Free" !important;
    font-weight: 900 !important;
    display:inline-block !important;
    line-height:1 !important;
}

.login-modern i.lab::before{
    font-family: "Line Awesome Brands" !important;
    font-weight: 400 !important;
    display:inline-block !important;
    line-height:1 !important;
}

.login-modern i.ft-unlock::before{
    font-family: "feather" !important;
    display:inline-block !important;
    line-height:1 !important;
}

/* móvil */
@media (max-width: 768px){
    .login-modern{
        padding:16px;
    }

    .login-modern .box-shadow-2{
        max-width:100%;
        top:-10px; /* en móvil sube menos */
    }

    .login-modern .card{
        border-radius:22px !important;
    }

    .login-modern .card-header{
        padding:24px 22px 8px !important;
    }

    .login-modern .card-content{
        padding:0 22px 24px;
    }

    .login-modern .card-header img{
        max-width:190px;
    }

    .login-modern .card-subtitle{
        margin:4px 0 18px !important;
        font-size:13px;
    }

    .login-modern fieldset{
        margin:0 0 12px !important;
    }

    .login-modern .btn-outline-primary{
        margin-top:10px;
    }
}