/* ============================================================================
   RESERVA · elegir día y hora, datos y «Mi cita»
   ----------------------------------------------------------------------------
   inc/bloque-reserva.php + assets/js/reserva.js. La caja es la del formulario
   destacado (c-form c-form--card); las horas son c-chip de la librería. Aquí
   solo lo nuevo: la tira de días, los pasos y el resumen.
   ========================================================================== */

.c-reserva,
.c-mi-cita {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
}

.c-reserva__datos {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
}

.c-reserva__paso {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  padding-top: var(--wp--preset--spacing--40);
  border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
}

.c-reserva__paso[hidden] {
  display: none;
}

.c-reserva__titulo {
  margin: 0;
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 400; /* h3 en sans: 400 en todo el proyecto (7-10-2026) */
  color: var(--wp--preset--color--contrast);
}

.c-reserva__titulo:focus {
  outline: none;
}

.c-reserva__dia-largo {
  font-weight: 400;
  color: var(--wp--preset--color--muted);
}

.c-reserva__estado {
  margin: 0;
  color: var(--wp--preset--color--muted);
}

/* La tira de días: una fila que se desplaza en horizontal, sin barra de página. */
.c-reserva__dias {
  display: flex;
  gap: var(--wp--preset--spacing--20);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--wp--preset--spacing--20);
  overscroll-behavior-x: contain;
}

.c-reserva__dia {
  flex: 0 0 4.25rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: var(--wp--preset--spacing--20) 0;
  border: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  background: transparent;
  color: var(--wp--preset--color--primary);
  font: inherit;
  cursor: pointer;
}

.c-reserva__dia:hover {
  border-color: var(--wp--preset--color--primary);
  background-color: var(--wp--custom--state--overlay-hover);
}

.c-reserva__dia[aria-pressed="true"] {
  background-color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}

.c-reserva__dia-semana,
.c-reserva__dia-mes {
  font-size: var(--wp--preset--font-size--small);
  text-transform: capitalize;
}

.c-reserva__dia-num {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.1;
}

.c-reserva__horas .c-chip {
  min-width: 4.5rem;
  justify-content: center;
  font: inherit;
}

.c-reserva__form .c-btn--block {
  width: 100%;
}

.c-reserva__resumen {
  margin: 0;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  border-left: var(--wp--custom--border--width-strong) solid var(--wp--preset--color--primary);
  border-radius: var(--wp--custom--radius--sm);
  /* Crema sobre la tarjeta blanca: «surface» es blanco y no se distinguía. */
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-weight: 500;
}

.c-reserva__resumen[hidden] {
  display: none;
}

.c-reserva__politica {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--contrast);
}

.c-reserva__pago {
  margin: 0;
  text-align: center;
}

/* ── Mi cita ─────────────────────────────────────────────────────────────── */

.c-mi-cita p {
  margin: 0;
}

.c-mi-cita__cuando {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--primary);
}

.c-mi-cita__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
}

.c-mi-cita__panel {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  padding-top: var(--wp--preset--spacing--40);
  border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
}

.c-mi-cita__panel[hidden],
.c-mi-cita [hidden] {
  display: none;
}

.c-mi-cita__panel > .c-btn {
  align-self: flex-start;
}

.c-mi-cita__despues {
  margin-top: var(--wp--preset--spacing--60);
}

/* Las páginas /reservar/ y /mi-cita/: una columna centrada, del ancho de un formulario. */
.c-reserva-sec :is(.c-reserva, .c-mi-cita, .c-mi-cita__despues) {
  max-width: 42rem;
  margin-inline: auto;
}

/* Aviso de modo de pruebas (sin claves de Cal.com o de Stripe). */
.c-alert--aviso {
  background-color: var(--wp--preset--color--warning-surface);
  color: var(--wp--preset--color--contrast);
}