/* ==========================================
   CORRECCIÓN DEFINITIVA - CALENDARIO CORTADO
   ========================================== */

/* PROBLEMA: El calendario se corta en la última fila cuando se ejecuta desde .exe
   CAUSA: El modal tiene una altura fija de 90vh y el contenido excede esa altura
   SOLUCIÓN: Forzar que el calendario use scrolling dentro del body del modal
*/

/* ELIMINAR la altura fija del modal y permitir que crezca */
#habitTrackerModal.modal-overlay {
  padding: 0 !important;
  overflow: hidden !important;
}

#habitTrackerModal .modal-container.habitracker-container {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

#habitTrackerModal .modal-content.habitracker-content {
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Header y tabs NO deben hacer scroll */
#habitTrackerModal .habitracker-header {
  flex-shrink: 0 !important;
}

#habitTrackerModal .habitracker-tabs-nav {
  flex-shrink: 0 !important;
}

/* EL BODY debe hacer scroll y contener todo el contenido */
#habitTrackerModal .habitracker-body {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: var(--spacing-4) var(--spacing-6) !important;
}

/* IMPORTANTE: El calendario debe tener altura AUTOMÁTICA para crecer */
#habitTrackerModal #tab-habits {
  display: block !important;
}

/* Forzar que la sección del calendario no se comprima */
#habitTrackerModal #tab-habits .calendar-section {
  height: auto !important;
  min-height: auto !important;
  display: block !important;
}

/* La grilla del calendario debe poder crecer sin límites */
#habitTrackerModal #tab-habits .calendar-grid {
  height: auto !important;
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 6px !important;
  padding: 10px !important;
}

/* Cada día del calendario con altura fija para consistencia */
#habitTrackerModal #tab-habits .calendar-day {
  height: 70px !important;
  min-height: 70px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

/* Headers de día con altura fija */
#habitTrackerModal #tab-habits .calendar-day-header {
  height: 30px !important;
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Para pantallas más pequeñas */
@media (max-height: 800px) {
  #habitTrackerModal #tab-habits .calendar-day {
    height: 60px !important;
    min-height: 60px !important;
  }
}

@media (max-height: 700px) {
  #habitTrackerModal #tab-habits .calendar-day {
    height: 50px !important;
    min-height: 50px !important;
  }
  
  #habitTrackerModal #tab-habits .calendar-day-header {
    height: 25px !important;
    min-height: 25px !important;
    font-size: 10px !important;
  }
}

/* Asegurar que los indicadores de hábitos se vean correctamente */
#habitTrackerModal #tab-habits .calendar-habit-indicator {
  width: 16px !important;
  height: 16px !important;
  font-size: 10px !important;
}

/* Override para eliminar cualquier overflow oculto */
#habitTrackerModal .habits-list {
  margin-bottom: 20px !important;
}

#habitTrackerModal .calendar-header {
  margin-bottom: 15px !important;
  flex-shrink: 0 !important;
}