/* MonsterBox Express · Login / Registro (mismo estilo "Claro Pro" de la landing)
   Usa los tokens de styles.css. */
.auth{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:100vh}

/* Panel lateral con slides animados */
.auth-side{position:sticky;top:0;height:100vh;background:var(--surface2);color:var(--text);border-right:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:40px;isolation:isolate}
.auth-side::before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(closest-side at 30% 25%,rgba(213,0,249,.16),transparent 70%),radial-gradient(closest-side at 80% 85%,rgba(168,0,200,.14),transparent 70%);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(6%,4%) scale(1.1)}}
.auth-side .logo img{height:56px;width:auto;display:block}
.auth-side .slides{position:relative;min-height:230px}
.auth-side .sl{position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s;pointer-events:none}
.auth-side .sl.on{opacity:1;transform:none}
.auth-side .eyebrow{color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.auth-side h2{font-family:var(--fd);font-weight:800;letter-spacing:var(--htrack);line-height:1.05;font-size:clamp(28px,3vw,42px);margin:12px 0 12px;text-wrap:balance}
.auth-side p{color:var(--soft);max-width:360px;font-size:16px;margin:0}
.auth-side .dots{display:flex;gap:8px}
.auth-side .dots button{all:unset;width:34px;height:6px;border-radius:6px;background:var(--line);overflow:hidden;position:relative}
.auth-side .dots button i{position:absolute;inset:0;width:0;background:var(--accent)}
.auth-side .dots button[aria-current="true"] i{animation:prog 5.5s linear forwards}
@keyframes prog{to{width:100%}}
.plane-trail{position:absolute;right:-30px;top:9%;width:75%;z-index:-1;opacity:.9}
.plane-trail .fly{animation:fly 6s ease-in-out infinite}
@keyframes fly{0%,100%{transform:translate(-30px,40px) rotate(0)}50%{transform:translate(10px,-6px) rotate(-4deg)}}
.plane-trail path.dash{stroke-dasharray:4 7;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-22}}

/* Zona del formulario */
.auth-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px 40px;min-width:0}
.auth-card{width:100%;max-width:560px}
.auth-card.wide{max-width:640px}
.auth-top{width:100%;max-width:640px;display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.auth-top .logo img{height:40px;width:auto}
.auth-top .back{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;letter-spacing:.04em}
.auth-top .back:hover{color:var(--accent)}
.auth h1{font-family:var(--fd);font-weight:800;letter-spacing:var(--htrack);font-size:clamp(34px,4.4vw,52px);line-height:1.02;margin:10px 0 10px}
.auth h1 em{font-style:normal;color:var(--accent)}
.auth .sub{color:var(--soft);margin:0 0 28px}
.auth .eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.form-card{background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--r);box-shadow:var(--shadow);padding:28px}
.fgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.fgrid>*{grid-column:span 12;min-width:0}
@media (min-width:640px){.c4{grid-column:span 4}.c6{grid-column:span 6}.c3{grid-column:span 3}.c5{grid-column:span 5}}
.fld label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--soft);margin-bottom:6px}
.fld input:not([type=checkbox]),.fld select{width:100%;font:inherit;font-weight:500;font-size:15px;color:var(--text);background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .2s,box-shadow .2s,background .2s;appearance:none;-webkit-appearance:none}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b5c72' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.fld input::placeholder{color:var(--muted);opacity:.8}
.fld input:focus,.fld select:focus{outline:0;border-color:var(--accent);background-color:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.fld input:invalid:not(:placeholder-shown):not(:focus){border-color:#d64545}
.pass{position:relative}
.pass input{padding-right:70px!important}
.pass button{all:unset;position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;color:var(--accent);padding:6px 8px}
.form-actions{display:grid;gap:14px;justify-items:center;text-align:center}
.auth .btn-primary{width:100%;justify-content:center;padding:15px 20px;font-size:15px;box-shadow:0 10px 24px -10px var(--accent)}
.auth .btn-primary:disabled{opacity:.45;box-shadow:none;transform:none}
.auth .alt{font-size:14px;color:var(--muted);margin:0}
.auth .alt a{color:var(--accent);font-weight:600;text-decoration:none}
.auth .alt a:hover{text-decoration:underline}
.check{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--soft);justify-content:center}
.check input{flex:none;width:18px;height:18px;accent-color:var(--accent)}
.check span{text-align:left}
.fld select{text-overflow:ellipsis}
.check a{color:var(--accent);font-weight:600}
.msg{padding:12px 14px;border-radius:var(--rs);background:color-mix(in srgb,#d64545 12%,transparent);border:1px solid color-mix(in srgb,#d64545 40%,transparent);font-size:14px;margin-bottom:14px}
.msg:empty{display:none}
.copy{margin-top:22px;font-size:12.5px;color:var(--muted);text-align:center}

/* Entrada escalonada */
.rise>*{opacity:0;transform:translateY(14px);animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
.rise>*:nth-child(2){animation-delay:.08s}.rise>*:nth-child(3){animation-delay:.16s}.rise>*:nth-child(4){animation-delay:.24s}
@keyframes rise{to{opacity:1;transform:none}}
.fgrid.rise>*{animation-delay:calc(var(--i,0)*45ms + .2s)}

/* Bienvenida */
.welcome{text-align:center}
.welcome .suite{display:inline-block;margin:18px 0 26px;padding:14px 26px;border-radius:999px;border:1px dashed var(--accent);font-family:var(--fd);font-weight:800;font-size:28px;color:var(--accent);animation:pulse 1.6s infinite}

/* Celular / tablet: sin panel lateral (va al final para que no lo pise .auth-side) */
@media (min-width:901px){.auth-top .logo{visibility:hidden}}
@media (max-width:900px){.auth{grid-template-columns:1fr}.auth-side{display:none}.auth-main{justify-content:flex-start;padding-top:20px}}
@media (max-width:520px){.form-card{padding:22px 18px}.check{justify-content:flex-start;align-items:flex-start;width:100%}.check input{margin-top:2px}}