/* DIREMID Loreto — Login institucional moderno */
:root{
    --login-navy:#10283f;
    --login-navy-2:#163d56;
    --login-teal:#087f8c;
    --login-teal-bright:#0c9ba3;
    --login-ink:#1b3448;
    --login-muted:#6b7f90;
    --login-line:#dce6ed;
    --login-surface:#fff;
    --login-bg:#f3f7fa;
    --login-danger:#b42318;
    --login-success:#168354;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body.login-page{
    min-height:100vh;
    color:var(--login-ink);
    background:
      radial-gradient(circle at 82% 12%,rgba(9,145,153,.09),transparent 25rem),
      radial-gradient(circle at 12% 90%,rgba(20,69,95,.07),transparent 28rem),
      var(--login-bg);
    font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
.login-layout{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(420px,1.04fr) minmax(440px,.96fr);
    overflow:hidden;
}
.brand-panel{
    position:relative;
    isolation:isolate;
    min-height:100vh;
    overflow:hidden;
    padding:clamp(30px,5vw,76px);
    display:flex;
    align-items:center;
    background:linear-gradient(140deg,#0d263c 0%,#123c53 54%,#087f8c 100%);
    color:#fff;
}
.brand-panel:before{
    content:"";
    position:absolute;inset:0;z-index:-2;
    background:
      linear-gradient(135deg,rgba(255,255,255,.035) 25%,transparent 25%) 0 0/42px 42px,
      linear-gradient(315deg,rgba(255,255,255,.025) 25%,transparent 25%) 0 0/42px 42px;
    opacity:.35;
}
.brand-grid{
    position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.15;
    background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
    background-size:54px 54px;
    mask-image:linear-gradient(130deg,#000,transparent 74%);
}
.brand-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(2px);pointer-events:none}
.brand-glow-one{
    width:490px;height:490px;right:-210px;top:-160px;
    border:1px solid rgba(255,255,255,.17);
    box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 72px rgba(255,255,255,.02),0 0 0 112px rgba(255,255,255,.015);
}
.brand-glow-two{
    width:360px;height:360px;left:-230px;bottom:-160px;
    background:radial-gradient(circle,rgba(39,189,179,.23),transparent 69%);
}
.brand-content{width:min(100%,650px);margin:auto;position:relative;z-index:1}
.institution-brand{display:inline-flex;align-items:center;gap:16px;min-width:0}
.institution-logo{
    width:94px;height:76px;display:grid;place-items:center;flex:0 0 auto;
    padding:7px 9px;border-radius:18px;
    background:rgba(255,255,255,.96);
    box-shadow:0 12px 34px rgba(0,0,0,.12);
}
.institution-logo img{display:block;width:100%;height:100%;object-fit:contain}
.institution-name{display:flex;flex-direction:column;gap:4px}
.institution-name strong{font-size:19px;letter-spacing:.07em;font-weight:850}
.institution-name small{font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.72);font-weight:700}
.brand-copy{margin-top:clamp(54px,9vh,105px);max-width:590px}
.brand-eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    padding:9px 13px;border:1px solid rgba(178,235,231,.24);
    border-radius:999px;background:rgba(255,255,255,.075);
    color:#c5f5ef;font-size:10px;letter-spacing:.15em;font-weight:850;
}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:#63e3c1;box-shadow:0 0 0 5px rgba(99,227,193,.13)}
.brand-copy h1{
    max-width:580px;margin:23px 0 17px;
    font-size:clamp(36px,4.2vw,59px);line-height:1.07;
    letter-spacing:-.045em;font-weight:850;
}
.brand-copy p{
    max-width:520px;margin:0;color:rgba(239,248,251,.77);
    font-size:16px;line-height:1.85;
}
.brand-features{display:grid;gap:15px;margin-top:clamp(42px,7vh,76px)}
.feature-item{display:flex;align-items:center;gap:13px}
.feature-icon{
    width:43px;height:43px;display:grid;place-items:center;flex:0 0 auto;
    border:1px solid rgba(255,255,255,.17);border-radius:13px;
    background:rgba(255,255,255,.08);color:#baf3ea;
}
.feature-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feature-item span:last-child{display:grid;gap:2px}
.feature-item strong{font-size:13px;font-weight:750}
.feature-item small{font-size:12px;color:rgba(239,248,251,.62)}
.brand-bottom{
    display:flex;align-items:center;gap:11px;
    margin-top:clamp(48px,8vh,90px);padding-top:21px;
    border-top:1px solid rgba(255,255,255,.16);
}
.brand-bottom-mark{
    display:grid;place-items:center;width:34px;height:34px;
    border:1px solid rgba(255,255,255,.3);border-radius:10px;
    background:rgba(255,255,255,.1);font-size:14px;font-weight:900;
}
.brand-bottom span:last-child{display:grid;gap:3px}
.brand-bottom strong{font-size:10px;letter-spacing:.15em}
.brand-bottom small{font-size:10px;color:rgba(255,255,255,.61)}

.access-panel{
    min-height:100vh;display:flex;flex-direction:column;
    padding:27px clamp(22px,4vw,64px);
    background:rgba(249,251,253,.76);
}
.access-topline{display:flex;align-items:center;justify-content:space-between;gap:14px}
.back-link,.secure-label{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700}
.back-link{color:var(--login-muted);transition:color .18s ease}
.back-link:hover{color:var(--login-teal)}
.back-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.secure-label{
    padding:8px 11px;border:1px solid #dce9e8;border-radius:999px;
    color:#277c70;background:#f2faf8;font-size:11px;
}
.secure-label svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.access-center{
    width:100%;max-width:470px;margin:auto;
    padding:35px 0 20px;
}
.login-card{
    position:relative;padding:clamp(27px,3.2vw,42px);
    border:1px solid rgba(211,224,233,.9);border-radius:24px;
    background:rgba(255,255,255,.94);
    box-shadow:0 24px 70px rgba(19,51,72,.10),0 3px 10px rgba(19,51,72,.025);
    animation:login-rise .55s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes login-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.card-emblem{
    width:53px;height:53px;display:grid;place-items:center;
    border-radius:16px;color:#fff;
    background:linear-gradient(140deg,var(--login-teal),#13a6a3);
    box-shadow:0 10px 22px rgba(8,127,140,.23);
}
.card-emblem svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card-heading{margin:24px 0 27px}
.card-kicker{font-size:10px;letter-spacing:.16em;color:var(--login-teal);font-weight:850}
.card-heading h2{margin:7px 0 6px;font-size:34px;line-height:1.14;letter-spacing:-.04em;color:var(--login-navy);font-weight:850}
.card-heading p{margin:0;color:var(--login-muted);font-size:13px;line-height:1.65}
.field-group{margin-bottom:19px}
.field-group label{display:block;margin:0 0 8px;color:#29445a;font-size:12px;font-weight:800}
.label-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.caps-warning{font-size:10px;color:#a35d12;font-weight:750}
.input-shell{
    display:flex;align-items:center;gap:10px;
    min-height:54px;padding:0 14px;
    border:1px solid #d8e3eb;border-radius:12px;
    background:#fbfdfe;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.input-shell:focus-within{
    border-color:var(--login-teal);
    background:#fff;
    box-shadow:0 0 0 4px rgba(8,127,140,.10);
}
.input-icon{width:20px;height:20px;flex:0 0 auto;color:#8295a4}
.input-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.input-shell input{
    min-width:0;width:100%;height:52px;padding:0;
    border:0;outline:0;background:transparent;color:var(--login-ink);
    font-size:14px;font-weight:600;
}
.input-shell input::placeholder{color:#a5b2bd;font-weight:450}
.input-shell input:-webkit-autofill,
.input-shell input:-webkit-autofill:hover,
.input-shell input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--login-ink);
    transition:background-color 9999s ease-in-out 0s;
}
.password-toggle{
    width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;
    padding:0;border:0;border-radius:9px;background:transparent;color:#738899;cursor:pointer;
    transition:background .18s ease,color .18s ease;
}
.password-toggle:hover{background:#edf5f6;color:var(--login-teal)}
.password-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.password-toggle .eye-closed{display:none}
.password-toggle.is-visible .eye-open{display:none}
.password-toggle.is-visible .eye-closed{display:block}
.login-status{
    display:flex;align-items:flex-start;gap:9px;
    margin:0 0 18px;padding:11px 12px;
    border:1px solid #f1c8c5;border-radius:10px;
    background:#fff6f5;color:var(--login-danger);
    font-size:12px;font-weight:650;line-height:1.55;
}
.login-status[data-type="success"]{background:#f0faf5;border-color:#c5e9d6;color:#13764d}
.login-status[data-type="info"]{background:#f1f8fb;border-color:#cce4ee;color:#1d627c}
.login-status svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-status[hidden]{display:none}
.login-button{
    width:100%;min-height:54px;display:flex;align-items:center;justify-content:center;gap:12px;
    margin-top:25px;padding:0 18px;border:0;border-radius:12px;
    background:linear-gradient(105deg,var(--login-teal),var(--login-teal-bright));
    box-shadow:0 10px 22px rgba(8,127,140,.20);
    color:#fff;font-size:14px;font-weight:800;cursor:pointer;
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.login-button:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(8,127,140,.25);filter:saturate(1.08)}
.login-button:active{transform:translateY(0)}
.login-button:focus-visible{outline:3px solid rgba(8,127,140,.25);outline-offset:3px}
.login-button:disabled{opacity:.78;cursor:wait;transform:none}
.button-arrow{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.login-spinner{
    width:17px;height:17px;border:2px solid rgba(255,255,255,.38);
    border-top-color:#fff;border-radius:50%;animation:login-spin .7s linear infinite;
}
@keyframes login-spin{to{transform:rotate(360deg)}}
.card-security{
    display:flex;align-items:center;gap:8px;margin-top:23px;
    color:#8293a1;font-size:10px;line-height:1.5;
}
.security-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:#22a879;box-shadow:0 0 0 4px rgba(34,168,121,.10)}
.access-footer{
    display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
    color:#91a0ad;font-size:10px;line-height:1.5;
}

@media(max-width:980px){
    .login-layout{grid-template-columns:minmax(310px,.85fr) minmax(410px,1.15fr)}
    .brand-panel{padding:34px}
    .brand-copy h1{font-size:clamp(34px,5vw,48px)}
    .institution-logo{width:78px;height:66px}
    .institution-name strong{font-size:16px}
}
@media(max-width:720px){
    .login-layout{grid-template-columns:1fr;overflow:visible}
    .brand-panel{min-height:auto;padding:23px 22px 25px}
    .brand-content{max-width:560px}
    .institution-logo{width:67px;height:56px;border-radius:13px}
    .institution-brand{gap:12px}
    .institution-name strong{font-size:14px}
    .institution-name small{font-size:8px}
    .brand-copy{margin-top:28px}
    .brand-copy h1{max-width:500px;margin:14px 0 9px;font-size:clamp(26px,7vw,36px)}
    .brand-copy p{font-size:12px;line-height:1.6;max-width:520px}
    .brand-eyebrow{padding:7px 10px;font-size:9px}
    .brand-features{display:none}
    .brand-bottom{margin-top:22px;padding-top:15px}
    .brand-bottom-mark{width:30px;height:30px}
    .brand-bottom small{font-size:9px}
    .access-panel{min-height:auto;padding:18px 18px 24px;background:var(--login-bg)}
    .access-center{max-width:500px;padding:24px 0 0}
    .login-card{padding:26px 23px;border-radius:20px}
    .card-heading{margin:19px 0 23px}
    .card-heading h2{font-size:30px}
    .access-topline{max-width:500px;margin:0 auto;width:100%}
    .access-footer{margin-top:21px;justify-content:center;text-align:center}
}
@media(max-width:390px){
    .brand-panel{padding:19px 17px 21px}
    .brand-copy h1{font-size:27px}
    .access-panel{padding-left:13px;padding-right:13px}
    .login-card{padding:23px 18px}
    .secure-label{font-size:10px;padding:7px 9px}
}
@media(prefers-reduced-motion:reduce){
    *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}