/**
 * Tema calendario SURYA VIDA (Flatpickr)
 * Paleta: crema #faf7f4, melocotón #fccfae, naranja #e35501, terracota #ca733e, burdeos #671c10
 */

.flatpickr-calendar {
  font-family: 'Manrope', system-ui, sans-serif;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(103, 28, 16, 0.12);
  border: 1px solid rgba(103, 28, 16, 0.12);
  background: #fff;
  color-scheme: light;
  overflow: hidden;
}

/* Triángulo del popup Flatpickr: suele verse cortado o desalineado — lo ocultamos (se mantiene el gap numérico) */
.flatpickr-calendar::before,
.flatpickr-calendar::after {
  display: none !important;
  content: '' !important;
  border: none !important;
}

.flatpickr-months {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem 0.85rem !important;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(135deg, #671c10 0%, #8b2818 100%);
}

.flatpickr-months .flatpickr-month {
  flex: 1 1 auto;
  min-width: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  height: auto !important;
  width: auto !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: rgba(252, 207, 174, 0.95);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #fff;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  flex: 0 0 auto;
  padding: 0.25rem !important;
  height: auto !important;
  line-height: 1;
}

.flatpickr-current-month {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  width: 100%;
  padding: 0 !important;
  color: #fff;
  position: static !important;
  transform: none !important;
  left: auto !important;
  height: auto !important;
}

/* Mes: fondo claro + texto burdeos (el <select> nativo no hereda bien texto blanco en las opciones) */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: #faf7f4 !important;
  color: #671c10 !important;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 0.2rem 0.35rem;
  cursor: pointer;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus {
  outline: 2px solid #fccfae;
  outline-offset: 1px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background-color: #fff;
  color: #671c10;
  font-weight: 600;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option:checked {
  background-color: #e35501;
  color: #fff;
}

.flatpickr-current-month input.cur-year {
  background: rgba(250, 247, 244, 0.98);
  color: #671c10;
  font-weight: 800;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.flatpickr-current-month input.cur-year:focus {
  outline: 2px solid #fccfae;
  outline-offset: 1px;
}

.flatpickr-weekdays {
  background: linear-gradient(180deg, rgba(139, 40, 24, 0.08) 0%, #faf7f4 48%);
  border-bottom: 1px solid rgba(103, 28, 16, 0.06);
  padding-top: 0.2rem !important;
}

.flatpickr-weekday {
  color: #671c10;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.flatpickr-days {
  padding: 0.35rem 0 0.5rem;
}

.flatpickr-day {
  border-radius: 8px;
  color: #671c10;
  font-weight: 600;
}

.flatpickr-day:hover:not(.flatpickr-disabled):not(.selected) {
  background: #fccfae;
  border-color: #fccfae;
  color: #671c10;
}

.flatpickr-day.today {
  border-color: #ca733e;
  color: #ca733e;
}

.flatpickr-day.today:hover {
  background: rgba(202, 115, 62, 0.15);
  border-color: #ca733e;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #e35501 !important;
  border-color: #e35501 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(227, 85, 1, 0.35);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(103, 28, 16, 0.28);
}

.flatpickr-time {
  border-top: 1px solid rgba(103, 28, 16, 0.1);
  background: #faf7f4;
}

/* Campo sólo lectura que abre el calendario */
.sv-datepicker-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23671c10' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM5 7V6h14v1H5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.75rem;
}

.flatpickr-wrapper {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}

input.sv-datepicker-alt,
.flatpickr-alt-input.sv-datepicker-alt {
  width: 100%;
  padding: 0.75rem 2.75rem 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(202, 115, 62, 0.25);
  background: #fff;
  color: #671c10;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

input.sv-datepicker-alt:focus,
.flatpickr-alt-input.sv-datepicker-alt:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(227, 85, 1, 0.25);
  border-color: rgba(227, 85, 1, 0.45);
}