/* ==========================================================================
   Aislamiento del Paginador del Calendario (Semanas)
   ========================================================================== */

/* 1. Contenedor principal: Antídoto contra la columna del tema */
ul.pager__items.calendar-view-pager {
  display: flex !important;
  flex-direction: row !important; /* ESTO FUERZA LAS FLECHAS A LOS LADOS */
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important; 
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  border: 1px solid #111111 !important;
  background-color: #ffffff !important;
}

ul.calendar-view-pager li.pager__item {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  min-width: 0 !important;
}

/* 2. Botones laterales */
ul.calendar-view-pager li.pager__previous,
ul.calendar-view-pager li.pager__next {
  flex-shrink: 0 !important; 
}

ul.calendar-view-pager li.pager__previous a,
ul.calendar-view-pager li.pager__next a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 20px !important; 
  color: #555555 !important;
  text-decoration: none !important;
}

ul.calendar-view-pager li.pager__previous a:hover,
ul.calendar-view-pager li.pager__next a:hover {
  background-color: #f7f9fa !important;
}

/* 3. Contenedor Central (Fecha) - Comportamiento de Escritorio */
ul.calendar-view-pager li.pager__current {
  flex-grow: 1 !important; 
  flex-shrink: 1 !important; 
  min-width: 0 !important; 
}

/* Convertimos el contenedor de la fecha en un micro-layout flex */
ul.calendar-view-pager li.pager__current div.js-form-item {
  display: flex !important;
  flex-direction: row !important; /* Fechas lado a lado en PC */
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important; /* Espacio entre los números y el guion */
  font-weight: bold !important;
  color: #444444 !important;
  font-size: 1rem !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   Comportamiento de la Fecha Apilada (Móvil < 480px)
   ========================================================================== */
@media (max-width: 480px) {
  ul.calendar-view-pager li.pager__previous a,
  ul.calendar-view-pager li.pager__next a {
    padding: 10px 14px !important; 
  }

  /* El truco final: Apilar las fechas verticalmente */
  ul.calendar-view-pager li.pager__current div.js-form-item {
    flex-direction: column !important; /* Transforma "lado a lado" en "arriba hacia abajo" */
    gap: 0px !important; /* Quitamos espacio para que se vea compacto */
    line-height: 1.2 !important; /* Juntamos las líneas de texto */
    font-size: 0.85rem !important; 
  }
}