/* ====== AHB – Estilo general (calendario + horas) ====== */
/* Si quieres que solo afecte a un formulario, cambia [id^="fbuilder_"] por #fbuilder_1 */

#fbuilder .ui-datepicker, [id^="fbuilder_"] .ui-datepicker{
  max-width:320px;
  background:#fff !important;
  border:1px solid #e9d1cd !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:0 6px 18px rgba(0,0,0,.06) !important;
}

/* Cabecera del calendario */
#fbuilder .ui-datepicker .ui-datepicker-header,
[id^="fbuilder_"] .ui-datepicker .ui-datepicker-header{
  background:#b55e57 !important;  /* color principal */
  color:#fff !important;
  border:0 !important;
  padding:10px 12px !important;
}
#fbuilder .ui-datepicker .ui-datepicker-title,
[id^="fbuilder_"] .ui-datepicker .ui-datepicker-title{
  font-weight:700 !important;
}

/* Tabla de días */
#fbuilder .ui-datepicker table,
[id^="fbuilder_"] .ui-datepicker table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:6px !important;
  margin:8px !important;
}
#fbuilder .ui-datepicker th,
[id^="fbuilder_"] .ui-datepicker th{
  color:#7a6562 !important;
  font-weight:600 !important;
  padding:6px 0 0 !important;
}
#fbuilder .ui-datepicker td,
[id^="fbuilder_"] .ui-datepicker td{ padding:0 !important; }

/* Días: normal, hover y activo */
#fbuilder .ui-datepicker .ui-state-default,
[id^="fbuilder_"] .ui-datepicker .ui-state-default{
  display:block !important;
  text-align:center !important;
  padding:8px 0 !important;
  border-radius:10px !important;
  background:#fff !important;
  border:1px solid #e9d1cd !important;
  color:#2b2322 !important;
  transition:all .15s ease !important;
}
#fbuilder .ui-datepicker .ui-state-default:hover,
[id^="fbuilder_"] .ui-datepicker .ui-state-default:hover{
  border-color:#b55e57 !important;
  box-shadow:0 0 0 3px #f6e1de !important;
}
#fbuilder .ui-datepicker .ui-state-active,
#fbuilder .ui-datepicker .ui-state-highlight,
[id^="fbuilder_"] .ui-datepicker .ui-state-active,
[id^="fbuilder_"] .ui-datepicker .ui-state-highlight{
  background:#b55e57 !important;
  color:#fff !important;
  border-color:#b55e57 !important;
}

/* Días deshabilitados */
#fbuilder .ui-datepicker-unselectable .ui-state-default,
[id^="fbuilder_"] .ui-datepicker-unselectable .ui-state-default{
  background:#f4f1f1 !important;
  color:#b4a6a4 !important;
  border-style:dashed !important;
}

/* --- H O R A S / S L O T S --- */
#fbuilder .ahb-times, #fbuilder .cpappb-times, #fbuilder .cpcff-slots, #fbuilder .slots,
[id^="fbuilder_"] .ahb-times, [id^="fbuilder_"] .cpappb-times, [id^="fbuilder_"] .cpcff-slots, [id^="fbuilder_"] .slots{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  padding:8px 0 !important;
}

#fbuilder .ahb-times a, #fbuilder .ahb-times button, #fbuilder .cpappb-time,
#fbuilder .cpcff-slots .cpcff-slot, #fbuilder .slots .slot, #fbuilder .ahb-available-time,
[id^="fbuilder_"] .ahb-times a, [id^="fbuilder_"] .ahb-times button, [id^="fbuilder_"] .cpappb-time,
[id^="fbuilder_"] .cpcff-slots .cpcff-slot, [id^="fbuilder_"] .slots .slot, [id^="fbuilder_"] .ahb-available-time{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:70px !important;
  padding:8px 12px !important;
  border:1.5px solid #e9d1cd !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#2b2322 !important;
  text-decoration:none !important;
  cursor:pointer !important;
  transition:transform .06s ease, box-shadow .15s ease, border-color .15s ease !important;
}

#fbuilder .ahb-times a:hover, #fbuilder .ahb-times button:hover, #fbuilder .cpappb-time:hover,
#fbuilder .cpcff-slots .cpcff-slot:hover, #fbuilder .slots .slot:hover, #fbuilder .ahb-available-time:hover,
[id^="fbuilder_"] .ahb-times a:hover, [id^="fbuilder_"] .ahb-times button:hover, [id^="fbuilder_"] .cpappb-time:hover,
[id^="fbuilder_"] .cpcff-slots .cpcff-slot:hover, [id^="fbuilder_"] .slots .slot:hover, [id^="fbuilder_"] .ahb-available-time:hover{
  border-color:#b55e57 !important;
  box-shadow:0 0 0 3px #f6e1de !important;
  transform:translateY(-1px) !important;
}

/* Seleccionado */
#fbuilder .ahb-times .selected, #fbuilder .cpappb-time.selected, #fbuilder .cpcff-slots .cpcff-slot.selected,
[id^="fbuilder_"] .ahb-times .selected, [id^="fbuilder_"] .cpappb-time.selected, [id^="fbuilder_"] .cpcff-slots .cpcff-slot.selected,
#fbuilder input[type="radio"]:checked + label, [id^="fbuilder_"] input[type="radio"]:checked + label{
  background:#b55e57 !important;
  color:#fff !important;
  border-color:#b55e57 !important;
  box-shadow:0 6px 14px rgba(181,94,87,.28) !important;
}

/* Botón enviar */
#fbuilder input[type="submit"], #fbuilder button[type="submit"], #fbuilder input[type="button"], #fbuilder .pbSubmit,
[id^="fbuilder_"] input[type="submit"], [id^="fbuilder_"] button[type="submit"], [id^="fbuilder_"] input[type="button"], [id^="fbuilder_"] .pbSubmit{
  background:#b55e57 !important;
  color:#fff !important;
  border:none !important;
  border-radius:12px !important;
  padding:12px 18px !important;
  font-weight:700 !important;
  cursor:pointer !important;
  transition:filter .15s ease, transform .06s ease, box-shadow .15s ease !important;
}
#fbuilder input[type="submit"]:hover, #fbuilder button[type="submit"]:hover, #fbuilder input[type="button"]:hover, #fbuilder .pbSubmit:hover,
[id^="fbuilder_"] input[type="submit"]:hover, [id^="fbuilder_"] button[type="submit"]:hover, [id^="fbuilder_"] input[type="button"]:hover, [id^="fbuilder_"] .pbSubmit:hover{
  filter:brightness(1.05) !important;
  box-shadow:0 8px 18px rgba(181,94,87,.35) !important;
  transform:translateY(-1px) !important;
}

/* Opcional: calendario a 100% de ancho */
#fbuilder .ui-datepicker-inline, [id^="fbuilder_"] .ui-datepicker-inline{ max-width:none !important; }

/* Opcional: ocultar el desplegable de servicio
#fbuilder .ahbfield_service, [id^="fbuilder_"] .ahbfield_service{ display:none !important; }
*/
/* ===== Centrar números del calendario ===== */
#fbuilder .ui-datepicker td a,
#fbuilder .ui-datepicker td span,
[id^="fbuilder_"] .ui-datepicker td a,
[id^="fbuilder_"] .ui-datepicker td span{
  display: grid !important;
  place-items: center !important;    /* centra vertical y horizontal */
  width: 100% !important;
  height: 38px !important;           /* ajusta si quieres celdas más altas */
  padding: 0 !important;
  line-height: 1 !important;
}
#fbuilder .ui-datepicker td,
[id^="fbuilder_"] .ui-datepicker td{
  padding: 0 !important;
}

/* ===== Alinear la fecha con las horas =====
   El texto de la fecha suele tener una de estas clases en AHB.
   Dejamos las tres para cubrir todas las variantes. */
#fbuilder .cpcff-slots-title,
#fbuilder .ahb-times-title,
#fbuilder .cpappb-day,
[id^="fbuilder_"] .cpcff-slots-title,
[id^="fbuilder_"] .ahb-times-title,
[id^="fbuilder_"] .cpappb-day{
  display: block !important;
  margin-left: 12px !important;      /* mismo borde que los botones de hora */
  margin-bottom: 8px !important;
  font-weight: 700 !important;
}

/* ===== Más aire a la derecha del bloque de horas ===== */
#fbuilder .ahb-times,
#fbuilder .cpappb-times,
#fbuilder .cpcff-slots,
[id^="fbuilder_"] .ahb-times,
[id^="fbuilder_"] .cpappb-times,
[id^="fbuilder_"] .cpcff-slots{
  padding-right: 26px !important;    /* espacio de respiración a la derecha */
  gap: 10px !important;               /* separación uniforme entre horas */
}

/* (Opcional) si las horas quedan un poco metidas a la derecha, puedes
   alinear todo al borde izquierdo reduciendo padding del contenedor: */
/*
#fbuilder .ahb-times,
#fbuilder .cpappb-times,
#fbuilder .cpcff-slots,
[id^="fbuilder_"] .ahb-times,
[id^="fbuilder_"] .cpappb-times,
[id^="fbuilder_"] .cpcff-slots{
  padding-left: 12px !important;
}
*/