/* Acceso · marca Academia en carbón con el formulario compacto de Escalando ERP: campos redondeados, foco verde con halo,
   mostrar u ocultar la contraseña y 16 px en móvil (evita el zoom de iOS). Hoja pública: la usan login.html (sin sesión,
   con la fotografía de fondo 1A) y activar.html (primer ingreso, con su columna). Sin recursos externos. */
:root{color-scheme:dark;--carbon:#121619;--carbon-2:#171D20;--carbon-3:#1A2024;--line:#333C41;--line-2:#22292D;--text:#E6E8E6;--soft:#C9CFCC;--muted:#AEB6B2;--faint:#8E9894;--aqua:#5FBFAE;--aqua-2:#8FD6C8;--pill:#D9DCDA;font-family:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:clip}
body{min-height:100vh;display:flex;background:var(--carbon);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.5}
[hidden]{display:none!important}
.login{flex:1 1 440px;max-width:560px;padding:56px 64px;display:flex;flex-direction:column;gap:24px}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;font-size:17px;line-height:1.1}
.brand img{width:34px;height:auto;flex:none}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua-2);margin:0 0 14px;font-weight:600}
h1{font-size:44px;line-height:1.02;font-weight:700;letter-spacing:-.02em;margin:0}
h1 span{color:var(--aqua)}
.intro{color:var(--muted);max-width:400px;font-size:15px;line-height:1.6;margin:16px 0 0}
form{display:flex;flex-direction:column;gap:16px;max-width:380px}
.field{display:flex;flex-direction:column;gap:6px;margin:0}
.field>span,.field label{font-size:12.5px;font-weight:700;color:var(--soft)}
.field-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
input{height:46px;width:100%;border-radius:999px;border:1.5px solid var(--line);background:var(--carbon-3);color:var(--text);padding:0 20px;font:inherit;font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s}
input::placeholder{color:var(--faint)}
input:focus{border-color:var(--aqua);box-shadow:0 0 0 3px rgba(95,191,174,.2)}
.pw{position:relative}
.pw input{padding-right:52px}
.pw-toggle{position:absolute;right:5px;top:5px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0}
.pw-toggle:hover{background:var(--line-2);color:var(--text)}
.pw-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pw-toggle .eye-off,.pw-toggle[aria-pressed=true] .eye{display:none}
.pw-toggle[aria-pressed=true] .eye-off{display:block}
.link{border:0;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:600;color:var(--aqua-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--text)}
.help{margin:0;font-size:13px;line-height:1.55;color:var(--soft);background:var(--carbon-2);border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;max-width:380px}
.submit{display:flex;align-items:center;justify-content:center;height:48px;border:0;border-radius:999px;background:var(--aqua);color:#0D1A17;font:inherit;font-weight:700;font-size:15px;cursor:pointer;margin-top:4px;text-decoration:none;transition:background .15s,transform .15s,box-shadow .15s}
.submit:hover{background:var(--aqua-2);transform:translateY(-1px);box-shadow:0 10px 22px rgba(95,191,174,.25)}
.submit:disabled{opacity:.6;cursor:progress;transform:none;box-shadow:none}
.secondary{align-self:flex-start;border:1px solid var(--line);background:transparent;color:var(--soft);border-radius:999px;height:40px;padding:0 16px;font:inherit;font-size:13px;cursor:pointer}
.secondary:hover{border-color:var(--muted);color:var(--text)}
:focus-visible{outline:2px solid var(--aqua-2);outline-offset:3px}
input:focus-visible{outline:none}
#message{margin:0;font-size:13px;color:#F2B8AE;border-radius:12px}
#message:not(:empty){background:#3A2420;padding:9px 12px}
.hint{margin:0;font-size:12px;color:var(--faint);max-width:380px}
.who{margin:0;font-size:13.5px;color:var(--soft)}
.who:empty{display:none}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12.5px;color:var(--muted)}
.checks li::before{content:"○ ";color:var(--faint)}
.checks li.ok{color:var(--aqua-2)}
.checks li.ok::before{content:"✓ ";color:var(--aqua-2)}
.done{display:flex;flex-direction:column;gap:14px;max-width:380px}
.foot{margin-top:auto;font-size:12px;color:var(--faint)}
aside{flex:1 1 400px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:36px;background:var(--carbon-2);border-left:1px solid var(--line-2);padding:40px}
aside p{font-size:19px;line-height:1.6;color:var(--muted);margin:0}
.steps{position:relative;width:240px;height:200px}
.steps i{position:absolute;height:40px;border-radius:20px;background:var(--pill)}
.steps i:nth-child(1){left:62px;top:44px;width:150px}
.steps i:nth-child(2){left:34px;top:100px;width:140px}
.steps i:nth-child(3){left:6px;top:156px;width:130px}
.steps b{position:absolute;right:0;top:0;width:54px;height:54px;border-radius:50%;background:var(--aqua)}
@media(max-width:860px){body{display:block}.login{max-width:none;padding:32px 24px;min-height:100vh}h1{font-size:40px}aside{display:none}input{font-size:16px}}
/* Propuesta 1A «Sala a pantalla completa» (sólo login.html, body.login-sala; la activación conserva su columna): la fotografía de una
   sesión de exposición ocupa todo el fondo, un velo oscuro asegura la lectura a la izquierda y el formulario queda encima.
   Imagen del propio servidor (/login-sala.png, público y único), sin recursos externos. En móvil el velo cubre de arriba abajo. */
body.login-sala{background:var(--carbon);position:relative}
body.login-sala::before{content:"";position:fixed;inset:0;z-index:0;background:var(--carbon) url('/login-sala.png') 62% 50%/cover no-repeat}
body.login-sala::after{content:"";position:fixed;inset:0;z-index:0;background:linear-gradient(90deg,rgba(18,22,25,.95) 0%,rgba(18,22,25,.9) 30%,rgba(18,22,25,.62) 52%,rgba(18,22,25,.25) 74%,rgba(18,22,25,.12) 100%)}
body.login-sala .login{position:relative;z-index:1;flex:0 1 620px;max-width:620px;padding:56px 72px}
body.login-sala h1{font-size:56px}
body.login-sala .intro{color:var(--soft)}
body.login-sala input{background:rgba(26,32,36,.72);border-color:rgba(201,207,204,.28)}
body.login-sala input:focus{border-color:var(--aqua)}
body.login-sala .help{background:rgba(23,29,32,.9)}
body.login-sala .caption{position:fixed;z-index:1;right:28px;bottom:22px;margin:0;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);display:flex;align-items:center;gap:8px}
body.login-sala .caption::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--aqua)}
@media(max-width:860px){body.login-sala::before{background-position:95% 50%}body.login-sala::after{background:linear-gradient(180deg,rgba(18,22,25,.78) 0%,rgba(18,22,25,.9) 38%,rgba(18,22,25,.96) 100%)}body.login-sala .login{max-width:none;padding:32px 24px 24px;min-height:auto}body.login-sala h1{font-size:40px}body.login-sala .caption{position:relative;right:auto;bottom:auto;padding:0 24px 28px;letter-spacing:.12em}}
@media(max-height:620px) and (min-width:861px){body.login-sala .login{padding-top:32px;padding-bottom:32px;gap:18px}body.login-sala h1{font-size:44px}}
/* Escritorio (>860 px): el conjunto (marca, título, formulario y pie) se centra como una unidad en ambos ejes cuando cabe, con un
   ancho común de 420 px; con poca altura o zoom los márgenes automáticos valen cero y la página se desplaza desde arriba. El velo
   oscurece una franja central detrás del bloque y deja ver la fotografía a ambos lados (reemplaza el velo lateral). El pie de foto
   queda al final de la página para no flotar sobre el formulario al desplazarse. Móvil (<=860 px) y activación no cambian. */
@media(min-width:861px){body.login-sala::after{background:linear-gradient(90deg,rgba(18,22,25,.3) 0%,rgba(18,22,25,.3) calc(50% - 560px),rgba(18,22,25,.9) calc(50% - 290px),rgba(18,22,25,.92) 50%,rgba(18,22,25,.9) calc(50% + 290px),rgba(18,22,25,.3) calc(50% + 560px),rgba(18,22,25,.3) 100%)}body.login-sala .login{flex:0 1 564px;max-width:564px;margin:auto}body.login-sala .intro,body.login-sala form,body.login-sala .help,body.login-sala .hint{max-width:none}body.login-sala .caption{position:absolute}}
@media(min-width:861px) and (max-height:620px){body.login-sala .caption{bottom:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}