/* Reservar (Reservar.dc.html) y estado de la reserva */
.rsv { padding-top: 56px; padding-bottom: var(--section-y); }
.rsv-head { margin: 0; display: flex; flex-direction: column; gap: 20px; font-weight: 400; }
.rsv-title { font-size: clamp(48px, 6vw, 88px); }
.rsv-intro { margin: 20px 0 56px; font-size: 17px; line-height: 1.65; color: var(--cacao); max-width: 560px; }
.rsv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }

.rsv-steps { display: flex; gap: 8px; margin: 0 0 48px; padding: 0; list-style: none; }
.rsv-st { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.rsv-st .bar { height: 2px; border-radius: 2px; background: rgba(23, 19, 18, .12); overflow: hidden; display: block; }
.rsv-st .bar span { display: block; height: 100%; background: var(--tinta); transform-origin: left; transform: scaleX(0); transition: transform .7s var(--ease); }
.rsv-st.on .bar span { transform: scaleX(1); }
.rsv-st .t { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--topo); }
.rsv-st.on .t { color: var(--tinta); }
.rsv-alert { margin-bottom: 32px; }
.rsv-h2 { font-size: 36px; margin-bottom: 28px; }
.pane { animation: pane .6s var(--ease) both; }
@keyframes pane { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rsv-opts { display: flex; flex-direction: column; gap: 12px; }
.rsv-group { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.rsv-q { font-size: 14px; color: var(--topo); padding: 0; margin-bottom: 14px; }
.rsv-hint { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--topo); }
.rsv-hint a { color: var(--topo); }
.rsv .err { margin: 10px 0 0; font-size: 13px; color: #9A3A28; }

/* Tarjeta de opción */
.opt {
  width: 100%; text-align: left; color: var(--tinta); background: var(--blanco); border-radius: 22px; padding: 24px 26px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(23, 19, 18, .1); transition: box-shadow .3s ease, transform 100ms ease-out;
}
.opt:hover { box-shadow: inset 0 0 0 1px rgba(23, 19, 18, .4); }
.opt:active { transform: scale(.99); }
.opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--tinta); }
.opt:has(input:focus-visible) { outline: 2px solid var(--terracota); outline-offset: 3px; }
.opt-main { display: flex; flex-direction: column; gap: 6px; }
.opt-name { font-size: 28px; }
.opt-price { font-size: 16px; align-self: center; white-space: nowrap; }
.opt-desc { grid-column: 1 / -1; font-size: 14px; line-height: 1.55; color: var(--texto-tarjeta); }

/* Pastillas */
.slots { display: flex; flex-wrap: wrap; gap: 10px; }
.slot {
  min-height: 44px; padding: 0 20px; border-radius: var(--r-pill); background: var(--blanco); font-size: 14px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(23, 19, 18, .14); display: inline-flex; align-items: center;
  transition: background-color .25s ease, color .25s ease, transform 100ms ease-out;
}
.slot:active { transform: scale(.96); }
.slot:has(input:checked) { background: var(--tinta); color: var(--porcelana); box-shadow: none; }
.slot:has(input:focus-visible) { outline: 2px solid var(--terracota); outline-offset: 3px; }
.slot.off, .slot:has(input:disabled) { background: transparent; color: var(--deshabilitado); text-decoration: line-through; cursor: not-allowed; box-shadow: inset 0 0 0 1px rgba(23, 19, 18, .06); }

/* Calendario */
.rsv-cal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.rsv-cal-head .rsv-h2 { margin-bottom: 0; }
.rsv-month { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.cal-nav { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(23, 19, 18, .14); }
.cal-nav:hover { box-shadow: inset 0 0 0 1px var(--tinta); }
.cal-nav .ic { width: 16px; height: 16px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .h { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--topo); text-align: center; padding: 8px 0; }
.day {
  aspect-ratio: 1; border-radius: 14px; background: var(--blanco); font-size: 15px; color: var(--tinta); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(23, 19, 18, .08); display: grid; place-items: center;
  transition: box-shadow .25s ease, background-color .25s ease, transform 100ms ease-out;
}
.day:hover { box-shadow: inset 0 0 0 1px var(--tinta); }
.day:active { transform: scale(.95); }
.day.off { background: transparent; color: var(--deshabilitado); box-shadow: none; cursor: default; text-decoration: line-through; }
.day:has(input:checked) { background: var(--tinta); color: var(--porcelana); }
.day:has(input:focus-visible) { outline: 2px solid var(--terracota); outline-offset: 2px; }
.day.blank { visibility: hidden; }

.rsv-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(23, 19, 18, .1); }
.rsv .fg { gap: 30px 32px; }

/* Resumen */
.sum {
  position: sticky; top: 110px; background: var(--blanco); border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 0 0 1px rgba(23, 19, 18, .07), 0 30px 60px -40px rgba(23, 19, 18, .35);
}
.sum-name { font-size: 30px; line-height: 1.05; }
.sum .row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; align-items: baseline; }
.sum .row span:first-child { color: var(--topo); }
.sum .row span:last-child { text-align: right; }
.sum .row.total { font-size: 17px; }
.sum .row.total span:first-child { color: var(--tinta); }
.sum .hr { margin: 4px 0; background: rgba(23, 19, 18, .1); }
.sum-note { font-size: 12px; line-height: 1.6; color: var(--topo); }

/* Estado / confirmación (paso 4) */
.rsv-done { border-radius: 32px; padding: 48px 40px; display: flex; flex-direction: column; gap: 22px; color: var(--tinta); }
.rsv-done h2 { font-size: clamp(36px, 4.6vw, 60px); }
.rsv-done p.txt { font-size: 16px; line-height: 1.65; max-width: 520px; }
.rsv-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; border-top: 1px solid var(--linea); }
.rsv-next > div { padding: 24px 20px 0 0; }
.rsv-next p + p { margin-top: 10px; font-size: 15px; line-height: 1.5; }
.rsv-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); font-size: 13px; background: var(--porcelana); align-self: flex-start; }
.rsv-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rsv-chip.solicitada { color: #8A5300; } .rsv-chip.confirmada { color: #2F6B3D; } .rsv-chip.realizada { color: #2D4E80; }
.rsv-chip.cancelada, .rsv-chip.no_asistio, .rsv-chip.vencida { color: #9A3A28; }

@media (prefers-reduced-motion: reduce) { .pane { animation: none; } .rsv-st .bar span { transition: none; } }
@media (max-width: 960px) {
  .rsv { padding-top: 32px; }
  .rsv-intro { margin-bottom: 40px; }
  .rsv-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sum { position: static; padding: 24px; }
  .rsv .fg { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .rsv-st .t { font-size: 10px; letter-spacing: .08em; }
  .opt { padding: 20px; }
  .opt-name { font-size: 24px; }
  .rsv-h2 { font-size: 30px; }
  .cal { gap: 4px; }
  .day { border-radius: 10px; font-size: 14px; }
  .rsv-done { padding: 40px 24px; }
  .rsv-next { grid-template-columns: minmax(0, 1fr); }
}
.rsv .crumbs + .rsv-head { margin-top: 32px; }