/* ============================================
   SKELETON LOADING - Buhonea 2026
   Skeletons inyectados directamente en HTML
   ============================================ */

/* Animación shimmer mejorada - barrido de izquierda a derecha */
@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Contenido oculto mientras carga pero mantiene espacio */
.bh-content-loading .bh-video-card > a,
.bh-content-loading .bh-video-card > h2,
.bh-content-loading .bh-video-card > p {
  opacity: 0 !important;
}

.bh-content-loading .cotillea-tarjeta > div:not(.bh-skeleton-overlay) {
  opacity: 0 !important;
}

/* Skeletons VISIBLES desde el inicio */
.bh-skeleton-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 100 !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.bh-content-loaded .bh-skeleton-overlay {
  opacity: 0 !important;
  transition: opacity 0.4s ease-out !important;
}

/* Mostrar contenido cuando carga */
.bh-content-loaded .bh-video-card > a,
.bh-content-loaded .bh-video-card > h2,
.bh-content-loaded .bh-video-card > p {
  opacity: 1 !important;
  transition: opacity 0.4s ease-out !important;
}

.bh-content-loaded .cotillea-tarjeta > div:not(.bh-skeleton-overlay) {
  opacity: 1 !important;
  transition: opacity 0.4s ease-out !important;
}

/* ============================================
   SKELETON: Video Cards
   ============================================ */

.bh-video-card {
  position: relative !important;
  min-height: 300px !important;
}

.bh-video-card .bh-skeleton-overlay {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Base para skeleton elements - con shimmer mejorado */
.bh-video-card .bh-skeleton-thumb,
.bh-video-card .bh-skeleton-title,
.bh-video-card .bh-skeleton-subtitle {
  position: relative !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.08) !important;
  display: block !important;
}

/* Shimmer overlay usando ::after */
.bh-video-card .bh-skeleton-thumb::after,
.bh-video-card .bh-skeleton-title::after,
.bh-video-card .bh-skeleton-subtitle::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  ) !important;
  animation: skeleton-shimmer 1.5s ease-in-out infinite !important;
  will-change: transform !important;
}

.bh-video-card .bh-skeleton-thumb {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 180px !important;
  border-radius: 12px !important;
}

.bh-video-card .bh-skeleton-title {
  height: 24px !important;
  width: 85% !important;
  border-radius: 4px !important;
}

.bh-video-card .bh-skeleton-subtitle {
  height: 18px !important;
  width: 70% !important;
  border-radius: 4px !important;
  margin-top: 4px !important;
}

.bh-video-card .bh-skeleton-subtitle:nth-of-type(2) {
  width: 50% !important;
}

/* ============================================
   SKELETON: Cotillea
   ============================================ */

.cotillea-tarjeta {
  position: relative !important;
}

.cotillea-tarjeta .bh-skeleton-overlay {
  width: 100% !important;
  height: 100% !important;
  min-height: 200px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Shimmer overlay para cotillea */
.cotillea-tarjeta .bh-skeleton-overlay::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  ) !important;
  animation: skeleton-shimmer 1.5s ease-in-out infinite !important;
  will-change: transform !important;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
  .bh-video-card {
    min-height: 320px !important;
  }
  
  .bh-video-card .bh-skeleton-thumb {
    min-height: 200px !important;
  }
  
  .cotillea-tarjeta .bh-skeleton-overlay {
    min-height: 180px !important;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .bh-video-card .bh-skeleton-thumb::after,
  .bh-video-card .bh-skeleton-title::after,
  .bh-video-card .bh-skeleton-subtitle::after,
  .cotillea-tarjeta .bh-skeleton-overlay::after {
    animation: none !important;
  }
  
  .bh-video-card .bh-skeleton-thumb,
  .bh-video-card .bh-skeleton-title,
  .bh-video-card .bh-skeleton-subtitle,
  .cotillea-tarjeta .bh-skeleton-overlay {
    background: rgba(255, 255, 255, 0.12) !important;
  }
}