/* Estilos generales */
body {
  font-family: 'Poppins', sans-serif;  /* Fuente más moderna */
  background: linear-gradient(135deg, #0c0c0c, #333);  /* Fondo con gradiente */
  margin: 0;
  padding: 0;
  color: #fff;  /* Texto blanco para contraste */
  letter-spacing: 0.5px;  /* Espaciado ligero entre letras */
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;  /* Espacio entre el logo y el buscador */
  align-items: center;  /* Centrado vertical */
  padding: 20px;
  background-color: #333;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;  /* Espacio entre el logo y el nombre */
}

.logo {
  width: 50px;  /* Ajusta el tamaño del logo */
  height: auto;  /* Mantiene la relación de aspecto */
}

.sitio-nombre {
  font-size: 24px;
  margin: 0;
  color: white;
}

/* Contenedor de la barra de búsqueda centrado */
.buscador-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);  /* Centra el buscador */
  display: flex;
  align-items: center;
  gap: 10px;
}

#buscador {
  width: 300px;  /* Ajusta el tamaño del input */
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  outline: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

#tipo-selector {
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ddd;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

#buscador::placeholder {
  color: #bbb;
}

#buscador:focus {
  border: 2px solid #4CAF50;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);  /* Sombra al enfocar */
}

/* Selector de Películas o Series */
#tipo-selector {
  padding: 10px;
  font-size: 16px;
  margin-top: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

#tipo-selector:hover {
  background-color: #f1f1f1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Contenedor de las categorías */
.categorias-container {
  padding: 20px;
  background-color: #333;
  color: white;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;  /* Añadido para que se acomoden en varias filas en pantallas pequeñas */
}

.categoria-btn {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  border: none;
  padding: 10px 20px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: transform 0.2s, opacity 0.2s;
}

.categoria-btn:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Lista de Películas */
.peliculas-lista {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 5 columnas de igual tamaño */
  gap: 20px;
  padding: 20px;
}

/* Estilo de cada película */
.pelicula-item {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s ease;
  max-width: 170px;  /* Miniaturas más estrechas */
  width: 100%;
  height: auto;
  position: relative; /* Necesario para posicionar el título */
}

.pelicula-item:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}


.pelicula-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Hace que la imagen cubra todo el contenedor sin perder la proporción */
  aspect-ratio: 9 / 16;  /* Relación de aspecto 9:16 */
  border-radius: 8px;
}

/* Mejorando la visibilidad del nombre de las películas con fondo semitransparente */
.pelicula-item h3 {
  color: #fff;  /* Título blanco para contraste */
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.6);  /* Fondo semitransparente oscuro para mejorar visibilidad */
  margin: 0;
  border-radius: 0 0 8px 8px;  /* Redondeamos los bordes inferiores */
  position: absolute;
  bottom: 0;  /* Coloca el título en la parte inferior */
  width: 100%;
}

/* Estilos para los botones de paginación */
.paginacion-container {
  text-align: center;
  margin-top: 20px;
}

.paginacion-btn {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  border: none;
  padding: 8px 15px;  /* Botón más pequeño */
  color: white;
  font-size: 14px;  /* Fuente más pequeña */
  cursor: pointer;
  margin: 0 5px;
  border-radius: 5px;
  transition: transform 0.2s, opacity 0.2s;
}

.paginacion-btn.activo {
  background-color: #007bff;  /* Cambia este color según tus preferencias */
  color: rgb(18, 199, 223);
  font-weight: bold;
}

.paginacion-btn:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro */
  animation: fadeIn 0.4s ease-in-out;
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  width: 80%;
  max-width: 800px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  animation: slideUp 0.5s ease-out;
}

/* Animación de fade-in para el modal */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Animación de deslizamiento para el modal */
@keyframes slideUp {
  0% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Botón de cerrar */
.close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  float: right;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Imagen de la película */
.modal-img {
  width: 60%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Títulos y descripciones */
h2 {
  margin-top: 0;
}

h3 {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* Estilo de los enlaces */
ul {
  list-style-type: none;
  padding: 0;
}

ul li {
  margin: 5px 0;
}

ul li a {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s;
}

ul li a:hover {
  background: linear-gradient(135deg, #45a049, #388e3c);
  transform: scale(1.05);
}

ul li a:active {
  background: linear-gradient(135deg, #388e3c, #2c6f2e);
}

/* Estilos para el footer */
footer {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);  /* Añadir sombra para darle más forma */
  position: relative;
  bottom: 0;
  width: 100%;
}

footer p {
  margin: 0;
  color: #bbb;  /* Texto más suave */
}

/* **Media Queries para dispositivos móviles** */

/* Para pantallas más pequeñas que 768px (tabletas y móviles en modo horizontal) */
@media (max-width: 768px) {
  .buscador-container {
    padding: 15px;
  }

  #buscador {
    width: 100%;
    font-size: 16px;  /* Reducir el tamaño de la fuente */
  }

  .categorias-container {
    flex-direction: column;  /* Las categorías se apilan verticalmente */
    gap: 15px;
  }

  .categoria-btn {
    font-size: 14px;  /* Botones más pequeños */
    padding: 8px 16px;
  }

  .peliculas-lista {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  /* Reducir el tamaño de las columnas */
  }

  .paginacion-btn {
    font-size: 12px;  /* Reducir el tamaño de los botones */
    padding: 6px 12px;
  }

  footer p {
    font-size: 12px;  /* Reducir el tamaño del texto del pie de página */
  }
}

/* Para pantallas más pequeñas que 480px (móviles en modo vertical) */
@media (max-width: 480px) {
  .buscador-container {
    padding: 10px;
  }

  #buscador {
    font-size: 14px;  /* Aún más pequeño en móviles muy pequeños */
  }

  .categoria-btn {
    font-size: 13px;  /* Botones aún más pequeños */
    padding: 6px 12px;
  }

  .peliculas-lista {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));  /* Columnas más estrechas en móviles pequeños */
  }

  .paginacion-btn {
    font-size: 10px;  /* Reducir más el tamaño de los botones de paginación */
    padding: 5px 10px;
  }
}