/* Flatpickr - tema a medida acorde a la paleta Nexus (celeste/indigo), con soporte para modo claro/oscuro */
.flatpickr-calendar {
  background: var(--surface-solid, #0f1526);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 18px;
  box-shadow: var(--shadow, 0 20px 60px rgba(0,0,0,.5));
  font-family: var(--font, 'Inter', sans-serif);
  width: 300px;
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { display: none; }
.flatpickr-months { padding: 12px 12px 4px; }
.flatpickr-month { color: var(--text, #fff); }
.flatpickr-current-month { font-size: 15px; font-weight: 700; }
.flatpickr-current-month .cur-month, .flatpickr-current-month .numInputWrapper { color: var(--text, #fff); }
.flatpickr-current-month input.cur-year { color: var(--text, #fff); font-weight: 700; background: transparent; }
.flatpickr-prev-month, .flatpickr-next-month {
  color: var(--text-muted, #94a3b8) !important; fill: var(--text-muted, #94a3b8) !important;
  border-radius: 10px; transition: .2s;
}
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { background: rgba(56,189,248,.12); color: var(--primary, #38bdf8) !important; fill: var(--primary, #38bdf8) !important; }
.flatpickr-weekdays { background: transparent; margin-top: 4px; padding: 0 8px; box-sizing: border-box; }
span.flatpickr-weekday { color: var(--text-muted, #94a3b8); font-weight: 700; font-size: 11px; text-transform: uppercase; background: transparent; flex: 0 0 14.2857% !important; max-width: 14.2857% !important; box-sizing: border-box; }
.flatpickr-days { border: none; padding: 4px 8px 10px; }
.dayContainer { padding: 0; }
.flatpickr-day {
  color: var(--text, #fff); border-radius: 10px; font-weight: 600; font-size: 13px;
  /* Antes esto solo tenia "max-width", sin fijar un ancho real — flatpickr distribuye
     estas celdas con flexbox, y sin un "flex-basis" explicito de exactamente 1/7 del
     ancho disponible, el navegador podia (segun el ancho justo del contenedor en cada
     pantalla) terminar poniendo mas o menos de 7 celdas por fila antes de saltar a la
     siguiente linea — el ORDEN de los dias en el HTML seguia siendo perfecto (31, 1, 2,
     3...), pero la fila donde cada uno terminaba cayendo VISUALMENTE ya no coincidia mas
     con la semana logica a la que pertenecia, corriendo todo lo que venia despues del
     punto donde se rompio el conteo de 7. Fijar flex-basis a un septimo exacto del ancho
     (con box-sizing:border-box para que el padding/borde no se sume aparte) garantiza
     siempre 7 por fila sin importar el ancho justo del contenedor en cada pantalla.
     Este era el bug real detras del calendario "desfasado" que se via en las capturas. */
  flex: 0 0 14.2857%; max-width: 14.2857%; box-sizing: border-box;
  height: 36px; line-height: 36px;
}
.flatpickr-day:hover { background: rgba(56,189,248,.14); border-color: transparent; }
.flatpickr-day.today { border-color: var(--primary, #38bdf8); }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: linear-gradient(135deg, var(--primary, #38bdf8), var(--secondary, #818cf8));
  border-color: transparent; color: #fff; box-shadow: 0 0 16px -2px rgba(56,189,248,.6);
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--text-muted, #64748b); opacity: .35; cursor: not-allowed; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-muted, #64748b); opacity: .4; }
.flatpickr-day.inRange {
  background: rgba(56,189,248,.14); box-shadow: -5px 0 0 rgba(56,189,248,.14), 5px 0 0 rgba(56,189,248,.14); border-color: transparent;
}
.numInputWrapper span { border: none; }
.numInputWrapper span:hover { background: rgba(56,189,248,.12); }
.numInputWrapper span.arrowUp:after { border-bottom-color: var(--text-muted, #94a3b8); }
.numInputWrapper span.arrowDown:after { border-top-color: var(--text-muted, #94a3b8); }
.flatpickr-monthDropdown-months { background: transparent; color: var(--text, #fff); font-weight: 700; }
.flatpickr-monthDropdown-months option { background: var(--surface-solid, #0f1526); color: #fff; }

/* Input real que dispara el calendario (queda con la misma pinta que el resto de los .form-control) */
input.flatpickr-input[readonly] { cursor: pointer; background-color: var(--color-surface, rgba(255,255,255,.05)) !important; }
.flatpickr-input.active-picker { border-color: var(--primary, #38bdf8) !important; box-shadow: var(--glow-1, 0 0 24px -6px rgba(56,189,248,.6)); }