*{
    box-sizing:border-box;
}

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

body{
    background:#f4f6f8;
    color:#111827;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}


/* =========================================================
   LOGIN INSTITUCIONAL
   ========================================================= */

.login-body{
    min-height:100vh;
    margin:0;
    background:#0b1628;
}

.institutional-login{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(460px,.92fr);
}


/* LADO INSTITUCIONAL */

.institutional-brand{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    padding:56px 60px 38px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    color:#fff;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(22,83,145,.42) 0,
            rgba(13,43,78,.20) 30%,
            transparent 57%
        ),
        linear-gradient(
            145deg,
            #07111f 0%,
            #0b1c31 48%,
            #102943 100%
        );
}

.institutional-brand::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border:1px solid rgba(212,175,55,.10);
    border-radius:50%;
    top:50%;
    left:50%;
    transform:translate(-50%,-55%);
}

.institutional-brand::after{
    content:"";
    position:absolute;
    inset:24px;
    border:1px solid rgba(255,255,255,.055);
    pointer-events:none;
}

.institutional-brand-inner{
    position:relative;
    z-index:2;
    width:100%;
    max-width:620px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.institutional-logo{
    display:block;
    width:min(360px,68%);
    max-height:390px;
    object-fit:contain;

    filter:
        drop-shadow(0 18px 32px rgba(0,0,0,.30))
        drop-shadow(0 0 22px rgba(20,100,180,.14));
}

.institutional-heading{
    width:min(520px,90%);
    margin-top:28px;
}

.institutional-line{
    display:block;
    width:68px;
    height:1px;
    margin:0 auto;
    background:#d5b45b;
}

.institutional-kicker{
    margin:19px 0 7px;
    color:#d8bd72;
    font-size:11px;
    font-weight:700;
    letter-spacing:.25em;
}

.institutional-heading h1{
    margin:0;
    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:44px;
    font-weight:600;
    letter-spacing:.08em;
}

.institutional-description{
    max-width:440px;
    margin:13px auto 20px;
    color:#c5ced9;
    font-size:15px;
    line-height:1.7;
}

.institutional-footer{
    position:absolute;
    z-index:2;
    bottom:30px;
    margin:0;
    color:#8391a3;
    font-size:12px;
    letter-spacing:.04em;
}


/* LADO DEL FORMULARIO */

.institutional-access{
    min-height:100vh;
    padding:54px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    background:#f7f7f5;
    position:relative;
}

.access-box{
    width:100%;
    max-width:440px;
}

.access-header{
    margin-bottom:34px;
}

.access-eyebrow{
    margin:0 0 13px;
    color:#9a772b;
    font-size:11px;
    font-weight:800;
    letter-spacing:.20em;
}

.access-header h2{
    margin:0 0 12px;
    color:#111827;
    font-family:Georgia,"Times New Roman",serif;
    font-size:36px;
    font-weight:600;
}

.access-header > p:not(.access-eyebrow){
    margin:0;
    max-width:400px;
    color:#667085;
    font-size:15px;
    line-height:1.65;
}

.institutional-form{
    margin-top:4px;
}

.form-field{
    margin-bottom:21px;
}

.form-field label{
    display:block;
    margin:0 0 8px;
    color:#253044;
    font-size:14px;
    font-weight:700;
}

.form-field input{
    display:block;
    width:100%;
    height:52px;
    padding:0 15px;

    border:1px solid #d3d8df;
    border-radius:7px;
    outline:none;

    background:#fff;
    color:#111827;

    font-family:inherit;
    font-size:15px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.form-field input::placeholder{
    color:#a3aab5;
}

.form-field input:focus{
    border-color:#9a772b;
    box-shadow:0 0 0 3px rgba(154,119,43,.10);
}

.institutional-submit{
    width:100%;
    min-height:52px;
    margin-top:7px;

    border:0;
    border-radius:7px;

    background:#0d1b2e;
    color:#fff;

    font-family:inherit;
    font-size:14px;
    font-weight:750;
    letter-spacing:.02em;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .15s ease,
        box-shadow .2s ease;
}

.institutional-submit:hover{
    background:#142943;
    box-shadow:0 10px 25px rgba(13,27,46,.15);
}

.institutional-submit:active{
    transform:translateY(1px);
}

.access-security{
    margin-top:25px;
    padding-top:21px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    border-top:1px solid #e4e7ec;

    color:#7b8491;
    font-size:12px;
}

.security-icon{
    width:20px;
    height:20px;

    display:inline-grid;
    place-items:center;

    border:1px solid #c9a84f;
    border-radius:50%;

    color:#98772d;
    font-size:11px;
    font-weight:800;
}

.access-copyright{
    position:absolute;
    bottom:28px;
    margin:0;

    color:#98a2b3;
    font-size:11px;
}


/* MENSAJE DE ERROR */

.alert{
    margin:0 0 22px;
    padding:13px 14px;

    border:1px solid #fecdd3;
    border-radius:7px;

    background:#fff1f2;
    color:#9f1239;

    font-size:14px;
}


/* =========================================================
   PANEL EXISTENTE
   ========================================================= */

.topbar{
    height:72px;
    padding:0 max(24px,calc((100% - 1120px)/2));

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:#101827;
    color:#fff;
}

.topbar strong{
    font-size:21px;
}

.topbar span{
    margin-left:14px;
    color:#98a2b3;
}

.topbar a{
    color:#fff;
    text-decoration:none;
}

.container{
    max-width:1120px;
    margin:0 auto;
    padding:48px 24px;
}

.container h1{
    margin:8px 0;
    font-size:38px;
}

.stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin:32px 0;
}

.stats article,
.card{
    padding:24px;

    border:1px solid #e4e7ec;
    border-radius:18px;

    background:#fff;
}

.stats span{
    display:block;
    color:#667085;
}

.stats strong{
    display:block;
    margin-top:10px;
    font-size:36px;
}

.table-wrap{
    overflow:auto;
}

table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    padding:14px;
    border-bottom:1px solid #eaecf0;
    text-align:left;
}

th{
    color:#667085;
    font-size:13px;
}

.button-link{
    display:inline-block;
    margin-top:20px;
    padding:13px 18px;

    border:0;
    border-radius:11px;

    background:#111827;
    color:#fff;

    font-weight:750;
    text-decoration:none;
    cursor:pointer;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

    .institutional-login{
        grid-template-columns:1fr;
    }

    .institutional-brand{
        min-height:auto;
        padding:48px 24px 44px;
    }

    .institutional-brand::after{
        inset:14px;
    }

    .institutional-brand::before{
        width:400px;
        height:400px;
    }

    .institutional-logo{
        width:min(250px,64vw);
    }

    .institutional-heading{
        margin-top:22px;
    }

    .institutional-heading h1{
        font-size:36px;
    }

    .institutional-description{
        font-size:14px;
    }

    .institutional-footer{
        position:static;
        margin-top:30px;
    }

    .institutional-access{
        min-height:auto;
        padding:52px 24px 78px;
    }

    .access-copyright{
        bottom:24px;
    }
}


@media(max-width:650px){

    .institutional-brand{
        padding:38px 20px 34px;
    }

    .institutional-logo{
        width:min(205px,58vw);
    }

    .institutional-kicker{
        font-size:10px;
    }

    .institutional-heading h1{
        font-size:31px;
    }

    .institutional-description{
        max-width:320px;
        line-height:1.55;
    }

    .institutional-footer{
        margin-top:24px;
        font-size:11px;
    }

    .institutional-access{
        padding:42px 20px 70px;
    }

    .access-header{
        margin-bottom:28px;
    }

    .access-header h2{
        font-size:30px;
    }

    .stats{
        grid-template-columns:1fr;
    }

    .container{
        padding:30px 16px;
    }

    .topbar{
        padding:0 16px;
    }

    .topbar span{
        display:none;
    }
}