/* Asistente de reserva v2 (Mangahaus). Seleccionado = relleno amarillo con sombra dura; no disponible = tachado y atenuado. */
.booking .error-summary { margin-bottom: var(--spacing-40); }
.booking-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-40); }
@media (min-width: 1024px) {
  .booking-layout { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  .booking-summary { position: sticky; top: 96px; }
}

.step { border: 0; margin: 0 0 var(--spacing-56); padding: 0; min-width: 0; }
.step:last-child { margin-bottom: 0; }
.step legend {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: 0;
  margin-bottom: var(--spacing-20);
  font-family: var(--font-display);
  font-size: var(--text-display-card);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  background: var(--color-ink);
  border: var(--border-keyline);
  color: var(--color-cream);
  font-family: var(--font-stamp);
  font-size: var(--text-small);
  line-height: 1;
  transform: rotate(var(--rotate-tilt-left));
}
.optional { font-family: var(--font-stamp); font-size: var(--text-stamp); letter-spacing: var(--tracking-nav); text-transform: uppercase; color: var(--color-ink-muted); }
.step > .hint { margin-bottom: var(--spacing-16); }
.step .field-error { margin-top: var(--spacing-12); }

/* Sala: tarjetas con radio */
.option-list { display: grid; gap: var(--spacing-16); }
.option {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
  padding: var(--spacing-16);
  background: var(--color-cream);
  border: var(--border-keyline);
  box-shadow: var(--shadow-offset);
  cursor: pointer;
}
.option:hover { transform: translate(-2px, -2px); }
.option:has(input:checked) { background: var(--color-yellow); box-shadow: var(--shadow-offset-lg); }
.option input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--color-ink); }
.option-body { display: flex; flex-direction: column; gap: var(--spacing-4); }
.option-title { font-weight: 800; }
.option-meta { font-size: var(--text-small); line-height: 1.5; }

/* Radios con aspecto de pastilla / día / horario */
.pill input, .day input, .slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill, .day, .slot { position: relative; cursor: pointer; }
.pill input:focus-visible + span, .day input:focus-visible + span, .slot input:focus-visible + span {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.pills { display: flex; flex-wrap: wrap; gap: var(--spacing-12); }
.pill span {
  display: inline-flex; align-items: center;
  min-height: var(--touch-min);
  padding: var(--spacing-8) var(--spacing-20);
  background: var(--color-cream);
  border: var(--border-keyline);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-offset-sm);
  font-weight: 800;
}
.pill:hover span { background: var(--color-yellow); }
.pill input:checked + span { background: var(--color-yellow); box-shadow: var(--shadow-pressed); transform: translate(1px, 1px); }

.day-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72px;
  gap: var(--spacing-12);
  overflow-x: auto;
  padding: var(--spacing-4) var(--spacing-8) var(--spacing-16);
  margin-inline: calc(var(--spacing-8) * -1);
  scrollbar-width: thin;
}
.day span {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: var(--spacing-8) 0;
  background: var(--color-cream);
  border: var(--border-keyline);
  box-shadow: var(--shadow-offset-sm);
}
.day small { font-family: var(--font-stamp); font-size: var(--text-stamp); letter-spacing: var(--tracking-nav); text-transform: uppercase; }
.day strong { font-family: var(--font-display); font-size: var(--text-display-card); line-height: 1; font-weight: 400; margin-block: var(--spacing-4); }
.day:hover span { background: var(--color-yellow); }
.day input:checked + span { background: var(--color-yellow); box-shadow: var(--shadow-pressed); transform: translate(1px, 1px); }
.other-date { margin-top: var(--spacing-16); max-width: 300px; }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--spacing-12); }
.slot-grid[aria-busy="true"] { opacity: 0.5; }
.slot span {
  display: flex; flex-direction: column; gap: var(--spacing-4);
  min-height: var(--touch-min);
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--color-cream);
  border: var(--border-keyline);
  box-shadow: var(--shadow-offset-sm);
}
.slot strong { font-weight: 800; }
.slot small { color: var(--color-ink-muted); font-size: var(--text-small); line-height: 1.4; }
.slot:hover span { background: var(--color-yellow); }
.slot input:checked + span { background: var(--color-yellow); box-shadow: var(--shadow-pressed); transform: translate(1px, 1px); }
.slot input:checked + span small { color: var(--color-ink); }
.slot.is-unavailable { cursor: not-allowed; }
.slot.is-unavailable span { background: var(--color-cream); border-color: var(--color-disabled); box-shadow: none; }
.slot.is-unavailable:hover span { background: var(--color-cream); }
.slot.is-unavailable strong, .slot.is-unavailable small { color: var(--color-disabled); }
.slot.is-unavailable strong { text-decoration: line-through; }
.slot-notes { margin-top: var(--spacing-16); display: grid; gap: var(--spacing-4); }
.slot-notes li { color: var(--color-ink-muted); font-size: var(--text-small); line-height: 1.5; }
.slot-notes li::before { content: '· '; }

.extras-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-16); }
.extras-list label { cursor: pointer; }
.extras-list .qty { width: 104px; flex: none; }

.checks { margin-top: var(--spacing-24); display: grid; gap: var(--spacing-4); }

.summary-list { display: grid; gap: var(--spacing-8); }
.summary-list .total { padding-top: var(--spacing-12); margin-top: var(--spacing-4); border-top: var(--border-keyline); }
.summary-list .total dd { font-family: var(--font-display); font-size: var(--text-display-card); line-height: 1.1; font-weight: 400; }

/* Página de la reserva (confirmación / gestión) */
.booking-done .code {
  display: inline-block;
  margin-top: var(--spacing-24);
  padding: var(--spacing-8) var(--spacing-20);
  background: var(--color-yellow);
  border: var(--border-keyline);
  box-shadow: var(--shadow-offset);
  font-family: var(--font-stamp);
  font-size: var(--text-display-card);
  letter-spacing: var(--tracking-nav);
  line-height: 1.2;
  transform: rotate(var(--rotate-tilt-left));
}
.booking-done .stamp { margin-bottom: var(--spacing-16); }
.booking-card { max-width: 720px; }
.booking-card .actions { display: flex; flex-wrap: wrap; gap: var(--spacing-12); }
#paso-adicionales .accordion .extras-list > li:first-child { border-top: 0; }

.cancel-block { margin-top: var(--spacing-40); }