/* css/registro-ayuda.css — Ayudas del registro con código por email (js/registro-ayuda.js).
   Se usa en registro.html y en el popup de registro del carrito. Móvil primero: toques de 44 px o más, texto de 12 px o más. */

/* El contenedor no ocupa lugar propio en la grilla del formulario. */
.px-ayuda-host { display: contents; }

/* ── Sugerencia "¿Quisiste decir nombre@gmail.com?" ─────────────────────── */
.px-email-sugerencia-caja { margin: -4px 0 0; }
.px-email-sugerencia-caja[hidden] { display: none !important; }

.px-email-sugerencia {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.1);
  color: #fde7a6;
  font: 600 0.98rem/1.3 "Rajdhani", sans-serif;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.px-email-sugerencia strong { color: #fff3cf; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.px-email-sugerencia:hover,
.px-email-sugerencia:focus-visible { border-color: rgba(251, 191, 36, 0.8); background: rgba(251, 191, 36, 0.16); outline: none; }

/* Aviso de Microsoft bajo el email (paso de datos): informa, no bloquea. */
.px-email-aviso {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.1);
}
.px-email-aviso-texto { margin: 0; color: #fde7a6; font: 600 0.98rem/1.35 "Rajdhani", sans-serif; }
.px-email-aviso .google-btn { max-width: none; min-height: 46px; }

/* ── "¿No te llega el código?" ──────────────────────────────────────────── */
.px-ayuda-codigo {
  display: grid;
  gap: 10px;
  margin-top: 6px;
  padding: 14px;
  border: 1px solid rgba(127, 91, 255, 0.4);
  border-radius: 14px;
  background: rgba(127, 91, 255, 0.1);
  color: #d8e2fb;
  font: 500 1rem/1.4 "Rajdhani", sans-serif;
  text-align: left;
}
.px-ayuda-codigo[hidden] { display: none !important; }

.px-ayuda-titulo { margin: 0; color: #f2f6ff; font: 700 1.05rem "Oxanium", sans-serif; }
.px-ayuda-texto { margin: 0; color: #c7cede; overflow-wrap: anywhere; }
.px-ayuda-texto[hidden] { display: none !important; }
.px-ayuda-lista { margin: 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.px-ayuda-lista strong { color: #fff; }
.px-ayuda-secundario { font-size: 0.95rem; color: #aab6d3; }

.px-ayuda-typo {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.1);
  color: #fde7a6;
  font: 600 0.98rem/1.3 "Rajdhani", sans-serif;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.px-ayuda-typo[hidden] { display: none !important; }
.px-ayuda-typo strong { color: #fff3cf; }

.px-ayuda-codigo .google-btn { max-width: none; min-height: 46px; }
.px-ayuda-codigo .google-btn[hidden] { display: none !important; }

.px-ayuda-otro {
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(127, 91, 255, 0.5);
  border-radius: 13px;
  background: transparent;
  color: #d0d8f8;
  font: 700 0.95rem "Oxanium", sans-serif;
  cursor: pointer;
}
.px-ayuda-otro:hover,
.px-ayuda-otro:focus-visible { border-color: rgba(127, 91, 255, 0.8); background: rgba(127, 91, 255, 0.14); outline: none; }