/**
 * =============================================================================
 * FAVORITES/FAVORITES.CSS - Estilos de la Página de Favoritos
 * =============================================================================
 * 
 * Este archivo CSS define la apariencia visual de la página de favoritos.
 * Es utilizado por: favorites/favorites.html
 * 
 * =============================================================================
 * ESTRUCTURA DEL ARCHIVO:
 * =============================================================================
 * 1. IMPORTS           - Importar estilos base de index.css
 * 2. HERO SECTION     - Sección principal con título y fondo
 * 3. ANIMACIONES      - Keyframes para animaciones
 * 4. LOGIN REQUIRED   - Mensaje cuando no está logueado
 * 5. NO FAVORITES     - Mensaje cuando no hay favoritos
 * 6. LOADING          - Indicador de carga
 * 7. FAVORITES HEADER - Título y contador
 * 8. FAVORITES GRID   - Grid de secciones de favoritos
 * 9. FAVORITES SECTION- Cada sección (Niños, Jóvenes, Mayores)
 * 10. FAVORITE CARD   - Tarjetas individuales de favoritos
 * 11. RESPONSIVE       - Ajustes para móviles
 * 
 * =============================================================================
 */

/* =============================================================================
SECCIÓN 1: IMPORTS
================================================================================
Importamos los estilos base del index para mantener consistencia en todo el sitio.
Esto incluye variables, reset, tipografía, botones, etc.
*/
@import url('../index/index.css');

/* =============================================================================
SECCIÓN 2: HERO SECTION
================================================================================
La sección hero es la parte superior de la página con el título principal.
Tiene un fondo degradado con efectos de partículas flotantes.
*/

/* Contenedor principal del hero */
.favorites-hero {
  position: relative; /* Posición relativa para posicionar elementos hijos */
  background: var(--bg-gradient); /* Gradiente de fondo definido en variables CSS */
  color: white; /* Texto blanco */
  padding: 6rem 0 8rem; /* Relleno: 6rem arriba, 8rem abajo */
  overflow: hidden; /* Ocultar contenido que sobresale */
  margin-bottom: 0; /* Sin margen inferior */
}

/* Fondo con efectos radiales */
.favorites-hero-bg {
  position: absolute; /* Posición absoluta para cubrir todo el hero */
  inset: 0; /* Equivalente a top:0, right:0, bottom:0, left:0 */
  background: /* Múltiples gradientes radiales superpuestos */
    radial-gradient(
      ellipse at 20% 80%, /* Elipse en posición 20% horizontal, 80% vertical */
      rgba(42, 157, 143, 0.25) 0%, /* Verde con 25% opacidad */
      transparent 50% /* Transparente a partir del 50% */
    ),
    radial-gradient(
      ellipse at 80% 20%,
      rgba(233, 196, 106, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      rgba(38, 70, 83, 0.3) 0%,
      transparent 70%
    );
  animation: float3D 8s ease-in-out infinite; /* Animación flotante 3D */
}

/* Contenido del hero */
.favorites-hero-content {
  position: relative; /* Relativo para estar encima del fondo */
  text-align: center; /* Texto centrado */
  max-width: 800px; /* Ancho máximo de 800px */
  margin: 0 auto; /* Centrar horizontalmente */
  z-index: 1; /* Por encima del fondo */
}

/* Badge/certificado pequeño */
.favorites-hero-badge {
  display: inline-block; /* En línea pero con dimensiones */
  background: rgba(255, 255, 255, 0.15); /* Fondo blanco semitransparente */
  backdrop-filter: blur(10px); /* Efecto vidrio esmerilado */
  padding: 0.5rem 1.25rem; /* Relleno interno */
  border-radius: var(--radius-full); /* Borde completamente redondeado */
  font-size: 0.9rem; /* Tamaño de letra pequeño */
  font-weight: 600; /* Negrita semibold */
  margin-bottom: 1.5rem; /* Margen inferior */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil */
  animation: fadeInDown 0.6s ease; /* Animación de entrada */
}

/* Título principal del hero */
.favorites-hero h1 {
  font-size: 3rem; /* Título grande */
  font-weight: 800; /* Extra bold */
  margin-bottom: 1rem; /* Margen inferior */
  color: white; /* Texto blanco */
  animation: fadeInUp 0.6s ease 0.1s both; /* Animación con delay */
}

/* Texto resaltado en el título */
.favorites-hero h1 .highlight {
  color: var(--accent); /* Color de acento de variables */
}

/* Subtítulo del hero */
.favorites-hero-subtitle {
  font-size: 1.25rem; /* Tamaño de letra */
  opacity: 0.95; /* Ligera transparencia */
  margin-bottom: 0; /* Sin margen inferior */
  animation: fadeInUp 0.6s ease 0.2s both; /* Animación con delay mayor */
}

/* Onda decorativa en la parte inferior */
.favorites-hero-wave {
  position: absolute; /* Posición absoluta */
  bottom: 0; /* Pegado abajo */
  left: 0; /* Pegado izquierda */
  width: 100%; /* Ancho completo */
  line-height: 0; /* Eliminar espacio extra de línea */
}

/* SVG de la onda */
.favorites-hero-wave svg {
  width: 100%; /* Ancho completo */
  height: 80px; /* Altura fija */
  display: block; /* Bloque para eliminar espacio extra */
}


/* =============================================================================
SECCIÓN 3: ANIMACIONES
================================================================================
Keyframes para las animaciones usadas en el hero y otros elementos.
*/

/* Animación flotante 3D */
@keyframes float3D {
  0%, 100% { /* Estado inicial y final */
    transform: translateY(0) rotateX(0deg) rotateY(0deg); /* Sin transformación */
  }
  25% { /* 25% de la animación */
    transform: translateY(-8px) rotateX(2deg) rotateY(2deg); /* Moverse arriba y rotar */
  }
  50% { /* Mitad de la animación */
    transform: translateY(0) rotateX(0deg) rotateY(0deg); /* Volver al centro */
  }
  75% { /* 75% de la animación */
    transform: translateY(-4px) rotateX(-2deg) rotateY(-2deg); /* Moverse arriba y rotar opuesto */
  }
}

/* Animación de entrada desde arriba */
@keyframes fadeInDown {
  from {
    opacity: 0; /* Invisible al inicio */
    transform: translateY(-20px); /* Desplazado 20px hacia arriba */
  }
  to {
    opacity: 1; /* Visible al final */
    transform: translateY(0); /* En su posición original */
  }
}

/* Animación de entrada desde abajo */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* Desplazado 20px hacia abajo */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =============================================================================
SECCIÓN 4: LOGIN REQUIRED
================================================================================
Mensaje mostrado cuando el usuario no está logueado.
*/

/* Contenedor principal */
.login-required {
  padding: 4rem 2rem; /* Relleno grande */
  text-align: center; /* Centrado */
}

/* Contenido interior */
.login-required-content {
  max-width: 500px; /* Ancho máximo */
  margin: 0 auto; /* Centrar */
}

/* Icono grande */
.login-required i {
  font-size: 4rem; /* Icono muy grande */
  color: var(--primary); /* Color primario */
  margin-bottom: 1.5rem; /* Margen inferior */
}

/* Título */
.login-required h2 {
  font-size: 1.8rem; /* Tamaño grande */
  margin-bottom: 1rem; /* Margen inferior */
  color: var(--text); /* Color de texto */
}

/* Párrafo */
.login-required p {
  color: var(--text-light); /* Color de texto secundario */
  margin-bottom: 2rem; /* Margen inferior */
  font-size: 1.1rem; /* Tamaño de letra */
}

/* Botones */
.login-required .btn {
  margin: 0.5rem; /* Margen entre botones */
}


/* =============================================================================
SECCIÓN 5: NO FAVORITES
================================================================================
Mensaje mostrado cuando el usuario no tiene favoritos guardados.
*/

/* Contenedor */
.no-favorites {
  padding: 4rem 2rem;
  text-align: center;
}

/* Contenido */
.no-favorites-content {
  max-width: 500px;
  margin: 0 auto;
}

/* Icono (diferente color que login required) */
.no-favorites i {
  font-size: 4rem;
  color: var(--secondary); /* Color secundario */
  margin-bottom: 1.5rem;
  opacity: 0.7; /* Más transparente */
}

/* Título */
.no-favorites h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--text);
}

/* Párrafo */
.no-favorites p {
  color: var(--text-light);
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

/* Contenedor de enlaces */
.no-favorites-links {
  display: flex; /* Flexbox para alinear */
  gap: 1rem; /* Espacio entre elementos */
  justify-content: center; /* Centrar horizontalmente */
  flex-wrap: wrap; /* Envolver en móviles */
}


/* =============================================================================
SECCIÓN 6: LOADING
================================================================================
Indicador de carga mostrado mientras se cargan los favoritos.
*/

/* Contenedor */
.loading-container {
  padding: 4rem 2rem;
  text-align: center;
}

/* Spinner circular */
.loading-spinner {
  width: 50px; /* Ancho */
  height: 50px; /* Alto */
  border: 4px solid var(--border); /* Borde gris */
  border-top-color: var(--primary); /* Borde superior en color primario */
  border-radius: 50%; /* Círculo perfecto */
  animation: spin 1s linear infinite; /* Animación de giro */
  margin: 0 auto 1rem; /* Centrar */
}

/* Animación de giro */
@keyframes spin {
  to {
    transform: rotate(360deg); /* Girar 360 grados */
  }
}

/* Texto de carga */
.loading-container p {
  color: var(--text-light);
}


/* =============================================================================
SECCIÓN 7: FAVORITES HEADER
================================================================================
Encabezado con título y contador de favoritos.
*/

/* Contenedor del header */
.favorites-header {
  margin-bottom: 2rem;
}

/* Título del header */
.favorites-header h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* Contador de favoritos */
.favorites-count {
  color: var(--text-light);
  font-size: 1rem;
}

/* Número destacado en el contador */
.favorites-count span {
  font-weight: 700; /* Negrita */
  color: var(--primary); /* Color primario */
}


/* =============================================================================
SECCIÓN 8: FAVORITES GRID
================================================================================
Grid principal que contiene las secciones de favoritos.
*/

/* Contenedor del grid */
.favorites-grid {
  display: flex; /* Flexbox en columna */
  flex-direction: column; /* Elementos en columna */
  gap: 3rem; /* Espacio entre secciones */
}


/* =============================================================================
SECCIÓN 9: FAVORITES SECTION
================================================================================
Cada sección (Niños, Jóvenes, Mayores) con su título y grid de tarjetas.
*/

/* Sección individual */
.favorites-section {
  margin-bottom: 1rem;
}

/* Encabezado de la sección */
.favorites-section-header {
  display: flex; /* Flexbox */
  align-items: center; /* Centrar verticalmente */
  justify-content: space-between; /* Espacio entre elementos */
  margin-bottom: 1.5rem; /* Margen inferior */
  padding-bottom: 1rem; /* Relleno inferior */
  border-bottom: 2px solid var(--border); /* Línea divisoria */
}

/* Título con icono */
.favorites-section-title {
  display: flex; /* Flexbox */
  align-items: center; /* Centrar verticalmente */
  gap: 0.75rem; /* Espacio entre icono y texto */
}

/* Icono del título */
.favorites-section-title i {
  font-size: 1.75rem; /* Tamaño grande */
  color: var(--primary); /* Color primario */
  width: 45px; /* Ancho del círculo */
  height: 45px; /* Alto del círculo */
  background: linear-gradient( /* Gradiente de fondo */
    135deg, /* Ángulo diagonal */
    var(--primary-light) 0%,
    var(--primary) 100%
  );
  border-radius: 50%; /* Círculo */
  display: flex; /* Flexbox para centrar */
  align-items: center;
  justify-content: center;
  color: white; /* Color del icono (sobreescribe el anterior) */
}

/* Título h2 */
.favorites-section-title h2 {
  font-size: 1.5rem;
  margin: 0;
  color: var(--text);
}

/* Contador de la sección */
.favorites-section-count {
  background: var(--primary-light); /* Fondo verde claro */
  color: white;
  padding: 0.35rem 1rem; /* Relleno pequeño */
  border-radius: 50px; /* Pills/redondo */
  font-size: 0.85rem;
  font-weight: 600;
}

/* Grid de tarjetas dentro de la sección */
.favorites-section-grid {
  display: grid; /* Grid de CSS */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* Columnas automáticas */
  gap: 1.5rem; /* Espacio entre tarjetas */
}


/* =============================================================================
SECCIÓN 10: FAVORITE CARD
================================================================================
Tarjeta individual que muestra un favorito.
*/

/* Tarjeta completa */
.favorite-card {
  background: var(--card-bg); /* Fondo de tarjeta de variables */
  border-radius: var(--radius-lg); /* Bordes redondeados */
  overflow: hidden; /* Ocultar contenido que sobresale */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Sombra suave */
  transition: /* Transiciones suaves */
    transform 0.3s ease,
    box-shadow 0.3s ease;
  display: flex; /* Flexbox */
  flex-direction: column; /* Columna */
}

/* Hover: efecto al pasar el mouse */
.favorite-card:hover {
  transform: translateY(-4px); /* Elevar 4px */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* Sombra más grande */
}

/* ----- Vista previa de la tarjeta (según tipo de contenido) ----- */
.favorite-card-preview {
  width: 100%; /* Ancho completo */
  height: 160px; /* Altura fija */
  display: flex; /* Flexbox */
  flex-direction: column; /* Columna */
  align-items: center; /* Centrar horizontalmente */
  justify-content: center; /* Centrar verticalmente */
  color: white; /* Texto blanco */
}

/* Icono dentro de la previsualización */
.favorite-card-preview i {
  font-size: 3rem; /* Icono grande */
  margin-bottom: 0.5rem; /* Espacio inferior */
}

/* Etiqueta del tipo */
.favorite-card-preview span {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase; /* Mayúsculas */
  opacity: 0.9;
}

/* Estilos específicos para PDF */
.pdf-preview {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); /* Rojo */
}

/* Estilos específicos para Video */
.video-preview {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); /* Morado */
}

/* Estilos específicos para Juego */
.game-preview {
  background: linear-gradient(135deg, #27ae60 0%, #229954 100%); /* Verde */
}

/* Estilo por defecto */
.default-preview {
  background: linear-gradient(
    135deg,
    var(--primary-light) 0%,
    var(--primary) 100%
  ); /* Gradiente verde */
}

.default-preview i {
  font-size: 3rem;
  color: white;
  opacity: 0.8;
}

/* ----- Contenido de la tarjeta ----- */
.favorite-card-content {
  padding: 1.5rem; /* Relleno interno */
  flex: 1; /* Ocupar espacio disponible */
  display: flex; /* Flexbox */
  flex-direction: column; /* Columna */
}

/* Etiqueta de categoría */
.favorite-card-type {
  display: inline-block; /* En línea con dimensiones */
  background: var(--primary-light); /* Fondo verde claro */
  color: white;
  padding: 0.25rem 0.75rem; /* Relleno pequeño */
  border-radius: 50px; /* Pills */
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  align-self: flex-start; /* Alinear al inicio */
}

/* Etiqueta de formato (PDF, Video, etc) */
.favorite-card-format {
  display: inline-block;
  background: var(--secondary); /* Fondo secundario */
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  margin-left: 0.5rem; /* Espacio a la izquierda */
  align-self: flex-start;
}

/* Título de la tarjeta */
.favorite-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

/* Descripción */
.favorite-card p {
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  flex: 1; /* Ocupar espacio disponible */
}

/* Fecha de guardado */
.favorite-card-date {
  font-size: 0.8rem;
  color: var(--text-light);
  margin-bottom: 1rem;
}

/* Contenedor de acciones (botones) */
.favorite-card-actions {
  display: flex;
  gap: 0.75rem; /* Espacio entre botones */
}

/* Botones de acción */
.favorite-card-actions .btn {
  flex: 1; /* Ocupar espacio igual */
  text-align: center;
  padding: 0.75rem;
  font-size: 0.9rem;
}

/* ----- Botón de eliminar favorito ----- */
.btn-remove-favorite {
  background: transparent; /* Transparente */
  border: 2px solid var(--danger); /* Borde color peligro */
  color: var(--danger); /* Color de peligro */
  cursor: pointer; /* Cursor de mano */
  transition: all 0.3s ease; /* Transición suave */
  border-radius: var(--radius); /* Bordes redondeados */
  padding: 0.75rem; /* Relleno */
  display: flex; /* Flexbox */
  align-items: center;
  justify-content: center;
}

/* Hover del botón eliminar */
.btn-remove-favorite:hover {
  background: var(--danger); /* Fondo color peligro */
  color: white; /* Texto blanco */
}


/* =============================================================================
SECCIÓN 11: RESPONSIVE
================================================================================
Ajustes para dispositivos móviles y tablets.
*/

@media (max-width: 768px) {
  /* Título más pequeño en móviles */
  .favorites-hero h1 {
    font-size: 2rem;
  }

  /* Una sola columna en el grid de favoritos */
  .favorites-section-grid {
    grid-template-columns: 1fr;
  }

  /* Encabezado de sección en columna */
  .favorites-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* Botones ocupan todo el ancho */
  .login-required .btn,
  .no-favorites-links .btn {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
  }
}