/* ============================================================
   whatsventa — onboarding (registro en 3 pasos) e ingreso
   ============================================================ */

.ob {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  min-height: calc(100vh - 100px);
}

.ob__form {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 40px var(--wv-gutter) 70px;
}
.ob__caja { width: 100%; max-width: 520px; }

.ob__dots { display: flex; gap: 7px; margin-bottom: 22px; }
.ob__dots span {
  width: 10px; height: 10px;
  border-radius: 99px;
  background: var(--wv-border);
  transition: all .2s ease-out;
}
.ob__dots span.on   { width: 34px; background: var(--wv-primary); }
.ob__dots span.hecho { background: var(--wv-primary); }

.ob__titulo {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 10px 0 12px;
}
.ob__body { font-size: 16px; line-height: 1.6; color: var(--wv-muted); margin-bottom: 28px; }

.ob__campos { display: block; }
.ob__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

.ob__slug {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--wv-r-sm);
  background: var(--wv-indigo-50);
  color: var(--wv-indigo-700);
  font-size: 13.5px;
}
.ob__slug b { font-weight: 800; }

.ob__nota {
  display: flex;
  gap: 13px;
  padding: 18px;
  border-radius: var(--wv-r-lg);
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  margin-top: 6px;
}
.ob__nota .mi { color: #047857; flex: none; }
.ob__nota strong { display: block; font-size: 14px; color: #065F46; margin-bottom: 9px; }
.ob__nota pre {
  margin: 0;
  font-family: var(--wv-mono);
  font-size: 12px;
  line-height: 1.7;
  color: #065F46;
  white-space: pre-wrap;
  word-break: break-word;
}
.ob__nota pre b { font-weight: 800; }

.ob__plantillas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ob__plantilla {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  background: var(--wv-surface);
  border: 1px solid var(--wv-border);
  box-shadow: 0 2px 10px -4px rgba(79, 70, 229, .14);
  cursor: pointer;
  transition: all .18s ease-out;
}
.ob__plantilla:hover { border-color: var(--wv-indigo-200); transform: translateY(-2px); }
.ob__plantilla.on {
  border: 2px solid var(--wv-primary);
  box-shadow: 0 10px 24px -10px rgba(79, 70, 229, .45);
}
.ob__plantilla input { position: absolute; opacity: 0; width: 0; height: 0; }
.ob__swatch { height: 54px; border-radius: 10px; }
.ob__plantilla strong { font-size: 14.5px; font-weight: 700; }
.ob__plantilla > span:last-child { font-size: 12.5px; color: var(--wv-muted); }

.ob__acciones { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.ob__acciones .wv-btn { flex: 1; min-width: 150px; }
.ob__pie { margin-top: 22px; font-size: 14px; color: var(--wv-muted); text-align: center; }

/* ── Columna de preview ────────────────────────────────────── */
.ob__preview {
  position: relative;
  display: grid;
  place-items: center;
  padding: 40px var(--wv-gutter);
  background: linear-gradient(160deg, #EEF2FF, #F5F3FF);
  overflow: hidden;
}
.ob__blob {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: linear-gradient(135deg, #818CF8, #C4B5FD);
  filter: blur(110px);
  opacity: .5;
  pointer-events: none;
}
.ob__telefono {
  position: relative;
  z-index: 1;
  width: 290px;
  padding: 9px;
  border-radius: 38px;
  background: var(--wv-ink);
  box-shadow: var(--wv-sh-phone);
  transform: perspective(1100px) rotateY(-10deg) rotateX(4deg);
  transition: all .3s ease-out;
}
.ob__pantalla {
  border-radius: 30px;
  overflow: hidden;
  background: var(--p-bg, #F8FAFC);
  height: 470px;
  display: flex;
  flex-direction: column;
}
.ob__head {
  padding: 22px 18px;
  background: linear-gradient(135deg, var(--p-accent, #4F46E5), var(--p-accent2, #7C3AED));
  color: #fff;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.02em;
  transition: background .3s ease-out;
  word-break: break-word;
}
.ob__cuerpo { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; align-content: start; }
.ob__tile {
  height: 96px;
  border-radius: 12px;
  background: repeating-linear-gradient(135deg, rgba(15, 23, 42, .07) 0 8px, transparent 8px 16px), #fff;
  border: 1px solid rgba(15, 23, 42, .06);
}

/* ── Ingreso / recuperación ────────────────────────────────── */
.auth {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 180px);
  padding: 40px var(--wv-gutter) 80px;
}
.auth__caja {
  width: 100%;
  max-width: 440px;
  padding: 34px;
  border-radius: var(--wv-r-xl);
  background: var(--wv-surface);
  border: 1px solid var(--wv-border-soft);
  box-shadow: 0 22px 50px -24px rgba(79, 70, 229, .35);
}
.auth__caja h1 { font-size: 27px; font-weight: 800; letter-spacing: -.025em; margin-bottom: 8px; }
.auth__caja > p { font-size: 14.5px; color: var(--wv-muted); margin-bottom: 26px; line-height: 1.55; }
.auth__pie { margin-top: 22px; font-size: 14px; color: var(--wv-muted); text-align: center; }
.auth__demo {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--wv-r-md);
  background: var(--wv-indigo-50);
  border: 1px solid var(--wv-indigo-100);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--wv-indigo-700);
}
.auth__demo strong { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.auth__demo code { font-family: var(--wv-mono); background: rgba(255, 255, 255, .7); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 880px) {
  .ob { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .ob__form { justify-content: center; padding: 28px var(--wv-gutter) 44px; }
  /* El formulario primero. El teléfono mide 438px: puesto arriba, quien
     abre el registro en el celular ve media pantalla de maqueta vacía y
     tiene que adivinar que hay que bajar para escribir algo. */
  .ob__preview { order: 1; padding: 8px var(--wv-gutter) 40px; }
  .ob__telefono { width: 240px; transform: none; }
  .ob__pantalla { height: 360px; }
  .ob__acciones .wv-btn { min-width: 0; }
}

/* En pantallas cortas la maqueta sobra del todo: el link en vivo y el
   ejemplo de pedido, que van dentro del formulario, dicen más. */
@media (max-width: 560px) {
  .ob__preview { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   REGISTRO — lo que se añadió al pasar a dos pasos
   ══════════════════════════════════════════════════════════════ */

/* La marca, porque durante el registro se oculta la cabecera:
   siete enlaces de salida en medio de un formulario sobran, pero
   tiene que haber una forma de volver. */
.ob__marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  text-decoration: none;
}

/* Qué se está tomando, a la vista desde el primer campo. Antes no
   se mencionaba el plan ni la prueba en ningún paso. */
.ob__plan {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  padding: 13px 15px;
  border-radius: var(--wv-r-lg, 16px);
  background: var(--wv-indigo-50);
  border: 1px solid var(--wv-indigo-100);
}
.ob__plan .mi { color: var(--wv-primary); flex: none; }
.ob__plan strong {
  display: block;
  font-size: 14.5px;
  color: var(--wv-indigo-700);
  letter-spacing: -.01em;
}
.ob__plan span { font-size: 12.5px; color: var(--wv-muted); line-height: 1.5; }

/* En el paso 2, recordar qué negocio se está creando — y poder volver. */
.ob__resumen {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: var(--wv-r-md, 12px);
  background: var(--wv-bg);
  border: 1px solid var(--wv-border-soft);
}
.ob__resumen .mi { color: var(--wv-slate-400); flex: none; }
.ob__resumen > div { flex: 1; min-width: 0; }
.ob__resumen strong {
  display: block;
  font-size: 14px;
  color: var(--wv-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ob__resumen .wv-mono { display: block; font-size: 12px; color: var(--wv-muted); }

/* El número es el dato que más vale confirmar: ahí caen los pedidos. */
.ob__resumen-wpp {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--wv-success);
  font-weight: 600;
}
.ob__resumen-wpp .mi { color: inherit; }
.ob__cambiar {
  flex: none;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wv-primary);
  text-decoration: none;
}
.ob__cambiar:hover { text-decoration: underline; }

/* El aviso bajo el teléfono: explica por qué ya no se elige paleta aquí. */
.ob__preview-pie {
  position: relative;
  z-index: 1;
  margin: 22px auto 0;
  max-width: 260px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--wv-muted);
}

@media (max-width: 900px) {
  .ob__marca { margin-bottom: 16px; }
  .ob__plan { margin-bottom: 18px; padding: 11px 13px; }
  .ob__preview-pie { display: none; }
}

/* El país va pegado al número: lo único que hace es poner el indicativo. */
.ob__telefono-fila { display: flex; gap: 8px; }
.ob__pais { flex: 0 0 106px; padding-right: 6px; }
.ob__telefono-fila input { flex: 1; min-width: 0; }

/* ── «Ya estás dentro, solo falta el catálogo» ──────────────────
   Quien llega al registro ya logueado se quedó sin catálogo. Sin
   decírselo, vuelve a intentar registrarse con el correo que ya
   tiene y se mete en un bucle del que no sale. */
.ob__yaestas {
  display: flex;
  gap: 11px;
  margin-bottom: 14px;
  padding: 13px 15px;
  border-radius: var(--wv-r-md, 12px);
  background: color-mix(in srgb, var(--wv-success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--wv-success) 28%, transparent);
}
.ob__yaestas .mi { color: var(--wv-success); flex: none; }
.ob__yaestas strong { display: block; font-size: 14px; }
.ob__yaestas span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wv-muted);
}
.ob__yaestas a { color: var(--wv-primary); font-weight: 600; }

/* El atajo a entrar con el correo ya escrito. */
.wv-error__ir {
  display: inline-block;
  margin-top: 3px;
  font-weight: 700;
  text-decoration: underline;
}

/* Tienda o restaurante: dos tarjetas que se marcan. */
.ob__tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob__tipo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1.5px solid var(--wv-border);
  border-radius: var(--wv-r-md);
  background: var(--wv-surface);
  cursor: pointer;
}
.ob__tipo input { position: absolute; opacity: 0; pointer-events: none; }
.ob__tipo .mi { color: var(--wv-muted); }
.ob__tipo strong { display: block; font-size: 14px; }
.ob__tipo small { display: block; font-size: 12px; color: var(--wv-muted); line-height: 1.35; margin-top: 2px; }
.ob__tipo:has(input:checked) { border-color: var(--wv-primary); background: var(--wv-indigo-50); }
.ob__tipo:has(input:checked) .mi { color: var(--wv-primary); }
.ob__tipo:has(input:focus-visible) { outline: 2px solid var(--wv-primary); outline-offset: 2px; }
@media (max-width: 380px) { .ob__tipos { grid-template-columns: 1fr; } }