/* 
 * Estilos personalizados Fundación UVa calendario de reservas
 * 
 * Para que se muestre correctamente el formulario, el tema debe ser Modern
 * 
 * El tema se elige en Appointment Hour Booking > Editar formulario > Configuración del formulario
 * 
 * Modificar el campo Form Template
 */

/* Grid principal */
#fbuilder {
  margin-bottom: 4rem;
}
#fbuilder div[id*="fieldlist_"] > div:first-child {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr 1fr auto; /* primera y última fila auto, las del medio 1fr */
  gap: 1rem;
}

/* Para pantallas pequeñas */
@media (max-width: 600px) {
  #fbuilder div[id*="fieldlist_"] > div:first-child {
    display: flex;
    flex-direction: column;
  }
}

/* Asignación de posiciones de cada elemento */
#fbuilder .fields[id*="field_"][id$="-0"] {
  grid-area: 1 / 1 / 2 / 3;
} /* Selector duracion, calendario y hora*/
#fbuilder .fields[id*="field_"][id$="-1"] {
  grid-area: 2 / 1 / 3 / 2;
} /* Nombre */
#fbuilder .fields[id*="field_"][id$="-2"] {
  grid-area: 2 / 2 / 3 / 3;
} /* Apellidos */
#fbuilder .fields[id*="field_"][id$="-3"] {
  grid-area: 3 / 1 / 4 / 2;
} /* Email */
#fbuilder .fields[id*="field_"][id$="-4"] {
  grid-area: 3 / 2 / 4 / 3;
} /* Tlf contacto */
#fbuilder .fields[id*="field_"][id$="-5"] {
  grid-area: 4 / 1 / 5 / 3;
} /* Detalles de la reserva */
#fbuilder .fields[id*="field_"][id$="-6"] {
  grid-area: 5 / 1 / 6 / 3;
} /* Información Protección de datos */
#fbuilder .fields[id*="field_"][id$="-7"] {
  grid-area: 6 / 1 / 7 / 3;
} /* Check aceptar Politica de privacidad */
#fbuilder button.pbSubmit {
  grid-area: 7 / 1 / 8 / 3;
} /* Botón reservar */
#fbuilder .captcha {
  display: none;
} /* Captcha oculto */

/* ========================================================
   Variante con 1 campo extra (formulario de 9 campos)
   Cuando existe un campo cuyo id termina en "-8" (es decir,
   se ha añadido un campo más respecto al formulario base de
   8 campos), reorganizar la cuadrícula para que el nuevo -5
   ocupe una fila entera y el resto de bloques largos se
   desplacen una fila hacia abajo.
   ======================================================== */
#fbuilder
  div[id*="fieldlist_"]
  > div:first-child:has(.fields[id*="field_"][id$="-8"]) {
  grid-template-rows: auto 1fr 1fr auto auto auto auto auto;
}
#fbuilder
  div[id*="fieldlist_"]
  > div:first-child:has(.fields[id*="field_"][id$="-8"])
  .fields[id*="field_"][id$="-5"] {
  grid-area: 4 / 1 / 5 / 3;
  justify-self: center;
  width: 100%;
  max-width: 350px;
} /* Número de personas asistentes */
#fbuilder
  div[id*="fieldlist_"]
  > div:first-child:has(.fields[id*="field_"][id$="-8"])
  .fields[id*="field_"][id$="-6"] {
  grid-area: 5 / 1 / 6 / 3;
} /* textarea Detalles */
#fbuilder
  div[id*="fieldlist_"]
  > div:first-child:has(.fields[id*="field_"][id$="-8"])
  .fields[id*="field_"][id$="-7"] {
  grid-area: 6 / 1 / 7 / 3;
} /* info Protección de datos */
#fbuilder
  div[id*="fieldlist_"]
  > div:first-child:has(.fields[id*="field_"][id$="-8"])
  .fields[id*="field_"][id$="-8"] {
  grid-area: 7 / 1 / 8 / 3;
} /* check Política de privacidad */
#fbuilder
  div[id*="fieldlist_"]
  > div:first-child:has(.fields[id*="field_"][id$="-8"])
  button.pbSubmit {
  grid-area: 8 / 1 / 9 / 3;
} /* botón enviar */

/* Selector de servicio (duración de la reserva) */
/* Ocultar el select real */
.ahbfield_service {
  display: none !important;
}
/* Grid de tiles */
.select-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
/* Tile base */
.select-tile {
  padding: 16px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  align-content: center;
}
/* Para pantallas pequeñas */
@media (max-width: 600px) {
  .select-tiles {
    display: flex !important;
    flex-wrap: wrap;
  }
  .select-tile {
    flex: 1 1 80px !important;
  }
}
/* Hover */
.select-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  background-color: var(--e-global-color-d87f7e3);
  border-color: var(--e-global-color-d87f7e3);
}
/* Estado activo */
.select-tile.active {
  background: var(--e-global-color-primary);
  color: white;
  border-color: var(--e-global-color-primary);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px) scale(1.02);
}
/* Animación suave al aparecer */
.select-tiles {
  animation: fadeTiles 0.4s ease;
}
@keyframes fadeTiles {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Mensaje de día cambiado automáticamente */
.select-tile {
  position: relative;
}
.select-tile:after {
  content: "⚡ ¡Se ha cambiado el día de la reserva al siguiente disponible!";
  pointer-events: none;
  display: block;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  z-index: 20;

  padding: 0.2rem 0.4rem;
  background-color: black;
  text-wrap-mode: nowrap;
  border-radius: 10px;
  font-size: 0.8rem;

  transform: translateX(-50%) translateY(-6px) scale(0.9);
  opacity: 0;
  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.select-tile.active[data-autochanged-day="true"] {
  z-index: 10;
}
.select-tile.active[data-autochanged-day="true"]:after {
  opacity: 1;
  transform: translateX(-50%) translateY(4px) scale(1);
}
/* Para pantallas pequeñas */
@media (max-width: 600px) {
  .select-tile:after {
    width: 130px;
    text-wrap: auto;
  }
}

/* Botones anterior mes y siguiente */
#fbuilder div.ui-datepicker-header {
  margin-bottom: 1rem;
  padding: 0.5rem 1rem !important;
}
#fbuilder div.ui-datepicker-header a.ui-datepicker-next,
#fbuilder div.ui-datepicker-header a.ui-datepicker-prev {
  width: 10px !important;
  height: 10px !important;
}
#fbuilder div.ui-datepicker-header a.ui-datepicker-next.ui-state-disabled,
#fbuilder div.ui-datepicker-header a.ui-datepicker-prev.ui-state-disabled {
  opacity: 0.2;
  cursor: not-allowed !important;
}
/* Grid en el calendario */
#fbuilder .dfield.fapp {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  row-gap: 3rem;
  column-gap: 2rem;
}

/* Para pantallas pequeñas */
@media (max-width: 600px) {
  #fbuilder .dfield.fapp {
    display: flex !important;
    flex-direction: column;
    gap: 2rem;
  }
}

#fbuilder .fieldCalendarService {
  grid-area: 1 / 1 / 2 / 3;
}
#fbuilder .fieldCalendar {
  grid-area: 2 / 1 / 3 / 2;
}
#fbuilder .slotsCalendar {
  grid-area: 2 / 2 / 3 / 3;
}
#fbuilder .usedSlots {
  grid-area: 3 / 1 / 4 / 3;
}

/* Calendario */
#fbuilder .ui-datepicker {
  display: block !important;
  max-width: 500px !important;
  width: fit-content !important;
  margin: 0 0 0 auto;
  border-radius: 10px;
  overflow: visible;
  -webkit-box-shadow: 0px 0px 8px -3px #000000 !important;
  box-shadow: 0px 0px 8px -3px #000000 !important;
}
#fbuilder .fieldCalendar {
  display: block !important;
}
/* Tabla días calendario */
#fbuilder table.ui-datepicker-calendar {
  table-layout: fixed !important;
  border-radius: 10px;
  overflow: visible;
}
/* Para pantallas grandes */
@media (min-width: 600px) {
  #fbuilder table.ui-datepicker-calendar {
    width: auto !important;
  }
}

/* Días calendario */
#fbuilder td {
  border: none !important;
  padding: 1px !important;
}
#fbuilder td a,
#fbuilder td span {
  height: 48px !important;
  width: 48px !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0 !important;
  border: none !important;
  text-shadow: none !important;
  border-radius: 10px;
}
#fbuilder
  .ui-datepicker-calendar
  td.partially-booked:not(.ui-state-disabled)
  a {
  background: rgb(255 174 112 / 60%) !important;
}
#fbuilder .ui-datepicker-calendar td.fully-booked:not(.ui-state-disabled) a {
  background: red !important;
  color: #fff !important;
  opacity: 0.6;
}
#fbuilder td {
  color: #666666;
}
#fbuilder td.partially-booked {
  position: relative;
}
#fbuilder td.partially-booked:before {
  content: "";
  display: block;
  width: 0.2em;
  aspect-ratio: 1 / 1;
  background-color: currentColor;
  top: 0.5em;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 100%;
  z-index: 50;
}
/* Hover en día */
#fbuilder
  td:not(.ui-datepicker-unselectable)
  a.ui-state-default.ui-state-hover {
  background-color: var(--e-global-color-d87f7e3) !important;
}
#fbuilder td > a {
  color: inherit !important;
}
/* Día seleccionado en el calendario */
#fbuilder
  td:not(.ui-datepicker-unselectable):has(a.ui-state-default.ui-state-active) {
  color: white !important;
}
#fbuilder
  td:not(.ui-datepicker-unselectable)
  a.ui-state-default.ui-state-active {
  background-color: var(--e-global-color-primary) !important;
}
/* Día partially-booked seleccionado */
#fbuilder
  td.partially-booked:not(.ui-datepicker-unselectable)
  a.ui-state-default.ui-state-active {
  background: rgb(255 144 60) !important;
  color: #fff !important;
  color: inherit;
}
/* Leyenda del calendario (disponibilidad de días) */
#fbuilder .calendar-legend {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.8rem;
}
#fbuilder .calendar-legend > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}
#fbuilder .calendar-legend .color-block {
  display: block;
  width: 20px;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
}
#fbuilder .calendar-legend .legend-available .color-block {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}
#fbuilder .calendar-legend .legend-partial .color-block {
  background-color: rgb(255 174 112 / 60%);
}
#fbuilder .calendar-legend .legend-full .color-block {
  background-color: red;
  opacity: 0.6;
}

/* Ocultar día debajo del calendario */
#fbuilder .slotsCalendar > .slots > span:first-child,
#fbuilder .slotsCalendar > .slots > br {
  display: none !important;
}
/* Leyenda de selectores de hora de inicio */
#fbuilder .slotsCalendar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
#fbuilder .slotsCalendar #slot-legend {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
#fbuilder .slotsCalendar #slot-legend > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}
#fbuilder .slotsCalendar #slot-legend div .color-block {
  display: block;
  width: 20px;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
}
/* Leyenda slots mañana */
#fbuilder .slotsCalendar #slot-legend .morning-legend .color-block {
  background-color: rgb(255 174 112 / 40%);
}
/* Leyenda slots tarde */
#fbuilder .slotsCalendar #slot-legend .afternoon-legend .color-block {
  background-color: rgb(112 172 255 / 40%);
}
/* Selector de horas de inicio */
#fbuilder .slotsCalendar .slots {
  display: grid;
  /* Crecimiento vertical primero
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    height: 100%;
	*/
  grid-template-columns: repeat(4, auto);
  height: fit-content;
  gap: 0.8rem;
  padding: 0;
}
#fbuilder .slotsCalendar .slots div {
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 15px;
  border: none !important;
  flex: 1 1 calc(25% - 1rem);
  height: 100%;
  gap: 1rem;
}
/* Tiles selectores de hora de inicio */
#fbuilder .slotsCalendar .slots div a {
  padding: 8px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  width: 100%;
  color: inherit;
}
/* Día seleccionado */
#fbuilder .slotsCalendar .slots div.currentSelection a {
  background: var(--e-global-color-primary);
  color: white;
  border-color: var(--e-global-color-primary);
}
/* Slots de mañana */
#fbuilder .slotsCalendar .slots div a[h1="8"],
#fbuilder .slotsCalendar .slots div a[h1="9"],
#fbuilder .slotsCalendar .slots div a[h1="10"],
#fbuilder .slotsCalendar .slots div a[h1="11"],
#fbuilder .slotsCalendar .slots div a[h1="12"],
#fbuilder .slotsCalendar .slots div a[h1="13"] {
  box-shadow: 0 2px 6px rgb(255 174 112 / 40%);
  background-color: rgb(255 174 112 / 40%);
}
/* Slots de tarde */
#fbuilder .slotsCalendar .slots div a[h1="14"],
#fbuilder .slotsCalendar .slots div a[h1="15"],
#fbuilder .slotsCalendar .slots div a[h1="16"],
#fbuilder .slotsCalendar .slots div a[h1="17"],
#fbuilder .slotsCalendar .slots div a[h1="18"] {
  background-color: rgb(112 172 255 / 40%);
  box-shadow: 0 2px 6px rgb(112 172 255 / 40%);
}
/* Hover mañana */
#fbuilder .slotsCalendar .slots div a[h1="8"]:hover,
#fbuilder .slotsCalendar .slots div a[h1="9"]:hover,
#fbuilder .slotsCalendar .slots div a[h1="10"]:hover,
#fbuilder .slotsCalendar .slots div a[h1="11"]:hover,
#fbuilder .slotsCalendar .slots div a[h1="12"]:hover,
#fbuilder .slotsCalendar .slots div a[h1="13"]:hover {
  background-color: rgb(255 174 112 / 65%);
  box-shadow: 1px 2px 6px 1px rgb(255 174 112 / 60%);
}
/* Hover tarde */
#fbuilder .slotsCalendar .slots div a[h1="14"]:hover,
#fbuilder .slotsCalendar .slots div a[h1="15"]:hover,
#fbuilder .slotsCalendar .slots div a[h1="16"]:hover,
#fbuilder .slotsCalendar .slots div a[h1="17"]:hover,
#fbuilder .slotsCalendar .slots div a[h1="18"]:hover {
  background-color: rgb(112 172 255 / 65%);
  box-shadow: 1px 2px 6px 1px rgb(112 172 255 / 60%);
}
/* Slots ya usados */
#fbuilder .slotsCalendar .slots div:not(.currentSelection).htmlUsed {
  cursor: not-allowed;
  opacity: 0.5;
}
#fbuilder .slotsCalendar .slots div:not(.currentSelection).htmlUsed a {
  background-color: #e5e7eb;
  pointer-events: none;
}
/* Timeslot seleccionado */
/* Datos de la reserva en formato grid */
#fbuilder .usedSlots > div.ahb_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto min-content;
  gap: 0.5rem;
  margin: 0 auto;
  width: fit-content;
}
#fbuilder .usedSlots > div.ahb_list > span.ahb_list_time {
  grid-area: 1 / 1 / 2 / 2;
} /* Fecha y hora */
#fbuilder .usedSlots > div.ahb_list > span.ahb_list_service {
  grid-area: 1 / 2 / 2 / 3;
} /* Duración */
#fbuilder .usedSlots > div.ahb_list > a.cancel {
  grid-area: 2 / 1 / 3 / 3;
} /* Botón de cancelar */

/* Fecha y hora de la reserva en formato grid */
#fbuilder .usedSlots > div.ahb_list > span.ahb_list_time {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.5rem;
}
#fbuilder .usedSlots > div.ahb_list > span.ahb_list_time:before {
  grid-area: 1 / 1 / 2 / 3;
}
#fbuilder .usedSlots > div.ahb_list > span.ahb_list_time > span.d {
  grid-area: 2 / 1 / 3 / 2;
}
#fbuilder .usedSlots > div.ahb_list > span.ahb_list_time > span.t {
  grid-area: 2 / 2 / 3 / 3;
}
/* Formatear el before del elemento */
#fbuilder .usedSlots > div.ahb_list > span.ahb_list_time:before {
  content: "Fecha y hora";
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--e-global-color-primary);
  display: block;
}
#fbuilder .usedSlots > div.ahb_list > span.ahb_list_time > span.d {
  text-align: right;
}

/* Duración de la reserva en formato flex-column */
#fbuilder .usedSlots > div.ahb_list > span.ahb_list_service {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#fbuilder .usedSlots > div.ahb_list > span.ahb_list_service:before {
  content: "Duración";
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--e-global-color-primary);
  display: block;
}

/* Botón de cancelar selección */
#fbuilder .usedSlots a.cancel {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--e-global-color-primary);
  color: white;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  border-radius: 10px;
  margin: 0;
  padding: 0.5rem;
  text-decoration: none;
}
#fbuilder .usedSlots a.cancel:hover {
  background-color: #253d72;
}

/* Campos de contacto ~ Inputs */
#fbuilder .fields:has(.dfield input[type="text"]) {
  width: 100%;
  max-width: 350px;
}
#fbuilder .fields:has(.dfield input[type="text"]) .clearer {
  display: none;
}
#fbuilder .fields:has(.dfield input[type="text"]):nth-child(even) {
  justify-self: right;
}
#fbuilder .fields:has(.dfield input[type="text"]):nth-child(odd) {
  justify-self: left;
}
/* Tamaño textarea detalles, informacion protecc datos, check politica privacidad y botón de enviar.
   Selectores basados en clase/estructura — no dependen del índice del campo,
   así no se rompen si se añaden campos al formulario. */
#fbuilder .fields[id*="field_"][id$="-5"],
#fbuilder .fields:has(.dfield textarea),
#fbuilder .fields.comment_area,
#fbuilder .fields.cff-checkbox-field,
#fbuilder button[type="button"].pbSubmit {
  justify-self: center;
  max-width: calc(700px + 1rem) !important;
  width: 100%;
}
/* Botón enviar reserva */
#fbuilder button[type="button"].pbSubmit {
  background-color: var(--e-global-color-primary);
  color: white;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  border-radius: 10px;
  margin: 0;
  padding: 0.5rem;
}
#fbuilder button[type="button"].pbSubmit:hover {
  background-color: #253d72;
}

/* Estilos del input */
#fbuilder .dfield input[type="text"],
#fbuilder .dfield input[type="number"],
#fbuilder .dfield input[type="email"],
#fbuilder .dfield input[type="tel"],
#fbuilder .dfield textarea {
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  border: 1px solid #dddddd;
  font-size: 1.3rem;
  padding: 0.2rem 0.3rem;
  min-height: 40px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#fbuilder .dfield input[type="text"]:focus,
#fbuilder .dfield input[type="number"]:focus,
#fbuilder .dfield input[type="email"]:focus,
#fbuilder .dfield input[type="tel"]:focus {
  box-shadow: 0 0 0 1px var(--e-global-color-primary);
  outline: 0px solid transparent;
}
/* Color rojo en asteriscos de campos requeridos */
#fbuilder .fields span.r {
  color: red;
}

/* Errores de campos */
#fbuilder .cpefb_error.message {
  border-radius: 10px;
  background-color: var(--e-global-color-a35e02e);
  padding: 0.5rem;
}
#fbuilder .cpefb_error.message:after {
  display: none;
}