/* ExtremePaq — Registro público v3. Misma familia del sitio (tokens de styles.css), superando al legado.
   Claves del rechazo v2, curadas aquí:
   · ALINEACIÓN: input y select comparten ALTURA FIJA (56px) → misma caja y misma línea base en toda fila,
     el label flotante es absoluto y NO altera la altura. El error reserva espacio → las filas no saltan.
   · Header/footer: los pone el chrome compartido (chrome.js). Aquí solo vive el formulario.
   · Sin hex quemado: todo sale de :root de styles.css. */

.reg-wrap{max-width:640px; margin-inline:auto}
.reg-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(22px,4vw,34px); box-shadow:var(--shadow-md)}
.reg-card:not(.hidden){animation:reg-in .28s ease both}
@keyframes reg-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

.reg-sec + .reg-sec{margin-top:26px; padding-top:26px; border-top:1px solid var(--line)}
.reg-sec__title{font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:1.12rem;
  display:inline-block; padding-bottom:5px;
  background-image:linear-gradient(var(--orange),var(--orange)); background-size:32px 3px;
  background-repeat:no-repeat; background-position:0 100%}
.reg-sec__sub{color:var(--muted); font-size:.92rem; line-height:1.5; margin:8px 0 18px}

/* Rejilla uniforme: hijos apilados con gap constante; filas de 2 columnas para pares. */
.reg-grid{display:grid; gap:16px}
.reg-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.reg-row--id{grid-template-columns:minmax(150px,190px) 1fr}
@media (max-width:520px){ .reg-row,.reg-row--id{grid-template-columns:1fr} }

/* ---- Campo (label flotante, caja de altura fija) ---- */
.fld{position:relative}
.fld input,.fld select{width:100%; height:56px; border:1.5px solid var(--line-strong); border-radius:12px;
  padding:22px 14px 8px; font-family:var(--font-body); font-size:1rem; color:var(--ink); background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease}
.fld select{padding-right:40px; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 24px, calc(100% - 15px) 24px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.fld input:focus,.fld select:focus{outline:none; border-color:var(--orange); box-shadow:var(--ring)}
.fld > label{position:absolute; left:14px; top:18px; color:var(--faint); font-size:1rem; pointer-events:none;
  transform-origin:left top; transition:transform .15s ease, color .15s ease}
/* Sube el label: inputs cuando tienen foco o contenido; los select SIEMPRE (muestran su opción debajo). */
.fld input:focus + label, .fld input:not(:placeholder-shown) + label{transform:translateY(-11px) scale(.74); color:var(--orange-deep)}
.fld select + label{transform:translateY(-11px) scale(.74); color:var(--muted)}
.fld select:focus + label{color:var(--orange-deep)}
/* El date input nunca dispara :placeholder-shown → su label flota SIEMPRE (como el select), para no solaparse
   con el texto de la fecha. La caja de fecha comparte la altura fija de la familia. */
.fld input[type=date] + label{transform:translateY(-11px) scale(.74); color:var(--muted)}
.fld input[type=date]:focus + label{color:var(--orange-deep)}
.fld input[type=date]{appearance:none}
.fld input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer; opacity:.6}
.fld__err{display:block; min-height:16px; margin-top:5px; color:var(--danger); font-size:.78rem; line-height:1.3}
.fld.error input, .fld.error select{border-color:var(--danger)}
.fld.error input:focus, .fld.error select:focus{box-shadow:var(--ring-danger)}
.fld.error input + label, .fld.error select + label{color:var(--danger)}
/* Semáforo de identidad (advisory): AVISO ámbar = número no cuadra pero NO bloquea; OK verde = formato correcto.
   Espejo de la app. El rojo (.error) sigue siendo el único que bloquea el submit. */
.fld.aviso .fld__err{color:#B45309}
.fld.aviso input, .fld.aviso select{border-color:#D97706}
.fld.aviso input:focus, .fld.aviso select:focus{box-shadow:0 0 0 3px rgba(217,119,6,.18)}
.fld.aviso input + label, .fld.aviso select + label{color:#B45309}
.fld.ok .fld__err{color:var(--ok)}
.fld.ok input, .fld.ok select{border-color:var(--ok)}
.fld.ok input:focus, .fld.ok select:focus{box-shadow:0 0 0 3px rgba(15,157,88,.18)}
.fld.ok input + label, .fld.ok select + label{color:var(--ok)}

/* Mensaje del PADRÓN DGII bajo la razón social: ámbar mientras busca / si el RNC no está en el padrón (avisa,
   NO bloquea); verde cuando la razón social se autocompletó del padrón. Espejo del semáforo de identidad. */
.reg-padron{display:block; margin-top:5px; font-size:.78rem; line-height:1.3}
.reg-padron:empty{margin-top:0}
.reg-padron.buscando{color:#B45309}
.reg-padron.aviso{color:#B45309}
.reg-padron.ok{color:var(--ok)}

.reg-banner{background:var(--orange-soft); color:var(--orange-deep); border-radius:12px; padding:.7em 1em;
  font-size:.9rem; font-weight:600; margin-bottom:16px}

/* ---- Medidor de contraseña (ancho completo, fuera de la fila para no romper alturas) ---- */
.reg-meter{margin-top:2px}
.reg-meter__bar{height:6px; background:var(--line); border-radius:4px; overflow:hidden}
.reg-meter__bar span{display:block; height:100%; width:0; border-radius:4px; transition:width .25s ease, background-color .25s ease}
.reg-meter__bar span.weak{background:var(--danger)} .reg-meter__bar span.ok{background:#F59E0B}
.reg-meter__bar span.good{background:#3AAE5A} .reg-meter__bar span.strong{background:var(--ok)}
.reg-meter__txt{font-size:.76rem; color:var(--muted); margin-top:5px}

/* ---- Términos: banner guía + caja con scroll-gate, chevron "hay más", progreso y aceptación grande ---- */
.reg-terms-banner{display:flex; align-items:flex-start; gap:10px; background:var(--orange-soft); color:var(--orange-deep);
  border:1px solid rgba(245,158,11,.35); border-radius:12px; padding:.8em 1em; font-size:.9rem; line-height:1.45; margin-bottom:12px}
.reg-terms-banner__ic{flex:0 0 auto; width:20px; height:20px; margin-top:1px}
.reg-terms-wrap{position:relative}
.reg-terms{max-height:240px; overflow-y:auto; border:1.5px solid var(--line-strong); border-radius:12px;
  padding:16px; background:var(--bg-cool); font-size:.9rem; line-height:1.65; color:var(--ink)}
.reg-terms:focus{outline:none; border-color:var(--orange); box-shadow:var(--ring)}
.reg-terms h2{font-size:1.05rem; margin:0 0 8px} .reg-terms h3{font-size:.95rem; color:var(--navy); margin:14px 0 4px}
.reg-terms p{margin:0 0 8px} .reg-terms ul,.reg-terms ol{margin:0 0 8px 1.2em}
/* Bloque-recompensa al final del contrato (verde suave). */
.reg-terms-reward{margin-top:12px; background:var(--ok-soft,#E9F7EE); color:var(--ok,#1E9E4A); border:1px solid rgba(30,158,74,.35);
  border-radius:10px; padding:.7em .9em; font-weight:600; font-size:.9rem}
/* Chevron pulsante "hay más abajo": flota al pie de la caja mientras no se llegue al final. */
.reg-terms-more{position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; pointer-events:none;
  transition:opacity .25s ease}
.reg-terms-more svg{width:30px; height:30px; color:#fff; background:var(--orange); border-radius:50%; padding:5px;
  box-shadow:0 4px 12px rgba(245,158,11,.5); animation:reg-bounce 1.2s ease-in-out infinite}
.reg-terms-more.hidden{opacity:0}
@keyframes reg-bounce{0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)}}
.reg-terms-progress{height:6px; background:var(--line); border-radius:4px; margin-top:10px; overflow:hidden}
.reg-terms-progress span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--orange),var(--orange-deep)); transition:width .12s linear}
.reg-terms-progress.done span{background:var(--ok,#1E9E4A)}
.reg-terms-lbl{font-size:.82rem; color:var(--muted); margin-top:6px; font-weight:600}
.reg-terms-lbl.done{color:var(--ok,#1E9E4A)}
/* Aceptación como BOTÓN grande de ancho completo (scroll-gate intacto: la cáscara del checkbox). */
.reg-accept{display:flex; align-items:center; gap:12px; width:100%; margin-top:16px; padding:14px 16px;
  border:2px solid var(--line-strong); border-radius:14px; background:#fff; cursor:pointer; user-select:none;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease}
.reg-accept__cb{position:absolute; opacity:0; width:1px; height:1px}
.reg-accept__box{flex:0 0 auto; width:26px; height:26px; border-radius:8px; border:2px solid var(--line-strong);
  display:grid; place-items:center; background:#fff; transition:all .15s ease}
.reg-accept__box svg{width:16px; height:16px; color:#fff; opacity:0; transition:opacity .12s ease}
.reg-accept__txt{font-weight:700; font-size:.98rem; color:var(--navy); line-height:1.3}
.reg-accept.is-locked{opacity:.6; cursor:not-allowed; background:var(--bg-cool)}
.reg-accept:not(.is-locked):hover{border-color:var(--orange); box-shadow:var(--ring)}
.reg-accept.is-checked{border-color:var(--orange); background:var(--orange-soft)}
.reg-accept.is-checked .reg-accept__box{background:var(--orange); border-color:var(--orange)}
.reg-accept.is-checked .reg-accept__box svg{opacity:1}
.reg-accept__cb:focus-visible + .reg-accept__box{box-shadow:var(--ring)}
/* Resumen de errores accionable arriba del botón: cada ítem lleva a su campo. */
.reg-resumen{background:#FDECEA; color:#B23127; border:1px solid #F5C6C0; border-radius:12px; padding:.8em 1em; font-size:.9rem; margin-top:16px}
.reg-resumen b{display:block; margin-bottom:6px}
.reg-resumen ul{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.reg-resumen li button{font:inherit; cursor:pointer; background:#fff; color:#B23127; border:1px solid #F5C6C0; border-radius:999px; padding:4px 12px; font-weight:600}
.reg-resumen li button:hover{background:#B23127; color:#fff; border-color:#B23127}
.reg-submit:disabled{opacity:.55; cursor:not-allowed}
@media (prefers-reduced-motion:reduce){ .reg-terms-more svg{animation:none} }

.reg-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.reg-turnstile{display:flex; justify-content:center; margin-top:18px}
.reg-turnstile:empty{margin-top:0}
.reg-alert{background:#FDECEA; color:#B23127; border:1px solid #F5C6C0; border-radius:12px; padding:.75em 1em; font-size:.9rem; margin-top:16px}
.reg-submit{margin-top:22px}
.reg-foot{text-align:center; color:var(--muted); font-size:.92rem; margin-top:16px}
.reg-foot a{color:var(--orange-deep); font-weight:700}

/* ---- Aviso "registro cerrado" ---- */
.reg-notice{max-width:560px; margin-inline:auto; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:32px; text-align:center; box-shadow:var(--shadow-sm)}
.reg-notice h2{color:var(--navy)} .reg-notice p{color:var(--muted); margin:10px 0 18px}

/* ---- OTP ---- */
.reg-otp{display:flex; justify-content:center; margin:6px 0 4px}
.reg-otp input{width:260px; text-align:center; letter-spacing:.42em; font-family:var(--font-display);
  font-weight:800; font-size:1.9rem; color:var(--navy); border:1.5px solid var(--line-strong);
  border-radius:14px; padding:.5em .3em}
.reg-otp input:focus{outline:none; border-color:var(--orange); box-shadow:var(--ring)}
.reg-resend{display:block; margin:12px auto 0; background:none; border:0; color:var(--orange-deep);
  font-family:var(--font-display); font-weight:700; font-size:.92rem; cursor:pointer}

/* ---- Listo ---- */
.reg-done{text-align:center}
.reg-done__ic{width:66px; height:66px; margin:0 auto 10px; border-radius:50%; background:var(--orange);
  color:var(--navy); display:grid; place-items:center}
.reg-done__ic svg{width:32px; height:32px}
/* Tarjeta de dirección de envío en la pantalla de éxito: reusa .miami__card de la home (mismo look). */
.done-addr{margin:0 auto 20px; max-width:520px; text-align:left}
.done-addr .miami__card{margin:0}
.done-addr-fallback{background:var(--navy); color:#C4D0DE; border-radius:var(--radius-lg); padding:20px 22px; font-size:.95rem; line-height:1.5}
.done-addr-fallback a{color:var(--orange); font-weight:600}
/* Par de acciones: "Mi Cuenta" (outline) + "Volver al inicio" (filled). Centradas, envuelven en móvil. */
.reg-done__actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:4px}

.hidden{display:none !important}
@media (prefers-reduced-motion:reduce){ .reg-card{animation:none} }