:root{--primary:#24262d;--secondary:#d83a32;--accent:#ef5148;--soft:#fff8ec;--text:#3f3b38;--muted:#746b64;--line:#f0ded0;--accent-soft:#fde8df}*{box-sizing:border-box}body{margin:0;background:var(--soft);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.login-shell{display:grid;grid-template-columns:1.15fr .85fr;min-height:100vh}.login-brand-side{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:70px clamp(35px,8vw,135px);overflow:hidden}.brand{position:absolute;top:30px;left:clamp(35px,8vw,135px);display:flex;align-items:center;gap:10px;color:var(--primary);font-size:1.3rem;font-weight:900;letter-spacing:-.05em;text-decoration:none}.brand>span:last-child>span{color:var(--secondary)}.brand-mark{display:grid;place-items:center;width:39px;height:39px;border-radius:12px 12px 12px 4px;background:var(--secondary);color:#fff}.eyebrow{display:inline-flex;align-items:center;gap:9px;color:#a72b26;font-size:.67rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.eyebrow i{display:block;width:25px;height:2px;background:var(--secondary)}.brand-copy{max-width:570px}.brand-copy h1{margin:21px 0;color:var(--primary);font-size:clamp(3.3rem,5.2vw,5.4rem);line-height:.91;letter-spacing:-.065em}.brand-copy h1 em{color:var(--secondary);font-style:normal}.brand-copy p{max-width:500px;color:var(--muted);line-height:1.75}.preview-card{width:min(470px,100%);margin-top:38px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 22px 60px rgba(36,38,45,.12);transform:rotate(-1.5deg)}.preview-top{display:grid;grid-template-columns:25px 1fr 8px;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--muted)}.preview-top span{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:var(--secondary);color:#fff;font-weight:900}.preview-top small{font-size:.52rem}.preview-top i{width:7px;height:7px;border-radius:50%;background:#41b883}.preview-body{display:grid;grid-template-columns:65px 1fr;min-height:155px}.preview-body aside{padding:20px 13px;background:var(--primary)}.preview-body aside b{display:block;width:34px;height:5px;margin-bottom:15px;border-radius:5px;background:#595c65}.preview-body aside b:first-child{background:var(--accent)}.preview-body>div{padding:21px}.preview-body small{color:var(--muted);font-size:.44rem}.preview-body strong{display:block;margin:2px 0 15px;color:var(--primary);font-size:.72rem}.preview-body section{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.preview-body section i{height:40px;border-radius:7px;background:var(--accent-soft)}.preview-body section i:nth-child(2){background:#fff3d9}.preview-body section i:nth-child(3){background:#e5f1ea}.preview-body p{width:82%;height:4px;margin:11px 0 0;border-radius:4px;background:#eee}.preview-body p:nth-last-child(2){width:65%}.login-form-side{display:grid;place-items:center;padding:30px;background:#fff}.login-card{width:min(100%,430px);padding:42px;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:0 28px 80px rgba(36,38,45,.12)}.form-message{min-height:0;margin:0}.form-message:not(:empty){display:flex;align-items:center;margin:0 0 22px;padding:13px 15px;border:1px solid #bfe2ce;border-radius:12px;background:#eaf7f0;color:#28734d;font-size:.68rem}.form-message.error:not(:empty){border-color:#f2bbb3;background:var(--accent-soft);color:#a72b26}.form-heading{display:flex;align-items:center;gap:16px;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line)}.form-heading>span{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--accent-soft);color:var(--secondary);font-size:1.25rem;font-weight:900}.form-heading h2{margin:0 0 4px;color:var(--primary);font-size:1.45rem}.form-heading p{margin:0;color:var(--muted);font-size:.75rem}form label{position:relative;margin-bottom:19px;color:var(--primary);font-size:.7rem;font-weight:800}input{height:51px;margin:7px 0 0;padding:0 15px;border:1px solid var(--line);border-radius:12px;background:#fffcf8;color:var(--primary);font-size:.77rem;box-shadow:none}input::placeholder{color:var(--muted);opacity:1}input:focus{border-color:var(--secondary);box-shadow:0 0 0 3px rgba(216,58,50,.1)}input.invalid{border-color:var(--secondary)}label small{display:block;min-height:13px;margin-top:3px;color:var(--secondary);font-size:.58rem}.password-field{position:relative;display:block}.password-field input{padding-right:78px}.password-field button{position:absolute;right:8px;top:14px;width:auto;margin:0;padding:8px;border:0;background:transparent;color:var(--secondary);font-size:.6rem;font-weight:900;box-shadow:none}form>button{display:flex;align-items:center;justify-content:center;gap:15px;width:100%;height:53px;margin:5px 0 0;border:0;border-radius:999px;background:var(--secondary);font-size:.78rem;font-weight:900}form>button:hover{background:var(--accent)}form>button[aria-busy=true]{opacity:.72}.activation-note{margin:17px 0 0;text-align:center;color:var(--muted);font-size:.58rem;line-height:1.5}.secure-note{margin-top:25px;padding-top:22px;border-top:1px solid var(--line);color:#338259;text-align:center;font-size:.8rem}.secure-note small{color:var(--muted);font-size:.58rem}@media(max-width:850px){.login-shell{grid-template-columns:1fr}.login-brand-side{min-height:430px;padding:100px 30px 50px}.brand{left:30px}.login-form-side{padding:45px 20px}.preview-card{display:none}}@media(max-width:500px){.login-brand-side{min-height:360px}.brand-copy h1{font-size:3.35rem}.login-card{padding:30px 20px;border-radius:22px}}
#local-login input:not([type=checkbox]){height:51px;margin:7px 0 0;padding:0 15px;border:1px solid var(--line)!important;border-radius:12px!important;background:#fffcf8!important;color:var(--primary)!important;font-size:.77rem;box-shadow:none!important}#local-login input::placeholder{color:var(--muted)!important;opacity:1}#local-login input:focus{border-color:var(--secondary)!important;box-shadow:0 0 0 3px rgba(216,58,50,.1)!important}#local-login>button{background:var(--secondary)!important;color:#fff!important;border:0!important;box-shadow:0 10px 24px rgba(216,58,50,.2)!important}#local-login>button:hover{background:var(--accent)!important}.login-form-side{background:transparent!important}.login-shell{background:var(--soft)}
.login-shell{grid-template-columns:1fr .85fr;align-items:center;gap:110px;width:min(1050px,calc(100% - 40px));min-height:100vh;margin:0 auto;padding:125px 0 75px;background:transparent}.login-brand-side{min-height:0;padding:0}.login-form-side{display:block;padding:0}.login-card{width:100%;padding:42px}.brand{top:30px;left:max(20px,calc((100vw - 1050px)/2))}@media(max-width:850px){.login-shell{grid-template-columns:1fr;gap:45px;width:min(100% - 40px,1050px);padding:120px 0 55px}.login-brand-side{min-height:0;padding:0}.brand{left:20px}.login-form-side{padding:0}.login-card{width:min(100%,560px);margin:auto}}@media(max-width:500px){.login-shell{width:min(100% - 28px,1050px);padding:105px 0 35px}.login-card{padding:30px 20px}}
.login-brand-side{position:static;padding-top:25px}.brand{top:30px;left:max(20px,calc((100vw - 1050px)/2))}@media(max-width:850px){.login-brand-side{padding-top:25px}.brand{top:20px;left:20px}}

/* La cuenta es el punto de entrada: formulario a la izquierda y presentación a la derecha. */
.login-shell{grid-template-areas:"form brand";grid-template-columns:.85fr 1fr}
.login-form-side{grid-area:form}
.login-brand-side{grid-area:brand}

@media(max-width:850px){
  .login-shell{grid-template-areas:"brand" "form";grid-template-columns:1fr;gap:12px;min-height:100svh;padding:14px 0}
  .login-brand-side{display:block;min-height:39px;padding:0}
  .brand{position:static;width:max-content}
  .brand-copy,.preview-card{display:none}
  .login-form-side{align-self:start}
  .login-card{padding:24px 22px}
}

@media(max-width:500px){
  .login-shell{width:calc(100% - 28px);padding:14px 0}
  .login-card{padding:20px 18px;border-radius:20px;box-shadow:0 16px 36px rgba(36,38,45,.1)}
  .form-heading{margin-bottom:18px;padding-bottom:16px}
  form label{margin-bottom:12px}
  .secure-note{margin-top:17px;padding-top:15px}
  .activation-note{margin-top:12px}
}