/* ============================================================
   REGISTRO (/portal, /register) — ported from new-landing-page.html
   (viewSignup + viewVerify). Classes prefixed `reg-`, scoped `.reg-root`
   (avoids collision with radiografía's `rg-`/`rg2-` and Bootstrap/MudBlazor).
   Light theme white card; runs inside AccountLayout (no drawer/appbar).
   ============================================================ */

.reg-root {
  --card:#ffffff; --ink:#0f172a; --ink-soft:#64748b;
  --blue:#155eef; --blue-dark:#0f172a; --blue-hover:#1147c4; --blue-soft:#e9f0ff;
  --red:#ef4444; --line:#e6e9f2; --lock:#aeb8cc;
  --radius:22px; --shadow:0 14px 40px rgba(15,23,42,.07);
  --display:'Space Grotesk',system-ui,sans-serif; --body:'Sora',system-ui,sans-serif;

  font-family:var(--body);
  color:var(--ink);
  background:#f8fafc;
  /* AccountLayout wraps @Body in `.sign-in-desktop` (display:flex; height:100vh).
     Fill that flex parent (grow on main axis, stretch on cross axis) so the panel
     can center; `.reg-panel{margin:auto}` centers both axes and still allows the
     tall signup form to scroll (unlike align/justify-center which would clip). */
  flex:1 1 auto;
  align-self:stretch;
  width:100%;
  height:100%;
  min-height:100vh;
  overflow-y:auto;
  display:flex;
  padding:24px 16px;
  -webkit-font-smoothing:antialiased;
}
.reg-root *{box-sizing:border-box}
.reg-root button{font-family:inherit;cursor:pointer;border:none}
.reg-root a{text-decoration:none}

/* Column shell (stepper + panel) centered inside the flex root. */
.reg-shell{margin:auto;width:100%;max-width:520px;display:flex;flex-direction:column;align-items:stretch}

/* Progress stepper (Inicio · Tus datos · Verificación) */
.reg-steps{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:0 auto 24px;padding:0}
.reg-steps .reg-step{list-style:none;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--lock);font-weight:600;padding:5px 4px}
.reg-steps .reg-step-n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#dfe5f3;color:#fff;font-size:12px;flex:none}
.reg-steps .reg-step.done .reg-step-n{background:#17a35a}
.reg-steps .reg-step.active{color:var(--ink)}
.reg-steps .reg-step.active .reg-step-n{background:var(--blue)}
.reg-steps .reg-step-sep{list-style:none;display:flex;align-items:center}
.reg-steps .reg-step-bar{width:18px;height:2px;background:#dfe5f3;border-radius:2px;display:block}

.reg-panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:34px;width:100%;margin:0;text-align:left}
.reg-logo{display:block;text-align:center;margin-bottom:20px}
.reg-logo img{height:46px;width:auto}
.reg-root .reg-panel h2{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.01em;color:var(--ink);margin:0}
.reg-lead{color:var(--ink-soft);margin-top:8px;font-size:15px}

.reg-field{margin-top:20px}
.reg-root .reg-field label{display:block;font-weight:600;font-size:14px;margin-bottom:7px;color:var(--ink)}
.reg-root .reg-field input{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;font-family:inherit;color:var(--ink);background:#fbfcff}
.reg-root .reg-field input:focus{border-color:var(--blue);outline:none}

.reg-consent{display:flex;gap:11px;align-items:flex-start;margin-top:16px;font-size:13px;color:var(--ink-soft)}
.reg-root .reg-consent input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--blue)}
/* keep the consent text + links flowing inline (a global `a{display:block}` leaks otherwise) */
.reg-root .reg-consent span, .reg-root .reg-consent a{display:inline}
.reg-consent a{color:var(--blue);text-decoration:none;font-weight:600}
.reg-consent a:hover{text-decoration:underline}
.reg-privacy{font-size:12px;color:var(--lock);margin-top:16px;text-align:center}

.reg-row2{display:flex;gap:10px;margin-top:20px}
.reg-countrybox{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;background:#fbfcff;flex:0 0 110px}
.reg-root .reg-countrybox select{border:none;background:none;font-size:15px;font-family:inherit;color:var(--ink);padding:13px 0;width:100%;appearance:none;-webkit-appearance:none;cursor:pointer}
.reg-root .reg-countrybox select:focus{outline:none}
.reg-root .reg-row2 input{flex:1;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;font-family:inherit;color:var(--ink);background:#fbfcff;margin:0}
.reg-root .reg-row2 input:focus{border-color:var(--blue);outline:none}

.reg-pwdwrap{position:relative}
.reg-root .reg-pwdwrap input{padding-right:48px}
.reg-pwdtoggle{position:absolute;right:13px;bottom:13px;background:none;border:none;color:var(--ink-soft);font-size:18px;padding:4px;line-height:1;cursor:pointer}
.reg-pwdtoggle:hover{color:var(--ink)}
.reg-hint{font-size:12px;color:var(--ink-soft);margin-top:6px}

.reg-cta{background:var(--blue);color:#fff;font-weight:600;font-size:16px;padding:15px 26px;border-radius:14px;transition:background .18s,transform .18s;width:100%;border:none;font-family:inherit}
.reg-cta:hover{background:var(--blue-hover);transform:translateY(-1px)}
.reg-cta:disabled{opacity:.5;cursor:not-allowed;transform:none}

.reg-login-link{text-align:center;margin-top:18px;font-size:14px;color:var(--ink-soft)}
.reg-login-link a{color:var(--blue);font-weight:700}
.reg-login-link a:hover{text-decoration:underline}

/* ── OTP verify screen ── */
.reg-otp-icon{width:64px;height:64px;border-radius:18px;background:var(--blue-soft);display:grid;place-items:center;margin:0 auto 18px}
.reg-otp-icon svg{width:30px;height:30px;stroke:var(--blue)}
.reg-otp-channels{display:flex;gap:10px;justify-content:center;margin:18px 0 4px;flex-wrap:wrap}
.reg-otp-chip{display:inline-flex;align-items:center;gap:6px;background:var(--blue-soft);color:var(--blue-dark);font-weight:600;font-size:12.5px;padding:7px 13px;border-radius:999px}
.reg-otp-row{display:flex;gap:10px;justify-content:center;margin:26px 0 6px}
.reg-root .reg-otp-row input{width:48px;height:58px;text-align:center;font-family:var(--display);font-weight:700;font-size:24px;border:1.5px solid var(--line);border-radius:12px;color:var(--ink);background:#fbfcff;padding:0}
.reg-root .reg-otp-row input:focus{border-color:var(--blue);outline:none}
.reg-otp-err{color:var(--red);font-size:13px;font-weight:600;text-align:center;margin-top:10px;min-height:18px}
.reg-otp-resend{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:18px}
.reg-otp-resend button{color:var(--blue);font-weight:700;background:none;text-decoration:underline;border:none;font-family:inherit;font-size:13px}
.reg-otp-resend button:disabled{color:var(--lock);text-decoration:none;cursor:default}

/* ── Topbar (logo centrado sobre el stepper, como el mockup) ── */
.reg-topbar{display:flex;align-items:center;justify-content:center;margin-bottom:26px}
.reg-topbar img{height:64px;width:auto;display:block}

/* ── Footer de soporte (¿Necesitas ayuda? + legal + copyright, port de .support) ── */
.reg-support{margin:40px auto 0;padding-top:24px;border-top:1px solid var(--line);text-align:center;max-width:520px;width:100%}
.reg-root .reg-support h4{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);margin:0}
.reg-root .reg-support p{color:var(--ink-soft);font-size:13px;margin:4px 0 0}
.reg-support-icons{display:flex;justify-content:center;gap:28px;margin-top:18px}
.reg-root .reg-support-icons a{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink-soft);font-size:12px;font-weight:600;text-decoration:none}
.reg-support-circle{width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center}
.reg-support-circle svg{width:20px;height:20px}
.reg-support-legal{margin-top:22px;font-size:12.5px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.reg-root .reg-support-legal a{color:var(--blue);text-decoration:none;font-weight:600;display:inline}
.reg-root .reg-support-legal a:hover{text-decoration:underline}
.reg-support-legal .reg-dot{color:var(--lock)}
.reg-copyright{font-size:11.5px;color:var(--lock);margin-top:14px;line-height:1.6;text-align:center;padding-bottom:8px}

/* ── Burbujas flotantes WhatsApp / Email (port de .float-bubbles) ── */
.reg-bubbles{position:fixed;bottom:24px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:80}
.reg-fbubble{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;text-decoration:none;box-shadow:0 4px 16px rgba(15,23,42,.22);transition:transform .18s,box-shadow .18s}
.reg-fbubble:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(15,23,42,.28)}
.reg-fbubble svg{width:22px;height:22px}
.reg-fbubble.reg-fb-wa{background:#25d366}
.reg-fbubble.reg-fb-email{background:#155eef}

@media(max-width:520px){ .reg-panel{padding:24px 18px} }
@media(max-width:380px){ .reg-root .reg-otp-row input{width:40px;height:50px;font-size:20px} .reg-otp-row{gap:7px} }