:root{--navy:#061c55;--blue:#0757c8;--cyan:#06c9ee;--ink:#15233c;--muted:#718096;--line:#dce6f2}
*{box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#dcebf7 url('../../Logo/fondo_web.png') center/cover no-repeat}
body:before{content:"";position:fixed;inset:0;background:linear-gradient(125deg,rgba(4,47,123,.16),rgba(255,255,255,.1) 48%,rgba(5,142,207,.12));pointer-events:none}
button,input{font:inherit}.login-shell{position:relative;width:100%;height:100vh;height:100dvh;padding:clamp(14px,3vw,42px);display:grid;place-items:center}
.login-card{width:min(1040px,100%);height:min(620px,100%);min-height:0;display:grid;grid-template-columns:1.06fr .94fr;overflow:hidden;border:1px solid rgba(255,255,255,.88);border-radius:clamp(22px,2.4vw,34px);background:rgba(255,255,255,.86);box-shadow:0 30px 90px rgba(21,67,113,.24);backdrop-filter:blur(20px)}
.brand-side{position:relative;isolation:isolate;overflow:hidden;padding:clamp(30px,4.4vw,58px);display:flex;flex-direction:column;color:#fff;background:linear-gradient(145deg,rgba(4,27,84,.98),rgba(5,72,168,.95) 62%,rgba(5,175,218,.9))}
.brand-side:before{content:"";position:absolute;z-index:-1;width:440px;height:440px;right:-250px;top:-210px;border:1px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:0 0 0 65px rgba(255,255,255,.035),0 0 0 130px rgba(255,255,255,.025)}
.brand-side:after{content:"";position:absolute;z-index:-1;width:330px;height:330px;left:-220px;bottom:-230px;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.025)}
.brand-message{margin:auto 0}.brand-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:clamp(18px,3vh,30px);padding:8px 13px;border:1px solid rgba(255,255,255,.25);border-radius:99px;background:rgba(255,255,255,.09);font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.brand-badge i{color:#59e4ff}
.brand-message h1{margin:0;font-size:clamp(38px,4.5vw,64px);line-height:1.02;letter-spacing:-.05em;font-weight:300}.brand-message h1 span{font-weight:800;color:#61e8ff}.brand-message p{max-width:410px;margin:clamp(14px,2.5vh,24px) 0 0;color:rgba(255,255,255,.75);font-size:clamp(15px,1.5vw,19px);line-height:1.55}
.brand-footer{font-size:12px;color:rgba(255,255,255,.6)}.brand-footer i{margin-right:7px;color:#5be5ff}
.form-side{min-width:0;padding:clamp(28px,4.8vw,64px);display:flex;flex-direction:column;justify-content:center;background:rgba(255,255,255,.55)}
.form-logo{display:block;width:min(100%,325px);height:auto;margin:0 auto clamp(18px,2.8vh,26px);filter:drop-shadow(0 6px 10px rgba(8,72,160,.1))}.login-header{margin-bottom:clamp(20px,3.2vh,32px)}.eyebrow{display:flex;align-items:center;gap:7px;margin-bottom:7px;color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.eyebrow i{color:#079ed9}.login-header h2{margin:0 0 8px;font-size:clamp(30px,3.2vw,42px);line-height:1.1;letter-spacing:-.04em}.login-header p{margin:0;color:var(--muted);font-size:14px}
.field-group{margin-bottom:clamp(14px,2.2vh,20px)}.field-group label{display:block;margin:0 0 7px 2px;font-size:12px;font-weight:750}.input-wrap{position:relative}.input-wrap>i{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:#8495aa;transition:color .2s}.input-wrap input{width:100%;height:clamp(50px,7vh,57px);padding:0 46px;border:1px solid var(--line);border-radius:14px;outline:0;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}.input-wrap input::placeholder{color:#a7b1be}.input-wrap input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(7,87,200,.1)}.input-wrap:focus-within>i{color:var(--blue)}
.password-toggle{position:absolute;top:50%;right:9px;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:9px;color:#8495aa;background:transparent;cursor:pointer}.password-toggle:hover,.password-toggle:focus-visible{color:var(--blue);background:#edf5ff;outline:0}
.login-button{width:100%;height:clamp(52px,7.3vh,59px);margin-top:5px;display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:14px;color:#fff;background:linear-gradient(110deg,var(--navy),var(--blue) 70%,#0789d6);box-shadow:0 12px 27px rgba(7,72,170,.26);font-weight:750;cursor:pointer;transition:transform .2s,box-shadow .2s}.login-button:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(7,72,170,.33)}.login-button i{transition:transform .2s}.login-button:hover i{transform:translateX(4px)}
.support-note{margin:clamp(13px,2.2vh,20px) 0 0;padding:10px 13px;display:flex;align-items:center;gap:10px;border:1px solid #dce9f7;border-radius:12px;color:var(--muted);background:#f5f9fe;font-size:11px;line-height:1.35;text-align:left}.support-note>span:last-child{display:flex;flex-direction:column}.support-note strong{margin-bottom:1px;color:#29405f;font-size:11px;font-weight:750}.support-icon{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;color:var(--blue);background:#e3f0ff}.login-alert{border-radius:20px!important}
@media(max-height:720px) and (min-width:761px){.login-card{height:100%;max-height:600px}.brand-side{padding:30px 44px}.brand-message h1{font-size:clamp(40px,4.1vw,56px)}.brand-message p{margin-top:14px;font-size:16px}.brand-badge{margin-bottom:18px}.form-side{padding:18px 54px}.form-logo{width:285px;margin-bottom:10px}.login-header{margin-bottom:13px}.login-header h2{font-size:34px;margin-bottom:4px}.field-group{margin-bottom:10px}.field-group label{margin-bottom:4px}.input-wrap input{height:46px}.login-button{height:48px}.support-note{margin-top:9px;padding:8px 11px}.support-icon{flex-basis:28px;width:28px;height:28px}}
@media(max-width:760px){.login-shell{padding:12px}.login-card{height:calc(100dvh - 24px);display:block;overflow:hidden;border-radius:22px}.brand-side{height:clamp(60px,10vh,78px);padding:14px 24px;display:block}.brand-message{display:none}.brand-footer{position:absolute;left:24px;bottom:14px;font-size:10px}.form-side{height:calc(100% - clamp(60px,10vh,78px));padding:clamp(16px,3vh,26px) clamp(22px,7vw,42px)}.form-logo{width:min(250px,70%);margin-bottom:clamp(12px,2vh,19px)}.login-header{margin-bottom:clamp(13px,2.2vh,21px)}.login-header h2{font-size:clamp(27px,8vw,36px)}.support-note{margin-top:clamp(8px,1.7vh,15px)}}
@media(max-width:420px){.brand-side{height:50px;padding:10px 20px}.brand-footer{left:20px;bottom:10px}.form-side{height:calc(100% - 50px);padding:clamp(12px,2vh,18px) 20px}.form-logo{width:min(215px,65%);margin-bottom:9px}.login-header p{font-size:12px}.field-group{margin-bottom:10px}.field-group label{margin-bottom:4px}.input-wrap input{height:46px}.login-button{height:48px}.support-note{margin-top:7px}}
@media(max-height:630px) and (max-width:760px){.brand-side{height:38px;padding:6px 18px}.brand-footer{bottom:6px}.form-side{height:calc(100% - 38px);padding:8px 20px}.form-logo{width:170px;margin-bottom:4px}.login-header{margin-bottom:7px}.login-header h2{font-size:24px;margin-bottom:2px}.eyebrow{margin-bottom:2px}.field-group{margin-bottom:6px}.field-group label{margin-bottom:2px}.input-wrap input{height:40px}.login-button{height:42px}.support-note{margin-top:4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}