/* ================================
   Página de registro público (/registrar-negocio)
   Hoja propia: hereda variables de tokens.css. NO depende de styles.css
   (que es exclusivo del landing). Define acá los pocos componentes que usa.
   ================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans, system-ui, sans-serif);
  color: var(--text-default, #2A211C);
  background: var(--bg-page, #FFF8F3);
  line-height: var(--lh-normal, 1.5);
}

#reg-app {
  max-width: 520px;
  margin: 0 auto;
  padding: var(--space-4, 1rem);
}

h1 {
  font-size: var(--fs-xl, 1.4rem);
  color: var(--text-strong, #2A211C);
  margin: var(--space-3, 0.75rem) 0 var(--space-2, 0.5rem);
}

/* Header: logo a la izquierda, salida a la derecha (alineados en una fila) */
.reg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem) 0 var(--space-2, 0.5rem);
}

.reg-back {
  text-decoration: none;
  color: var(--color-primary, #E8602C);
  font-weight: var(--fw-semibold, 600);
  font-size: var(--fs-sm, 0.875rem);
  white-space: nowrap;
}

.reg-back:hover { text-decoration: underline; }

/* Barra de progreso del wizard (Tipo → Identidad → Ubicación → Contacto → Plan) */
.reg-progress {
  margin: var(--space-2, 0.5rem) 0 var(--space-4, 1.25rem);
}

.reg-progress__track {
  height: 6px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-primary-soft, #FFF1E8);
  overflow: hidden;
}

.reg-progress__fill {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-primary, #E8602C);
  transition: width 0.25s ease;
}

.reg-progress__caption {
  margin-top: 6px;
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--text-muted, #6b7280);
}

.reg-sub {
  font-size: var(--fs-sm, 0.875rem);
  color: var(--text-muted, #6b7280);
  margin-bottom: var(--space-4, 1.25rem);
}

/* Campos */
.field__label {
  display: block;
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--text-strong, #2A211C);
  margin: var(--space-3, 0.75rem) 0 4px;
}

.field__input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--border-default, #E2D3C6);
  border-radius: var(--radius-full, 9999px);
  font-family: inherit;
  font-size: var(--fs-base, 1rem);
  color: var(--text-strong, #2A211C);
  background: var(--bg-surface, #fff);
  appearance: none;
  -webkit-appearance: none;
}

.field__input:focus {
  outline: none;
  border-color: var(--color-primary, #E8602C);
  box-shadow: 0 0 0 3px var(--color-primary-soft, #FFF1E8);
}

/* Texto de ayuda debajo de un campo */
.field__hint {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--text-muted, #6b7280);
  margin-top: 4px;
}

.field__hint--ok { color: var(--color-success, #1F8A5B); font-weight: var(--fw-semibold, 600); }
.field__hint--warn { color: var(--color-danger, #ef4444); }

/* Teléfono: prefijo fijo +56 pegado al input */
.phone-field {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
  border: 1.5px solid var(--border-default, #E2D3C6);
}

.phone-field__prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  border: none;
  border-right: 1.5px solid var(--border-default, #E2D3C6);
  border-radius: 0;
  background: var(--bg-page, #FFF8F3);
  color: var(--text-muted, #6b7280);
  font-weight: var(--fw-semibold, 600);
  font-size: var(--fs-base, 1rem);
  white-space: nowrap;
}

/* The input inside phone-field inherits the wrapper's pill shape via overflow:hidden */
.phone-field .phone-field__input {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Focus ring lives on the wrapper (border is on wrapper, not input) */
.phone-field:focus-within {
  border-color: var(--color-primary, #E8602C);
  box-shadow: 0 0 0 3px var(--color-primary-soft, #FFF1E8);
}

.phone-field .phone-field__input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.phone-field__input.phone-field__input--ok {
  border-color: var(--color-success, #1F8A5B);
}

select.field__input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
  cursor: pointer;
}

/* Botones */
.btn {
  box-sizing: border-box;
  padding: 0.6rem 1.1rem;
  font-weight: var(--fw-semibold, 600);
  border-radius: var(--radius-md, 10px);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-base, 1rem);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background 0.15s, opacity 0.15s;
}

.btn:disabled { opacity: 0.6; cursor: default; }

.btn--primary {
  background: var(--color-primary, #E8602C);
  color: var(--text-on-primary, #fff);
  margin-top: var(--space-3, 0.75rem);
  width: 100%;
}

.btn--primary:hover:not(:disabled) {
  background: var(--color-primary-hover, #D2521F);
}

/* Acción comercial (venta): naranjo. Mismo layout full-width que primary. */
.btn--sell {
  background: var(--color-primary, #E8602C);
  color: var(--text-on-primary, #fff);
  margin-top: var(--space-3, 0.75rem);
  width: 100%;
}

.btn--sell:hover:not(:disabled) {
  background: var(--color-primary-hover, #D2521F);
}

/* Botón secundario (volver atrás dentro del wizard): contorno, sin relleno. */
.btn--ghost {
  background: transparent;
  color: var(--color-primary, #E8602C);
  border: 1.5px solid var(--border-default, #E2D3C6);
}

.btn--ghost:hover:not(:disabled) {
  border-color: var(--color-primary, #E8602C);
  background: var(--color-primary-soft, #FFF1E8);
}

/* Fila de navegación de los sub-pasos: Atrás (auto) + Continuar (ocupa el resto). */
.reg-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-4, 1.25rem);
}

.reg-nav .btn {
  margin-top: 0;
  width: auto;
}

.reg-nav .btn--sell,
.reg-nav .btn--primary {
  flex: 1;
}

/* Mensajes de estado */
.reg-msg {
  margin-top: var(--space-3, 0.75rem);
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-danger, #ef4444);
  min-height: 1.25rem;
}

.reg-ok {
  margin-top: var(--space-4, 1.25rem);
  padding: var(--space-4, 1.25rem);
  background: var(--color-success-soft, #dcfce7);
  border-radius: var(--radius-lg, 14px);
  color: var(--color-success, #1F8A5B);
  font-weight: var(--fw-semibold, 600);
  font-size: var(--fs-base, 1rem);
}

/* ─── Wizard: pasos y pregunta ─── */
.reg-q {
  font-size: var(--fs-lg, 1.15rem);
  color: var(--text-strong, #2A211C);
  margin: var(--space-3, 0.75rem) 0 var(--space-3, 0.75rem);
  font-weight: var(--fw-semibold, 600);
}

/* ─── Paso 1: tarjetas de vertical (comida / retail / servicios) ─── */
.macro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3, 0.75rem);
}

.macro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-4, 1.25rem) var(--space-2, 0.5rem);
  border: 2px solid var(--border-default, #E2D3C6);
  border-radius: var(--radius-lg, 14px);
  background: var(--bg-surface, #fff);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.macro-card:hover {
  border-color: var(--color-primary, #E8602C);
  box-shadow: 0 2px 8px rgba(232, 96, 44, 0.12);
}

.macro-card:active { transform: scale(0.98); }

.macro-card--active {
  border-color: var(--color-primary, #E8602C);
  box-shadow: 0 0 0 3px var(--color-primary-soft, #FFF1E8);
}

.macro-card__icon { font-size: 2rem; line-height: 1; }

.macro-card__label {
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--text-strong, #2A211C);
}

@media (max-width: 420px) {
  .macro-card { padding: var(--space-3, 0.75rem) var(--space-1, 0.25rem); }
  .macro-card__icon { font-size: 1.6rem; }
}

/* ─── Paso 2: volver + badge del vertical elegido ─── */
.reg-back-step {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-primary, #E8602C);
  font-weight: var(--fw-semibold, 600);
  font-size: var(--fs-sm, 0.875rem);
  font-family: inherit;
  margin-top: var(--space-3, 0.75rem);
}

.macro-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-primary-soft, #FFF1E8);
  color: var(--color-primary, #E8602C);
  font-weight: var(--fw-semibold, 600);
  font-size: var(--fs-sm, 0.875rem);
}

/* ─── Paso 3: tarjetas de plan ─── */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-3, 0.75rem);
  align-items: start;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  text-align: left;
  padding: var(--space-4, 1.25rem);
  border: 2px solid var(--border-default, #E2D3C6);
  border-radius: var(--radius-lg, 14px);
  background: var(--bg-surface, #fff);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.plan-card:hover {
  border-color: var(--color-primary, #E8602C);
  box-shadow: 0 2px 8px rgba(232, 96, 44, 0.12);
}

.plan-card:active { transform: scale(0.99); }

.plan-card--rec { border-color: var(--color-primary, #E8602C); }

.plan-card--active {
  border-color: var(--color-primary, #E8602C);
  box-shadow: 0 0 0 3px var(--color-primary-soft, #FFF1E8);
}

.plan-card__badge {
  position: absolute;
  top: -0.6rem;
  right: var(--space-3, 0.75rem);
  padding: 0.1rem 0.55rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-primary, #E8602C);
  color: var(--text-on-primary, #fff);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-semibold, 600);
}

.plan-card__name {
  font-size: var(--fs-lg, 1.15rem);
  font-weight: var(--fw-bold, 700);
  color: var(--text-strong, #2A211C);
}

.plan-card__price {
  font-size: var(--fs-lg, 1.15rem);
  font-weight: var(--fw-bold, 700);
  color: var(--color-primary, #E8602C);
}

.plan-card__per {
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-normal, 400);
  color: var(--text-muted, #6b7280);
}

.plan-card__total {
  font-size: var(--fs-sm, 0.875rem);
  color: var(--text-muted, #6b7280);
}
/* Oferta de lanzamiento (plan-price.js): precio real tachado + badge + detalle desplegable. */
.launch-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 6px; justify-content: center; }
.launch-offer__real { color: var(--text-muted, #6b7280); text-decoration: line-through; font-size: var(--fs-sm, .9rem); }
.launch-offer__badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs, .72rem); font-weight: 700; color: #b45309; background: #fef3c7; border: 1px solid #fde68a; padding: 2px 8px; border-radius: var(--radius-full, 999px); }
.launch-offer__info { cursor: pointer; font-weight: 700; line-height: 1; opacity: .85; }
.launch-offer__info:hover, .launch-offer__info:focus { opacity: 1; outline: none; }
.launch-offer__pop { flex-basis: 100%; font-size: var(--fs-xs, .78rem); color: var(--text-default, #374151); background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px; margin-top: 2px; line-height: 1.4; text-align: left; }

.plan-card__limits {
  font-size: var(--fs-sm, 0.875rem);
  color: var(--text-default, #2A211C);
  margin-top: 0.15rem;
}

.plan-card__mods {
  list-style: none;
  margin: var(--space-2, 0.5rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.plan-card__mods li {
  font-size: var(--fs-xs, 0.75rem);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-primary-soft, #FFF1E8);
  color: var(--color-primary, #E8602C);
}

/* ─── Accesibilidad: foco visible universal ─── */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .field__input:focus-visible {
  outline: 2px solid var(--border-focus, var(--color-primary, #E8602C));
  outline-offset: 2px;
}

/* ─── Accesibilidad: estados de error de campo ─── */
.field__input[aria-invalid="true"], .field--error .field__input {
  border-color: var(--color-danger, #ef4444);
  background: var(--color-danger-soft, #fee2e2);
}
.field--error .field__hint { color: var(--color-danger, #ef4444); }

/* ─── Accesibilidad: respetar 'reducir movimiento' ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Responsive: el paso de plan se ensancha en pantallas grandes ─── */
/* Los pasos de formulario quedan en columna cómoda (max-width del #reg-app);
   solo el paso de plan (3 tarjetas) rompe a ancho mayor para verse lado a lado. */
@media (min-width: 900px) {
  #reg-app.reg-app--wide { max-width: 1040px; }
}

/* ─── Sub-paso Ubicación: mapa (Leaflet) + autocompletar (Photon) ─── */
.reg-map { height: 220px; border-radius: var(--radius-lg, 14px); margin-top: var(--space-2, 0.5rem); overflow: hidden; }
.reg-suggest { list-style: none; margin: 4px 0 0; padding: 0; border: 1.5px solid var(--border-default, #E2D3C6); border-radius: var(--radius-md, 10px); background: var(--bg-surface, #fff); max-height: 220px; overflow-y: auto; }
.reg-suggest__item { padding: 0.5rem 0.75rem; cursor: pointer; font-size: var(--fs-sm, 0.875rem); }
.reg-suggest__item:hover { background: var(--color-primary-soft, #FFF1E8); }
.reg-kind { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: var(--space-2, 0.5rem); }
.reg-kind__opt { font-size: var(--fs-sm, 0.875rem); display: flex; gap: 0.4rem; align-items: center; cursor: pointer; }