.related-content.horizontal .related-item {
    margin: 0 0 10px;
}


.sidebar-module {
    margin-bottom: 12px;
}

.related-poster{
    border-radius: 12px;
}
.related-data{
    border-radius: 12px;
}


.details-genre {
    font-weight: 600;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding-bottom: 5px;
}


.details-rating.v2{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 2px;
    margin: 0 0 4px 0;
    
}



.yandispoiler-ads {
    text-align: center;
    width: 100%;
    float: left;
    padding: 8px 0px 2px 0px;
	border-bottom: solid 0;
	border-bottom-color: #39312F;
}




  
@media screen and (min-width: 1300px) and (max-width: 1700px) {
    .wrapper {
        margin: 0 10%!important;
    }  
}


.breadcrumb {
    margin: 6px 20px !important
}












/* Reparto Section */

.sbox {
    color: #fff;
    padding: 24px;
    background: #1a1a1a;
    border-radius: 8px;
    margin: 20px 0;
}

.sbox h2 {
    color: #f5f5f5;
    font-family: 'Netflix Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.6em;
    font-weight: 600;
    margin: 0 0 20px;
}



.persons {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 0 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: AUTO;
    scrollbar-color: #00b7eb #2a2a2a;
    box-sizing: border-box;
    margin: 0 auto;
    width: fit-content; /* ¡Importante! */
}



/* Scrollbar (igual que antes) */
.persons::-webkit-scrollbar {
     background: transparent;
    height: 14px;
}

.persons::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 4px;
}

.persons::-webkit-scrollbar-thumb {
    background: #00b7eb;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.persons::-webkit-scrollbar-thumb:hover {
    background: #00a3d0;
}

.person {
  width: 100px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex: 0 0 100px; /* Tamaño más pequeño */
    text-align: center;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
    animation-delay: calc(0.1s * var(--index));
    scroll-snap-align: start;
}



.person .img {
  margin: 0 auto 8px;
  border: 2px solid rgba(255, 255, 255, 0.2); /* Subtle border */
    display: block;
    width: 100px; /* Tamaño más pequeño */
    height: 140px; /* Tamaño más pequeño */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #000;
}



.person:hover .img {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.person .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.person .data {
  font-family: 'Netflix Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #fff;
    margin-top: 10px;
}

.person .data .name a {
    font-size: 14px;
    font-weight: 600;
    color: #f5f5f5;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.person .data .name a:hover {
    color: #00b7eb;
}

.person .data .caracter {
    font-weight: 300;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #a0a0a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

	
	
	
	
	

 #detalles {
  container-type: inline-size;
  container-name: tdetalles;
}

  .DataAdicional {
    margin: 0 auto;
    padding: 1px 0;
    overflow: auto;
    width: 95%;
    padding-top: 10px;
    
  }

  .DataAdicional .poster {
    float: right;
    width: 200px;
    margin: 0 0 5px 30px;
  }

  .DataAdicional .poster img {
    width: 100%;
    display: block;
    border-radius: 20px;
  }

  .DataAdicional .data {
    overflow: visible;
  }

  .LosDetalles {
    list-style-type: disc;
    color: #fff;
    font-size: 14px;
    padding-left: 14px;
    line-height: 17px !important;
    //text-align: left;

  }

  .LosDetalles li {
    margin-bottom: 5px;
  }

  /* Fallback para pantallas muy pequeñas */
  @media only screen and (max-width: 400px) {
    .DataAdicional .poster {
      float: none;
      width: 50%;
      margin: 0 auto 10px auto;
      display: block;
      text-align: center;
    }

    .DataAdicional .poster img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 6px;
    }
  }

    @supports not (container-type: inline-size) {
      .DataAdicional {
        width: 95%;
      }
    }

  @container tdetalles (max-width: 400px) {
    .DataAdicional {
      width: 95%;
    }

    .DataAdicional .poster {
      float: none;
      width: 60%;
      margin: 0 auto 10px auto;
      display: block;
      text-align: center;
    }

    .DataAdicional .poster img {
      width: 100%;
      height: auto;
      display: block;
    }
  }

  /* Container query: 320px a 520px */
  @container tdetalles (min-width: 400px) and (max-width: 450px) {
    .DataAdicional {
      width: 95%!important;
    }

    .DataAdicional .poster {
      float: right;
      width: 40%;
      margin: 0 0 5px 15px;
      display: block;
      text-align: center;
    }
  }

  @container tdetalles (min-width: 450px) and (max-width: 520px) {
    .DataAdicional {
      width: 90%!important;
      
    }

    .DataAdicional .poster {
      float: right;
      width: 35%;
      margin: 0 0 5px 15px;
      display: block;
      text-align: center;
    }
  }
  
  /* Container query: 520px a 880px */
  @container tdetalles (min-width: 520px) and (max-width: 600px) {
    .DataAdicional {
      width: 80%!important;
    }
    .DataAdicional .poster {
      float: right;
      width: 38%;
      margin: 0 0 5px 15px;
    }
  }

  /* Container query: más de 880px */
  @container tdetalles (min-width: 600px) {
    .DataAdicional {
      width: 75%;
    }

    .DataAdicional .poster {
      float: right;
      width: 40%;
      margin: 0 0 5px 15px;
    }
  }
  	
	
	
	
	
	



	
.sbox h2 {
    color: #000000;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-bottom: 8px;
    padding-top: 8px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

h2 {
    background: linear-gradient(40deg, #38d17e, #5cd983, #2fc56b);
    color: white;
    padding: 10px 15px;
    /* width: 100%; */ 
    box-sizing: border-box;
    border-radius: 10px;
    margin: 20px 0;
}



.no-content-msg {
    background: #2a2a2a;
    color: #ccc;
    padding: 14px;
    margin: 15px auto;
    border: 1px solid #444;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    max-width: 90%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}





@media screen and (max-width: 499px) {
    #playeroptionsul {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 140px;
    }

		#playeroptionsul::-webkit-scrollbar {
				width: 14px !important;
				background: #FFF;
				border-radius: 4px;
		}
    .play-lists li a {
        padding: 0px 6px!important;
    }
    .play-lists li {
        margin: 2px 0px!important;
    }
    	
}



/* Ocultar el elemento .opt-titl */
#playeroptionsul .opt-titl {
    display: none !important;
}

/* Ajustar el contenedor de la lista de opciones */
#playeroptionsul {
    display: flex;
    width: 100%;
    margin: 0 !important;
    overflow: auto;
    padding: 0 0 4px !important;
}

/* Estilo de la barra de desplazamiento */
#playeroptionsul::-webkit-scrollbar {
    height: 13px !important;
    background: #FFF;
    border-radius: 4px;
}

#playeroptionsul::-webkit-scrollbar-thumb {
    background: yellowgreen;
    border-radius: 4px;
}

/* Estilo para la opción seleccionada */
#playeroptionsul li.on {
    background-color: #ad9000 !important;
}

#playeroptionsul li.on .server {
    color: white !important;
}

/* Estilo al pasar el mouse sobre las opciones */
#playeroptionsul li:hover {
    background: blueviolet !important;
}

/* Ajustar la bandera */
#playeroptionsul .flag img {
    height: 18px !important;
    border: 0 !important;
    border-radius: 4px;
}




.btn-trailer{
    padding: 10px 20px!important;
}

.contenedor-trailer{
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.content-trailer {
    width: auto;
}





       
            #divLinksSerie {
                padding: 15px 35px !important;
            }
            .Serie-links {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                border-radius: 5px;
                margin: 2px !important;
            }
            .Serie-links a {
                background: rgb(255 255 255 / 84%);
                color: black !important;
                border: 0 !important;
                padding: 6px 7px 5px !important;
                margin: 2px !important;
                border-radius: 5px;
            }
            .EstadoDeSerie {
                background-color: #e1210d; /* Rojo llamativo */
                padding: 5px;
                border-radius: 5px;
                color: white !important; /* Texto en blanco para buen contraste */
                display: inline-block;
                text-align: center;
                font-size: 16px;
                font-weight: 501;
                line-height: 18px !important;
                /* Se agrega la animación pulsar */
                animation: pulsar 2s infinite;
            }
            @keyframes pulsar {
                0% {
                    box-shadow: 0 0 3px 0 rgba(255, 215, 0, 0.5);
                }
                50% {
                    box-shadow: 0 0 6px 6px rgba(255, 215, 0, 0.8);
                }
                100% {
                    box-shadow: 0 0 3px 0 rgba(255, 215, 0, 0.5);
                }
            }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .custom-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;    /* Centra horizontalmente */
    justify-content: center; /* Centra verticalmente si el contenedor tiene altura */
    gap: 10px;
    padding: 20px 0;
    font-family: 'Segoe UI', sans-serif;
    text-align: center;     /* Por si queda texto */
    width: 100%;
     font-weight: 500;
}

/* Mantiene el texto arriba centrado */
.custom-pagination .page-info {
    color: #ccc;
    font-size: 14px;
    text-transform: uppercase;
}

/* Contenedor de botones centrado */
.pagination-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center; /* Centra horizontalmente */
}

/* Botones estilo Netflix */
.pagination-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}

.pagination-button:hover {
    background-color: #e50914;
    transform: scale(1.05);
    color: white;
}

.pagination-button.active {
    background-color: #e50914;
    font-weight: bold;
    pointer-events: none;
    transform: scale(1.1);
}

.pagination-button.nav i {
    font-size: 16px;
}

@media (max-width: 480px) {
    .pagination-button {
        padding: 6px 10px;
        font-size: 12px;
    }
}
      






/* Asegura que el contenedor de la imagen sea flexible */
.home-module .image-container {
    width: 100%;
    height: 100%; /* Ajusta según el diseño de tu contenedor */
    position: relative;
    overflow: hidden;
}

/* Asegura que la imagen ocupe todo el contenedor */
.home-module .image-container img.mli-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hace que la imagen cubra el contenedor sin distorsionarse */
    object-position: center; /* Centra la imagen */
    display: block;
}

/* Ajustes específicos para slider */
.home-module.slider .image-container {
    aspect-ratio: 2 / 3; /* Ajusta según el diseño deseado, por ejemplo, para imágenes de póster */
}

/* Ajustes específicos para grid */
.home-module.grid .image-container {
    aspect-ratio: 2 / 3; /* O el ratio que prefieras para la cuadrícula */
}

/* Para contenedores sin imagen */
.home-module .image-container.no-image {
    background-color: #f0f0f0; /* Color de fondo para contenedores sin imagen */
    width: 100%;
    height: 100%;
}




.totals-info, #info {
  display: block;
  clear: both;
  margin: 0.3rem auto;
  padding: 1px;
  max-width: 800px;
  text-align: center;
}

.totals-info span {
  display: inline-block;
  font-size: 0.95rem;
  color: #444;
}

.estado1 {
  display: inline-block;
  background: #e91e63;
  color: #fff;
  padding: 0.2rem 0.5rem;
  margin-left: 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  text-transform: uppercase;
}

#epiTitulo {
  font-size: 1.2rem;
  font-weight: 600;
  color: #222;
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.4rem;
}

#epiTitulo .serie {
  color: #e91e63;
  margin-right: 0.3rem;
}

#epiTitulo .temporada, 
#epiTitulo .episodio {
  color: #666;
  margin-left: 0.3rem;
}

#info h1 {
  margin-top: 0px;
}







  .home-module.module-home-ads {
      padding-left: initial;
text-align: center;
    width: 100%;
    float: left;
  }
  
  
  
  
  
  
  
  
  
  .login-prompt {
  max-width: 600px;
  margin: 5px auto;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  text-align: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.login-prompt h2 {
  font-size: 1.5em;
  margin-bottom: 12px;
  margin: 8px 5px;
}


.login-prompt p {
  margin-bottom: 10px;
  font-size: 1em;
  line-height: 1.4;
}

.login-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.2s ease, color 0.2s ease;
}

.boton-login {
  background: #00b7eb;
  color: #fff;
}

.btn-login:hover {
  background: #0095b8;
}

.btn-register {
  background: transparent;
  color: #00b7eb;
  border: 2px solid #00b7eb;
}

.btn-register:hover {
  background: #00b7eb;
  color: #fff;
}
h2{
    color: black;
}





.cajadescarga {
margin-bottom: 8px;
}

.scajalinks{
color: #fff;
    padding: 24px;
    background: #1a1a1a;
    border-radius: 8px;
    margin: 20px 0;
}


.caja-titulo-h2 {
    color: #000000;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-bottom: 8px;
    padding-top: 8px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}


.scaja {
    color: #fff;
    padding: 24px;
    background: #1a1a1a;
    border-radius: 8px;
    margin: 20px 0;
}

.sboxyan {
    color: #fff;
    padding: 14px;
    background: #1a1a1a;
    border-radius: 8px;
    margin: 10px 0;
}



.episodes-list li{
    min-width: 110px;
}
.episodes-list li a {
font-size: 13px;
}


@media screen and (max-width: 499px) {
    .home-module.featured .module-title #featured-archive {
        top: initial !important;
    }
}















.premiere-message {
    /* Fondo */
    background-color: #f8d7da; /* Fondo rojo claro, por ejemplo */
    border: 1px solid #dc3545; /* Borde rojo */
    
    /* Padding */
    padding: 10px 10px; /* Espaciado interno: 15px arriba/abajo, 20px izquierda/derecha */
    
    /* Margin */
    margin: 15px 0; /* 20px arriba/abajo, 0 izquierda/derecha */
    
    /* Alineamiento centrado */
    text-align: center;
    
    /* Otros estilos */
    font-size: 16px; /* Tamaño de fuente */
    font-weight: bold; /* Negrita */
    color: #dc3545; /* Color del texto rojo */
    border-radius: 5px; /* Bordes redondeados */
    max-width: 600px; /* Ancho máximo */
    margin-left: auto; /* Centrar horizontalmente */
    margin-right: auto; /* Centrar horizontalmente */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
}