/* =========================================================
   BOOKING FLOW (reservar.html)
   ========================================================= */

.booking { padding-top: 0; min-height: 100svh; }
.booking__container { padding-top: var(--sp-7); padding-bottom: var(--sp-9); max-width: 720px; }
.booking__header { margin-bottom: var(--sp-6); }

/* --- Progress steps --- */
.booking__steps {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
}
.booking__steps li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12.5px;
  color: var(--gray);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--line);
}
.booking__steps li span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  flex-shrink: 0;
}
.booking__steps li.is-active,
.booking__steps li.is-done {
  color: var(--ivory);
  border-bottom-color: var(--brass);
}
.booking__steps li.is-active span,
.booking__steps li.is-done span {
  border-color: var(--brass);
  color: var(--brass-light);
}
.booking__steps li span { display: none; }
@media (min-width: 480px) { .booking__steps li span { display: flex; } }

/* --- Panels --- */
.booking__panel { animation: panel-in var(--dur-med) var(--ease); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.booking__panel-title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.01em;
  margin-bottom: var(--sp-5);
}
.booking__hint { color: var(--gray); font-size: 14px; }

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

/* --- Step 1: service options --- */
.service-options { display: grid; gap: var(--sp-3); }
.service-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  min-height: 64px;
}
.service-option:hover { border-color: var(--line-strong); }
.service-option__image { width: 58px; height: 58px; flex: 0 0 58px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.service-option[aria-checked="true"] {
  border-color: var(--brass);
  background: var(--brass-dim);
}
.service-option__name { font-weight: 600; flex: 1; }
.service-option__meta { color: var(--gray); font-size: 13px; font-family: var(--font-mono); }
.service-option__price { font-family: var(--font-mono); color: var(--brass-light); font-size: 16px; margin-left: auto; }
.service-option__meta { margin-left: var(--sp-4); }
@media (max-width: 520px) {
  .service-option { display: grid; grid-template-columns: auto 1fr auto; }
  .service-option__image { grid-row: 1 / span 2; width: 52px; height: 52px; }
  .service-option__name { align-self: end; }
  .service-option__meta { margin-left: 0; align-self: start; }
  .service-option__price { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}

/* --- Step 2: date grid / Step 3: time grid --- */
.date-grid, .time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--sp-2);
}
.day-option, .time-option {
  padding: var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 13.5px;
  min-height: 46px;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.day-option[aria-checked="true"], .time-option[aria-checked="true"] {
  border-color: var(--brass);
  background: var(--brass-dim);
  color: var(--brass-light);
}
.day-option:disabled, .time-option:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* --- Step 4: form --- */
.booking-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); font-size: 14px; }
.field span { color: var(--ivory-dim); }
.field em { color: var(--gray); font-style: normal; }
.field input {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 13px var(--sp-4);
  min-height: 46px;
  color: var(--ivory);
  /* 16px minimo: evita que iOS Safari haga zoom automatico al enfocar el campo */
  font-size: 16px;
}
.field input:focus { border-color: var(--brass-light); }
.field input.is-invalid { border-color: #A85A4A; }
.field__error { min-height: 1em; color: #D98B7A; }

/* --- Step 5: confirmation --- */
.confirmation { max-width: 480px; margin: 0 auto; }
.confirmation__title { font-family: var(--font-display); font-size: 40px; margin: var(--sp-2) 0 var(--sp-5); }
.confirmation__details { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.confirmation__details div { display: flex; justify-content: space-between; font-size: 14.5px; }
.confirmation__details dt { color: var(--gray); }
.confirmation__actions {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}