/* ============================================================
   atenIA · Login + Registro + Recuperación  —  estilos
   Fuentes (Sora/Figtree) vienen de fonts.css (auto-hospedadas).
   ============================================================ */
:root{
  --orange:#F86A2C; --orange-deep:#DD541C; --orange-soft:#FDE7D8;
  --violet:#7C3AED; --violet-deep:#6A28D6; --violet-l:#A78BFA; --violet-soft:#EDE8FE;
  --olive:#5E8C52; --danger:#D64545;
  --ink:#16192A; --ink-2:#1E2236;
  --slate:#4A5165; --slate-soft:#8A91A6; --slate-faint:#B7BCC9;
  --line:#E7E3DA; --cream:#FBF8F3; --white:#FFFFFF;
  --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sh-md:0 10px 30px rgba(22,25,42,.10);
  --ease:cubic-bezier(.22,1,.36,1);
}
.auth *{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Figtree',system-ui,sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased}
.auth a{color:inherit;text-decoration:none}
.auth svg{display:block}
.auth .ic{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none}
.auth .ic.sm{width:16px;height:16px}
.wm{font-family:'Sora';font-weight:700;letter-spacing:-.03em}
.wm .ia{color:var(--violet);font-weight:800;margin-left:-.02em}
.wm.on .ia{color:var(--violet-l)}

.auth{display:flex;min-height:100vh}

/* ---- panel de marca ---- */
.brandside{flex:1.05;background:linear-gradient(155deg,#241047,#16192A 60%);color:#fff;position:relative;overflow:hidden;padding:46px 54px;display:flex;flex-direction:column}
.brandside .g1{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.4),transparent 64%);top:-160px;right:-120px}
.brandside .g2{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(248,106,44,.26),transparent 64%);bottom:-150px;left:-110px}
.brandside .top{position:relative;z-index:2}
.brandside .blk{display:flex;align-items:center;gap:11px}
.brandside .blk .wm{font-size:22px}
.brandside .mid{position:relative;z-index:2;margin:auto 0}
.brandside h1{font-family:'Sora';font-size:clamp(30px,3.4vw,42px);font-weight:800;line-height:1.1;max-width:15ch;letter-spacing:-.02em}
.brandside h1 .grad{background:linear-gradient(100deg,var(--violet-l),#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brandside .sub{color:#b7bcce;font-size:17px;margin-top:18px;max-width:40ch}
.feat{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.feat .it{display:flex;align-items:center;gap:13px}
.feat .it .ck{width:32px;height:32px;border-radius:9px;background:rgba(124,58,237,.24);color:var(--violet-l);display:grid;place-items:center;flex:none}
.feat .it .ck .ic{width:17px;height:17px}
.feat .it span{color:#dfe2ee;font-size:15.5px}
.brandside .foot{position:relative;z-index:2;color:#838aac;font-size:13px}

/* ---- lado del formulario ---- */
.formside{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 28px;background:var(--cream)}
.card{width:min(440px,100%);animation:rise .6s var(--ease)}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.card .mlogo{display:none;align-items:center;gap:10px;margin-bottom:26px}
.card .mlogo .wm{font-size:20px}
.card .back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--slate-soft);font-family:'Sora';font-weight:600;margin-bottom:22px;transition:.14s}
.card .back:hover{color:var(--ink)}
.card .back .ic{width:15px;height:15px}
.card h2{font-size:30px;font-weight:800;font-family:'Sora';letter-spacing:-.02em;color:var(--ink)}
.card .lead{color:var(--slate);margin-top:8px;font-size:15.5px}
.card .lead strong{color:var(--ink);font-weight:700}
.card .lead a{color:var(--orange);font-weight:600}

.auth form{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.auth [x-cloak]{display:none!important}
.step-pane{display:flex;flex-direction:column;gap:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld label{display:block;font-family:'Sora';font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink)}
.fld label .opt{color:var(--slate-soft);font-weight:500;font-family:'Figtree'}
.fld label .req{color:var(--orange)}
.inwrap{position:relative;display:flex;align-items:center}
.inwrap .lead-ic{position:absolute;left:13px;color:var(--slate-soft);pointer-events:none}
.inwrap .lead-ic .ic{width:18px;height:18px}
.in{width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);padding:13px 14px;font-family:inherit;font-size:15px;color:var(--ink);background:var(--white);outline:none;transition:.14s}
.in.has-ic{padding-left:42px}
.in::placeholder{color:var(--slate-faint)}
.in:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.in.ok{border-color:#8FCB97;background:#F4FAF4}
.in.bad{border-color:#E4A19B;background:#FDF5F4}
select.in{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A91A6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:17px;padding-right:40px}
.eye{position:absolute;right:8px;width:34px;height:34px;border:0;background:none;color:var(--slate-soft);display:grid;place-items:center;cursor:pointer;border-radius:8px}
.eye:hover{background:var(--cream);color:var(--ink)}
/* icono de validación a la derecha (campos sin ojo) */
.val-ic{position:absolute;right:13px;display:grid;place-items:center;pointer-events:none;transition:opacity .14s}
.val-ic .ic{width:18px;height:18px}
.val-ic.ok-ic{color:#54A45E}
.val-ic.bad-ic{color:var(--danger)}
.hint{font-size:12.5px;margin-top:6px;color:var(--slate-soft)}
.hint.bad{color:var(--danger)}
.hint.ok{color:#4F9D59;display:flex;align-items:center;gap:5px}
.hint.ok .ic{width:14px;height:14px}

.between{display:flex;align-items:center;justify-content:space-between;margin-top:-4px}
.check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--slate);cursor:pointer}
.check input{display:none}
.check .bx{width:19px;height:19px;border:1.6px solid var(--slate-faint);border-radius:6px;display:grid;place-items:center;flex:none;transition:.12s;background:#fff}
.check .bx .ic{width:13px;height:13px;color:#fff;opacity:0;stroke-width:3.2}
.check input:checked + .bx{background:var(--orange);border-color:var(--orange)}
.check input:checked + .bx .ic{opacity:1}
.link{font-size:13.5px;color:var(--orange);font-weight:600;font-family:'Sora'}

.btn-go{width:100%;border:0;border-radius:var(--r-md);background:var(--orange);color:#fff;font-family:'Sora';font-weight:700;font-size:16px;padding:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:.16s;box-shadow:0 8px 22px rgba(248,106,44,.3)}
.btn-go:hover{background:var(--orange-deep);transform:translateY(-2px);box-shadow:0 14px 30px rgba(248,106,44,.38)}
.btn-go:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-go .ic{width:18px;height:18px}
.btn-go .spin{width:18px;height:18px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-ghost{border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--white);font-family:'Sora';font-weight:600;font-size:15px;padding:13px 18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.14s;color:var(--slate)}
.btn-ghost:hover{border-color:var(--slate-faint);background:var(--cream);color:var(--ink)}
.btn-ghost .ic{width:16px;height:16px}

.divider{display:flex;align-items:center;gap:14px;color:var(--slate-soft);font-size:13px;margin:6px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.switch{text-align:center;font-size:14.5px;color:var(--slate);margin-top:22px}
.switch a{color:var(--orange);font-weight:700;font-family:'Sora'}
.terms{font-size:12.5px;color:var(--slate-soft);line-height:1.5}
.terms a{color:var(--slate);text-decoration:underline}
.muted-link{text-align:center;font-size:14px;color:var(--slate);margin-top:20px}
.muted-link a{color:var(--orange);font-weight:700;font-family:'Sora'}

/* ---- alertas (flash) ---- */
.alert{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-radius:var(--r-md);font-size:14px;margin-bottom:18px;line-height:1.45}
.alert .ic{width:18px;height:18px;margin-top:1px;flex:none}
.alert.err{background:#FBE9E7;border:1px solid #F3C9C3;color:#A53227}
.alert.ok{background:#E9F5EA;border:1px solid #C5E4C9;color:#2F7A3A}

/* ---- indicador de pasos (registro) ---- */
.steps{display:flex;align-items:center;gap:8px;margin:24px 0 4px}
.steps .stp{display:flex;align-items:center;gap:7px}
.steps .num{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-family:'Sora';font-size:12px;font-weight:700;background:#ECE7DE;color:var(--slate-soft);transition:.2s}
.steps .num .ic{width:13px;height:13px;stroke-width:3}
.steps .stp.on .num{background:linear-gradient(135deg,var(--orange),var(--orange-deep));color:#fff;box-shadow:0 4px 10px rgba(248,106,44,.32)}
.steps .lab{font-family:'Sora';font-size:12.5px;font-weight:600;color:var(--slate-soft)}
.steps .stp.on .lab{color:var(--orange-deep)}
.steps .bar{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.steps .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--orange-deep));transition:width .5s var(--ease)}

/* ---- medidor de fuerza de contraseña ---- */
.pw-meter{margin-top:10px}
.pw-meter .bars{display:flex;gap:5px}
.pw-meter .bars i{height:4px;flex:1;border-radius:3px;background:#ECE7DE;transition:.3s}
.pw-meter .bars i.f1{background:#E6857C}
.pw-meter .bars i.f2{background:#E8B45C}
.pw-meter .bars i.f3{background:#6FA8E0}
.pw-meter .bars i.f4{background:#5FB36C}
.pw-meter .lbl{font-size:12px;margin-top:6px;color:var(--slate-soft)}

/* ---- demo creds ---- */
.demo{margin-top:24px}
.demo summary{cursor:pointer;font-size:12.5px;color:var(--slate-soft);display:flex;align-items:center;gap:6px;list-style:none;user-select:none}
.demo summary::-webkit-details-marker{display:none}
.demo summary .ic{width:14px;height:14px;transition:.2s}
.demo[open] summary .ic{transform:rotate(90deg)}
.demo .box{margin-top:10px;padding:12px 14px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);font-size:12.5px;color:var(--slate);line-height:1.9}
.demo code{background:var(--cream);border:1px solid var(--line);padding:1px 6px;border-radius:6px;font-size:12px;color:var(--ink)}

@media(max-width:860px){
  .brandside{display:none}
  .card .mlogo{display:flex}
  .formside{padding:30px 22px}
  .card h2{font-size:26px}
}
@media(prefers-reduced-motion:reduce){.card{animation:none}}