/* Cambiar el color de fondo general */
.flatpickr-calendar {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  font-family: 'Arial', sans-serif;
}

/* Cambiar color de los días */
.flatpickr-day {
  color: #333;
  font-weight: 300;
  font-size: 14px;
}

/* Días al pasar el mouse */
.flatpickr-day:hover {
  background-color: var(--main-color);
  color: #fff;
  cursor: pointer;
}

/* Día seleccionado */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background-color: var(--main-color);
  color: white;
  border: 1px solid var(--main-color);
  border-radius: 50%;
}

/* Días deshabilitados */
.flatpickr-day.disabled {
  background-color: #eee;
  color: #bbb;
  cursor: not-allowed;
}

/* Encabezado del mes */
.flatpickr-months .flatpickr-month {
  background-color: var(--main-color);
  color: white;
}

/* Flechas de navegación */
.flatpickr-prev-month,
.flatpickr-next-month {
  color: #ffffff;
}
 
/* Días dentro del rango mientras seleccionás, Día donde comienza el rango, Día donde termina el rango */
.flatpickr-day.inRange, .flatpickr-day.inRange.startRange.endRange, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.startRange, .flatpickr-day.selected.endRange, .flatpickr-day.endRange.endRange, .flatpickr-day.endRange.nextMonthDay{
  background-color: var(--main-color);
  color: #fff;
  border: 1px solid var(--main-color);
}

.flatpickr-day.nextMonthDay.inRange, .flatpickr-day.prevtMonthDay.inRange{
    background-color: #c78c8d;
}

/* Aseguramos el color correcto de inicio y fin */
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.startRange.endRange {
  background-color: var(--main-color) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* No aplicar colores de rango a días deshabilitados */
.flatpickr-day.disabled,
.flatpickr-day.inRange.disabled,
.flatpickr-day.startRange.disabled,
.flatpickr-day.endRange.disabled {
  background-color: #eee !important;
  color: #bbb !important;
  border: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.flatpickr-day.disabled:hover,
.flatpickr-day.disabled.inRange:hover {
  background-color: #eee !important;
  color: #bbb !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

 .flatpickr-day.notAllowed:hover{
    background-color: #eee !important;
  color: #bbb !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
 }

/*////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// RESPONSIVE /////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////*/

@media (max-width: 700px) {


    .flatpickr-calendar{
      margin-bottom: 30px;
    }
  

}