/* Base styles for the entire document */
body {
  font-family: "Inter", sans-serif;
  /* Tailwind se encargará de los colores base, pero mantenemos font-family */
}

/* Scroll-spy section targeting for smooth scrolling */
section {
  padding-top: 5rem; /* Space for sticky header/nav */
  padding-bottom: 5rem;
}
/* La sección de reels no necesita padding */
#reel-feed-section {
  padding-top: 0;
  padding-bottom: 0;
}

/* Custom scrollbar for a cleaner look */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: #00b2e2;
  border-radius: 4px;
}
::-webkit-scrollbar-track {
  background: #e2e8f0;
}

/* Full-height reel viewer style for a TikTok-like experience */
.reel-item {
  scroll-snap-align: start;
  height: 100vh; /* Make each reel take full viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.reel-feed {
  /* Ocupa el espacio disponible del viewport para la experiencia 'TikTokera' */
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  /* CORREGIDO: Ocultar barra de scroll */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
/* Ocultar barra de scroll para Chrome, Safari and Opera */
.reel-feed::-webkit-scrollbar {
  display: none;
}

/* Estilo para el botón de "Me Gusta" activo */
.liked {
  /* La estrella se rellena con JS/Tailwind (fill-yellow-400) */
  animation: like-pulse 0.5s ease-out;
}
@keyframes like-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

/* Sticky sidebar (desktop) */
@media (min-width: 1024px) {
  .sticky-sidebar {
    position: sticky;
    top: 5rem; /* Below the main header */
    height: calc(100vh - 5rem);
  }
}

/* Clase para la sección de reels cuando está en pantalla completa */
.fullscreen-reels {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
  /* Este padding-top era para el header, pero ahora no lo necesita */
  padding-top: 0;
}

/* Ocultar todo lo demás cuando los reels están activos */
.reels-active #main-header,
.reels-active .fixed.bottom-4.left-4, /* Botones flotantes */
.reels-active #backToTop,
.reels-active footer,
.reels-active #cookieBanner {
  display: none;
}

/* Añadir animación de spin si no estuviera definida por Tailwind */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}