/* Flechas Horizontales */
 /* Oculta el texto original */
.ui-datepicker-prev span,
.ui-datepicker-next span {
  background-image: none !important;
  text-indent: -9999px; 
  position: relative;
}


/* .ui-datepicker-prev::before,
.ui-datepicker-next::before {
  font-family: "bbva-icons-spherica" !important;
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
} */

.ui-datepicker-prev::before {
  font-family: "bbva-icons-spherica" !important;
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  content: "\f11c";
}

.ui-datepicker-next::before {
  font-family: "bbva-icons-spherica" !important;
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  content: "\f24a";
}

/* Fin Flechas Horizontales */

/* Card Datepicker */
.ui-datepicker {
  background: var(--bbva-white-100) !important;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  padding: 1rem;
  font-family: "BentonMedium";
  font-size: 1rem;
  z-index: 1000 !important;
}

/* Ancho calendario */
#ui-datepicker-div {
  width: 330px !important;
}
/* Card Datepicker */
.ui-widget.ui-widget-content {
  border: 1px solid var(--bbva-grey-400);
}


.ui-datepicker td {
  text-align: center;
  vertical-align: middle;
}

.ui-datepicker td a {
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: none !important;
  color: var(--bbva-electric-blue);
  font-family: "BentonMedium" !important;
  transition: background 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

/* Hover sobre los días */
.ui-datepicker td a:hover {
  color: var(--bbva-electric-blue) !important;
  background-color: var(--bbva-grey-200) !important;
}

.ui-datepicker-current-day.ui-datepicker-today .ui-state-highlight.ui-state-active:hover {
  color: var(--bbva-midnight-blue) !important;
}

/* Día seleccionado */
.ui-datepicker .ui-state-active {
  color: var(--bbva-white-100) !important;
  background-color: var(--bbva-electric-blue) !important;
  border-radius: 50% !important;
}

.ui-datepicker .ui-state-highlight.ui-state-active {
  color: var(--bbva-white-100) !important;
}

/* Día actual (hoy) */
.ui-datepicker .ui-state-highlight {
  color: var(--bbva-midnight-blue) !important;
}


.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  color: var(--bbva-electric-blue);
  background: unset;
}

.ui-datepicker-unselectable.ui-state-disabled .ui-state-default {
  background-color: var(--bbva-grey-200);
  color: var(--bbva-grey-600);
  font-style: italic;
  pointer-events: none;
  border: none;
  border-radius: 50% !important;
  display: flex;
  justify-content: center
}

/* Dias cabecera de la semana */
.ui-datepicker th {
  font-family: "BentonMedium" !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: var(--bbva-midnight-blue);
  text-transform: uppercase;
}

/* Header selects */
.ui-widget-header {
  border: 0;
  background: var(--bbva-white-100);
}

/* Oculta la flecha predeterminada de los Select */

select.ui-datepicker-year,
select.ui-datepicker-month {
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  background-image: var(--unfold-svg);
  background-position: right 10px center;
  background-repeat: no-repeat;
  text-transform: capitalize;
}

.ui-datepicker select.ui-datepicker-month {
  background-color: var(--bbva-white-100);
  color: var(--bbva-electric-blue) !important;
  min-width: 130px !important;
  width: unset !important;
  font-family: 'BentonMedium', 'Arial', sans-serif;
}

/* Year */
.ui-datepicker select.ui-datepicker-year {
  background-color: var(--bbva-white-100);
  min-width: 80px !important;
  width: unset !important;
  font-family: 'BentonMedium', 'Arial', sans-serif;
}