/* Hotfix calendario v3 (2026-02-04)
   Incluye:
   - Layout 7 columnas estable (prod)
   - Ancho/padding agradable
   - Header mes/año visible
   - Estilos para títulos: "Fecha de entrega" y "Hora de Entrega"
*/

/* Mantener placeholders ocupando espacio (nunca display:none) */
#calendar_modal .flatpickr-day.prevMonthDay,
#calendar_modal .flatpickr-day.nextMonthDay{
  display: flex !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Calendario más ancho y centrado */
#calendar_modal .datepicker-container{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
}

#calendar_modal .flatpickr-calendar,
#calendar_modal .flatpickr-calendar.inline{
  width: 100% !important;
  max-width: 420px !important;
}

@media (max-width: 420px){
  #calendar_modal .flatpickr-calendar,
  #calendar_modal .flatpickr-calendar.inline{
    max-width: 380px !important;
  }
}

/* Header (Mes + Año) siempre visible */
#calendar_modal .flatpickr-months,
#calendar_modal .flatpickr-month{
  width: 100% !important;
}

#calendar_modal .flatpickr-current-month{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}

#calendar_modal .flatpickr-current-month .flatpickr-monthDropdown-months{
  max-width: 60% !important;
}

#calendar_modal .flatpickr-current-month .numInputWrapper{
  display: inline-flex !important;
  align-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#calendar_modal .flatpickr-current-month input.cur-year{
  display: inline-block !important;
  width: 72px !important;
  min-width: 72px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Semana: grid 7 columnas + mismo padding que los días */
#calendar_modal .flatpickr-weekdays{
  width: 100% !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
}

#calendar_modal .flatpickr-weekdaycontainer{
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 4px !important;
}

#calendar_modal .flatpickr-weekday{
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
  text-align: center !important;
  letter-spacing: 0.2px !important;
}

/* Días: grid 7 columnas */
#calendar_modal .flatpickr-days{
  width: 100% !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

#calendar_modal .dayContainer,
#calendar_modal .flatpickr-days .dayContainer{
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#calendar_modal .flatpickr-day{
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 40px !important;
  line-height: 40px !important;
}

/* ====== Títulos de secciones (labels) ====== */
#calendar_modal .section-title{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  margin: 12px 0 10px 0 !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
}

#calendar_modal .section-title i{
  color: #F25C5C !important;
  font-size: 16px !important;
  flex: 0 0 auto !important;
}

#calendar_modal .section-title label{
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #1A1918 !important;
  letter-spacing: 0.2px !important;
}

#calendar_modal .section-title .required{
  color: #F25C5C !important;
  margin-left: 4px !important;
  font-weight: 900 !important;
}