/* PROPÓSITO: presentación responsive del acceso, independiente del CSS general. */
:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color-scheme:dark;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
html{min-height:100%;font-size:14px}
body{margin:0;min-height:100vh;min-height:100dvh}
button,input{font:inherit}
button{cursor:pointer}
.access-page{position:relative;display:grid;place-items:center;overflow-x:hidden;background:#11151c;color:#f2f3f6}
.access-page::before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(115deg,rgba(10,13,18,.80),rgba(15,18,24,.48) 52%,rgba(11,14,20,.78)),url("../img/login-bg.jpg") center/cover no-repeat;background-color:#20242b}
.access-page::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 72% 20%,rgba(255,255,255,.09),transparent 34%),linear-gradient(180deg,transparent 70%,rgba(6,8,12,.40))}
.access-shell{width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 18px 20px;gap:24px}
.access-card{width:min(100%,420px);padding:36px 35px 30px;background:rgba(27,30,37,.88);border:1px solid rgba(255,255,255,.14);border-radius:18px;box-shadow:0 28px 85px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.brand-row{display:flex;align-items:center;gap:11px}
.brand-symbol{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.08);color:#e5e7eb}
.brand-symbol svg{width:19px;height:19px}
.brand-name{font-size:11px;letter-spacing:2px;font-weight:500;color:#c7cbd2}
.brand-name strong{font-weight:750;color:#fff}
.access-heading{margin:34px 0 27px}
.eyebrow{font-size:9px;font-weight:700;letter-spacing:2.1px;color:#aab0bb}
.access-heading h1{margin:12px 0 8px;font-size:25px;font-weight:650;letter-spacing:-.9px;line-height:1.2}
.access-heading p{margin:0;color:#adb2bc;font-size:12px;line-height:1.65}
.access-form{display:flex;flex-direction:column}
.access-form label{font-size:11px;font-weight:600;color:#d6d9e0;margin-bottom:9px}
.field-wrap{position:relative;margin-bottom:20px}
.field-wrap input{width:100%;height:45px;border:1px solid #484c55;border-radius:9px;background:rgba(15,17,22,.54);color:#fff;padding:0 43px 0 42px;outline:none;font-size:12px;transition:border-color .2s,box-shadow .2s}
.field-wrap input::placeholder{color:#7f8590}
.field-wrap input:focus{border-color:#b2b8c4;box-shadow:0 0 0 3px rgba(190,196,208,.11)}
.field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;color:#9ba2af;pointer-events:none}
.field-icon svg{width:16px;height:16px}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:7px;display:grid;place-items:center;background:transparent;color:#a5abb5}
.password-toggle:hover,.password-toggle:focus-visible{background:rgba(255,255,255,.09);color:#fff;outline:none}
.password-toggle svg{width:17px;height:17px}
.password-toggle .eye-hidden{display:none}
.password-toggle.is-visible .eye-hidden{display:block}
.password-toggle.is-visible .eye-visible{display:none}
.submit-button{margin-top:6px;width:100%;height:45px;display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #c7cbd1;border-radius:9px;background:#d7d9dd;color:#1a1d23;font-size:12px;font-weight:750;transition:background .2s,transform .2s}
.submit-button:hover{background:#f0f1f3;transform:translateY(-1px)}
.submit-button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.submit-button svg{width:15px;height:15px}
.access-alert{margin-bottom:19px;padding:12px 13px;border:1px solid rgba(255,131,131,.35);border-radius:8px;background:rgba(135,39,39,.18);color:#ffb9b9;font-size:12px;line-height:1.5}
.access-footnote{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:27px;padding-top:21px;border-top:1px solid rgba(255,255,255,.10);color:#999faa;font-size:10px;text-align:center}
.access-footnote svg{width:14px;height:14px;flex:none}
.access-footer{font-size:10px;color:#b4b8c0;text-align:center;text-shadow:0 1px 8px #000;letter-spacing:.2px}
.access-footer span{padding:0 5px}
@media(max-width:480px){.access-shell{padding:18px 14px}.access-card{padding:28px 23px 25px;border-radius:15px}.access-heading{margin:28px 0 24px}.access-heading h1{font-size:23px}.brand-name{font-size:10px;letter-spacing:1.5px}}
@media(max-width:340px){.access-card{padding:24px 17px}.brand-name{letter-spacing:.8px}.access-heading h1{font-size:21px}}
@media(max-height:620px) and (min-width:481px){.access-shell{padding:16px}.access-card{padding-top:23px;padding-bottom:19px}.access-heading{margin:20px 0}.access-footnote{margin-top:18px;padding-top:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}