/*
Theme Name: Cine Hybrid (Dooplay + ToroNites)
Theme URI: https://cinescondites.com/
Author: Ricky19
Description: Tema híbrido personalizado de películas con reproductor externo dinámico y optimización de velocidad.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cine-hybrid
*/

/* ==========================================================================
   ESTILOS GENERALES (Estilo Cine Oscuro)
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #080a0d; /* Fondo ultra oscuro */
    color: #e2e8f0; /* Letras claras */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
}

a {
    color: #5a67d8;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #667eea;
}

/* ==========================================================================
   CABECERA (HEADER)
   ========================================================================== */
.site-header {
    background-color: #0f1217;
    border-bottom: 1px solid #1a202c;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo a {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
}

.logo-highlight {
    color: #5a67d8; /* Púrpura brillante estilo ToroPlay */
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav-menu a {
    color: #a0aec0;
    font-weight: 500;
}

.nav-menu a:hover {
    color: #fff;
}

/* ==========================================================================
   ESTRUCTURA DEL CONTENEDOR DE PELÍCULAS
   ========================================================================== */
.cine-container {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
}

/* REPRODUCTOR */
.player-section {
    background-color: #0f1217;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    margin-bottom: 40px;
    border: 1px solid #1d2430;
}

.ratio-16-9 {
    position: relative;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
    height: 0;
    background: #000;
}

.ratio-16-9 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* CONTROLES DE SERVIDORES */
.player-controls {
    padding: 20px;
    background-color: #12161f;
    border-top: 1px solid #1d2430;
}

.controls-title {
    display: block;
    color: #718096;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.servers-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* BOTONES DE SERVIDOR */
.server-tab-btn {
    background-color: #1a202c;
    border: 1px solid #2d3748;
    color: #cbd5e0;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.server-tab-btn:hover {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #fff;
}

.server-tab-btn.active {
    background-color: #5a67d8;
    border-color: #667eea;
    color: #fff;
    box-shadow: 0 0 15px rgba(90, 103, 216, 0.4);
}

.srv-name {
    font-weight: 700;
    font-size: 14px;
}

.srv-lang {
    font-size: 10px;
    opacity: 0.8;
    text-transform: uppercase;
    margin-top: 2px;
}

/* MENSAJE DE REPRODUCTOR VACÍO */
.player-placeholder {
    background: #12161f;
    padding: 100px 20px;
    text-align: center;
    color: #718096;
}

.player-placeholder p {
    margin-top: 10px;
}

/* DETALLES DE LA PELÍCULA */
.movie-flex {
    display: flex;
    gap: 40px;
}

.movie-poster-col {
    flex: 1;
    max-width: 280px;
}

.movie-poster img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    display: block;
}

.placeholder-img {
    background: #1a202c;
    aspect-ratio: 2/3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #4a5568;
}

.movie-info-col {
    flex: 3;
}

.movie-title {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    line-height: 1.2;
}

/* ETIQUETAS DE TAXONOMÍAS */
.movie-meta-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.meta-tag {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
}

.year-tag {
    background-color: #2d3748;
    color: #e2e8f0;
}

.genre-tag {
    background-color: rgba(90, 103, 216, 0.2);
    color: #a3b1ff;
    border: 1px solid rgba(90, 103, 216, 0.4);
}

.movie-synopsis h3 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.movie-synopsis {
    color: #a0aec0;
    margin-bottom: 30px;
    font-size: 16px;
}

/* BOTÓN DE TRAILER */
.btn-trailer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #e53e3e; /* Rojo YouTube */
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 700;
    transition: background-color 0.2s;
}

.btn-trailer:hover {
    background-color: #fc8181;
    color: #fff;
}

/* ==========================================================================
   PIE DE PÁGINA (FOOTER)
   ========================================================================== */
.site-footer {
    background-color: #0a0d14;
    border-top: 1px solid #1a202c;
    padding: 30px 20px;
    text-align: center;
    color: #718096;
    font-size: 14px;
    margin-top: 60px;
}

.footer-disclaimer {
    font-size: 12px;
    margin-top: 8px;
    opacity: 0.7;
}

/* RESPONSIVO */
@media (max-width: 768px) {
    .movie-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .movie-poster-col {
        max-width: 200px;
    }
    .movie-meta-tags {
        justify-content: center;
    }
    .site-header .header-container {
        flex-direction: column;
        gap: 15px;
    }
}


/* Ficha técnica */
.movie-technical-sheet {
    margin-bottom: 20px;
    background: #12161f;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #1d2430;
}

.movie-technical-sheet p {
    margin-bottom: 8px;
    font-size: 14px;
    color: #a0aec0;
}

.movie-technical-sheet p strong {
    color: #fff;
}

.movie-technical-sheet p span {
    color: #cbd5e0;
}

/* Insignia de Calidad (Amarillo ToroPlay) */
.quality-tag {
    background-color: #ecc94b;
    color: #1a202c;
    font-weight: 800;
}

/* ==========================================================================
   PORTADA: GRILLA DE PELÍCULAS (CINE GRID)
   ========================================================================== */
.section-header {
    margin-bottom: 30px;
    border-left: 4px solid #5a67d8; /* Línea de color estilo ToroPlay */
    padding-left: 15px;
}

.section-title {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.section-subtitle {
    color: #718096;
    font-size: 14px;
    margin-top: 4px;
}

/* Contenedor de la grilla */
.movies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* Tarjeta de Película */
.movie-card {
    background-color: #0f1217;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #1a202c;
    position: relative;
}

.movie-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    border-color: #5a67d8;
}

.movie-card-link {
    display: block;
    color: inherit;
}

/* Contenedor del póster dentro de la tarjeta */
.movie-card-poster {
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
    background-color: #1a202c;
}

.movie-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: scale 0.3s ease;
}

.movie-card:hover .movie-card-poster img {
    scale: 1.05;
}

/* Insignia de calidad sobre el póster */
.card-quality-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ecc94b; /* Amarillo llamativo ToroPlay */
    color: #0f1217;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Efecto de capa oscura y icono play en hover */
.poster-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(9, 11, 15, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}

.movie-card:hover .poster-overlay {
    opacity: 1;
}

.play-icon {
    font-size: 40px;
    width: 40px;
    height: 40px;
    color: #fff;
    background-color: #5a67d8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(90, 103, 216, 0.6);
    transform: scale(0.8);
    transition: transform 0.2s ease;
}

.movie-card:hover .play-icon {
    transform: scale(1);
}

/* Información inferior de la tarjeta */
.movie-card-info {
    padding: 12px 10px;
}

.movie-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Corta textos largos con "..." */
    margin-bottom: 4px;
}

.movie-card-year {
    font-size: 11px;
    color: #718096;
}

/* Paginación estilo botones */
.cine-pagination {
    text-align: center;
    margin-top: 40px;
}

.cine-pagination .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    background-color: #0f1217;
    border: 1px solid #1a202c;
    color: #a0aec0;
    border-radius: 4px;
    font-weight: 600;
}

.cine-pagination .page-numbers.current {
    background-color: #5a67d8;
    color: #fff;
    border-color: #5a67d8;
}

.cine-pagination .page-numbers:hover:not(.current) {
    background-color: #1a202c;
    color: #fff;
}

/* Estado sin películas */
.no-movies-found {
    text-align: center;
    padding: 80px 20px;
    color: #4a5568;
}

.no-movies-found .dashicons {
    font-size: 50px;
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
}

.no-movies-found h3 {
    color: #fff;
    margin-bottom: 8px;
}

/* Adaptación móvil extra para portadas */
@media (max-width: 480px) {
    .movies-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }
    .movie-card-info {
        padding: 8px;
    }
    .movie-card-title {
        font-size: 12px;
    }
}

/* ==========================================================================
   ESTILOS DE LA BARRA DE BÚSQUEDA EN EL HEADER
   ========================================================================== */
.header-search {
    flex: 1;
    max-width: 400px;
    margin: 0 30px;
}

.search-form {
    display: flex;
    position: relative;
    background-color: #12161f;
    border: 1px solid #1d2430;
    border-radius: 20px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.search-form:focus-within {
    border-color: #5a67d8; /* Brillo púrpura */
}

.search-field {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    padding: 8px 15px;
    font-size: 14px;
    width: 100%;
}

.search-submit {
    background: transparent;
    border: none;
    color: #a0aec0;
    padding: 0 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-submit:hover {
    color: #fff;
}

/* Ajustes responsivos para celulares */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: 15px;
    }
    .header-search {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
}

/* ==========================================================================
   LIVE SEARCH: RESULTADOS FLOTANTES
   ========================================================================== */
.live-search-results-box {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background-color: #0f1217;
    border: 1px solid #1d2430;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
    z-index: 999;
    overflow: hidden;
    max-height: 400px;
}

/* Fila de película individual */
.live-search-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #1a202c;
    transition: background-color 0.2s ease;
    text-decoration: none;
    color: #fff;
}

.live-search-item:last-child {
    border-bottom: none;
}

.live-search-item:hover {
    background-color: #1a202c;
    color: #fff;
}

/* Miniatura del póster sugerido */
.live-search-img {
    width: 40px;
    height: 55px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px;
    border: 1px solid #2d3748;
}

.live-search-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.live-search-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.live-search-year {
    font-size: 11px;
    color: #718096;
    margin-top: 2px;
}

/* Mensaje vacío sugerido */
.live-search-no-results {
    padding: 15px;
    color: #718096;
    font-size: 13px;
    text-align: center;
}

/* ==========================================================================
   MAQUETACIÓN CON BARRA LATERAL (Fila flexible)
   ========================================================================== */
.main-layout-wrapper {
    display: flex;
    gap: 30px;
}

/* El contenido ocupa el 75% del ancho */
.content-area {
    flex: 3;
    min-width: 0; /* Evita desbordamiento en flexbox */
}

/* La Sidebar ocupa el 25% */
.site-sidebar {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Estilo de los Widgets en la Sidebar */
.widget {
    background-color: #0f1217;
    border: 1px solid #1a202c;
    border-radius: 8px;
    padding: 20px;
}

.widget-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #5a67d8; /* Línea púrpura ToroPlay */
    display: inline-block;
}

/* Lista de Géneros por defecto */
.sidebar-genres-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-genres-list li {
    border-bottom: 1px solid #1a202c;
    padding: 8px 0;
}

.sidebar-genres-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-genres-list a {
    color: #cbd5e0;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    transition: color 0.2s;
}

.sidebar-genres-list a:hover {
    color: #fff;
}

.genre-count {
    color: #718096;
    font-size: 12px;
}

/* ==========================================================================
   RESPONSIVO PARA PANTALLAS CHICAS (Celulares)
   ========================================================================== */
@media (max-width: 992px) {
    .main-layout-wrapper {
        flex-direction: column; /* La sidebar pasa abajo en tablets y celulares */
    }
    .site-sidebar {
        width: 100%;
    }
}

/* ==========================================================================
   CARRUSEL PRINCIPAL DE DESTACADOS (SLIDER)
   ========================================================================== */
.cine-slider-section {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #0c0f13;
}

/* El truco del Scroll Snap para deslizamiento ultra fluido */
.slider-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Ocultar barra en Firefox */
}

.slider-container::-webkit-scrollbar {
    display: none; /* Ocultar barra en Chrome/Safari */
}

/* Diapositiva Individual */
.slide-item {
    flex: 0 0 100%;
    width: 100%;
    position: relative;
    aspect-ratio: 21/9; /* Proporción panorámica de cine */
    scroll-snap-align: start;
}

.slide-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

/* Imagen de fondo */
.slide-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Capa degradada para contraste (Estilo Netflix) */
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(12, 15, 19, 0.95) 10%, rgba(12, 15, 19, 0.5) 50%, rgba(12, 15, 19, 0.2) 100%);
    display: flex;
    align-items: center;
    padding: 0 6%;
    box-sizing: border-box;
}

/* Bloque de texto */
.slide-content {
    max-width: 45%;
    color: #fff;
}

.slide-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.slide-badge-quality {
    background-color: #ecc94b; /* Amarillo ToroPlay */
    color: #0f1217;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.slide-meta-year {
    color: #a0aec0;
    font-size: 13px;
    font-weight: 600;
}

.slide-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.slide-director {
    font-size: 13px;
    color: #cbd5e0;
    margin-bottom: 12px;
}

.slide-excerpt {
    font-size: 14px;
    color: #a0aec0;
    line-height: 1.5;
    margin-bottom: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Botón flotante para incitar al clic */
.slide-btn-play {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #5a67d8; /* Púrpura */
    color: #fff;
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(90, 103, 216, 0.4);
    transition: background-color 0.2s, transform 0.2s;
}

.slide-link:hover .slide-btn-play {
    background-color: #4c51bf;
    transform: scale(1.05);
}

.slide-btn-play .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Flechas de Navegación */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(12, 15, 19, 0.7);
    color: #fff;
    border: none;
    font-size: 24px;
    padding: 15px 12px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s, color 0.2s;
    border-radius: 4px;
}

.slider-arrow:hover {
    background-color: #5a67d8;
}

.prev-arrow {
    left: 15px;
}

.next-arrow {
    right: 15px;
}

/* ==========================================================================
   ADAPTACIONES RESPONSIVAS (Móviles)
   ========================================================================== */
@media (max-width: 768px) {
    .slide-item {
        aspect-ratio: 16/9; /* Proporción un poco más alta en móviles */
    }
    
    .slide-overlay {
        background: linear-gradient(to top, rgba(12, 15, 19, 0.95) 40%, rgba(12, 15, 19, 0.4) 100%);
        align-items: flex-end;
        padding: 20px;
    }
    
    .slide-content {
        max-width: 100%;
    }
    
    .slide-title {
        font-size: 22px;
    }
    
    .slide-excerpt {
        display: none; /* Escondemos el resumen en celulares para ahorrar espacio */
    }
    
    .slider-arrow {
        display: none; /* En celular el usuario desliza con el dedo de forma nativa */
    }
}

/* ==========================================================================
   NUEVA TARJETA DE VOTACIÓN (1 AL 10) - ULTRA LLAMATIVA
   ========================================================================== */
.movie-rating-card {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(20, 26, 38, 0.8) 0%, rgba(10, 14, 22, 0.9) 100%);
    border: 1px solid rgba(90, 103, 216, 0.25); /* Borde sutil púrpura */
    border-radius: 14px;
    padding: 18px 25px;
    margin: 20px 0 25px 0;
    gap: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    max-width: 520px;
}

/* Círculo Gigante de Puntuación */
.rating-radial-badge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    background: radial-gradient(circle, #1a202c 40%, #0c0f13 100%);
    border: 3px solid #5a67d8; /* Anillo brillante púrpura */
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(90, 103, 216, 0.5), inset 0 0 10px rgba(90, 103, 216, 0.2);
    flex-shrink: 0;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.rating-big-num {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.5px;
    transition: color 0.15s ease;
}

/* Color cuando se está previsualizando una nota al pasar el mouse */
.rating-big-num.preview-active {
    color: #ecc94b; /* Cambia a amarillo oro */
}

.rating-max {
    font-size: 10px;
    color: #718096;
    font-weight: 700;
    margin-top: 2px;
}

/* Panel derecho */
.rating-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}

.rating-label-hint {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #718096;
}

/* Contenedor de las 10 estrellas */
.star-rating-10 {
    display: flex;
    flex-direction: row-reverse; /* Permite el hover secuencial */
    font-size: 25px;
    gap: 2px;
}

.star-10 {
    color: #2d3748; /* Gris oscuro para las apagadas */
    cursor: pointer;
    transition: color 0.15s ease, transform 0.1s ease, text-shadow 0.15s ease;
}

.star-10.filled {
    color: #ecc94b; /* Amarillo brillante */
    text-shadow: 0 0 8px rgba(236, 201, 75, 0.4);
}

/* Efecto hover interactivo en secuencia */
.movie-rating-card:not(.voted-disabled) .star-10:hover,
.movie-rating-card:not(.voted-disabled) .star-10:hover ~ .star-10 {
    color: #f6e05e;
    transform: scale(1.2);
    text-shadow: 0 0 12px rgba(246, 224, 94, 0.8);
}

/* Información de votos y estados */
.rating-meta-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.rating-votes-count {
    color: #a0aec0;
    font-weight: 500;
}

.rating-status {
    font-weight: 700;
    font-style: italic;
}

/* Deshabilitar clicks una vez calificado */
.voted-disabled {
    pointer-events: none;
}

.voted-disabled .star-10 {
    cursor: default;
}

.voted-disabled .rating-radial-badge {
    border-color: #48bb78; /* El círculo cambia a color verde éxito */
    box-shadow: 0 0 15px rgba(72, 187, 120, 0.5);
}

/* Adaptación para pantallas de celulares */
@media (max-width: 480px) {
    .movie-rating-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
        gap: 15px;
    }
    .star-rating-10 {
        font-size: 20px; /* Reduce un poco las estrellas en móviles para que quepan holgadamente */
        justify-content: center;
    }
    .rating-meta-info {
        justify-content: center;
        flex-direction: column;
        gap: 5px;
    }
}

/* ==========================================================================
   ESTILOS DE RELACIONADAS, REPORTES Y FAVORITOS
   ========================================================================== */

/* 1. Relacionadas */
.related-movies-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #1a202c;
}
.related-title {
    color: #fff;
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 800;
}
.related-movies-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}
.related-poster-wrapper {
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
    border-radius: 6px;
    background: #1a202c;
}
.related-poster-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.related-quality-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #ecc94b;
    color: #000;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 3px;
}
.related-movie-title {
    font-size: 12px;
    font-weight: 700;
    color: #cbd5e0;
    margin-top: 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2. Botón de Reportar y Favoritos */
.report-link-wrapper, .favorite-btn-wrapper {
    margin-top: 15px;
}
.btn-report-link, .btn-favorite {
    background: #1a202c;
    border: 1px solid #2d3748;
    color: #a0aec0;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    transition: all 0.2s;
}
.btn-report-link:hover {
    background: #e53e3e;
    color: #fff;
    border-color: #e53e3e;
}
.btn-favorite:hover {
    background: #ecc94b;
    color: #000;
    border-color: #ecc94b;
}

/* 3. Modal de Reportes */
.report-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.report-modal-content {
    background: #0f1217;
    border: 1px solid #2d3748;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    position: relative;
    color: #fff;
}
.close-modal-btn {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #718096;
}
.report-modal-content select, .report-modal-content textarea {
    width: 100%;
    background: #1a202c;
    border: 1px solid #2d3748;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    margin: 10px 0 20px 0;
}
.btn-submit-report {
    background: #e53e3e;
    color: #fff;
    border: none;
    padding: 12px;
    width: 100%;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
}

/* 4. Favoritos Sidebar */
.fav-sidebar-item {
    padding: 10px 0;
    border-bottom: 1px solid #1a202c;
}
.fav-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #cbd5e0;
}
.fav-item-poster {
    width: 35px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}
.fav-item-title {
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .related-movies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   ETIQUETAS PREMIUM PARA DETALLES DE PELÍCULA (SINGLE)
   ========================================================================== */
.movie-meta-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

/* Base Común de Etiquetas */
.meta-single-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid transparent;
}

.meta-single-tag .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
}

/* 1. Estilo Calidad (Amarillo Neon ToroPlay) */
.tag-quality {
    background-color: #ecc94b;
    color: #0f1217;
    box-shadow: 0 4px 10px rgba(236, 201, 75, 0.2);
}
.tag-quality:hover {
    transform: translateY(-2px);
    background-color: #f6e05e;
}

/* 2. Estilo Año (Gris Oscuro con borde sutil) */
.tag-year {
    background-color: #1a202c;
    color: #cbd5e0;
    border-color: #2d3748;
}
.tag-year:hover {
    transform: translateY(-2px);
    background-color: #2d3748;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* 3. Estilo Géneros (Púrpura Elegante) */
.tag-genre {
    background-color: rgba(90, 103, 216, 0.15);
    color: #a3b8ff;
    border-color: rgba(90, 103, 216, 0.3);
}
.tag-genre:hover {
    transform: translateY(-2px);
    background-color: #5a67d8;
    color: #fff;
    border-color: #5a67d8;
    box-shadow: 0 4px 12px rgba(90, 103, 216, 0.4);
}

/* ==========================================================================
   ESTILOS PARA EL IMPORTADOR DINÁMICO DE TMDB (CINE HYBRID)
   ========================================================================== */

/* Contenedor principal de la página de administración */
.wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Grilla de resultados de búsqueda */
#tmdb-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

/* Tarjeta individual de película de TMDb */
.tmdb-movie-card {
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Efecto Hover sobre la tarjeta */
.tmdb-movie-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    border-color: #cbd5e0 !important;
}

/* Imagen de póster de la película */
.tmdb-movie-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-bottom: 1px solid #edf2f7;
    transition: transform 0.5s ease;
}

.tmdb-movie-card:hover img {
    transform: scale(1.03);
}

/* Contenedor de información de la película */
.tmdb-movie-card .movie-info-wrap {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
}

/* Título de la película */
.tmdb-movie-card h4 {
    margin: 0 0 6px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    line-height: 1.4 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 38px; /* Evita desajustes de altura en títulos cortos/largos */
}

/* Año de lanzamiento */
.tmdb-movie-card .movie-year {
    font-size: 12px;
    color: #718096;
    font-weight: 500;
}

/* Botón de Importación dentro de la tarjeta */
.tmdb-movie-card .import-btn {
    width: 100%;
    text-align: center;
    font-weight: 700 !important;
    color: #5a67d8 !important;
    border-color: #5a67d8 !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: auto !important;
    line-height: 1.4 !important;
}

.tmdb-movie-card .import-btn:hover {
    background: #5a67d8 !important;
    color: #ffffff !important;
    border-color: #5a67d8 !important;
}

/* Estado del botón al importar (Carga) */
.tmdb-movie-card .import-btn:disabled {
    background: #edf2f7 !important;
    border-color: #cbd5e0 !important;
    color: #a0aec0 !important;
    cursor: not-allowed;
}

/* Mensaje de estado general del Importador (Cargando / Éxito / Error) */
#importer-status-msg {
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Estilo para carga */
#importer-status-msg:has(span[style*="color:#d69e2e"]),
#importer-status-msg:has(span[style*="color:#646970"]) {
    background-color: #fefcbf;
    border: 1px solid #faf089;
    color: #b7791f;
}

/* Estilo para éxito */
#importer-status-msg:has(span[style*="color:#48bb78"]) {
    background-color: #c6f6d5;
    border: 1px solid #9ae6b4;
    color: #22543d;
}

/* Estilo para error */
#importer-status-msg:has(span[style*="color:#f56565"]) {
    background-color: #fed7d7;
    border: 1px solid #feb2b2;
    color: #742a2a;
}

#importer-status-msg a {
    color: #2b6cb0;
    text-decoration: underline;
    font-weight: 700;
}

/* Input de búsqueda principal */
#tmdb-search-input {
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

#tmdb-search-input:focus {
    border-color: #5a67d8 !important;
    box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.15) !important;
    outline: none;
}
/* ==========================================================================
   ESTILOS DE FILTROS CON BOTÓN Y CORRECCIÓN COMPLETA EN MÓVILES
   ========================================================================== */
.section-header-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 40px 0 30px 0;
    padding-bottom: 25px;
    border-bottom: 1px solid #1a202c;
}

/* Textos informativos */
.section-title-wrapper .section-title {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
}

.section-title-wrapper .section-subtitle {
    font-size: 14px;
    color: #a0aec0;
    margin: 0;
    font-weight: 500;
}

/* Contenedor de Filtros (Grilla flexible) */
.catalog-filters-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Selectores de filtros */
.filter-select {
    background-color: #101524 !important;
    border: 1px solid #2d3748 !important;
    color: #cbd5e0 !important;
    padding: 10px 38px 10px 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    outline: none !important;
    height: 42px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0aec0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px !important;
}

.filter-select:hover {
    border-color: #5a67d8 !important;
    color: #ffffff !important;
    background-color: #151c30 !important;
}

/* ESTILO DEL NUEVO BOTÓN BUSCAR/FILTRAR */
.filter-submit-btn {
    background-color: #5a67d8 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0 24px !important;
    height: 42px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px rgba(90, 103, 216, 0.3) !important;
    transition: all 0.2s ease !important;
}

.filter-submit-btn:hover {
    background-color: #4c51bf !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(90, 103, 216, 0.4) !important;
}

.filter-submit-btn:active {
    transform: translateY(0px) !important;
}

/* Animación de rotación para cuando está cargando */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   DISEÑO EXCLUSIVO RESPONSIVO PARA CELULARES (Hacerlo perfecto)
   ========================================================================== */
@media (max-width: 768px) {
    .section-header-filters {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        padding-bottom: 20px !important;
    }

    .section-title-wrapper {
        width: 100% !important;
        text-align: center !important; /* Centrado en móviles para mejor presencia */
    }

    .catalog-filters-bar {
        width: 100% !important;
        flex-direction: column !important; /* Los inputs se ordenan uno abajo del otro de forma elegante */
        gap: 10px !important;
    }

    .filter-select {
        width: 100% !important; /* Ocupan todo el ancho de la pantalla táctil */
        height: 46px !important; /* Ligeramente más altos para facilitar el toque con el dedo */
        font-size: 14px !important;
        background-position: right 16px center !important;
    }

    .filter-submit-btn {
        width: 100% !important; /* El botón de Filtrar ocupa el 100% abajo de todo */
        height: 46px !important;
        font-size: 15px !important;
        margin-top: 5px !important;
    }
}


/* ==========================================================================
   DISEÑO DEFINITIVO DEL CARRUSEL (BLINDADO CONTRA CONFLICTOS)
   ========================================================================== */
.ch-slider-section-wrapper {
    position: relative;
    width: 100% !important;
    margin-bottom: 40px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background-color: #0c0f13 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* Contenedor del scroll horizontal */
.ch-slider-container {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important; /* Firefox */
}

.ch-slider-container::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
}

/* Estructura de cada diapositiva */
.ch-slide-item {
    flex: 0 0 100% !important;
    width: 100% !important;
    position: relative !important;
    aspect-ratio: 21/9 !important; /* Formato panorámico de cine en PC */
    scroll-snap-align: start !important;
    overflow: hidden !important;
}

.ch-slide-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
}

/* IMAGEN DE FONDO: Ajuste perfecto garantizado */
.ch-slide-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;        /* Escala la imagen sin deformarla */
    object-position: center 25% !important; /* Enfoca las caras de los actores */
    display: block !important;
}

/* Sombreado de cine para que las letras blancas siempre se lean */
.ch-slide-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to right, rgba(12, 15, 19, 0.95) 15%, rgba(12, 15, 19, 0.5) 50%, rgba(12, 15, 19, 0.15) 100%) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 8% !important;
    box-sizing: border-box !important;
}

/* Textos e información */
.ch-slide-content {
    max-width: 45% !important;
    color: #ffffff !important;
}

.ch-slide-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
}

.ch-slide-badge {
    background-color: #ecc94b !important;
    color: #0f1217 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
}

.ch-slide-year {
    color: #a0aec0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.ch-slide-title {
    font-size: 38px !important;
    font-weight: 900 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

.ch-slide-director {
    font-size: 13px !important;
    color: #cbd5e0 !important;
    margin-bottom: 15px !important;
}

.ch-slide-excerpt {
    font-size: 14px !important;
    color: #a0aec0 !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.ch-slide-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: #5a67d8 !important;
    color: #ffffff !important;
    padding: 12px 25px !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: 0 4px 15px rgba(90, 103, 216, 0.4) !important;
    transition: background-color 0.2s, transform 0.2s !important;
}

.ch-slide-link:hover .ch-slide-btn {
    background-color: #4c51bf !important;
    transform: scale(1.03) !important;
}

/* Flechas de Navegación */
.ch-slider-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background-color: rgba(12, 15, 19, 0.75) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 20px !important;
    padding: 16px 14px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.2s !important;
    border-radius: 6px !important;
}

.ch-slider-arrow:hover {
    background-color: #5a67d8 !important;
}

.ch-prev { left: 15px !important; }
.ch-next { right: 15px !important; }

/* ==========================================================================
   DISEÑO RESPONSIVO MÓVIL
   ========================================================================== */
@media (max-width: 768px) {
    .ch-slide-item {
        aspect-ratio: 16/9 !important; /* Relación más alta en celulares para que luzca la imagen */
    }
    
    .ch-slide-overlay {
        background: linear-gradient(to top, rgba(12, 15, 19, 0.98) 45%, rgba(12, 15, 19, 0.4) 100%) !important;
        align-items: flex-end !important;
        padding: 20px !important;
    }
    
    .ch-slide-content {
        max-width: 100% !important;
    }
    
    .ch-slide-title {
        font-size: 24px !important;
    }
    
    .ch-slide-excerpt, 
    .ch-slider-arrow, 
    .ch-slide-director {
        display: none !important; /* Ocultamos elementos secundarios para no saturar la pantalla móvil */
    }
}

/* ==========================================================================
   ESTILOS DE RESPALDO PARA PELÍCULAS SIN IMAGEN DE FONDO HORIZONTAL
   ========================================================================== */
.ch-slide-fallback-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #0c0f13;
    overflow: hidden;
}

/* Imagen del póster estirada y ultra desenfocada de fondo */
.ch-slide-fallback-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: blur(25px) brightness(0.3) !important; /* Desfoque de cine */
    transform: scale(1.1);
}

/* Contenedor del póster centrado a la derecha */
.ch-slide-fallback-poster-container {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    height: 80%;
    z-index: 2;
    display: flex;
    align-items: center;
}

/* Póster vertical con sombreado flotando en la derecha */
.ch-slide-fallback-poster {
    height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    border: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 768px) {
    .ch-slide-fallback-poster-container {
        display: none !important; /* En celulares ocultamos el póster flotante para que no se encima con el texto */
    }
}

/* ==========================================================================
   ESTILOS DEL REPARTO CON FOTOS (MODO OSCURO)
   ========================================================================== */
.movie-cast-section {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #1a202c;
}

.cast-section-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -0.3px;
}

/* Grilla de actores */
.cast-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

/* Tarjeta individual */
.cast-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    padding: 12px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: transform 0.2s ease, background 0.2s ease;
}

.cast-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.05);
}

/* Envoltorio circular para la foto */
.cast-photo-wrap {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px;
    border: 2px solid #5a67d8; /* Anillo púrpura muy sutil */
    box-shadow: 0 4px 10px rgba(90, 103, 216, 0.25);
}

.cast-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Textos informativos */
.cast-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cast-name {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.cast-character {
    font-size: 11px;
    color: #718096;
    line-height: 1.2;
}

/* Adaptación responsiva para móviles */
@media (max-width: 768px) {
    .cast-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en celular */
        gap: 10px;
    }
    .cast-photo-wrap {
        width: 60px;
        height: 60px;
    }
    .cast-name {
        font-size: 11px;
    }
    .cast-character {
        font-size: 10px;
    }
}

/* ==========================================================================
   ADAPTACIÓN MULTIPANTALLA ULTRA-FLUIDA (PC, SMART TV, TABLET, MÓVIL)
   ========================================================================== */

/* 1. CONTENEDOR GENERAL FLUIDO (Ocupa todo el ancho disponible con márgenes de seguridad) */
.cine-container {
    width: 95% !important;
    max-width: 1800px !important; /* Límite gigante para que luzca increíble en Smart TVs y pantallas 4K */
    margin: 0 auto !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
}

/* 2. REPRODUCTOR FLUIDO EN CUALQUIER PANTALLA */
.player-section {
    width: 100% !important;
    margin-bottom: 30px !important;
}

.ratio-16-9 {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16/9 !important; /* Mantiene la proporción perfecta de cine en cualquier TV o celular */
    background: #000 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
}

.ratio-16-9 iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* 3. GRILLA PRINCIPAL EN PANTALLAS GIGANTES Y SMART TV (Desde 1400px en adelante) */
@media (min-width: 1400px) {
    /* La grilla se vuelve ultra-ancha y los posters aprovechan el espacio */
    .movies-grid, .related-movies-grid {
        grid-template-columns: repeat(7, 1fr) !important; /* 7 películas por fila en TV/PC grande */
        gap: 25px !important;
    }
    
    .movie-flex {
        display: flex !important;
        gap: 40px !important;
    }
    
    .movie-poster-col {
        flex: 0 0 320px !important; /* Póster lateral más imponente en pantallas grandes */
    }
    
    .movie-title {
        font-size: 42px !important; /* Título gigante y legible en TV */
    }

    .cast-grid {
        grid-template-columns: repeat(6, 1fr) !important; /* El reparto se despliega completo a lo ancho */
    }
}

/* 4. ADAPTACIÓN PARA SMART TV EXTREMAS (Pantallas 4K o de más de 1900px de ancho) */
@media (min-width: 1900px) {
    .cine-container {
        max-width: 2200px !important; /* Expandimos el límite casi al total de la TV */
    }
    
    .movies-grid, .related-movies-grid {
        grid-template-columns: repeat(8, 1fr) !important; /* 8 películas por fila */
    }
    
    .movie-poster-col {
        flex: 0 0 380px !important;
    }
}

/* 5. ADAPTACIÓN PARA TABLETS (De 769px a 1024px) */
@media (max-width: 1024px) {
    .cine-container {
        width: 96% !important;
    }
    
    .movies-grid {
        grid-template-columns: repeat(4, 1fr) !important; /* 4 películas por fila */
        gap: 15px !important;
    }
    
    .movie-flex {
        gap: 20px !important;
    }
    
    .movie-poster-col {
        flex: 0 0 240px !important;
    }
}

/* 6. ADAPTACIÓN PARA MÓVILES (Celulares en vertical - Hasta 768px) */
@media (max-width: 768px) {
    .cine-container {
        width: 100% !important;
        padding: 0 15px !important;
    }
    
    /* El reproductor de vídeo sube al 100% de la pantalla del celular sin bordes */
    .player-section {
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: calc(100% + 30px) !important;
    }
    
    .ratio-16-9 {
        border-radius: 0px !important; /* Sin bordes redondeados en móvil para parecer app nativa */
    }
    
    /* Grid de películas de portada: 2 columnas perfectas para que no queden enanas */
    .movies-grid, .related-movies-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* Columna de póster y detalles en móvil pasa a ser vertical */
    .movie-flex {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .movie-poster-col {
        width: 100% !important;
        max-width: 240px !important; /* Centramos el póster arriba */
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   HOMOGENEIZAR PORTADAS EN PELÍCULAS RELACIONADAS
   ========================================================================== */

/* Asegurar que la grilla de relacionadas tenga un comportamiento uniforme */
.related-movies-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* 5 columnas fijas en PC */
    gap: 20px !important;
    align-items: start !important;
}

/* Forzar a que cada tarjeta mantenga el mismo ancho y altura */
.related-movie-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* El contenedor del póster define el tamaño exacto del "espejo" */
.related-poster-wrapper {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 2 / 3 !important; /* Proporción estándar de póster de cine */
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #1a202c !important; /* Fondo de respaldo si tarda en cargar */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Forzar a la imagen a rellenar el espacio perfectamente sin deformarse */
.related-poster-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Recorta el sobrante de forma inteligente en el centro */
    object-position: center !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

/* Efecto hover elegante al pasar el mouse por encima */
.related-movie-card:hover .related-poster-wrapper img {
    transform: scale(1.05);
}

/* Título de las películas relacionadas alineado abajo */
.related-movie-title {
    margin-top: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Limita a un máximo de 2 líneas si el título es muy largo */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Ajuste responsive para celulares (2 columnas súper prolijas) */
@media (max-width: 768px) {
    .related-movies-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* ==========================================================================
   DISEÑO LLAMATIVO DE TRÁILER FLOTANTE Y VENTANA MODAL (LIGHTBOX)
   ========================================================================== */

/* Contenedor relativo del póster para fijar el botón de reproducción */
.movie-poster-container-relative {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

/* BOTÓN DE JUGAR TRÁILER FLOTANTE (ESTILO NETFLIX) */
.btn-play-trailer-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(90, 103, 216, 0.9); /* Color primario índigo de Cine Hybrid */
    border: none;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(90, 103, 216, 0.6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
}

.btn-play-trailer-overlay:hover {
    background: #4c51bf;
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0 40px rgba(90, 103, 216, 0.9);
}

/* Icono play gigante en la portada */
.play-icon-overlay {
    font-size: 38px !important;
    width: 38px !important;
    height: 38px !important;
    margin-left: 4px; /* Pequeño ajuste para centrar ópticamente el triángulo de play */
    pointer-events: none;
}

/* Anillo de pulsación con animación de radar de luz */
.play-pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: playPulse 2s infinite linear;
    pointer-events: none;
}

@keyframes playPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* BOTÓN ACCIÓN DIRECTA DEBAJO DE PORTADA */
.btn-action-trailer {
    background: linear-gradient(135deg, #e53e3e, #b32d2e) !important; /* Rojo llamativo cinematográfico */
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(229, 62, 62, 0.4) !important;
    transition: all 0.25s ease !important;
}

.btn-action-trailer:hover {
    background: linear-gradient(135deg, #fc8181, #e53e3e) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(229, 62, 62, 0.6) !important;
}

.btn-action-trailer .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* VENTANA MODAL DEL VIDEO */
.trailer-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 15, 30, 0.95); /* Desenfoque súper oscuro */
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.trailer-modal-content {
    position: relative;
    width: 100%;
    max-width: 960px; /* Tamaño ideal de cine en pantalla */
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
    border: 1px solid #2d3748;
}

/* Contenedor de proporción perfecta 16:9 */
.trailer-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.trailer-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Botón de cerrar elegante fuera del video */
.close-trailer-modal-btn {
    position: absolute;
    top: -45px;
    right: 0;
    font-size: 32px;
    color: #a0aec0;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-trailer-modal-btn:hover {
    color: #ffffff;
}

/* Adaptación responsive para celulares */
@media (max-width: 768px) {
    .btn-play-trailer-overlay {
        width: 60px;
        height: 60px;
    }
    
    .play-icon-overlay {
        font-size: 28px !important;
        width: 28px !important;
        height: 28px !important;
    }

    .close-trailer-modal-btn {
        top: 10px;
        right: 15px;
        background: rgba(0, 0, 0, 0.5);
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }
}

/* ==========================================================================
   NUEVO REDISEÑO DE PORTADAS (MINIMALIST SCORE, VER ABAJO, BORDE GLOW AZUL)
   ========================================================================== */

/* Contenedor de la portada base con transición para el borde */
.movie-card-poster {
    position: relative !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    aspect-ratio: 2 / 3 !important;
    background: #111525 !important;
    border: 2px solid transparent !important; /* Borde oculto por defecto */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* EFECTO DE REMARCADO: Borde azul brillante y sombra de fondo en Hover */
.movie-card:hover .movie-card-poster {
    border-color: #5a67d8 !important; /* Color azul Cine Hybrid */
    box-shadow: 0 0 20px rgba(90, 103, 216, 0.6) !important; /* Resplandor azul en la portada */
}

/* NOTA NUMÉRICA MINIMALISTA (Izquierda superior) */
.card-score-badge-clean {
    background: rgba(10, 15, 30, 0.8) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.star-score-icon {
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
    color: #f5c518 !important; /* Estrella dorada minimalista */
    margin-top: -1px !important;
}

/* Ajustes de las insignias de cabecera */
.card-top-badges {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 4 !important;
}

/* Capa de fondo oscura con desenfoque suave en Hover */
.poster-overlay-hover {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(10, 15, 30, 0.6) !important;
    backdrop-filter: blur(3px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 3 !important;
}

/* BOTÓN VER AHORA (Posicionado abajo del todo de forma elegante) */
.btn-ver-ahora-overlay-bottom {
    position: absolute !important;
    bottom: 20px !important; /* Desplazado al borde inferior de la tarjeta */
    background: linear-gradient(135deg, #5a67d8, #4c51bf) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px rgba(90, 103, 216, 0.5) !important;
    transform: translateY(10px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-ver-ahora-overlay-bottom .dashicons {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

/* Transiciones de activación hover */
.movie-card:hover .poster-overlay-hover {
    opacity: 1 !important;
}

.movie-card:hover .btn-ver-ahora-overlay-bottom {
    transform: translateY(0px) !important; /* Desliza suavemente a su posición final */
}

.movie-card:hover .movie-card-poster img {
    transform: scale(1.04) !important; /* Zoom muy sutil para no desconfigurar el borde */
}

/* ==========================================================================
   REPARACIONES: DISEÑO DE CALIDAD RESTAURADO Y RECUADRO DE TÍTULO
   ========================================================================== */

/* Asegurar posicionamiento de las insignias superiores */
.card-top-badges {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 10 !important; /* Capa superior para que no se oculte */
}

/* RESTAURACIÓN DE DISEÑO DE CALIDAD (Derecha) */
.card-quality-badge-right {
    background-color: rgba(90, 103, 216, 0.95) !important; /* Azul primario Cine Hybrid */
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    display: inline-block !important;
    letter-spacing: 0.5px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* NUEVO RECUADRO DE TÍTULO ESTRUCTURADO */
.movie-card-info-box {
    background: #0f1322 !important; /* Fondo oscuro integrado */
    border-radius: 0 0 10px 10px !important; /* Redondea solo las esquinas inferiores */
    padding: 12px 10px !important;
    border: 2px solid transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important; /* Delicada línea superior */
    margin-top: -2px !important; /* Une el recuadro perfectamente con la portada */
    transition: all 0.3s ease !important;
}

/* Ajustes del título dentro del recuadro */
.movie-card-title {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Corta textos largos elegantemente */
}

/* Ajustes del año dentro del recuadro */
.movie-card-year {
    color: #718096 !important; /* Gris suave */
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* EFECTO HOVER DE REMARCADO TOTAL */
.movie-card:hover .movie-card-info-box {
    background: #141b30 !important; /* Se aclara sutilmente el fondo al pasar el cursor */
    border-left: 2px solid #5a67d8 !important;
    border-right: 2px solid #5a67d8 !important;
    border-bottom: 2px solid #5a67d8 !important;
    box-shadow: 0 10px 20px rgba(90, 103, 216, 0.2) !important; /* Resplandor azul en la base */
}

/* ==========================================================================
   PANEL LATERAL DESLIZANTE DE FAVORITOS (DRAWER)
   ========================================================================== */

/* Botón disparador en el Header */
.header-fav-btn {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 20px !important;
    cursor: pointer !important;
    position: relative !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.header-fav-btn:hover {
    color: #f5c518 !important; /* Brillo dorado al pasar el cursor */
    transform: scale(1.1) !important;
}

.header-fav-icon {
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
}

/* Indicador numérico de favoritos */
.fav-badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background: #e53e3e !important; /* Rojo */
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #0f1322 !important;
}

/* Fondo oscuro desenfocado detrás del panel */
.fav-drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(10, 15, 30, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 99998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

.fav-drawer-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* El Panel Deslizante */
.fav-drawer {
    position: fixed !important;
    top: 0 !important;
    right: -350px !important; /* Escondido por defecto a la derecha */
    width: 320px !important;
    height: 100% !important;
    background: #0b0f19 !important; /* Fondo oscuro premium */
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5) !important;
    z-index: 99999 !important;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.fav-drawer.active {
    right: 0 !important; /* Se desliza hacia adentro */
}

/* Cabecera del Panel */
.fav-drawer-header {
    padding: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.fav-drawer-header h3 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.fav-drawer-header h3 .dashicons {
    color: #f5c518 !important;
}

.close-drawer-btn {
    background: transparent !important;
    border: none !important;
    color: #a0aec0 !important;
    font-size: 28px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 0 !important;
    transition: color 0.2s ease !important;
}

.close-drawer-btn:hover {
    color: #ffffff !important;
}

/* Lista de Películas Guardadas */
.fav-drawer-content {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

/* Tarjeta de Película Favorita */
.fav-item-card {
    display: flex !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    padding: 8px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    position: relative !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.fav-item-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(90, 103, 216, 0.4) !important;
}

.fav-item-poster {
    width: 50px !important;
    height: 75px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
    background: #111525 !important;
}

.fav-item-info {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-right: 25px !important; /* Espacio para el botón de borrar */
}

.fav-item-title {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}

.fav-item-title:hover {
    color: #5a67d8 !important;
}

/* Botón de Eliminar de favoritos (X pequeña) */
.btn-remove-fav {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: transparent !important;
    border: none !important;
    color: #718096 !important;
    font-size: 18px !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
}

.btn-remove-fav:hover {
    color: #e53e3e !important;
}

/* Mensaje cuando la lista está vacía */
.fav-empty-msg {
    text-align: center !important;
    color: #718096 !important;
    font-size: 13px !important;
    margin-top: 40px !important;
}

.fav-empty-msg .dashicons {
    font-size: 40px !important;
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 10px !important;
    opacity: 0.5 !important;
}

/* ==========================================================================
   OPTIMIZACIÓN DE GRILLA: 5 COLUMNAS EN PC (PORTADAS MÁS GRANDES)
   ========================================================================== */
.movies-grid {
    display: grid !important;
    /* Ajustamos para que en pantallas de PC grandes muestre exactamente 5 columnas de igual tamaño */
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 20px !important; /* Espacio elegante de separación entre las tarjetas */
    margin-bottom: 30px !important;
}

/* RESPONSIVE: Adaptación fluida para pantallas medianas (Tablets) */
@media (max-width: 1024px) {
    .movies-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* 3 películas en tablets */
        gap: 15px !important;
    }
}

/* RESPONSIVE: Adaptación fluida para celulares */
@media (max-width: 640px) {
    .movies-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 películas en celulares para que no queden muy pequeñas */
        gap: 12px !important;
    }
}

/* ==========================================================================
   DISEÑO PREMIUM: TABS REPRODUCTOR, MODO CINE Y CARRUSEL RECOMENDADAS
   ========================================================================== */

/* CONTENEDOR GENERAL DEL REPRODUCTOR */
.player-wrapper-outer {
    background: #0b0f19 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
}

/* BARRA DE UTILIDADES */
.player-control-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.player-playing-title {
    color: #a0aec0 !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.player-playing-title strong {
    color: #ffffff !important;
}

/* Botón de Modo Cine */
.btn-cinema-utility {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a0aec0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}

.btn-cinema-utility:hover {
    background: #5a67d8 !important;
    color: #ffffff !important;
    border-color: #5a67d8 !important;
    box-shadow: 0 0 15px rgba(90, 103, 216, 0.4) !important;
}

/* OVERLAY APAGAR LUCES (Modo Cine) */
.cinema-overlay-shutter {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(4, 6, 11, 0.96) !important; /* Oscuridad de cine absoluta */
    z-index: 99990 !important;
    transition: opacity 0.4s ease !important;
}

/* El reproductor se eleva sobre la oscuridad al activarse */
body.cinema-mode-active .player-wrapper-outer {
    position: relative !important;
    z-index: 99995 !important;
    box-shadow: 0 0 50px rgba(90, 103, 216, 0.3) !important;
}

/* EL CONTENEDOR DE VÍDEO ASPECTO 16:9 */
.player-container-main {
    width: 100% !important;
    background: #000000 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.iframe-aspect-ratio {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
}

.iframe-aspect-ratio iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* SECTOR DE TABS DE SERVIDORES */
.servers-tabs-container {
    margin-top: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.servers-label {
    color: #718096 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.servers-tabs-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* Botón pestaña Servidor */
.server-tab {
    background: #111525 !important;
    color: #a0aec0 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.25s ease !important;
}

.server-tab:hover {
    background: rgba(90, 103, 216, 0.1) !important;
    color: #ffffff !important;
    border-color: rgba(90, 103, 216, 0.4) !important;
}

/* Pestaña de Servidor Activo */
.server-tab.active {
    background: #5a67d8 !important; /* Azul Cine Hybrid */
    color: #ffffff !important;
    border-color: #5a67d8 !important;
    box-shadow: 0 4px 15px rgba(90, 103, 216, 0.4) !important;
}

/* ==========================================================================
   ESTILOS DEL CARRUSEL DE RELACIONADAS
   ========================================================================== */
.related-movies-section {
    margin-top: 40px !important;
    width: 100% !important;
}

.section-header-carousel {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}

.related-section-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Botones de navegación */
.carousel-nav-buttons {
    display: flex !important;
    gap: 8px !important;
}

.btn-carousel-nav {
    background: #111525 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    font-size: 22px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
}

.btn-carousel-nav:hover {
    background: #5a67d8 !important;
    border-color: #5a67d8 !important;
    box-shadow: 0 0 15px rgba(90, 103, 216, 0.4) !important;
}

/* El viewport recortado con scroll invisible */
.related-carousel-viewport {
    width: 100% !important;
    overflow-x: auto !important; /* Permite scroll deslizante nativo */
    scroll-behavior: smooth !important;
    scrollbar-width: none !important; /* Oculta scroll en Firefox */
}

.related-carousel-viewport::-webkit-scrollbar {
    display: none !important; /* Oculta scroll en Chrome, Safari y Opera */
}

/* El track interno con diseño de 5 columnas del Index adaptado a carrusel */
.related-carousel-track {
    display: flex !important; /* Despliega las películas horizontalmente */
    flex-wrap: nowrap !important;
    gap: 20px !important;
    width: max-content !important; /* Asegura que la grilla no se encoja */
    padding-bottom: 10px !important;
}

/* Forzamos que cada tarjeta tenga el tamaño idéntico al del Index de 5 columnas */
.carousel-card {
    width: 212px !important; /* Tamaño exacto óptimo de columna */
    flex-shrink: 0 !important; /* Evita que el flexbox las comprima */
}

/* ==========================================================================
   NUEVO CARRUSEL TOP 6 RESPONSIVO (ESTILO NETFLIX)
   ========================================================================== */

.top-ranking-section {
    padding: 30px 0 !important;
    background-color: #04060b !important;
    overflow: hidden;
    width: 100%;
}

/* Alineación del título y los botones en la misma línea */
.section-header-carousel {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding: 0 10px;
}

.section-title-premium {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-shadow: 0 0 20px rgba(90, 103, 216, 0.2);
}

/* El viewport del carrusel con scroll horizontal oculto */
.top-carousel-viewport {
    width: 100% !important;
    overflow-x: auto !important; /* Habilita scroll físico y táctil */
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important; /* Efecto imán al deslizar */
    scrollbar-width: none !important; /* Oculta barra en Firefox */
    padding: 15px 10px 25px 10px !important; /* Espacio para sombras */
}

.top-carousel-viewport::-webkit-scrollbar {
    display: none !important; /* Oculta barra en Chrome/Safari */
}

/* Track interno horizontal */
.top-carousel-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 25px !important; /* Separación limpia entre tarjetas */
    width: max-content !important;
    padding-left: 15px !important; /* Margen inicial para que el número "1" no se corte */
}

/* Cada tarjeta del ranking individual */
.top-rank-card {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    width: 200px !important; /* Ancho idéntico perfecto para PC */
    flex-shrink: 0 !important; /* Evita que se encojan */
    scroll-snap-align: start !important; /* Imán alineado al inicio */
}

/* NÚMERO GIGANTE CON BORDE NEÓN */
.rank-giant-number {
    position: absolute !important;
    left: -20px !important;
    bottom: -10px !important;
    font-size: 140px !important;
    font-weight: 900 !important;
    line-height: 0.7 !important;
    font-family: 'Montserrat', 'Arial Black', sans-serif !important;
    color: transparent !important;
    -webkit-text-stroke: 3px rgba(90, 103, 216, 0.6) !important; 
    text-shadow: 0 0 20px rgba(90, 103, 216, 0.3) !important;
    user-select: none !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Desfase para que el póster no cubra todo el número */
.rank-card-inner {
    position: relative !important;
    z-index: 2 !important;
    margin-left: 30px !important; 
    width: calc(100% - 30px) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important;
}

/* Hover interactivo ultra-premium */
.top-rank-card:hover .rank-card-inner {
    transform: translateY(-8px) scale(1.04) !important;
    box-shadow: 0 12px 25px rgba(90, 103, 216, 0.3) !important;
}

.top-rank-card:hover .rank-giant-number {
    -webkit-text-stroke: 3px #ffffff !important;
    text-shadow: 0 0 35px rgba(90, 103, 216, 0.8) !important;
    transition: all 0.3s ease !important;
}

/* ==========================================================================
   DISEÑO PREMIUM: SECCIÓN "SEGUIR VIENDO" (HISTORIAL LOCAL)
   ========================================================================== */

.continue-watching-section {
    padding: 25px 0 !important;
    background-color: #04060b !important;
}

.watching-carousel-viewport {
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 10px 0 !important;
}

.watching-carousel-viewport::-webkit-scrollbar {
    display: none !important;
}

.watching-carousel-track {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
}

/* Tarjeta de historial ajustada */
.watching-card {
    width: 175px !important; /* Tamaño ligeramente más compacto y estético */
    flex-shrink: 0 !important;
    position: relative !important;
}

/* BARRA DE PROGRESO DE REPRODUCCIÓN (ESTILO NETFLIX) */
.watching-progress-bar-wrap {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    z-index: 3 !important;
    overflow: hidden !important;
}

.watching-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #5a67d8, #4fd1c5) !important; /* Degradado neón */
    box-shadow: 0 0 8px rgba(79, 209, 197, 0.8) !important;
    border-radius: 0 2px 2px 0 !important;
}

/* BOTÓN ELIMINAR DEL HISTORIAL */
.btn-remove-history {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 26px !important;
    height: 26px !important;
    background: rgba(4, 6, 11, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 22px !important;
    text-align: center !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0; /* Oculto por defecto */
    transition: all 0.3s ease !important;
}

/* El botón aparece cuando pasas el cursor sobre la portada */
.watching-card:hover .btn-remove-history {
    opacity: 1 !important;
}

.btn-remove-history:hover {
    background: #f56565 !important; /* Rojo destructivo en hover */
    border-color: #f56565 !important;
    transform: scale(1.1) !important;
}

/* Compatibilidad móvil */
@media (max-width: 768px) {
    .watching-card {
        width: 140px !important; /* Portadas más cómodas para pantalla táctil */
    }
    .btn-remove-history {
        opacity: 0.9 !important; /* Siempre visible en móviles ya que no hay mouse-hover */
        width: 22px !important;
        height: 22px !important;
        font-size: 14px !important;
    }
}

/* ==========================================================================
   CARRUSEL HORIZONTAL DE PROXIMOS ESTRENOS CON PORTADAS (TEMA PROPIO)
   ========================================================================== */

.upcoming-gnula-slider-section {
    padding: 30px 0 !important;
    background-color: #04060b !important;
    width: 100%;
    overflow: hidden;
}

/* Contenedor del scroll horizontal */
.gnula-slider-viewport {
    width: 100% !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important; /* Oculta barra en Firefox */
    padding: 15px 5px 20px 5px !important;
}

.gnula-slider-viewport::-webkit-scrollbar {
    display: none !important; /* Oculta barra en Chrome/Safari */
}

/* Riel interno de las tarjetas */
.gnula-slider-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    width: max-content !important;
}

/* LA TARJETA DEL SLIDER */
.gnula-slider-card {
    position: relative !important;
    width: 175px !important; /* Ancho perfecto estandarizado de portada */
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    display: flex !important;
    flex-direction: column !important;
}

/* CAJA DEL PÓSTER (RELACIÓN DE ASPECTO DE CINE 2:3) */
.gnula-poster-box {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 2 / 3 !important; 
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
}

.gnula-slider-card:hover .gnula-poster-box {
    transform: translateY(-6px) !important;
    border-color: rgba(90, 103, 216, 0.4) !important;
    box-shadow: 0 12px 24px rgba(90, 103, 216, 0.2) !important;
}

/* Máscara oscura inferior para el texto flotante */
.gnula-poster-gradient {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(360deg, rgba(4, 6, 11, 0.9) 0%, rgba(4, 6, 11, 0) 40%) !important;
    z-index: 1 !important;
}

/* CALENDARIO FLOTANTE ESTILO GNULA (ARRIBA IZQUIERDA) */
.gnula-floating-date {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    background: rgba(26, 32, 44, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    transition: background 0.3s ease !important;
}

.gnula-floating-date .f-day {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1 !important;
}

.gnula-floating-date .f-month {
    font-size: 8px !important;
    font-weight: 700 !important;
    color: #a0aec0 !important;
    text-transform: uppercase !important;
    margin-top: 1px !important;
}

/* Variaciones del fondo de calendario según estado nativo PHP */
.gnula-floating-date.gnula-badge-today {
    background: #48bb78 !important; /* Verde si es hoy */
    border-color: #48bb78 !important;
}
.gnula-floating-date.gnula-badge-today .f-month { color: #ffffff !important; }

.gnula-floating-date.gnula-badge-released {
    background: #5a67d8 !important; /* Azul si ya salió */
    border-color: #5a67d8 !important;
}
.gnula-floating-date.gnula-badge-released .f-month { color: #ffffff !important; }

/* CUENTA REGRESIVA FLOTANTE (ABAJO DEL PÓSTER) */
.gnula-floating-status {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 2 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #4fd1c5 !important; /* Tono neón distintivo */
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
}

.gnula-floating-status .dashicons {
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
}

/* TEXTOS DEBAJO DE LA PORTADA */
.gnula-card-meta {
    padding: 10px 2px 0 2px !important;
    text-align: left !important;
}

.gnula-card-tag {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #5a67d8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
}

.gnula-card-title {
    margin: 4px 0 0 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.gnula-card-title a {
    color: #ffffff !important;
    text-decoration: none !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Evita que títulos largos rompan las tarjetas */
}

.gnula-card-title a:hover {
    color: #5a67d8 !important;
}

/* Ajustes responsivos para celulares */
@media (max-width: 768px) {
    .upcoming-gnula-slider-section .carousel-nav-buttons {
        display: none !important; /* Oculta flechas en móvil para usar deslizamiento táctil */
    }
    .gnula-slider-card {
        width: 135px !important; /* Portadas ligeramente reducidas para pantallas móviles */
    }
    .gnula-floating-date {
        width: 40px !important;
        height: 40px !important;
        top: 8px !important;
        left: 8px !important;
    }
    .gnula-floating-date .f-day { font-size: 14px !important; }
    .gnula-floating-date .f-month { font-size: 7px !important; }
    .gnula-floating-status { font-size: 10px !important; bottom: 8px !important; left: 8px !important; }
    .gnula-card-title { font-size: 12px !important; }
}


/* ESTILOS DEL BANNER AUTO-PLAY */
.autoplay-next-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: rgba(13, 17, 28, 0.95);
    border: 1px solid rgba(90, 103, 216, 0.5);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    width: 340px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    animation: slideUpAutoplay 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.autoplay-content {
    display: flex;
    flex-direction: column;
    padding: 14px;
    gap: 12px;
}

.autoplay-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.autoplay-thumb {
    width: 45px;
    height: 65px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.autoplay-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.autoplay-label {
    font-size: 11px;
    color: #4fd1c5;
    text-transform: uppercase;
    font-weight: 700;
}

.autoplay-title {
    font-size: 14px;
    color: #ffffff;
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.autoplay-actions {
    display: flex;
    gap: 8px;
}

.btn-autoplay-now {
    flex: 2;
    background: #5a67d8;
    color: #ffffff !important;
    text-align: center;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease;
}

.btn-autoplay-now:hover {
    background: #434190;
}

.btn-autoplay-cancel {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a0aec0;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-autoplay-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.autoplay-progress-line {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
}

#autoplay-progress-fill {
    height: 100%;
    width: 100%;
    background: #4fd1c5;
    transition: width 1s linear;
}

/* BOTÓN DE VISTA PREVIA SOBRE EL PÓSTER */
.poster-overlay-hover {
    position: relative;
}
.btn-quick-view {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(4, 6, 11, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    z-index: 5;
}
.btn-quick-view:hover {
    background: #5a67d8 !important;
    border-color: #5a67d8 !important;
    transform: scale(1.1);
}
.btn-quick-view .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* ESTILOS DE TARJETAS DE SAGAS */
.sagas-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.saga-card-item {
    position: relative;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.saga-card-item:hover {
    transform: translateY(-5px);
    border-color: #5a67d8;
    box-shadow: 0 10px 25px rgba(90, 103, 216, 0.3);
}

.saga-card-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.saga-card-item:hover .saga-card-bg {
    transform: scale(1.08);
}

.saga-card-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(13,17,28,0.3) 0%, rgba(13,17,28,0.95) 100%);
}

.saga-card-content {
    position: relative;
    z-index: 2;
    padding: 18px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.saga-count-badge {
    font-size: 11px;
    font-weight: 700;
    color: #4fd1c5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.saga-card-title {
    font-size: 18px;
    color: #fff;
    margin: 0 0 10px 0;
    font-weight: 800;
}

.btn-open-saga {
    font-size: 12px;
    font-weight: 700;
    color: #e2e8f0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.saga-card-item:hover .btn-open-saga {
    color: #5a67d8;
}

/* ESTILOS DEL MODAL DE SAGA COMPLETA */
.saga-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(4, 6, 11, 0.88);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.saga-modal-content {
    background: #0d111c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 25px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.9);
}

.saga-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 15px;
}

.saga-modal-title {
    font-size: 22px;
    color: #fff;
    margin: 0;
    font-weight: 800;
}

.close-saga-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 22px;
    width: 34px; height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

.close-saga-btn:hover { background: #e53e3e; }

.saga-loader-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    gap: 12px;
    color: #a0aec0;
}

.saga-movies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 15px;
}

/* ESTILOS DE LA SECCIÓN DE COMENTARIOS */
.comments-section-wrapper {
    margin: 40px 0 60px 0;
}

.comments-card-box {
    background: #0d111c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.comments-main-title {
    font-size: 20px;
    color: #ffffff;
    margin: 0 0 20px 0;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
}
.comments-main-title .dashicons {
    color: #5a67d8;
    font-size: 24px;
    width: 24px; height: 24px;
}

/* BANNER DE NORMAS (RECUERDA) */
.comments-rules-banner {
    background: rgba(229, 62, 62, 0.08);
    border: 1px solid rgba(229, 62, 62, 0.3);
    border-left: 4px solid #e53e3e;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 25px;
}

.rules-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #feb2b2;
    font-size: 14px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rules-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.rules-list li {
    font-size: 13px;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ESTILOS DEL FORMULARIO NATIVO DE WORDPRESS */
#respond {
    margin-top: 20px;
}

#reply-title {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 15px;
}

.comment-form textarea {
    width: 100%;
    background: #04060b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    resize: vertical;
    min-height: 100px;
    outline: none;
    transition: border-color 0.2s;
}

.comment-form textarea:focus {
    border-color: #5a67d8;
}

.comment-form-author, .comment-form-email {
    margin-bottom: 12px;
}

.comment-form input[type="text"], 
.comment-form input[type="email"] {
    width: 100%;
    max-width: 400px;
    background: #04060b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    outline: none;
}

.form-submit input[type="submit"] {
    background: #5a67d8;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 10px;
}

.form-submit input[type="submit"]:hover {
    background: #434190;
}

/* LISTA DE COMENTARIOS PUBLICADOS */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 25px 0 0 0;
}

.comment-body {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.comment-author .fn {
    color: #4fd1c5;
    font-weight: bold;
    font-style: normal;
}

.comment-metadata a {
    color: #718096;
    font-size: 12px;
    text-decoration: none;
}

.comment-content p {
    color: #cbd5e0;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}


/* ESTILOS DE SECCIÓN DE SOLICITUDES */
.btn-request-movie {
    background: #5a67d8;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}
.btn-request-movie:hover { background: #434190; }

.requested-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
}

.requested-card-item {
    background: #0d111c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    transition: all 0.3s ease;
}

/* DESTACADO CUANDO YA FUE PUBLICADA */
.requested-card-item.is-published {
    border-color: #4fd1c5;
    background: linear-gradient(135deg, #0d111c 0%, rgba(79, 209, 197, 0.08) 100%);
    box-shadow: 0 0 15px rgba(79, 209, 197, 0.2);
}

.requested-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
}
.badge-pending { background: rgba(237, 137, 54, 0.15); color: #ed8936; }
.badge-published { background: #4fd1c5; color: #04060b; }

.requested-movie-title {
    font-size: 15px;
    color: #ffffff;
    margin: 0;
    font-weight: 700;
    line-height: 1.3;
}

.requested-status-text {
    font-size: 12px;
    color: #718096;
}

.btn-watch-requested {
    background: #4fd1c5;
    color: #04060b !important;
    font-weight: 800;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 0.2s;
}
.btn-watch-requested:hover { transform: scale(1.02); }

.btn-see-more-requests {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a0aec0;
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-see-more-requests:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }

/* MODAL FORMULARIO */
.request-modal-overlay {
    position: fixed;
    top:0; left:0; width:100%; height:100%;
    background: rgba(4,6,11,0.85);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.request-modal-content {
    background: #0d111c;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 25px;
    width: 100%; max-width: 420px;
    position: relative;
}
.close-request-modal {
    position: absolute; top: 12px; right: 12px;
    background: transparent; border: none; color: #a0aec0; font-size: 24px; cursor: pointer;
}
.request-modal-title { color: #fff; margin: 0 0 4px 0; font-size: 18px; }
.request-modal-subtitle { color: #718096; font-size: 13px; margin: 0 0 20px 0; }
.form-group-req { margin-bottom: 15px; }
.form-group-req label { display: block; color: #cbd5e0; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.form-group-req input {
    width: 100%; background: #04060b; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; color: #fff; padding: 10px; box-sizing: border-box; outline: none;
}
.btn-submit-request-form {
    width: 100%; background: #5a67d8; color: #fff; border: none; padding: 12px;
    border-radius: 6px; font-weight: 700; cursor: pointer; margin-top: 10px;
}
.request-msg-box { padding: 10px; border-radius: 6px; font-size: 13px; margin-bottom: 12px; text-align: center; }
.request-msg-box.success { background: rgba(79, 209, 197, 0.15); color: #4fd1c5; }
.request-msg-box.error { background: rgba(229, 62, 62, 0.15); color: #feb2b2; }

/* ESTILOS DE LA BARRA DE NOTIFICACIONES */
.cine-notif-bar {
    background: linear-gradient(90deg, #0d111c 0%, #1a2035 50%, #0d111c 100%);
    border-bottom: 1px solid rgba(90, 103, 216, 0.4);
    color: #e2e8f0;
    font-size: 13px;
    padding: 8px 0;
    position: relative;
    z-index: 99999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    animation: slideDownNotif 0.3s ease-out;
}

@keyframes slideDownNotif {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.cine-notif-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.cine-notif-text {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cine-notif-badge {
    background: linear-gradient(135deg, #5a67d8 0%, #434190 100%);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(90, 103, 216, 0.4);
}

.cine-notif-message {
    color: #cbd5e0;
}

.cine-notif-message strong {
    color: #ffffff;
}

.cine-notif-btn {
    background: #4fd1c5;
    color: #04060b !important;
    font-weight: 800;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: transform 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.cine-notif-btn:hover {
    transform: scale(1.05);
    background: #38b2ac;
}

.cine-notif-close {
    background: transparent;
    border: none;
    color: #a0aec0;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
    transition: color 0.2s ease;
}

.cine-notif-close:hover {
    color: #e53e3e;
}

/* ADAPTACIÓN MÓVIL */
@media (max-width: 600px) {
    .cine-notif-content {
        padding: 0 10px;
    }
    .cine-notif-text {
        gap: 8px;
        font-size: 12px;
    }
    .cine-notif-badge {
        font-size: 9px;
    }
}
/* BOTÓN DE BORRAR HISTORIAL A LA DERECHA */
.btn-clear-history {
    background: rgba(229, 62, 62, 0.12);
    border: 1px solid rgba(229, 62, 62, 0.3);
    color: #feb2b2;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-clear-history:hover {
    background: #e53e3e;
    color: #ffffff;
    border-color: #e53e3e;
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.4);
}

.btn-clear-history .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
}

/* ESTILOS DEL MÓDULO DE REACCIONES */
.reactions-section-wrapper {
    margin: 25px 0;
}

.reactions-box {
    background: #0d111c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
}

.reactions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.reactions-header h3 {
    color: #fff;
    font-size: 16px;
    margin: 0;
    font-weight: 700;
}

.reactions-total-count {
    color: #a0aec0;
    font-size: 12px;
}

.reactions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.rx-btn {
    position: relative;
    background: #04060b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    transition: all 0.25s ease;
    outline: none;
}

.rx-btn:hover:not(.voted) {
    border-color: #5a67d8;
    transform: translateY(-2px);
}

.rx-btn.active-voted {
    border-color: #4fd1c5 !important;
    background: rgba(79, 209, 197, 0.08);
}

.rx-emoji {
    font-size: 20px;
    z-index: 2;
    margin-right: 8px;
}

.rx-label {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    z-index: 2;
    flex-grow: 1;
    text-align: left;
}

.rx-percent {
    color: #4fd1c5;
    font-size: 13px;
    font-weight: 800;
    z-index: 2;
}

.rx-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    background: rgba(90, 103, 216, 0.25);
    z-index: 1;
    transition: width 0.4s ease;
}

.rx-btn.active-voted .rx-progress-bar {
    background: rgba(79, 209, 197, 0.3);
}
/* ESTILOS DE BARRA DE PROGRESO DE SAGA */
.saga-progress-wrapper {
    margin-top: 10px;
    width: 100%;
    max-width: 400px;
}

.saga-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #a0aec0;
    margin-bottom: 6px;
    font-weight: 600;
}

.saga-progress-percent {
    color: #4fd1c5 !important;
    font-weight: 800;
}

.saga-progress-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.saga-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #5a67d8 0%, #4fd1c5 100%);
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(79, 209, 197, 0.4);
}

/* BADGE DE PELÍCULA COMPLETADA UBICADO ABAJO DEL PUNTAJE */
.saga-watched-badge {
    position: absolute;
    top: 36px; /* Posicionada exactamente debajo del badge de puntuación */
    left: 8px;
    background: #4fd1c5;
    color: #04060b;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.5px;
}

.saga-watched-badge .dashicons {
    font-size: 11px;
    width: 11px;
    height: 11px;
}

/* ALINEACIÓN DE AÑO E IDIOMAS */
.movie-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    gap: 6px;
}

.movie-card-langs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* CHIPS DE IDIOMA ELEGANTES */
.lang-pill {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e0;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.lang-pill.lang-lat {
    background: rgba(79, 209, 197, 0.15);
    color: #4fd1c5;
    border-color: rgba(79, 209, 197, 0.3);
}

.lang-pill.lang-esp {
    background: rgba(237, 137, 54, 0.15);
    color: #ed8936;
    border-color: rgba(237, 137, 54, 0.3);
}

.lang-pill.lang-sub {
    background: rgba(159, 122, 234, 0.15);
    color: #b794f4;
    border-color: rgba(159, 122, 234, 0.3);
}

.lang-pill.lang-eng {
    background: rgba(66, 153, 225, 0.15);
    color: #63b3ed;
    border-color: rgba(66, 153, 225, 0.3);
}

/* ALINEACIÓN Y CHIPS DE IDIOMA EN EL SLIDER */
.ch-slide-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ch-slide-langs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lang-pill-slider {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 4px;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.lang-pill-slider.lang-lat {
    background: #4fd1c5;
    color: #04060b;
}

.lang-pill-slider.lang-esp {
    background: #ed8936;
    color: #ffffff;
}

.lang-pill-slider.lang-sub {
    background: #9f7aea;
    color: #ffffff;
}

.lang-pill-slider.lang-eng {
    background: #4299e1;
    color: #ffffff;
}

/* ESTILOS DEL BOTÓN MODO AHORRO */
.data-saver-toggle-wrap {
    display: inline-flex;
    align-items: center;
}

.btn-data-saver {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #a0aec0;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.25s ease;
}

.btn-data-saver:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.data-saver-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #718096;
    transition: background 0.25s ease;
}

/* ESTADO ACTIVO DEL BOTÓN */
body.data-saver-mode .btn-data-saver {
    background: rgba(236, 201, 75, 0.15);
    border-color: rgba(236, 201, 75, 0.4);
    color: #ecc94b;
}

body.data-saver-mode .data-saver-status-dot {
    background: #ecc94b;
    box-shadow: 0 0 6px #ecc94b;
}

/* ==========================================================================
   REGLAS DEL MODO AHORRO DE DATOS (CUANDO BODY TIENE .data-saver-mode)
   ========================================================================== */

/* 1. Desactivar animaciones y transiciones pesadas */
body.data-saver-mode *,
body.data-saver-mode *::before,
body.data-saver-mode *::after {
    animation: none !important;
    transition: none !important;
}

/* 2. Simplificar la sombra y sombras resplandecientes */
body.data-saver-mode .movie-card,
body.data-saver-mode .ch-slide-item,
body.data-saver-mode .cine-notif-bar {
    box-shadow: none !important;
}

/* 3. Evitar transformaciones hover en pósteres para ahorrar CPU/Batería */
body.data-saver-mode .movie-card:hover {
    transform: none !important;
}

/* 4. Ocultar capas secundarias decorativas o fondos borrosos en slider */
body.data-saver-mode .ch-slide-fallback-bg {
    display: none !important;
}

/* MÓDULO DE DESCARGAS */
.download-section-box {
    background: #0d111c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 20px 0;
}

.download-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.download-title-icon {
    color: #4fd1c5;
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.download-header h3 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.download-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

/* BOTONES ESTILIZADOS */
.btn-download-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.btn-download-item .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
}

.download-btn-info {
    display: flex;
    flex-direction: column;
}

.download-server-name {
    font-weight: 800;
    font-size: 13px;
    line-height: 1.2;
}

.download-subtext {
    font-size: 10px;
    opacity: 0.8;
}

/* COLORES POR SERVIDOR */
.btn-download-primary {
    background: rgba(79, 209, 197, 0.12);
    border-color: rgba(79, 209, 197, 0.3);
    color: #4fd1c5;
}

.btn-download-primary:hover {
    background: #4fd1c5;
    color: #04060b;
    box-shadow: 0 4px 15px rgba(79, 209, 197, 0.35);
    transform: translateY(-2px);
}

.btn-download-secondary {
    background: rgba(90, 103, 216, 0.12);
    border-color: rgba(90, 103, 216, 0.3);
    color: #a3b8cc;
}

.btn-download-secondary:hover {
    background: #5a67d8;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(90, 103, 216, 0.35);
    transform: translateY(-2px);
}

.btn-download-torrent {
    background: rgba(237, 137, 54, 0.12);
    border-color: rgba(237, 137, 54, 0.3);
    color: #ed8936;
}

.btn-download-torrent:hover {
    background: #ed8936;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(237, 137, 54, 0.35);
    transform: translateY(-2px);
}
/* ICONO FAVICON DEL SERVIDOR */
.download-favicon-icon {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px;
    flex-shrink: 0;
}

/* BARRA DE ESPECIFICACIONES DE DESCARGA */
.download-specs-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    align-items: center;
}

.dl-spec-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.dl-spec-label {
    color: #a0aec0;
    font-weight: 600;
}

.dl-spec-value {
    color: #e2e8f0;
    font-weight: 700;
}

.dl-spec-value.spec-highlight-calidad {
    color: #4fd1c5;
    background: rgba(79, 209, 197, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ==========================================================================
   ESTILOS Y TAMAÑO DE LA PORTADA EN SINGLE-SERIES.PHP
   ========================================================================== */

/* Estructura general de la ficha (Columna izquierda póster / Columna derecha contenido) */
.single-movie-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
    margin-top: 20px;
}

/* Contenedor del Póster */
.single-poster-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    background: #0d111c;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Imagen del Póster (Ajustada para que nunca se vea gigante) */
.single-poster-img {
    width: 100%;
    height: auto;
    aspect-ratio: 2/3; /* Mantiene la proporción clásica de cine */
    object-fit: cover;
    display: block;
}

/* Insignia de Calidad sobre la esquina del póster */
.card-quality-badge-right {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.75);
    color: #4fd1c5;
    border: 1px solid rgba(79, 209, 197, 0.3);
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

/* Adaptabilidad para Celulares / Tablets */
@media (max-width: 768px) {
    .single-movie-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .single-poster-wrap {
        max-width: 220px;
        margin: 0 auto; /* Centrar el póster en móviles */
    }
}

/* ==========================================================================
   HEADER PRINCIPAL (PC Y GENERAL)
   ========================================================================== */
#main-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #080b12;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* SI EL USUARIO ESTÁ LOGUEADO EN WORDPRESS (CORRECCIÓN BARRA WP) */
body.admin-bar #main-header {
    top: 32px; /* Empuja el header hacia abajo para no ser tapado por WP Admin Bar */
}

@media screen and (max-width: 782px) {
    body.admin-bar #main-header {
        top: 46px; /* Altura de la barra de WP en móviles */
    }
}

#main-header .header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* Logo Izquierda | Lupa Derecha */
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px !important;
    height: 56px !important;
    box-sizing: border-box !important;
}

/* LOGO A LA IZQUIERDA */
#main-header .site-logo {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

#main-header .site-logo a {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

#main-header .logo-highlight {
    color: #4fd1c5 !important;
}

/* NAVEGACIÓN EN PC */
#main-header .main-navigation .nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

#main-header .main-navigation a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

/* BUSCADOR ESTÁTICO EN PC */
#main-header .header-search {
    position: relative;
    width: 260px;
}

#main-header .search-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 4px 12px;
}

#main-header .search-field {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    width: 100%;
}

#main-header .search-submit {
    background: transparent;
    border: none;
    color: #4fd1c5;
    cursor: pointer;
    display: flex;
    align-items: center;
}

#main-header .close-search-btn,
#main-header .mobile-search-toggle {
    display: none !important;
}


/* ==========================================================================
   ADAPTACIÓN EXCLUSIVA PARA MÓVIL (< 768px)
   ========================================================================== */
@media (max-width: 768px) {

    #main-header .main-navigation,
    #main-header .header-search:not(.search-active) {
        display: none !important; /* Ocultar menú y buscador normal */
    }

    /* BOTÓN LUPA A LA EXTREMA DERECHA */
    #main-header .mobile-search-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #4fd1c5 !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        padding: 0 !important;
    }

    /* BUSCADOR DESPLEGABLE TIPO OVERLAY (AL HACER CLIC EN LA LUPA) */
    #main-header .search-overlay-wrapper.search-active {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 56px !important;
        background: #080b12 !important;
        padding: 8px 12px !important;
        z-index: 999999 !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    /* Si está logueado en WordPress, baja el desplegable móvil para que no se pise */
    body.admin-bar #main-header .search-overlay-wrapper.search-active {
        top: 46px !important;
    }

    #main-header .search-overlay-wrapper.search-active .search-form {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid #4fd1c5 !important;
        border-radius: 20px !important;
        padding: 4px 10px !important;
    }

    #main-header .search-overlay-wrapper.search-active .search-field {
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        color: #fff !important;
        font-size: 14px !important;
        outline: none !important;
    }

    #main-header .close-search-btn {
        display: block !important;
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        font-size: 22px !important;
        font-weight: bold !important;
        padding: 0 8px !important;
        cursor: pointer !important;
    }

    /* VENTANA EMERGENTE DE LIVE SEARCH */
    #main-header .live-search-results-box {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-height: calc(100vh - 56px) !important;
        overflow-y: auto !important;
        background: #0d111c !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9) !important;
        z-index: 999998 !important;
    }

    body.admin-bar #main-header .live-search-results-box {
        top: 102px !important;
    }
}

/* ==========================================================================
   MODAL FLOTANTE PARA TRÁILER DE YOUTUBE (TMDb)
   ========================================================================== */
.trailer-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 11, 0.85);
    backdrop-filter: blur(10px);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.trailer-modal-overlay.active {
    display: flex !important;
}

.trailer-modal-container {
    background: #0d111c;
    border: 1px solid rgba(79, 209, 197, 0.4);
    border-radius: 16px;
    width: 100%;
    max-width: 800px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(79, 209, 197, 0.2);
    animation: modalPopIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes modalPopIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.trailer-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: #080b12;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.trailer-modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
}

.trailer-modal-header button {
    background: transparent;
    border: none;
    color: #a0aec0;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.trailer-modal-header button:hover {
    color: #4fd1c5;
}

/* REPRODUCTOR 16:9 RESPONSIVE */
.trailer-modal-body {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trailer-modal-body iframe {
    width: 100%;
    height: 100%;
}

.trailer-loading-spinner {
    color: #4fd1c5;
    font-size: 14px;
    font-weight: 700;
}

/* ==========================================================================
   ESTILOS BADGE DE CONTEO REGRESIVO
   ========================================================================== */
.countdown-badge {
    background: rgba(8, 11, 18, 0.85);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(79, 209, 197, 0.4);
    color: #4fd1c5;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    z-index: 3;
}

.countdown-icon {
    font-size: 11px !important;
    width: 11px !important;
    height: 11px !important;
    color: #4fd1c5;
}


/* ==========================================================================
   OCULTAR FLECHAS DE NAVEGACIÓN SOLO EN MÓVILES
   ========================================================================== */
@media (max-width: 768px) {
    .slider-arrows-wrap,
    .slider-arrow-btn,
    #mov-slide-left,
    #mov-slide-right,
    #upcoming-slide-left,
    #upcoming-slide-right {
        display: none !important;
    }
}
/* ==========================================================================
   ANCHO 100% PARA EL CARRUSEL DE PRÓXIMOS ESTRENOS EN TODAS LAS PANTALLAS
   ========================================================================== */

.upcoming-movies-section {
    width: 100% !important;
    max-width: 100% !important;
}

.upcoming-movies-section .cine-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#upcoming-slider-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   ESTILOS PREMIUM MODAL AUTH Y PERFIL
   ========================================================================== */

/* Botón Header */
.btn-open-auth-modal,
.btn-user-profile-header {
    background: rgba(79, 209, 197, 0.1);
    border: 1px solid rgba(79, 209, 197, 0.4);
    color: #4fd1c5;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-open-auth-modal:hover,
.btn-user-profile-header:hover {
    background: #4fd1c5;
    color: #04060b;
}

.header-avatar-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

/* Modal Overlay */
.auth-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 11, 0.9);
    backdrop-filter: blur(10px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.auth-modal-overlay.active {
    display: flex;
}

.auth-modal-container {
    background: #0d111c;
    border: 1px solid rgba(79, 209, 197, 0.3);
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.auth-modal-close {
    position: absolute;
    top: 12px;
    right: 15px;
    background: transparent;
    border: none;
    color: #a0aec0;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
}

/* Pestañas */
.auth-tabs-header {
    display: flex;
    background: #080b12;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-tab-btn {
    flex: 1;
    padding: 16px;
    background: transparent;
    border: none;
    color: #a0aec0;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.auth-tab-btn.active {
    color: #4fd1c5;
    border-bottom-color: #4fd1c5;
    background: rgba(79, 209, 197, 0.05);
}

/* Formulario */
.auth-modal-body {
    padding: 24px;
}

.auth-form-panel {
    display: none;
}

.auth-form-panel.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-field-group label {
    display: block;
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.auth-field-group input {
    width: 100%;
    background: #141a29;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
}

.auth-field-group input:focus {
    border-color: #4fd1c5;
}

.auth-submit-btn {
    background: #4fd1c5;
    color: #04060b;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    margin-top: 8px;
}

.auth-msg-box {
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 15px;
    text-align: center;
}

.auth-msg-box.loading { background: rgba(255, 255, 255, 0.1); color: #fff; }
.auth-msg-box.success { background: rgba(72, 187, 120, 0.2); color: #48bb78; }
.auth-msg-box.error   { background: rgba(245, 101, 101, 0.2); color: #f56565; }

/* Página de Perfil */
.profile-card-premium {
    background: #0d111c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px;
}

.profile-header-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}

.profile-avatar-large {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid #4fd1c5;
    object-fit: cover;
}

.profile-display-name {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 4px 0;
}

.profile-user-email {
    color: #a0aec0;
    font-size: 14px;
    margin: 0 0 10px 0;
}

.profile-badge-vip {
    background: rgba(79, 209, 197, 0.15);
    color: #4fd1c5;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
}

.btn-logout-profile {
    background: rgba(245, 101, 101, 0.15);
    color: #f56565;
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.profile-body-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.profile-box-widget {
    background: #141a29;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 20px;
}

.profile-box-widget h3 {
    color: #fff;
    font-size: 16px;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.empty-profile-msg {
    color: #718096;
    font-size: 13px;
}

@media (max-width: 768px) {
    .profile-header-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* PESTAÑAS DEL PERFIL */
.profile-nav-tabs {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
    overflow-x: auto;
}

.profile-nav-btn {
    background: transparent;
    border: none;
    color: #a0aec0;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.profile-nav-btn.active,
.profile-nav-btn:hover {
    background: rgba(79, 209, 197, 0.15);
    color: #4fd1c5;
}

.profile-tab-panel {
    display: none;
}

.profile-tab-panel.active {
    display: block;
}

.profile-edit-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
    margin-top: 15px;
}

/* ==========================================================================
   BOTÓN "MI LISTA" ADAPTADO AL TAMAÑO DE REPORTAR Y COMPARTIR
   ========================================================================== */

/* Si tus otros botones usan una clase común como .btn-movie-action */
.btn-movie-action,
.btn-single-action-favorite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px; /* Altura estándar de botones secundarios */
    padding: 0 14px;
    background: rgba(20, 26, 41, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Hover general */
.btn-single-action-favorite:hover {
    background: rgba(79, 209, 197, 0.15);
    border-color: #4fd1c5;
    color: #4fd1c5;
}

/* Estado Activo (Cuando ya está guardado) */
.btn-single-action-favorite.active {
    background: #4fd1c5;
    color: #04060b;
    border-color: #4fd1c5;
    font-weight: 700;
}

.btn-single-action-favorite.active:hover {
    background: #38b2ac;
    color: #04060b;
}

/* Tamaño de íconos alineados con Reportar / Compartir */
.btn-single-action-favorite .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
}

/* ==========================================================================
   GRILLA Y TAMAÑO DE POSTERS EN EL PERFIL
   ========================================================================== */
.profile-movies-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 15px !important;
    margin-top: 15px !important;
    width: 100% !important;
}

.profile-movie-card {
    display: flex !important;
    flex-direction: column !important;
    background: #141a29;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.profile-movie-card:hover {
    transform: translateY(-4px);
}

.profile-movie-card a {
    text-decoration: none !important;
    color: inherit;
}

.profile-poster-wrap {
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    overflow: hidden !important;
    position: relative;
    background: #04060b;
}

.profile-poster-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.profile-movie-card h4 {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin: 8px 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center;
}

/* Ajuste compacto para móviles */
@media (max-width: 480px) {
    .profile-movies-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 10px !important;
    }
}

/* ESTADÍSTICAS DEL PERFIL */
.profile-stats-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.profile-stat-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a0aec0;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.profile-stat-badge strong {
    color: #fff;
}

/* BOTÓN ELIMINAR EN CADA PÓSTER */
.profile-movie-card {
    position: relative;
}

.btn-remove-profile-item {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(4, 6, 11, 0.85);
    border: 1px solid rgba(245, 101, 101, 0.4);
    color: #f56565;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    opacity: 0;
}

.profile-movie-card:hover .btn-remove-profile-item {
    opacity: 1;
}

.btn-remove-profile-item:hover {
    background: #f56565;
    color: #fff;
    transform: scale(1.1);
}

/* ==========================================================================
   BADGES DE RANGOS DE USUARIO DINÁMICOS
   ========================================================================== */

/* Estilo base general */
.profile-badge-vip {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 1. SUSCRIPTOR (Verde Neón / Turquesa) */
.profile-badge-vip.role-subscriber {
    background: rgba(79, 209, 197, 0.15);
    color: #4fd1c5;
    border: 1px solid rgba(79, 209, 197, 0.4);
}

/* 2. COLABORADOR / AUTOR / EDITOR (Dorado / Amarillo Premium) */
.profile-badge-vip.role-collaborator {
    background: rgba(236, 201, 75, 0.15);
    color: #ecc94b;
    border: 1px solid rgba(236, 201, 75, 0.4);
}

/* 3. ADMINISTRADOR (Rojo Intenso) */
.profile-badge-vip.role-admin {
    background: rgba(245, 101, 101, 0.18);
    color: #f56565;
    border: 1px solid rgba(245, 101, 101, 0.45);
    box-shadow: 0 0 10px rgba(245, 101, 101, 0.2);
}

/* SELECTOR DE AVATARES */
.avatar-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.avatar-option-btn {
    background: rgba(20, 26, 41, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 65px;
    height: 65px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-option-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.avatar-option-btn:hover {
    border-color: #4fd1c5;
    transform: scale(1.08);
}

.avatar-option-btn.selected {
    border-color: #4fd1c5;
    background: rgba(79, 209, 197, 0.15);
    box-shadow: 0 0 12px rgba(79, 209, 197, 0.4);
}

/* ==========================================================================
   GRILLA Y TARJETAS DE LOGROS E INSIGNIAS
   ========================================================================== */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.badge-card {
    background: #141a29;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    transition: all 0.3s ease;
}

/* Tarjeta Desbloqueada */
.badge-card.unlocked {
    background: rgba(79, 209, 197, 0.06);
    border-color: rgba(79, 209, 197, 0.4);
    box-shadow: 0 4px 20px rgba(79, 209, 197, 0.1);
}

.badge-card.unlocked:hover {
    transform: translateY(-3px);
    border-color: #4fd1c5;
}

/* Tarjeta Bloqueada */
.badge-card.locked {
    opacity: 0.55;
    filter: grayscale(80%);
}

.badge-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #0d111c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.badge-card.unlocked .badge-icon-wrap {
    border-color: #4fd1c5;
    background: rgba(79, 209, 197, 0.15);
}

.badge-emoji {
    font-size: 26px;
}

.badge-check-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #48bb78;
    color: #04060b;
    font-size: 10px;
    font-weight: 900;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
}

.badge-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 3px 0;
}

.badge-desc {
    color: #a0aec0;
    font-size: 11px;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.badge-unlocked-tag {
    color: #4fd1c5;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Barra de Progreso */
.badge-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.badge-progress-fill {
    height: 100%;
    background: #ecc94b;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.badge-progress-text {
    font-size: 10px;
    color: #718096;
}
/* ==========================================================================
   INSIGNIAS Y AVATARES EN LA SECCIÓN DE COMENTARIOS
   ========================================================================== */
.comments-list-custom {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}

.comment-item-custom {
    margin-bottom: 20px !important;
}

.comment-article-box {
    display: flex;
    gap: 15px;
    background: rgba(13, 17, 28, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
}

.comment-article-box:hover {
    border-color: rgba(79, 209, 197, 0.3);
}

.comment-avatar-wrap {
    flex-shrink: 0;
}

.comment-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #04060b;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.comment-content-wrap {
    flex-grow: 1;
}

.comment-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.comment-author-name {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.comment-badges-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Badges de Rol */
.comment-role-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comment-role-badge.role-admin {
    background: rgba(245, 101, 101, 0.2);
    color: #f56565;
    border: 1px solid rgba(245, 101, 101, 0.4);
}

.comment-role-badge.role-collab {
    background: rgba(236, 201, 75, 0.2);
    color: #ecc94b;
    border: 1px solid rgba(236, 201, 75, 0.4);
}

.comment-role-badge.role-vip {
    background: rgba(79, 209, 197, 0.15);
    color: #4fd1c5;
    border: 1px solid rgba(79, 209, 197, 0.3);
}

.comment-role-badge.role-guest {
    background: rgba(255, 255, 255, 0.05);
    color: #a0aec0;
}

/* Insignia de Gamificación */
.comment-achievement-tag {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comment-date-time {
    font-size: 11px;
    color: #718096;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.comment-text-body {
    color: #cbd5e0;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 6px;
}

.comment-reply-wrap a {
    color: #4fd1c5;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.comment-reply-wrap a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   ESTILOS PARA EL FORMULARIO DE COMENTARIOS
   ========================================================================== */
.comments-area {
    margin-top: 20px;
}

.comments-count-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-respond {
    background: rgba(13, 17, 28, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    margin-top: 25px;
}

.comment-reply-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 15px;
}

.comment-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 15px;
}

.comment-form-group label {
    color: #a0aec0;
    font-size: 12px;
    font-weight: 700;
}

.comment-form-group input,
.comment-form-group textarea {
    background: #04060b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s ease;
}

.comment-form-group input:focus,
.comment-form-group textarea:focus {
    border-color: #4fd1c5;
}

.comment-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.submit-comment-btn {
    background: #4fd1c5 !important;
    color: #04060b !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.submit-comment-btn:hover {
    background: #38b2ac !important;
}

@media (max-width: 600px) {
    .comment-fields-row {
        grid-template-columns: 1fr;
    }
}