/* Estilos de la versión Premium (horarios, datos del cliente, pago). Escrito a mano, no lo genera Tailwind. */
.res-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.res-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.res-slot {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: .7rem .4rem; border-radius: .75rem; border: 1px solid #d1d5db; background: rgba(238, 240, 241, .6);
  color: #1f2937; cursor: pointer; font: inherit; transition: background .15s, border-color .15s;
}
.res-slot b { font-size: 1.05rem; }
.res-slot span { font-size: .75rem; color: #4b5563; }
.res-slot:hover:not(:disabled) { border-color: #2c526b; }
.res-slot[aria-pressed="true"] { background: #2c526b; border-color: #2c526b; color: #fff; }
.res-slot[aria-pressed="true"] span { color: #f5f5dc; }
.res-slot:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.res-slot:focus-visible { outline: 3px solid #e0a72e; outline-offset: 2px; }
.res-msg { margin: 0; font-size: .875rem; color: #4b5563; }
.res-input {
  width: 100%; border-radius: .75rem; border: 1px solid #d1d5db; background: rgba(238, 240, 241, .6);
  padding: .75rem 1rem; color: #1f2937; font: inherit;
}
.res-input:focus { outline: none; border-color: #2c526b; box-shadow: 0 0 0 2px #2c526b; }
.res-pay {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: .5rem;
  border: 0; border-radius: .75rem; background: #e0a72e; color: #1f2937; padding: 1rem;
  font: 700 1.05rem/1 Montserrat, system-ui, sans-serif; cursor: pointer; box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
  transition: filter .15s;
}
.res-pay:hover { filter: brightness(1.06); }
.res-pay:disabled { opacity: .7; cursor: progress; }
.res-help { display: block; margin-top: .9rem; text-align: center; font-size: .875rem; color: #f5f5dc; text-decoration: underline; text-underline-offset: 3px; }

/* Página de resultado del pago (reserva.html) */
.res-result { max-width: 560px; margin: 0 auto; background: #fff; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 20px 40px rgba(0, 0, 0, .08); text-align: center; }
.res-result .res-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1rem; font-size: 2rem; }
.res-result dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; text-align: left; margin: 1.25rem 0; }
.res-result dt { color: #6b7280; }
.res-result dd { margin: 0; font-weight: 600; text-align: right; }