/* ========== NUEVO WIZARD DE RESERVA ========== */
/* Basado en c:/mejoras/buscador-nuevo */

/* Stepper simplificado con bordes redondeados */
#reservationStepper {
  display: flex;
  align-items: center;
  gap: 8px; /* Espacio entre botones */
  font-family: 'Montserrat', sans-serif;
  overflow-x: auto;
  padding-bottom: 8px;
  width: 100%; /* Asegurar que el contenedor ocupe todo el ancho */
}

#reservationStepper button {
  font-family: 'Montserrat', sans-serif;
  transition: all 0.3s ease;
  font-size: 0.75rem; /* Reducir tamaño del texto */
  height: 2rem; /* Reducir altura del botón */
  flex: 0 0 23%; /* Ancho fijo del 23% para cada paso */
  max-width: 23%; /* Máximo 23% */
  border-radius: 8px; /* Bordes redondeados */
  border: none; /* Sin borde */
}

/* Estado activo/completado: azul oscuro - sin hover */
#reservationStepper button.active,
#reservationStepper button.completed {
  background-color: #0A1C2F !important;
  color: white !important;
}

/* Eliminar cualquier efecto hover en los steps */
#reservationStepper button.active:hover,
#reservationStepper button.completed:hover {
  background-color: #0A1C2F !important;
  color: white !important;
}

/* Estado pendiente: gris */
#reservationStepper button.pending {
  background-color: #f3f4f6 !important;
  color: #9ca3af !important;
}

/* Iconos más pequeños en el stepper */
#reservationStepper button i {
  width: 0.875rem !important; /* 14px */
  height: 0.875rem !important; /* 14px */
}

/* Texto más pequeño en el stepper */
#reservationStepper button span {
  font-size: 0.75rem !important; /* 12px */
}

/* Alert Banner */
#reservationAlert {
  font-family: 'Montserrat', sans-serif;
}

/* Calendario */
#reservationContent {
  font-family: 'Montserrat', sans-serif;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  padding-right: 8px;
}

/* Scroll personalizado para el contenido */
#reservationContent::-webkit-scrollbar {
  width: 6px;
}

#reservationContent::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

#reservationContent::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

#reservationContent::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#reservationContent .grid button {
  font-family: 'Montserrat', sans-serif;
}

#reservationContent h2 {
  font-family: 'Montserrat', sans-serif;
  color: #111827 !important; /* Color más oscuro para el mes/año */
  font-weight: 700;
}

#reservationContent .grid button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Badge de descuento */
#reservationContent .bg-green-100 {
  background-color: #dcfce7;
  color: #166534;
  border-radius: 4px;
  font-weight: 600;
}

/* Botones de hora y personas */
#reservationContent button[data-time],
#reservationContent button[data-people] {
  font-family: 'Montserrat', sans-serif;
}

/* Títulos de pasos */
#reservationContent h2,
#reservationContent h3 {
  font-family: 'Montserrat', sans-serif;
}

/* Textos generales del wizard */
#reservationContent p,
#reservationContent span,
#reservationContent label {
  font-family: 'Montserrat', sans-serif;
}

/* Radio buttons personalizados */
#reservationContent input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Modal de confirmación */
.reservation-confirmation-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}

.reservation-confirmation-modal.active {
  display: flex;
}

.reservation-modal-content {
  background: white;
  border-radius: 0.5rem;
  padding: 1.5rem;
  max-width: 42rem;
  max-height: 90vh;
  overflow-y: auto;
  width: 100%;
  position: relative;
  font-family: 'Montserrat', sans-serif;
  margin: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.reservation-modal-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  color: #6b7280;
  font-size: 1.5rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.5rem;
  line-height: 1;
}

.reservation-modal-close:hover {
  color: #374151;
}

/* Badge de resumen */
.reservation-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  border: 2px solid #d1d5db;
  border-radius: 9999px;
  font-family: 'Montserrat', sans-serif;
}

/* Banner de oferta */
.reservation-offer-banner {
  background-color: #dcfce7;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  font-family: 'Montserrat', sans-serif;
}

/* Inputs del modal */
.reservation-modal-content input[type="text"],
.reservation-modal-content input[type="email"],
.reservation-modal-content textarea {
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.reservation-modal-content input:focus,
.reservation-modal-content textarea:focus {
  outline: none;
  ring: 2px;
  ring-color: #0A1C2F;
  border-color: #0A1C2F;
}

/* Botón de confirmar */
.reservation-confirm-btn {
  width: 100%;
  background-color: #0A1C2F;
  color: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: background-color 0.2s;
}

.reservation-confirm-btn:hover {
  background-color: rgba(10, 28, 47, 0.9);
}

.reservation-confirm-btn:disabled {
  background-color: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Información del usuario */
.reservation-user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-family: 'Montserrat', sans-serif;
}

.reservation-user-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background-color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
}

/* Banner informativo azul */
.reservation-info-banner {
  background-color: #eff6ff;
  border-left: 4px solid #3b82f6;
  padding: 0.75rem;
  margin-bottom: 1.5rem;
  font-family: 'Montserrat', sans-serif;
}

/* Responsive */
/* Responsive para móviles */
@media (max-width: 1023px) {
  /* Stepper más compacto en móviles */
  #reservationStepper,
  #reservationStepperMobile {
    gap: 4px;
    padding-bottom: 4px;
  }
  
  #reservationStepper button,
  #reservationStepperMobile button {
    font-size: 0.625rem;
    height: 1.75rem;
    flex: 0 0 24%;
    max-width: 24%;
  }
  
  #reservationStepper button i,
  #reservationStepperMobile button i {
    width: 0.75rem !important;
    height: 0.75rem !important;
  }
  
  #reservationStepper button span,
  #reservationStepperMobile button span {
    font-size: 0.625rem !important;
  }
  
  /* Contenido con scroll en móviles */
  #reservationContent,
  #reservationContentMobile {
    max-height: calc(100vh - 200px);
    padding-right: 4px;
  }
  
  /* Botones full width en móviles */
  #reservationContent button,
  #reservationContentMobile button {
    width: 100% !important;
    padding: 0.875rem !important;
  }
  
  /* Calendario más compacto */
  #reservationContent .grid,
  #reservationContentMobile .grid {
    gap: 0.25rem;
  }
  
  #reservationContent .grid button,
  #reservationContentMobile .grid button {
    min-height: 2.5rem;
    font-size: 0.875rem;
  }
  
  /* Horas más compactas */
  #reservationContent .horas-grid,
  #reservationContentMobile .horas-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  
  /* Ofertas más compactas */
  #reservationContent .offer-card,
  #reservationContentMobile .offer-card {
    padding: 1rem;
  }
}

@media (max-width: 768px) {
  .reservation-modal-content {
    padding: 1rem;
    max-height: 95vh;
  }

  #reservationContent .grid.grid-cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Ajustes adicionales solicitados:
   - Reducir tamaños de texto del wizard
   - Forzar color para iconos/ SVG en steps activos (anular inline styles)
   - Badges de descuento más pequeños
   - Chips de horas y personas más compactos
   - Texto de ayuda / aclaraciones más pequeño
*/

/* Forzar color blanco para iconos y SVGs en steps activos (anula element.style) */
#reservationStepper button.active i,
#reservationStepper button.active svg,
#reservationStepper button.completed i,
#reservationStepper button.completed svg,
#reservationStepperTablet button.active i,
#reservationStepperTablet button.active svg,
#reservationStepperMobile button.active i,
#reservationStepperMobile button.active svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Reducir tamaño global de textos descriptivos dentro del wizard */
#reservationContent p,
#reservationContent span,
#reservationContent label {
  font-size: 0.78rem !important; /* ~12.5px */
  line-height: 1.2 !important;
}

/* Texto de ayuda/nota (más pequeño aún) */
#reservationContent .reservation-help-text,
#reservationContent .text-muted,
#reservationContent .font-size-xxxs {
  font-size: 0.7rem !important; /* ~11px */
  color: #6b7280 !important;
}

/* Badges de descuento en calendario / promociones más pequeños */
.restaurant-booking-offer-badge {
  font-size: 0.65rem !important;
  padding: 0.15rem 0.4rem !important;
  border-radius: 6px !important;
  line-height: 1 !important;
  display: inline-block !important;
  margin-left: 0.5rem !important;
}

/* Ofertas dentro del wizard: hacerlas más compactas */
#promocionesReserva .restaurant-booking-offer-btn .restaurant-booking-offer-content {
  padding: 0.5rem !important;
}
#promocionesReserva .restaurant-booking-offer-btn h4 {
  font-size: 0.85rem !important;
  margin: 0 !important;
}
#promocionesReserva .restaurant-booking-offer-btn p {
  font-size: 0.72rem !important;
  margin: 0 !important;
}

/* Chips / botones de horas y personas más compactos */
.restaurant-booking-time-btn,
.restaurant-booking-people-btn,
#reservationContent button[data-time],
#reservationContent button[data-people] {
  font-size: 0.875rem !important; /* igual que people */
  padding: 8px 12px !important;   /* igual que people */
  height: 40px !important;        /* igual que people */
  min-height: 40px !important;
  border-radius: 10px !important;
}

/* Estado activo de chips más visible pero compacto */
.restaurant-booking-time-btn.active,
.restaurant-booking-people-btn.active,
#reservationContent button[data-time].active,
#reservationContent button[data-people].active {
  background-color: #0A1C2F !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Badge pequeño dentro del calendario (cuando se inyecta HTML con <span>) */
#reservaFechaRS td span {
  font-size: 0.65rem !important;
  display: block !important;
  margin-top: 2px !important;
}

/* Asegurar que títulos no sean demasiado grandes en el wizard */
#reservationContent h2,
#reservationContent h3 {
  font-size: 1rem !important;
}

/* Igualar separación del grid de horas al de personas */
#reservationContent .grid.grid-cols-4.gap-2 {
  gap: 0.75rem !important; /* gap-3 */
}

/* --- Layout de chips: responsive, ocupa tantas columnas como entren.
     Usa min-width para que si hay 4 elementos en el contenedor muestre 4 columnas,
     y si caben 5 muestre 5. --- */
#lista-horas-reserva,
#lista-personas-reserva,
#lista-horas-reservaRS,
#lista-personas-reservaRS {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; /* forzar 4 columnas en desktop */
  gap: 10px !important;
  align-items: center;
}

/* Aplicar a los distintos tipos de botones/chips que usa la UI */
/* Estilo común para chips (horas y personas) - seguir diseño de "personas" */
#lista-horas-reserva .restaurant-booking-time-btn,
#lista-horas-reserva .horas,
#lista-horas-reserva .hora-btn,
#lista-personas-reserva .restaurant-booking-people-btn,
#lista-personas-reserva .personas,
#lista-personas-reserva .personas-btn,
#lista-horas-reservaRS .horas {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 12px !important;
  min-height: 44px !important; /* altura más parecida a personas */
  text-align: center !important;
  border-radius: 10px !important; /* bordes redondeados */
  border: 1px solid var(--gris3, #e0e0e0) !important;
  background: #fff !important;
  box-sizing: border-box;
  font-size: 0.95rem !important;
  line-height: 1.1 !important;
  color: #111827 !important;
}

/* Si quieres estrictamente "cuadrado" fuerza aspect-ratio.
   Úsalo solo si el alto cuadrado no rompe el layout. */
/* #lista-horas-reserva .restaurant-booking-time-btn { aspect-ratio: 1 / 1; } */

/* Hacer que los chips sigan estilo calendario (más redondeados y centrados) */
#lista-horas-reserva .hora-btn,
#lista-horas-reserva .horas,
#lista-horas-reserva .restaurant-booking-time-btn,
#lista-personas-reserva .personas,
#lista-personas-reserva .restaurant-booking-people-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 8px !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid #e6e6e6 !important;
  box-shadow: none !important;
  color: #111827 !important;
}

/* Mantener responsive: en mobiles quepan menos por fila */
@media (max-width: 1023px) {
  #lista-horas-reserva,
  #lista-personas-reserva,
  #lista-horas-reservaRS,
  #lista-personas-reservaRS {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 600px) {
  #lista-horas-reserva,
  #lista-personas-reserva,
  #lista-horas-reservaRS,
  #lista-personas-reservaRS {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- Iconos en los tabs: outline cuando están seleccionados --- */
#reservationStepper button.active svg,
#reservationStepper button.completed svg,
#reservationStepperTablet button.active svg,
#reservationStepperMobile button.active svg {
  fill: none !important;          /* quita el relleno sólido */
  stroke: #ffffff !important;     /* trazo blanco (outline) */
  stroke-width: 1.8 !important;
  background: transparent !important;
}

/* Para iconos dentro de <i> (fuentes/icon fonts), evita fondo blanco */
#reservationStepper button.active i,
#reservationStepper button.completed i {
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* --- Resumen de la reserva: texto adjunto más pequeño cuando hay o no oferta --- */
.reservation-summary-badge,
.reservation-offer-banner {
  font-size: 0.95rem;
}
.reservation-summary-badge .small-note,
.reservation-offer-banner p,
#reservationContent .reservation-help-text,
#reservationContent .text-muted {
  font-size: 0.72rem !important; /* texto de aclaración pequeño */
  line-height: 1.1 !important;
  color: #6b7280 !important;
}

/* === Forzar que la grilla de horas del widget principal siga el mismo estilo
     que los chips de personas y sea responsive (4/5 por fila según ancho) === */
.restaurant-booking-time-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}

.restaurant-booking-time-btn {
  padding: 12px 14px !important;
  min-height: 48px !important; /* igual altura que personas */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: #fff !important;
  border: 1px solid var(--restaurant-border, #e5e7eb) !important;
  font-size: 0.95rem !important;
  color: #111827 !important;
  box-shadow: none !important;
}

.restaurant-booking-time-btn.inactive {
  background: #fff !important;
  color: #374151 !important;
}

.restaurant-booking-time-btn.active {
  background: var(--restaurant-primary, #0A1C2F) !important;
  color: #fff !important;
}@media (max-width: 1024px) {
  .restaurant-booking-time-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .restaurant-booking-time-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Asegurar elementos li.horas (versiones antiguas) mantengan altura y estilo */
#lista-horas-reserva li.horas,
#lista-horas-reservaRS li.horas {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--restaurant-border, #e5e7eb) !important;
  background: #fff !important;
  box-sizing: border-box;
  font-size: 0.95rem !important;
}
/* ── Wizard Skeleton ─────────────────────────────────────── */
@keyframes wz-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}
.wz-skeleton {
  animation: wz-pulse 1.4s ease-in-out infinite;
  padding: 4px 0;
}
.wz-sk-title {
  height: 16px;
  width: 120px;
  background: #e5e7eb;
  border-radius: 6px;
  margin-bottom: 16px;
}
.wz-sk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.wz-sk-btn {
  height: 40px;
  background: #e5e7eb;
  border-radius: 10px;
}
.wz-sk-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wz-sk-card {
  height: 64px;
  background: #e5e7eb;
  border-radius: 10px;
}
/* Skeleton calendario */
.wz-sk-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.wz-sk-nav {
  width: 32px;
  height: 32px;
  background: #e5e7eb;
  border-radius: 50%;
}
.wz-sk-month {
  height: 18px;
  width: 110px;
  background: #e5e7eb;
  border-radius: 6px;
}
.wz-sk-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.wz-sk-day-label {
  height: 12px;
  background: #e5e7eb;
  border-radius: 4px;
  margin: 0 auto;
  width: 70%;
}
.wz-sk-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.wz-sk-day {
  aspect-ratio: 1;
  background: #e5e7eb;
  border-radius: 50%;
}