/*
 * ============================================================================
 * WC Legal Booking — booking.css
 * Estilos del widget de reservas en la página del producto
 * ============================================================================
 *
 * Diseño: corporativo-legal refinado, tipografía serif para títulos y
 * sans-serif moderna para el cuerpo. Paleta navy + dorado + blanco.
 *
 * Fuentes cargadas desde Google Fonts:
 *   - DM Serif Display → títulos y cabeceras de paso
 *   - DM Sans          → texto de cuerpo, botones, etiquetas
 *
 * Estructura de archivos relacionados:
 *   booking.css  ← este archivo
 *   booking.js   → lógica del calendario y carga dinámica de slots
 */

/* ── Importación de fuentes desde Google Fonts ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');


/* ── Variables globales de diseño ───────────────────────────────────────────── */
/*
 * Usar variables CSS permite cambiar toda la paleta desde un solo lugar.
 * Para personalizar colores, edita únicamente esta sección.
 */
:root {
  --wclb-navy:        #0f1f3d;   /* Color principal: azul oscuro (fondos, paso número) */
  --wclb-navy-medio:  #1a3260;   /* Variante intermedia del navy */
  --wclb-dorado:      #c49a2b;   /* Acento dorado (bordes de selección, separador) */
  --wclb-dorado-claro:#e8c96b;   /* Dorado claro (texto sobre fondo navy) */
  --wclb-superficie:  #f8f7f4;   /* Fondo de secciones alternas, hover de días */
  --wclb-borde:       #ddd9d0;   /* Color de bordes generales */
  --wclb-texto:       #1c2536;   /* Texto principal oscuro */
  --wclb-atenuado:    #6b7280;   /* Texto secundario, subtítulos, etiquetas pequeñas */
  --wclb-exito:       #166534;   /* Verde para el mensaje de confirmación */
  --wclb-exito-fondo: #f0fdf4;   /* Fondo del mensaje de éxito */
  --wclb-error:       #991b1b;   /* Rojo para mensajes de error */
  --wclb-error-fondo: #fef2f2;   /* Fondo del mensaje de error */
  --wclb-radio:       12px;      /* Radio de borde para tarjetas y botones principales */
  --wclb-sombra:      0 4px 24px rgba(15,31,61,.08), 0 1px 4px rgba(15,31,61,.06);
  --wclb-fuente:      'DM Sans', system-ui, sans-serif;
  --wclb-serif:       'DM Serif Display', Georgia, serif;
  --wclb-transicion:  all .22s cubic-bezier(.4, 0, .2, 1); /* Curva de animación suave */
}


/* ══════════════════════════════════════════════════════════════════════════════
   CONTENEDOR PRINCIPAL DEL WIDGET
   ══════════════════════════════════════════════════════════════════════════════ */

.wclb-widget {
  font-family: var(--wclb-fuente);
  color: var(--wclb-texto);
  margin: 32px 0 24px;   /* Espaciado vertical entre el producto y el botón del carrito */
  display: flex;
  flex-direction: column;
  gap: 0;
}


/* ══════════════════════════════════════════════════════════════════════════════
   SEPARADOR DECORATIVO
   Línea con gradiente dorado y texto centrado que divide el contenido del producto
   del selector de cita.
   ══════════════════════════════════════════════════════════════════════════════ */

.wclb-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

/* Las líneas del separador se crean con pseudo-elementos ::before y ::after */
.wclb-divider::before,
.wclb-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  /* Gradiente que desvanece las líneas en los extremos */
  background: linear-gradient(
    90deg,
    transparent,
    var(--wclb-dorado) 40%,
    var(--wclb-dorado) 60%,
    transparent
  );
  opacity: .35;
}

.wclb-divider span {
  font-family: var(--wclb-serif);
  font-size: 15px;
  color: var(--wclb-navy-medio);
  white-space: nowrap;
  letter-spacing: .02em;
}


/* ══════════════════════════════════════════════════════════════════════════════
   TARJETAS DE PASO (PASO 1 y PASO 2)
   Cada sección del proceso de reserva se presenta como una tarjeta flotante.
   ══════════════════════════════════════════════════════════════════════════════ */

.wclb-paso {
  background: #fff;
  border: 1px solid var(--wclb-borde);
  border-radius: var(--wclb-radio);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--wclb-sombra);

  /* Animación de entrada: aparece desde abajo con fade */
  animation: wclb-aparecer .3s ease both;
}

/* Keyframes de la animación de entrada de las tarjetas */
@keyframes wclb-aparecer {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   CABECERA DE CADA PASO (número + título + subtítulo)
   ══════════════════════════════════════════════════════════════════════════════ */

.wclb-paso-cabecera {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

/* Círculo con el número del paso (1, 2) */
.wclb-paso-numero {
  flex-shrink: 0;           /* No encoger aunque haya poco espacio */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--wclb-navy);
  color: var(--wclb-dorado-claro);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -.01em;
  box-shadow: 0 2px 8px rgba(15, 31, 61, .25);
}

/* Título principal de cada paso */
.wclb-paso-titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--wclb-navy);
  margin: 0 0 3px;
  line-height: 1.3;
  font-family: var(--wclb-serif);
  letter-spacing: .01em;
}

/* Subtítulo o descripción breve del paso */
.wclb-paso-subtitulo {
  font-size: 13px;
  color: var(--wclb-atenuado);
  margin: 0;
  line-height: 1.4;
}


/* ══════════════════════════════════════════════════════════════════════════════
   CONTENEDOR DEL CALENDARIO (Flatpickr inline)
   ══════════════════════════════════════════════════════════════════════════════ */

.wclb-calendario-wrap {
  border-radius: 10px;
  overflow: hidden; /* Recortar el calendario para respetar el borde redondeado */
}

/* Ocultar el input nativo de Flatpickr (usamos el modo inline) */
.wclb-input-oculto {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   PERSONALIZACIÓN DEL CALENDARIO FLATPICKR
   Sobreescribimos los estilos por defecto de Flatpickr para que coincida
   con el diseño navy/dorado del widget.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Contenedor principal del calendario */
#wclb-flatpickr-inline .flatpickr-calendar {
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;          /* Quitamos sombra propia de Flatpickr */
  border: 1px solid var(--wclb-borde);
  border-radius: 10px;
  font-family: var(--wclb-fuente);
  background: #fff;
  padding: 8px 0 12px;
}

/* Sección del mes y año (encabezado del calendario) */
#wclb-flatpickr-inline .flatpickr-months {
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--wclb-borde);
  margin-bottom: 8px;
}

#wclb-flatpickr-inline .flatpickr-month {
  background: transparent;
  height: auto;
}

/* Nombre del mes y año actual */
#wclb-flatpickr-inline .flatpickr-current-month {
  font-size: 16px;
  font-weight: 700;
  color: var(--wclb-navy);
  font-family: var(--wclb-serif);
  padding: 8px 0;
}

#wclb-flatpickr-inline .flatpickr-current-month .cur-month,
#wclb-flatpickr-inline .flatpickr-current-month .cur-year {
  color: var(--wclb-navy) !important;
}

/* Flechas de navegación (mes anterior / siguiente) */
#wclb-flatpickr-inline .flatpickr-prev-month,
#wclb-flatpickr-inline .flatpickr-next-month {
  color: var(--wclb-navy) !important;
  fill:  var(--wclb-navy) !important;
  padding: 8px 12px;
}

#wclb-flatpickr-inline .flatpickr-prev-month:hover,
#wclb-flatpickr-inline .flatpickr-next-month:hover {
  color: var(--wclb-dorado) !important;
  fill:  var(--wclb-dorado) !important;
}

/* Etiquetas de días de la semana (L, M, X, J...) */
#wclb-flatpickr-inline .flatpickr-weekday {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wclb-atenuado);
  background: transparent;
}

/* Cada día del mes */
#wclb-flatpickr-inline .flatpickr-day {
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--wclb-texto);
  border: none;
  height: 36px;
  line-height: 36px;
  margin: 2px;
  max-width: calc(100% / 7 - 4px); /* 7 columnas con pequeño margen */
  transition: var(--wclb-transicion);
}

/* Estado hover: resaltar el día al pasar el cursor */
#wclb-flatpickr-inline .flatpickr-day:hover {
  background: var(--wclb-superficie);
  color: var(--wclb-navy);
}

/* Día seleccionado: fondo navy, texto blanco, sombra suave */
#wclb-flatpickr-inline .flatpickr-day.selected,
#wclb-flatpickr-inline .flatpickr-day.selected:hover {
  background: var(--wclb-navy) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(15, 31, 61, .3);
}

/* Hoy (cuando no está seleccionado): borde dorado y texto navy */
#wclb-flatpickr-inline .flatpickr-day.today:not(.selected) {
  border: 2px solid var(--wclb-dorado);
  color: var(--wclb-navy);
  background: transparent;
  line-height: 32px; /* Compensar el borde extra de 2px */
}

/* Días deshabilitados, del mes anterior y siguiente: color gris muy claro */
#wclb-flatpickr-inline .flatpickr-day.flatpickr-disabled,
#wclb-flatpickr-inline .flatpickr-day.prevMonthDay,
#wclb-flatpickr-inline .flatpickr-day.nextMonthDay {
  color: #d1d5db !important;
  background: transparent !important;
  cursor: not-allowed;
}

/* Ajuste de padding interno del grid de días */
#wclb-flatpickr-inline .flatpickr-innerContainer {
  padding: 0 8px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   INDICADOR DE CARGA (SPINNER)
   Se muestra mientras se hace la petición AJAX para cargar los horarios.
   ══════════════════════════════════════════════════════════════════════════════ */

.wclb-cargando {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--wclb-atenuado);
  font-size: 13.5px;
  padding: 16px 0 8px;
}

/* Anillo giratorio CSS puro (sin imágenes ni GIF) */
.wclb-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--wclb-borde);       /* Anillo base gris */
  border-top-color: var(--wclb-navy);           /* Segmento animado: navy */
  border-radius: 50%;
  animation: wclb-girar .7s linear infinite;
  flex-shrink: 0;
}

@keyframes wclb-girar {
  to { transform: rotate(360deg); }
}


/* ══════════════════════════════════════════════════════════════════════════════
   GRILLA DE SLOTS DE HORARIO
   Grid responsive que se adapta automáticamente según el espacio disponible.
   ══════════════════════════════════════════════════════════════════════════════ */

.wclb-grilla-slots {
  display: grid;
  /* auto-fill: rellena columnas automáticamente; min 110px, máx fracción del espacio */
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 4px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   BOTÓN DE HORARIO (SLOT)
   Cada bloque de tiempo disponible o no disponible.
   ══════════════════════════════════════════════════════════════════════════════ */

.wclb-slot {
  position: relative;  /* Necesario para el pseudo-elemento de "ocupado" */
  padding: 12px 10px;
  border-radius: 10px;
  border: 1.5px solid var(--wclb-borde);
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: var(--wclb-transicion);
  outline: none;
  user-select: none; /* Evitar selección de texto al hacer doble clic */
}

/* Hora de inicio (texto grande y bold) */
.wclb-slot-hora {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff
  line-height: 1.2;
}

/* Hora de fin (texto pequeño y atenuado) */
.wclb-slot-hora-fin {
  display: block;
  font-size: 11px;
  color: var(--wclb-atenuado);
  margin-top: 3px;
  letter-spacing: .02em;
}

/* Etiqueta de slot reservado (reemplaza la hora de fin en slots ocupados) */
.wclb-slot-reservado {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #9b1c1c;
  margin-top: 4px;
}

/* Estado hover: elevar ligeramente la tarjeta */
.wclb-slot:hover {
  border-color: var(--wclb-navy);
  background: var(--wclb-superficie);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(15, 31, 61, .12);
}

/* Estado seleccionado: fondo navy, textos en dorado/blanco */
.wclb-slot.seleccionado {
  border-color: var(--wclb-dorado);
  background: var(--wclb-navy);
  box-shadow: 0 6px 20px rgba(15, 31, 61, .25);
  transform: translateY(-2px);
}

.wclb-slot.seleccionado .wclb-slot-hora     { color: #fff; }
.wclb-slot.seleccionado .wclb-slot-hora-fin { color: var(--wclb-dorado-claro); }

/* Estado no disponible: opacidad reducida, cursor bloqueado */
.wclb-slot.no-disponible {
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none; /* Deshabilitar clicks y hover */
  background: #f5f5f5;
  border-color: #e0e0e0;
}

.wclb-slot.no-disponible .wclb-slot-hora {
  color: var(--wclb-atenuado);
  text-decoration: line-through;
  text-decoration-color: rgba(107,114,128,.5);
}

.wclb-slot.no-disponible .wclb-slot-hora-fin {
  display: none; /* Se reemplaza por la etiqueta "RESERVADO" */
}

/*
 * Patrón de rayas diagonales muy suaves sobre los slots ocupados.
 */
.wclb-slot.no-disponible::after {
  content: '';
  position: absolute;
  inset: 0; /* Equivale a top:0; right:0; bottom:0; left:0 */
  border-radius: inherit;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 5px,
    rgba(0, 0, 0, .025) 5px,
    rgba(0, 0, 0, .025) 10px
  );
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════════════════
   MENSAJE: SIN HORARIOS DISPONIBLES
   Se muestra cuando todos los slots de una fecha están ocupados o han pasado.
   ══════════════════════════════════════════════════════════════════════════════ */

.wclb-sin-slots {
  color: var(--wclb-atenuado);
  font-size: 14px;
  text-align: center;
  padding: 20px;
  background: var(--wclb-superficie);
  border-radius: 8px;
  margin: 8px 0 0;
}


/* ══════════════════════════════════════════════════════════════════════════════
   BARRA DE RESUMEN DE SELECCIÓN CONFIRMADA
   Aparece cuando el cliente ha elegido fecha Y horario. Muestra el resumen
   y ofrece un botón para cambiar la selección.
   ══════════════════════════════════════════════════════════════════════════════ */

.wclb-resumen {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--wclb-navy);
  color: #fff;
  border-radius: var(--wclb-radio);
  padding: 16px 20px;
  margin-bottom: 16px;

  /* Misma animación de entrada que las tarjetas de paso */
  animation: wclb-aparecer .3s ease both;
}

/* Ícono de confirmación (emoji ✅) */
.wclb-resumen-icono {
  font-size: 22px;
  flex-shrink: 0;
}

/* Contenedor de fecha y hora en el resumen */
.wclb-resumen-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Fecha en el resumen: texto dorado, fuente serif */
.wclb-resumen-texto strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--wclb-dorado-claro);
  font-family: var(--wclb-serif);
}

/* Horario en el resumen: texto blanco semitransparente */
.wclb-resumen-texto span {
  font-size: 13px;
  color: rgba(255, 255, 255, .75);
}

/* Botón "Cambiar" dentro del resumen */
.wclb-boton-cambiar {
  background: rgba(255, 255, 255, .12);
  border: 1.5px solid rgba(255, 255, 255, .25);
  color: #fff;
  font-family: var(--wclb-fuente);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--wclb-transicion);
  white-space: nowrap;
  flex-shrink: 0;
}

.wclb-boton-cambiar:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .5);
}


/* ══════════════════════════════════════════════════════════════════════════════
   MENSAJES DE AVISO (ERROR / ÉXITO)
   Área de notificaciones gestionada por JavaScript.
   ══════════════════════════════════════════════════════════════════════════════ */

.wclb-aviso {
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  margin-top: 4px;
  animation: wclb-aparecer .25s ease both;
}

/* Variante de error */
.wclb-aviso.error {
  background: var(--wclb-error-fondo);
  color: var(--wclb-error);
  border: 1px solid #fecaca;
}

/* Variante de éxito */
.wclb-aviso.exito {
  background: var(--wclb-exito-fondo);
  color: var(--wclb-exito);
  border: 1px solid #bbf7d0;
}


/* ══════════════════════════════════════════════════════════════════════════════
   DISEÑO RESPONSIVO (MÓVILES)
   Ajustes para pantallas menores a 480px de ancho.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  /* Reducir el padding interno de las tarjetas de paso */
  .wclb-paso { padding: 18px 16px; }

  /* La grilla de slots en móvil: máximo 3 columnas */
  .wclb-grilla-slots { grid-template-columns: repeat(3, 1fr); }

  /* El resumen pasa a flujo de columna cuando no hay espacio horizontal */
  .wclb-resumen { flex-wrap: wrap; }

  /* El botón "Cambiar" ocupa todo el ancho en móvil */
  .wclb-boton-cambiar {
    width: 100%;
    text-align: center;
  }
}