/* RESET GENERAL */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  color: white;
  background: url("fondo-cine.jpg") no-repeat center center fixed;
  background-size: cover; 
}

/* LOGIN */
#login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 80px;
}

#login h2 {
  margin-bottom: 20px;
  font-size: 28px;
}

/* FILAS LOGIN */
.fila-login {
  margin: 14px;
}

.login-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

/* INPUTS LOGIN */
.login-box input,
.fila-login input {
  padding: 12px 15px;
  width: 250px;
  border-radius: 10px;
  border: none;
  background: white;
  color: #111;
  font-weight: 500;
  outline: none;
  font-size: 14px;
}

/* BOTONES LOGIN */
#btnUser, #btnAdmin {
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}

#btnUser {
  background: #2563eb;
  color: white;
}

#btnAdmin {
  background: #dc2626;
  color: white;
}

/* BOTÓN SALIR */
#btnLogout {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #333;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}

/* PANEL SUPERIOR */
.panel-superior {
  width: 100%;
  text-align: center;
  margin-top: 80px;
}

/* BUSCADOR */
#buscador {
  text-align: center;
  margin-bottom: 40px;
}

#inputBuscar {
  width: 360px;
  padding: 12px;
  border-radius: 10px;
  background: #ffffff;
  border: none;
  color: #000 !important;
  font-size: 14px;
}

#inputBuscar::placeholder {
  color: #666;
}

/* FORMULARIO ADMIN */
#formulario {
  display: none; 
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 1400px;
  margin: 40px auto 0 auto;
}

/* FILAS PANEL ADMIN */
.fila-admin {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

/* FILA AGREGAR PELICULA/SERIE COMPACTA */
.fila-admin:first-child {
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
}

/* INPUTS FORMULARIO */
#formulario input,
#formulario select,
.fila-admin:first-child input,
.fila-admin:first-child select {
  width: 140px;
  min-width: 140px;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: #e5e5e5;
  color: #111;
  font-size: 13px;
}

#resena {
  width: 200px !important;
  min-width: 200px !important;
}

/* BOTÓN AGREGAR */
#btnAgregar,
.fila-admin:first-child button {
  background: #ef4444;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  transition: 0.2s;
}

#btnAgregar:hover,
.fila-admin:first-child button:hover {
  transform: scale(1.05);
}

/* CONTENEDOR APP */
#app {
  display: block;
  text-align: center;
}


/* ========================================================= */
/* SECCIÓN GRID Y TARJETAS (CORREGIDA Y UNIFICADA)         */
/* ========================================================= */

/* GRID PELÍCULAS */
#peliculas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  padding: 30px;
  align-items: stretch; /* Obliga a que todas midan lo mismo */
}

/* MODO CELULAR */
@media (max-width: 768px) {
  #peliculas {
    grid-template-columns: repeat(2, 1fr); 
    gap: 14px;
    padding: 15px;
  }
}

/* TARJETA PELÍCULA */
.pelicula {
  background: #1c1c1c;
  border-radius: 10px;
  padding: 10px;
  transition: transform 0.2s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
  
  /* Flexbox para alinear contenido interior (Uniformidad) */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
}

/* CONTENEDOR IMAGEN CON PROPORCIÓN FIJA */
.imagen-container {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3; /* Proporción estándar de póster */
  overflow: hidden;
  border-radius: 8px;
  background: #111;
}

.imagen-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Evita que la imagen se estire o se aplaste */
  display: block;
}

/* TÍTULO CON ALTURA FIJA Y LÍMITE DE LÍNEAS */
.pelicula h3 {
  text-align: center;
  width: 100%;
  margin-top: 10px;
  font-size: 15px;
  
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}

.pelicula p,
.pelicula .anio {
  display: block;
  text-align: center;
  width: 100%;
  margin-top: 4px;
  font-size: 13px;
  color: #cfcfcf;
}

/* RESEÑA HOVER */
.resena-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  box-sizing: border-box;
  font-size: 12px;        
  line-height: 1.3;
  overflow-y: auto;       
  opacity: 0;
  transition: opacity 0.3s;
}

.imagen-container:hover .resena-hover {
  opacity: 1;
}

@media (max-width: 768px){
  .resena-hover{
    font-size:11px;
    padding:12px;
  }
}

/* ETIQUETA IDIOMA */
.tag-idioma {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 12px;
  color: white;
  z-index: 100;
}

.tag-idioma.latino {
  background-color: #16a34a !important; /* Verde */
}

.tag-idioma.subtitulada {
  background-color: #dc2626 !important; /* Rojo */
}

.bloqueado {
  margin-top: 10px;
  font-size: 13px;
  color: #ffcc00;
  background: #1a1a1a;
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-block;
}

/* ========================================================= */
/* ESTILO GENERAL DE BOTONES DENTRO DE LA TARJETA          */
/* ========================================================= */

.pelicula a,
.pelicula button,
.btnVer,
.btnEditar,
.btnEliminar {
  display: inline-block;
  margin: 10px 5px 0 5px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: 0.2s;
}

/* BOTON VER (AZUL) */
.pelicula a,
.btnVer {
  background: #2563eb;
  color: white;
}

.pelicula a:hover,
.btnVer:hover {
  background: #1d4ed8;
  transform: scale(1.05);
}

/* BOTON EDITAR (GRIS) */
.btnEditar {
  background: #e5e5e5;
  color: #111;
}

.btnEditar:hover {
  background: #d4d4d4;
  transform: scale(1.05);
}

/* BOTON ELIMINAR (ROJO) */
.btnEliminar {
  background: #dc2626;
  color: white;
}

.btnEliminar:hover {
  background: #b91c1c;
  transform: scale(1.05);
}

/* ========================================================= */
/* FILTROS Y BUSCADORES                                      */
/* ========================================================= */

/* BOTONES FILTRO TIPO */
#filtrosTipo {
  margin-top: 15px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 15px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.btnFiltro {
  background: #1f2937;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.btnFiltro:hover {
  background: #dc2626 !important;
  color: white;
  transform: scale(1.05);
}

.btnFiltro.activo {
  background: #dc2626 !important;
  color: white;
}

/* BLOQUE FILTRO AÑO */
#bloqueFiltrosAnio {
  margin-top: 25px;
  text-align: center;
}

.tituloFiltro {
  display: block;
  font-size: 18px;
  color: #facc15; 
  margin-bottom: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

#filtrosAnio {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

#filtrosAnio .btnFiltro {
  padding: 8px 14px;
  font-size: 13px;
  background: #374151;
}

/* ========================================================= */
/* TÍTULOS Y CABECERAS                                       */
/* ========================================================= */

.tituloApp {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 10px;
}

.tituloApp h1 {
  font-size: 42px;
  margin: 0;
}

.tituloApp .icono {
  font-size: 34px;
  display: block;
  margin-bottom: 6px;
}

/* TITULO EN LOGIN Y APP */
.tituloLogin {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  margin-top: 40px;
}

.tituloLogin h1 {
  font-size: 44px;
  letter-spacing: 1px;
  font-weight: 700;
  margin: 0;
}

.tituloLogin .icono {
  font-size: 38px;
}

.tituloLogin h1,
#tituloAdmin {
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    #fffde7 0%,
    #fff176 20%,
    #ffeb3b 45%,
    #ffd600 55%,
    #ffeb3b 70%,
    #fff176 85%,
    #fffde7 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 10px rgba(255,235,59,0.6),
    0 0 18px rgba(255,235,59,0.4);
}

/* Agregar episodio a serie & contraseñas */
.fila-admin h3,
#panelPasswords h3 {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
  color: #facc15;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}


/* ========================================================= */
/* MODAL SERIES                                              */
/* ========================================================= */

.modalSerie {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modalContenido {
  background: #111;
  width: 700px;
  max-width: 95%;
  border-radius: 15px;
  padding: 25px;
  position: relative;
}

#cerrarModal {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  cursor: pointer;
}

.modalGrid {
  display: flex;
  gap: 20px;
}

.modalGrid img {
  width: 200px;
  border-radius: 10px;
}

.modalInfo {
  flex: 1;
}

.selectores {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.selectores label {
  color: #facc15;      
  font-weight: 700;
  letter-spacing: 0.5px;
}

.selectores select {
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: #2a2a2a;
  color: #ffffff;
  font-weight: 700;     
  font-size: 15px;      
  letter-spacing: 0.3px;
}

.selectores select option {
  background: #1c1c1c;
  color: white;
}

#btnVerEpisodio {
  margin-top: 20px;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: #2563eb;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

/* ========================================================= */
/* MENÚ Y CATÁLOGO DE JUEGOS                                 */
/* ========================================================= */

#menuPrincipal {
  width: 90%;
  max-width: 1200px;
  margin: 25px auto;
  display: flex;
  justify-content: center;   
  align-items: center;
  padding: 15px 25px;
  background: #444;
  border-radius: 18px;
}

.logoMenu {
  display: none;
}

.menuBotones {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.btnMenu {
  padding: 12px 35px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 12px;
}

#catalogoJuegos {
  width: 100%;
}

#filtrosJuegos {
  margin: 20px 0;
}

/* ========================================================= */
/* CATÁLOGO Y GRID DE JUEGOS (CORREGIDO)                   */
/* ========================================================= */

#catalogoJuegos {
  width: 100%;
}

#filtrosJuegos {
  margin: 20px 0;
}

/* Usar el mismo sistema Grid que las películas */
#gridJuegos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  padding: 30px;
  align-items: stretch;
}

@media (max-width: 768px) {
  #gridJuegos {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 15px;
  }
}

/* Para que las tarjetas e imágenes de juegos respeten el tamaño exacto de las películas */
#gridJuegos .pelicula,
#gridJuegos .juegoCard,
#gridJuegos .card {
  background: #1c1c1c;
  border-radius: 10px;
  padding: 10px;
  transition: transform 0.2s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
}

/* Forzar tamaño de imagen de juegos */
#gridJuegos img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Ocultar etiquetas de idioma solo en el catálogo de juegos */
#gridJuegos .tag-idioma {
  display: none !important;
}