/* ============================================
   SECCIÓN RESERVAS
============================================ */
.section--booking { background: var(--color-surface-muted); }

.booking__disclaimer {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  background: var(--color-gold-soft);
  display: inline-block;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  margin-top: var(--space-sm);
  max-width: 56ch;
}

.booking {
  margin-top: var(--space-xl);
  max-width: 720px;
  margin-inline: auto;
}

#bookingWidget {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg);
}

/* ---------- Stepper ---------- */
.stepper {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: thin;
}
.stepper__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}
.stepper__btn {
  display: flex;
  align-items: center;
  gap: 0.45em;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  padding: 0;
}
.stepper__index {
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-border);
  font-weight: 600;
  font-size: 0.85em;
  flex-shrink: 0;
}
.stepper__item[data-state="current"] .stepper__index {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.stepper__item[data-state="done"] .stepper__index {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}
.stepper__item[data-state="current"] .stepper__label { color: var(--color-ink); font-weight: 600; }
.stepper__item[data-state="upcoming"] { opacity: 0.6; }
.stepper__label { white-space: nowrap; }

/* ---------- Panel ---------- */
.booking__panel { min-height: 280px; outline: none; }
.booking__step-heading h3 { font-size: var(--fs-h3); margin-bottom: 0.25rem; }
.booking__step-heading p { color: var(--color-ink-soft); font-size: 0.9rem; margin-bottom: var(--space-lg); }

.booking__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-xl);
  gap: var(--space-sm);
}

/* ---------- Paso: servicio ---------- */
.booking__service-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.service-pick {
  text-align: left;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.service-pick:hover { border-color: var(--color-primary); }
.service-pick[data-selected="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-soft);
  background: #fff;
}
.service-pick__name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.service-pick__meta { font-size: 0.85rem; color: var(--color-primary); font-weight: 600; }
.service-pick__desc { font-size: 0.9rem; color: var(--color-ink-soft); }

@media (min-width: 640px) {
  .booking__service-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Paso: profesional ---------- */
.booking__pro-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.pro-pick {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-align: left;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  cursor: pointer;
}
.pro-pick:hover { border-color: var(--color-primary); }
.pro-pick[data-selected="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-soft);
  background: #fff;
}
.pro-pick__avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  flex-shrink: 0;
}
.pro-pick__body { display: flex; flex-direction: column; min-width: 0; }
.pro-pick__name { font-weight: 600; }
.pro-pick__role { font-size: 0.85rem; color: var(--color-ink-soft); }

@media (min-width: 640px) {
  .booking__pro-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Paso: fecha ---------- */
.booking__date-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
.date-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.7rem 0.4rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  font-size: 0.82rem;
  cursor: pointer;
  min-height: 48px;
}
.date-pick:disabled { opacity: 0.45; cursor: not-allowed; }
.date-pick[data-status="closed"] .date-pick__status,
.date-pick[data-status="full"] .date-pick__status { text-decoration: line-through; }
.date-pick[data-selected="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); }
.date-pick__label { font-weight: 600; text-transform: capitalize; }
.date-pick__status { font-size: 0.7rem; color: var(--color-ink-soft); }

@media (min-width: 520px) {
  .booking__date-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .booking__date-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* ---------- Paso: horario ---------- */
.booking__time-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }
.time-pick {
  padding: 0.8rem 0.4rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
}
.time-pick:disabled { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }
.time-pick[data-selected="true"] { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }

@media (min-width: 520px) {
  .booking__time-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .booking__time-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.booking__empty-msg {
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-ink-soft);
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

/* ---------- Paso: datos (formulario) ---------- */
.booking-form { display: flex; flex-direction: column; gap: var(--space-md); max-width: 480px; }
.form-row { display: flex; flex-direction: column; gap: var(--space-3xs); }
.form-row label { font-size: 0.9rem; font-weight: 600; }
.form-row input,
.form-row textarea {
  font: inherit;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
  width: 100%;
}
.form-row input:focus,
.form-row textarea:focus { border-color: var(--color-focus); }
.form-row textarea { resize: vertical; min-height: 5rem; }
.form-row[data-invalid="true"] input,
.form-row[data-invalid="true"] textarea { border-color: var(--color-error); }
.form-error { font-size: 0.8rem; color: var(--color-error); min-height: 1.1em; }

/* ---------- Paso: confirmación / resumen ---------- */
.booking-summary { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.booking-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--color-border);
}
.booking-summary__row dt { color: var(--color-ink-soft); font-size: 0.9rem; }
.booking-summary__row dd { font-weight: 600; text-align: right; }
.booking-summary__edit {
  margin-left: 0.5em;
  font-size: 0.75rem;
  text-decoration: underline;
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  padding: 0;
}

.booking__inline-notice {
  margin-top: var(--space-md);
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  background: var(--color-gold-soft);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}
.booking__status { margin-top: var(--space-sm); font-weight: 600; color: var(--color-primary); min-height: 1.2em; }

.booking__reset { text-align: center; margin-top: var(--space-lg); }

/* ---------- Pantalla de éxito ---------- */
.success-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  outline: none;
}
.success-card__icon { color: var(--color-secondary); display: inline-flex; margin-bottom: var(--space-sm); }
.success-card h3 { font-size: var(--fs-h2); margin-bottom: var(--space-sm); }
.success-card__code { font-size: 1.1rem; margin-bottom: var(--space-lg); }
.success-card__code strong { font-family: var(--font-display); color: var(--color-primary); letter-spacing: 0.05em; }
.success-card .booking-summary { text-align: left; margin-bottom: var(--space-lg); }
.success-card__illustrative { margin-bottom: var(--space-lg); }
.success-card__illustrative-label { font-size: 0.8rem; color: var(--color-ink-soft); margin-bottom: var(--space-sm); }
.success-card__chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.illustrative-chip {
  font-size: 0.8rem;
  background: var(--color-surface-muted);
  border: 1px dashed var(--color-border);
  padding: 0.4em 0.8em;
  border-radius: 999px;
  color: var(--color-ink-soft);
}
.success-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}