/* ========================================
   SCROLLBAR CUSTOM (Estilo Flowbite)
   ======================================== */

/* Firefox */
.scrollbar-thin {
    scrollbar-width: thin;
}

.scrollbar-track-transparent {
    scrollbar-color: #d1d5db transparent;
}

.dark .scrollbar-track-transparent {
    scrollbar-color: #4b5563 transparent;
}

/* Webkit (Chrome, Safari, Edge) */
.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af;
}

/* Dark mode */
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #4b5563;
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280;
}

  /* Dark mode para el calendario Flatpickr cuando .dark está en <html> */
  .dark .flatpickr-calendar,
  .dark .flatpickr-months,
  .dark .flatpickr-weekdays,
  .dark .flatpickr-innerContainer,
  .dark .flatpickr-rContainer,
  .dark .flatpickr-days,
  .dark .flatpickr-day,
  .dark .flatpickr-time {
    background: #1f2937;
    color: #f3f4f6;
  }
  .dark .flatpickr-calendar { box-shadow: 0 3px 13px rgba(0,0,0,.4); border: 1px solid #374151; }
  .dark .flatpickr-calendar.arrowTop:before { border-bottom-color: #374151; }
  .dark .flatpickr-calendar.arrowTop:after { border-bottom-color: #1f2937; }
  .dark .flatpickr-calendar.arrowBottom:before { border-top-color: #374151; }
  .dark .flatpickr-calendar.arrowBottom:after { border-top-color: #1f2937; }
  .dark .flatpickr-weekday { color: #9ca3af; background: #1f2937; }
  .dark .flatpickr-day { color: #e5e7eb; border-color: transparent; }
  .dark .flatpickr-day:hover,
  .dark .flatpickr-day:focus { background: #374151; border-color: #374151; color: #f3f4f6; }
  .dark .flatpickr-day.selected,
  .dark .flatpickr-day.selected:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
  .dark .flatpickr-day.today { border-color: #3b82f6; }
  .dark .flatpickr-day.today:hover { background: #3b82f6; border-color: #3b82f6; color: #fff; }
  .dark .flatpickr-day.prevMonthDay,
  .dark .flatpickr-day.nextMonthDay,
  .dark .flatpickr-day.flatpickr-disabled { color: #6b7280; }
  .dark .flatpickr-current-month .flatpickr-monthDropdown-months,
  .dark .flatpickr-current-month input.cur-year { color: #f3f4f6; background: transparent; }
  .dark .flatpickr-current-month .flatpickr-monthDropdown-months option { background: #1f2937; color: #f3f4f6; }
  .dark .flatpickr-months .flatpickr-prev-month,
  .dark .flatpickr-months .flatpickr-next-month { color: #9ca3af; fill: #9ca3af; }
  .dark .flatpickr-months .flatpickr-prev-month:hover svg,
  .dark .flatpickr-months .flatpickr-next-month:hover svg { fill: #f3f4f6; }
  .dark .numInputWrapper span { border-color: #374151; }
  .dark .numInputWrapper span:hover { background: #374151; }
  .dark .numInputWrapper span.arrowUp:after { border-bottom-color: #9ca3af; }
  .dark .numInputWrapper span.arrowDown:after { border-top-color: #9ca3af; }
  /* Bordes finos como el resto de tu UI */
  .flatpickr-calendar { border-radius: 2px; }