/* Selector inline de fecha/hora (calendario + chips).
   Responsive: calendario y horas lado a lado en escritorio; apilados en mobile.
   Reemplaza el daterangepicker + lista vertical de radios. */

/* Ancho del wizard de agendar. Un max-width fijo (≈ calendario + bloques de horario)
   igual en TODOS los pasos → contenedor consistente, sin estirarse a todo el ancho
   (los selectores de servicio/profesional se veían mal a más ancho) y estable con el zoom.
   Se aplica también por ID del form: así funciona aunque el template esté cacheado
   (loader cacheado / HTML en caché) y el !important vence las utilidades de ancho de
   Bootstrap (w-lg-75 / w-xxl-50 / mw-700px) del form. Centrado con mx-auto. */
.agendar-form,
#kt_modal_create_project_form {
  width: 100% !important;
  max-width: 800px !important;
  margin-inline: auto;
}

/* Sube el wizard para que los tabs queden en la banda de nav secundaria (como las
   otras vistas), aprovechando el espacio superior SIN tocar el padding global del
   shell (que otras vistas necesitan). Scopeado 100% a agendar. Valor a afinar
   visualmente.
   Solo en lg+: bajo ese breakpoint el swapper de Metronic mueve el título de página
   ("AGENDAR | Umano") dentro del contenedor de contenido, y el margen negativo lo
   pisaba con el título del paso. */
@media (min-width: 992px) {
  #agendarsesionstepper {
    margin-top: -4rem;
  }
}

/* Escritorio: calendario (ancho fijo) + horas (4 bloques). El ancho de este par
   define el ancho del wizard. Grid explícito → no se apila por ancho (a diferencia
   de flex-wrap).
   Las columnas se estiran a la misma altura, pero el sobrante NO va dentro de la
   tarjeta del calendario (se veía como relleno): la tarjeta se centra en la
   columna y el espacio queda repartido arriba/abajo, fuera del recuadro blanco. */
.ap-wrap {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* min-width:0 permite que cada columna del grid encoja sin desbordar. */
.ap-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ap-right {
  min-width: 0;
}

.ap-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 10px;
}

/* ---------- Calendario ---------- */
.ap-calendar {
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
  /* Centra la tarjeta en el alto sobrante de la columna (bajo el label). Si el
     calendario es el más alto, no hay sobrante y el auto se resuelve en 0. */
  margin-block: auto;
}

.ap-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ap-month {
  font-weight: 700;
  color: #1f2937;
  font-size: 15px;
}

.ap-nav {
  border: none;
  background: #f3f4f6;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  color: #374151;
  font-size: 18px;
  line-height: 1;
  transition: background 0.15s ease;
}

.ap-nav:hover:not(:disabled) {
  background: #ede9fe;
  color: #7239ea;
}

.ap-nav:disabled {
  opacity: 0.4;
  cursor: default;
}

.ap-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

.ap-weekdays span {
  text-align: center;
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
}

.ap-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.ap-day {
  min-height: 40px;
  aspect-ratio: 1 / 1;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 14px;
  color: #111827;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.ap-day.ap-out {
  visibility: hidden;
}

.ap-day.ap-disabled {
  color: #d1d5db;
  cursor: default;
}

.ap-day.ap-enabled:hover {
  background: #ede9fe;
  color: #7239ea;
}

.ap-day.ap-nextday {
  box-shadow: inset 0 0 0 2px #c4b5fd;
}

.ap-day.ap-selected,
.ap-day.ap-selected:hover {
  background: #7239ea;
  color: #fff;
  box-shadow: none;
}

/* ---------- Chips de hora ---------- */
.ap-slots {
  min-height: 60px;
}

.ap-group + .ap-group {
  margin-top: 14px;
}

.ap-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 6px;
}

.ap-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ap-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-weight: 600;
  font-size: 14px;
  color: #111827;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ap-chip .ap-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ap-chip.horario:hover {
  border-color: #7239ea;
  color: #7239ea;
}

.ap-chip.horario.active {
  background: #7239ea;
  border-color: #7239ea;
  color: #fff;
}

.ap-chip-off {
  color: #cbd5e1;
  background: #f9fafb;
  border-style: dashed;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ---------- Estados vacíos / carga ---------- */
.ap-empty,
.ap-loading {
  color: #9ca3af;
  font-size: 14px;
  padding: 16px;
  text-align: center;
}

/* ---------- Mobile: una sola columna (calendario arriba, horas abajo) ---------- */
@media (max-width: 767.98px) {
  .ap-wrap {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  /* Apilado a lo ancho: las horas se adaptan en vez de quedar fijas en 4. */
  .ap-chips {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  }
}

@media (max-width: 575.98px) {
  .ap-chips {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }
  .ap-day {
    font-size: 13px;
    min-height: 36px;
  }
}

/* ===================================================================== */
/* Estilos compartidos del wizard de agendar (Servicio / Profesional /   */
/* Detalles / Listo) alineados al selector de fecha/hora.                */
/* ===================================================================== */

/* ---------- Indicador de disponibilidad del profesional ---------- */
.ap-avail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.ap-avail-on { background: #22c55e; }
.ap-avail-off { background: #cbd5e1; }

/* ---------- Dropdowns select2 (Servicio y Profesional) ---------- */
.select2-dropdown.ap-select2-dropdown {
  border: 1px solid #eaecf0 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 34px rgba(16, 24, 40, 0.12);
  overflow: hidden;
  padding: 6px;
}
.ap-select2-dropdown .select2-search--dropdown {
  padding: 6px 6px 4px;
}
.ap-select2-dropdown .select2-search__field {
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 8px 12px;
  outline: none;
}
.ap-select2-dropdown .select2-search__field:focus {
  border-color: #7239ea !important;
  box-shadow: 0 0 0 3px rgba(114, 57, 234, 0.12);
}
.ap-select2-dropdown .select2-results__option {
  border-radius: 10px;
  padding: 10px 12px;
  margin: 2px 2px;
  transition: background 0.12s ease;
}
.ap-select2-dropdown .select2-results__option--highlighted[aria-selected] {
  background: #ede9fe !important;
  color: inherit !important;
}
.ap-select2-dropdown .select2-results__option[aria-selected="true"] {
  background: #f5f3ff !important;
  color: inherit !important;
}
.ap-select2-dropdown .symbol img {
  border-radius: 10px;
  object-fit: cover;
}

/* ---------- Tarjeta de resumen (Detalles / Listo) ---------- */
.ap-summary-wrap {
  max-width: 680px;
  margin-inline: auto; /* centra el bloque (encabezado + tarjeta) en el área de contenido */
}
/* Tarjeta tipo comprobante, con la paleta real del sistema (tokens Metronic). */
.ap-summary {
  background: #fff;
  border: 1px solid var(--bs-gray-200, #eff2f5);
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(24, 28, 50, 0.04);
  overflow: hidden;
}
.ap-sum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ap-sum-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 26px;
  border-top: 1px solid var(--bs-gray-200, #eff2f5);
  min-width: 0;
}
/* Primera fila (2 celdas) sin borde superior. */
.ap-sum-cell:nth-child(1),
.ap-sum-cell:nth-child(2) {
  border-top: none;
}
/* Divisor vertical entre columnas (solo en las celdas de la izquierda). */
.ap-sum-cell:nth-child(odd):not(.ap-sum-cell-amount) {
  border-right: 1px solid var(--bs-gray-200, #eff2f5);
}
.ap-sum-cell-amount {
  grid-column: 1 / -1;
}
.ap-sum-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--bs-gray-500, #a1a5b7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ap-sum-val {
  font-weight: 600;
  color: var(--bs-gray-900, #181c32);
  font-size: 15px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.ap-sum-cell-amount .ap-sum-val {
  font-size: 16px;
}
/* "Gratis" como badge (estilo Metronic light-success). */
.ap-amount-free {
  display: inline-block;
  background: #e8fff3;
  color: #47be7d;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 6px;
}
.ap-amount-usd {
  font-size: 12px;
  font-weight: 500;
  color: var(--bs-gray-500, #a1a5b7);
  margin-left: 4px;
}
.ap-sum-pay {
  padding: 18px 26px 20px;
  border-top: 1px solid var(--bs-gray-200, #eff2f5);
}
.ap-sum-pay:empty {
  display: none;
}
.ap-sum-pay .btn,
.ap-sum-pay button {
  border-radius: 8px !important;
  padding: 11px 28px !important;
  font-weight: 600;
}

/* ---------- Hero de confirmación (Listo) ---------- */
.ap-success-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 2px;
}
.ap-success-check {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bs-success, #50cd89);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 6px rgba(80, 205, 137, 0.14);
}
.ap-success-check i {
  color: #fff !important;
}
.ap-calendar-cta {
  margin-top: 4px;
}

/* Mobile: una sola columna. */
@media (max-width: 575.98px) {
  .ap-sum-grid {
    grid-template-columns: 1fr;
  }
  .ap-sum-cell {
    padding: 14px 18px;
  }
  .ap-sum-cell:nth-child(odd):not(.ap-sum-cell-amount) {
    border-right: none;
  }
  .ap-sum-cell:nth-child(2) {
    border-top: 1px solid var(--bs-gray-200, #eff2f5);
  }
  .ap-sum-pay {
    padding: 14px 18px 16px;
  }
  .ap-success-check {
    width: 46px;
    height: 46px;
    font-size: 24px;
  }
}