/* RESPONSIVE MODULE */

/* ============================================================================
   LOADING AND LOGIN - Ensure full coverage
   ============================================================================ */

/* Loading screen must be on top */
.loading {
  z-index: 9999998 !important;
}

/* Hide all content when app is loading */
body.app-loading .container,
body.app-loading .flower-decoration,
body.app-loading .calendar-section,
body.app-loading .gallery-section,
body.app-loading .highlights-bar,
body.app-loading .on-this-day,
body.app-loading header {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Login modal must always be on top */
.login-modal {
  z-index: 9999999 !important;
  visibility: hidden !important;
}

.login-modal:not(.hidden) {
  visibility: visible !important;
}

/* Hide all content when login is required */
.login-required .container,
.login-required .gallery-section,
.login-required .media-modal,
.login-required .flower-decoration,
.login-required .calendar-section,
.login-required .highlights-bar,
.login-required .on-this-day,
.login-required header,
.login-required .date-picker-modal,
.login-required .growth-modal,
.login-required .upload-modal {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

/* ============================================================================
   ZOOM RESET BUTTON
   ============================================================================ */

  .zoom-reset-button {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
  
  .zoom-reset-button svg {
    width: 18px;
    height: 18px;
  }
}

/* Loading indicators siempre detrás del video */
.modal-media-container > div:not(#modal-video-player) {
  z-index: 1 !important;
}

#modal-video-player {
  z-index: 100 !important;
}

/* Estilos del modal-info están en modal.css - no duplicar aquí */

/* Utility Classes */
.hidden {
  display: none !important;
}

/* GPU Acceleration for smooth animations */
.gallery-section,
.calendar-section,
.media-modal,
.comments-section {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Cuando el modal está abierto, prevenir pull-to-refresh */
body.modal-open {
  overscroll-behavior-y: none !important;
  touch-action: pan-x pinch-zoom !important;
  overflow: hidden !important;
}

html:has(body.modal-open) {
  overscroll-behavior-y: none !important;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Animación simplificada sin transformaciones costosas */
@keyframes fadeInSimple {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    padding: 0.3rem;
  }

  header {
    margin-bottom: 0.3rem;
  }

  .calendar-section {
    padding: 0.5rem;
    border-radius: 12px;
  }

  .calendar-header {
    margin-bottom: 0.3rem;
  }

  .calendar-grid {
    gap: 0.2rem;
  }

  .calendar-day {
    padding: 0.1rem;
    border-radius: 6px;
  }

  .calendar-day.has-photos::after {
    bottom: 1px;
    right: 1px;
  }

  .gallery-section {
    padding: 1rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.8rem;
    padding-top: 70px;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .gallery-header {
    padding: 0.75rem;
    padding-top: max(0.75rem, env(safe-area-inset-top));
  }

  .gallery-header h2 {
    font-size: 1.3rem;
  }

  .close-btn {
    width: 45px;
    height: 45px;
    font-size: 1.5rem;
  }

  .flower-decoration {
    width: 60px;
    height: 60px;
    opacity: 0.08;
  }

  /* Modal responsive */
  .modal-close {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  .modal-nav {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  .modal-prev {
    left: 10px;
  }

  .modal-next {
    right: 10px;
  }

  .modal-content {
    width: 90%;
    max-width: 90%;
    height: 90%;
    max-height: 90%;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0.2rem;
  }

  .calendar-section {
    padding: 0.4rem;
  }

  .gallery-section {
    padding: 0.5rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
    padding-top: 65px;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }

  .gallery-header {
    padding: 0.5rem;
    padding-top: max(0.5rem, env(safe-area-inset-top));
  }

  .gallery-header h2 {
    font-size: 0.9rem;
  }

  .close-btn {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
  }

  /* Modal extra small */
  .modal-nav {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .modal-close {
    width: 35px;
    height: 35px;
    font-size: 1.3rem;
  }
  
  /* Fix admin buttons positioning in mobile */
  .gallery-item .highlight-btn,
  .highlight-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 15 !important;
  }
  
  .gallery-item .date-btn,
  .date-btn {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    bottom: auto !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 15 !important;
  }
  
  .highlight-btn svg,
  .date-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ============================================================================