/*
Theme Name: Astra CineyCine
Description: Tema hijo de Astra personalizado para CineyCine
Template: astra
Version: 1.0.0
Text Domain: astra-cineycine
Author: CineyCine Team
*/

/* Importar estilos del tema padre */
@import url("../astra/style.css");

/*
==============================================================
===============
CINEYCINE - DISEÑO COMPLETO RESPONSIVE
==============================================================
=============== */

/* Reset y base */
.cineycine-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
    font-family: Arial, sans-serif;
    line-height: 1.4;
}

/* HEADER DEL MOVIE */
.movie-header {
    margin-bottom: 20px;
}

.movie-title {
    font-size: 32px;
    font-weight: bold;
    color: #333333;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

/* SECCIÓN PRINCIPAL - POSTER Y FICHA TÉCNICA */
.movie-main-section {
    display: flex;
    gap: 20px;
    margin-bottom: 3px;
    align-items: flex-start;
    background: #f8f8f8;
    padding: 20px;
    border-radius: 5px;
}

.movie-poster-container {
    flex-shrink: 0;
}

.movie-poster {
    width: 300px;
    height: auto;
    border: 1px solid #ddd;
}

.movie-details-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* FICHA DE LA PELÍCULA (AL LADO DEL POSTER) */
.movie-details-container .movie-details-card {
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}

.movie-details-container .details-grid {
    padding: 0;
}

.movie-details-container .detail-row {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
    align-items: flex-start;
}

.movie-details-container .detail-row:last-child {
    border-bottom: none;
}

.movie-details-container .detail-label {
    font-weight: bold;
    color: #333;
    font-size: 12px;
    min-width: 120px;
    flex-shrink: 0;
    text-transform: uppercase;
}

.movie-details-container .detail-value {
    color: #333;
    font-size: 14px;
    line-height: 1.4;
}

/* SINOPSIS */
.movie-synopsis-section {
    background: #f8f8f8;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 25px;
}

.movie-synopsis {
    margin-bottom: 0;
}

.synopsis-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.synopsis-content {
    color: #777;
    line-height: 1.6;
    font-size: 13px;
}

/* CONTENIDO PRINCIPAL */
.movie-content {
    margin-bottom: 30px;
    color: #333;
    line-height: 1.6;
    font-size: 14px;
}

.movie-content p {
    margin-bottom: 15px;
}

.movie-content h2,
.movie-content h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 25px 0 15px 0;
    color: #333;
}

.movie-content img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 3px;
}

/* CORRECCIÓN AGRESIVA PARA IMÁGENES CENTRADAS */

/* Forzar centrado con máxima especificidad */
.cineycine-container .movie-content p[style*="text-align: center"] {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

.cineycine-container .movie-content p[style*="text-align: center"] img,
.cineycine-container .movie-content p[style*="text-align:center"] img,
.cineycine-container .movie-content .aligncenter,
.cineycine-container .movie-content img.aligncenter {
    display: block !important;
    margin: 20px auto !important;
    float: none !important;
    clear: both !important;
    text-align: center !important;
    position: relative !important;
}

/* Asegurar que el contenedor padre también esté centrado */
.cineycine-container .movie-content p {
    margin: 15px 0 !important;
}

/* Resetear cualquier float que pueda estar interfiriendo */
.cineycine-container .movie-content img {
    float: none !important;
    display: block !important;
    margin: 20px auto !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 3px !important;
}

/* Específico para imágenes con aligncenter */
.cineycine-container .movie-content img.aligncenter {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: block !important;
}

/* NEGRITAS EN EL CONTENIDO */
.movie-content strong,
.movie-content b {
    font-weight: bold;
    color: #333;
}

/* ENLACES EN EL CONTENIDO */
.movie-content a {
    color: #0088cc;
    text-decoration: none;
}

.movie-content a:hover {
    color: #0066aa;
    text-decoration: none;
}

/* CURSIVAS EN EL CONTENIDO */
.movie-content em,
.movie-content i {
    font-style: italic;
}

/* CITAS Y TEXTO CENTRADO */
.movie-content p[style*="text-align: center"] {
    text-align: center;
}

.movie-content p[style*="text-align: justify"] {
    text-align: justify;
}

/* ASPECTOS POSITIVOS Y NEGATIVOS */
.pros-cons-section {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.pros-column,
.cons-column {
    flex: 1;
    border-radius: 3px;
}

.pros-column {
    background: #e8f5e8;
    border-left: 4px solid #4caf50;
}

.cons-column {
    background: #ffeaea;
    border-left: 4px solid #f44336;
}

.pros-header {
    background: #4caf50;
    color: white;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 14px;
}

.cons-header {
    background: #f44336;
    color: white;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 14px;
}

.plus-icon,
.minus-icon {
    font-weight: bold;
    font-size: 16px;
    margin-right: 5px;
}

.pros-content,
.cons-content {
    padding: 15px;
    color: #333;
    line-height: 1.6;
    font-size: 14px;
}

/* ===============================================
   SISTEMA DE RATINGS - COLORES CORRECTOS Y TEXTO DENTRO
   =============================================== */

.cineycine-ratings-section {
    margin-bottom: 30px;
    background: #fafafa;
    border-radius: 5px;
    overflow: hidden;
}

.ratings-section-title {
    background: transparent;
    color: #333;
    padding: 12px 20px;
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: -20px; /* Reducir espacio 20% */
}

.ratings-main-container {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 30px;
}

/* CONTENEDOR IZQUIERDO - BARRAS (2/3) */
.ratings-bars-container {
    flex: 2;
}

.rating-bar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px; /* Solo 3px de separación */
    padding: 0;
    opacity: 0;
    animation: fadeInBar 0.5s ease-out forwards;
}

.rating-bar-item:last-child {
    margin-bottom: 0;
}

.rating-bar-item.visible {
    opacity: 1;
}

/* CONTENEDOR DE LA BARRA */
.rating-bar-container {
    flex: 1;
    height: 40px; /* 20% más alto: 32px * 1.2 = 38px */
    background: #FAF6F9 !important; /* Fondo de cada barra */
    border-radius: 0;
    position: relative;
    overflow: visible;
    margin-right: 0; /* Sin margen porque no hay valor a la derecha */
}

/* BARRA DE RELLENO CON COLORES CORRECTOS */
.rating-bar-fill {
    height: 100% !important;
    width: 0% !important;
    background: #F2EDF1 !important; /* Color de relleno */
    background-color: #F2EDF1 !important;
    transition: width 2s ease-in-out !important;
    border-radius: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 12px !important; /* Padding para el texto */
}

/* TEXTO DENTRO DE LA BARRA (ETIQUETA) */
.rating-bar-label {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #666 !important;
    text-transform: uppercase !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* VALOR NUMÉRICO DENTRO DE LA BARRA (A LA DERECHA) */
.rating-bar-value {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #666 !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* INDICADOR/PALITO DE 2PX */
.rating-bar-fill::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 2px !important;
    height: 100% !important;
    background: #E3E3E3 !important; /* Color del palito */
    background-color: #E3E3E3 !important;
    opacity: 0 !important;
    transition: opacity 1s ease !important;
    transition-delay: 2.5s !important;
    z-index: 100 !important;
    display: block !important;
}

.rating-bar-fill.animated {
    width: var(--rating-percentage) !important;
}

.rating-bar-fill.animated::after {
    opacity: 1 !important;
}

/* VALOR NUMÉRICO A LA DERECHA */
.rating-bar-value {
    font-size: 13px !important;
    font-weight: bold !important;
    color: #333 !important;
    min-width: 25px !important;
    text-align: right !important;
    flex-shrink: 0 !important;
}

/* CONTENEDOR DERECHO - ESFERA (1/3) */
.ratings-sphere-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 140px; /* Aumentar altura para que quepa el texto */
    position: relative;
    padding-bottom: 20px; /* Espacio para el texto */
}

/* ESFERA ANIMADA - MOVIDA HACIA ARRIBA */
.rating-sphere {
    position: relative;
    top: -10px; /* MOVER LA ESFERA HACIA ARRIBA */
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    opacity: 0;
    animation: sphereEntrance 0.8s ease-out forwards;
}

/* TEXTO DESCRIPTIVO DEBAJO DE LA ESFERA - SOLO 4PX DE DISTANCIA */
.sphere-rating-description {
    position: absolute;
    bottom: 15px; /* POSICIÓN FIJA DESDE ABAJO DEL CONTENEDOR */
    left: 50%;
    transform: translateX(-50%) scale(0);
    font-size: 11.2px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    text-align: center;
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease;
    white-space: nowrap;
    width: 100%; /* ASEGURAR QUE NO SE SALGA */
    max-width: 120px; /* LÍMITE MÁXIMO */
}

.sphere-rating-description.visible {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

/* ESFERA ANIMADA - SIN CAMBIOS EN POSICIÓN */
.rating-sphere {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    opacity: 0;
    animation: sphereEntrance 0.8s ease-out forwards;
}

/* RELLENO DE LA ESFERA DESDE ABAJO */
.rating-sphere::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    border-radius: 50%;
    background: var(--sphere-color, #28a745);
    transition: height 2.5s ease-in-out;
    z-index: 1;
}

.rating-sphere.animated::before {
    height: 100%;
}

/* VALOR DE LA ESFERA */
.sphere-rating-value {
    position: relative;
    z-index: 2;
    font-size: 43px; /* 20% más grande: 36px * 1.2 = 43px */
    font-weight: bold;
    color: white;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease;
}

.sphere-rating-value.visible {
    transform: scale(1);
    opacity: 1;
}

/* COLORES PARA LA ESFERA (mantener colores) */
.rating-sphere.sphere-score-1,
.rating-sphere.sphere-score-2 {
    --sphere-color: #DC143C;
}

.rating-sphere.sphere-score-3,
.rating-sphere.sphere-score-4 {
    --sphere-color: #FF8C00;
}

.rating-sphere.sphere-score-5 {
    --sphere-color: #FFA500;
}

.rating-sphere.sphere-score-6 {
    --sphere-color: #90EE90;
}

.rating-sphere.sphere-score-7,
.rating-sphere.sphere-score-8 {
    --sphere-color: #32CD32;
}

.rating-sphere.sphere-score-9,
.rating-sphere.sphere-score-10 {
    --sphere-color: #228B22;
}

/* ANIMACIONES */
@keyframes fadeInBar {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes sphereEntrance {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* RESPONSIVE PARA RATINGS */
@media (max-width: 768px) {
    .ratings-sphere-container {
        min-height: 120px;
        padding-bottom: 15px;
    }
    
    .rating-sphere {
        top: -8px;
    }
    
    .sphere-rating-description {
        bottom: 10px;
        font-size: 10px;
        max-width: 100px;
    }
}

@media (max-width: 480px) {
    .ratings-sphere-container {
        min-height: 110px;
        padding-bottom: 12px;
    }
    
    .rating-sphere {
        width: 78px;
        height: 78px;
        top: -6px;
    }
    
    .sphere-rating-description {
        bottom: 8px;
        font-size: 9px;
        max-width: 90px;
    }
    
    .sphere-rating-value {
        font-size: 24px;
    }
}

/* FICHA DEL EDITOR/AUTOR */
.editor-card {
    background: #666;
    color: white;
    padding: 15px;
    border-radius: 3px;
    margin-bottom: 25px;
}

.editor-tags {
    margin-bottom: 15px;
    font-size: 12px;
}

.tag-icon {
    margin-right: 5px;
}

.tag-link {
    color: #ccc;
    text-decoration: none;
}

.tag-link:hover {
    color: white;
    text-decoration: underline;
}

.editor-info {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.editor-avatar {
    flex-shrink: 0;
}

.avatar-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #999;
}

.editor-details {
    flex: 1;
}

.editor-name {
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 8px 0;
}

.editor-name-link {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.editor-name-link:hover {
    color: #7cb342;
    text-decoration: none;
}

.editor-bio {
    color: #ccc;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 10px;
}

.editor-contact {
    display: flex;
    gap: 10px;
}

.contact-email,
.contact-web {
    color: #ccc;
    text-decoration: none;
    font-size: 16px;
}

.contact-email:hover,
.contact-web:hover {
    color: white;
}

/* RECOMENDACIONES */
.recommendations-section {
    margin-bottom: 30px;
}

.recommendations-header {
    background: #f5f5f5;
    padding: 12px 15px;
    border: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 12px;
    color: #333;
    text-transform: uppercase;
}

.recommendations-title {
    text-align: left;
}

.genre-tags {
    display: flex;
    gap: 10px;
}

.genre-tag,
.author-tag {
    background: #666;
    color: white;
    padding: 4px 8px;
    border-radius: 2px;
    font-size: 10px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.genre-tag:hover {
    background: #7cb342;
    color: white;
    text-decoration: none;
}

.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-top: none;
}

.recommendation-item {
    text-align: center;
}

.recommendation-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.recommendation-poster {
    margin-bottom: 8px;
}

.rec-thumb {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
}

.recommendation-info {
    text-align: center;
}

.rec-title {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    margin: 0 0 5px 0;
    line-height: 1.3;
}

.rec-ratings {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}

.rec-score {
    background: #7cb342;
    color: white;
    padding: 2px 6px;
    border-radius: 2px;
    font-weight: bold;
}

.rec-icon {
    color: #666;
}

.rec-camera {
    color: #666;
}

/* COMENTARIOS */
.comments-section {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.comments-header {
    background: #666;
    color: white;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
}

.comments-title {
    text-align: left;
}

.reply-link {
    color: #ccc;
    text-decoration: none;
    font-size: 12px;
}

.reply-link:hover {
    color: white;
    text-decoration: underline;
}

.comments-list {
    padding: 15px;
}

.comment-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.comment-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.comment-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.comment-content {
    flex: 1;
}

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

.comment-author {
    font-weight: bold;
    color: #333;
    font-size: 14px;
}

.comment-date {
    color: #666;
    font-size: 12px;
}

.comment-edit {
    color: #666;
    text-decoration: none;
    font-size: 12px;
}

.comment-text {
    color: #333;
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 14px;
}

.comment-actions {
    font-size: 12px;
}

.comment-reply {
    color: #666;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
}

.comment-reply:hover {
    color: #333;
    text-decoration: underline;
}

/* FORMULARIO DE COMENTARIOS */
.comment-form-section {
    padding: 15px;
    border-top: 1px solid #e0e0e0;
    background: white;
}

.comment-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.comment-textarea:focus {
    outline: none;
    border-color: #4285f4;
}

.comment-submit {
    background: #4285f4;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
}

.comment-submit:hover {
    background: #3367d6;
}

/* FORMULARIO DE COMENTARIOS - CAMPOS ADICIONALES */
.comment-form-author,
.comment-form-email,
.comment-form-url {
    margin-bottom: 15px;
}

.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
    box-sizing: border-box;
}

.comment-form-author input:focus,
.comment-form-email input:focus,
.comment-form-url input:focus {
    outline: none;
    border-color: #4285f4;
}

.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    font-size: 12px;
}

/* ESTILOS PARA ENLACES DE TAXONOMÍAS */
.genre-link,
.director-link,
.actor-link {
    color: #4285f4;
    text-decoration: none;
}

.genre-link:hover,
.director-link:hover,
.actor-link:hover {
    text-decoration: underline;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .cineycine-container {
        padding: 15px;
    }
    
    .movie-main-section {
        flex-direction: column;
        padding: 15px;
    }
    
    .movie-poster {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .movie-details-container {
        margin-top: 20px;
    }
    
    .movie-synopsis-section {
        padding: 15px;
    }
    
    .pros-cons-section {
        flex-direction: column;
    }
    
    .recommendations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .movie-title {
        font-size: 24px;
    }
    
    .recommendations-header {
        flex-direction: column;
        gap: 10px;
        text-align: left;
    }
    
    .recommendations-title {
        text-align: left;
        width: 100%;
    }
    
    .genre-tags {
        justify-content: flex-start;
    }
    
    /* RESPONSIVE PARA RATINGS */
    .ratings-main-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .ratings-bars-container {
        flex: none;
        width: 100%;
    }
    
    .ratings-sphere-container {
        flex: none;
        width: 100%;
        justify-content: center;
    }
    
    .rating-bar-item {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 8px;
    }
    
    .rating-bar-label {
        min-width: auto;
        margin-right: 0;
        text-align: center;
    }
    
    .rating-bar-container {
        margin-right: 0;
    }
    
    .rating-bar-value {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .cineycine-container {
        padding: 10px;
    }
    
    .movie-main-section {
        padding: 10px;
    }
    
    .movie-synopsis-section {
        padding: 10px;
    }
    
    .recommendations-grid {
        grid-template-columns: 1fr;
    }
    
    .movie-title {
        font-size: 20px;
    }
    
    .comment-item {
        flex-direction: column;
        text-align: center;
    }
    
    .comment-meta {
        justify-content: center;
    }
    
    .editor-info {
        flex-direction: column;
        text-align: center;
    }
    
    .detail-row {
        flex-direction: column;
        gap: 5px;
    }
    
    .detail-label {
        min-width: auto;
    }
    
    .movie-details-container .detail-row {
        flex-direction: column;
        gap: 5px;
    }
    
    .movie-details-container .detail-label {
        min-width: auto;
    }
    
    .ratings-main-container {
        padding: 15px;
    }
    
    .rating-sphere {
        width: 78px;
        height: 78px;
    }
    
    .sphere-rating-description {
        font-size: 11px;
        margin-bottom: 6px;
    }
    
    .sphere-rating-value {
        font-size: 24px;
    }
}

/* 
==============================================================
LAYOUT CON SIDEBAR - CINEYCINE
==============================================================
*/

/* CONTENEDOR PRINCIPAL DE LAYOUT */
.cineycine-layout-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* CONTENIDO PRINCIPAL */
.cineycine-main-content {
    flex: 2;
    min-width: 0; /* Para evitar overflow */
}

.cineycine-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff;
    font-family: Arial, sans-serif;
    line-height: 1.4;
}

/* SIDEBAR */
.cineycine-sidebar {
    flex: 0 0 300px;
    width: 300px;
    background: #f8f9fa;
    border-radius: 5px;
    overflow: hidden;
}

/* WIDGETS DE SIDEBAR - COLORES ACTUALIZADOS */
.sidebar-widget {
    margin-bottom: 20px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.sidebar-widget:last-child {
    margin-bottom: 0;
}

.sidebar-widget:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.widget-header {
    background: #2A4759;
    color: #EEEEEE;
    padding: 12px 15px;
    border-bottom: 1px solid #1d3442;
}

.widget-title {
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #EEEEEE;
}

.widget-content {
    padding: 0;
}

/* ==============================================
   ÚLTIMAS PELÍCULAS ANALIZADAS
   ============================================== */

.sidebar-movies-list {
    display: flex;
    flex-direction: column;
}

.sidebar-movie-item {
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.3s ease;
}

.sidebar-movie-item:last-child {
    border-bottom: none;
}

.sidebar-movie-item:hover {
    background-color: #f8f9fa;
}

.sidebar-movie-link {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: inherit;
    gap: 12px;
}

.sidebar-movie-thumb {
    flex-shrink: 0;
    width: 45px;
    height: 65px;
    overflow: hidden;
    border-radius: 3px;
    background: #f0f0f0;
}

.sidebar-movie-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-movie-info {
    flex: 1;
    min-width: 0;
}

.sidebar-movie-title {
    font-size: 13px;
    font-weight: bold;
    color: #333;
    margin: 0 0 6px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-movie-rating {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    min-width: 25px;
    text-align: center;
}

/* COLORES DE RATINGS EN SIDEBAR */
.sidebar-movie-rating.rating-excellent {
    background: #4caf50; /* Verde */
}

.sidebar-movie-rating.rating-good {
    background: #8bc34a; /* Verde claro */
}

.sidebar-movie-rating.rating-ok {
    background: #ffc107; /* Amarillo */
}

.sidebar-movie-rating.rating-average {
    background: #ff9800; /* Naranja */
}

.sidebar-movie-rating.rating-poor {
    background: #f44336; /* Rojo */
}

/* ==============================================
   ESTRENOS DESTACADOS
   ============================================== */

.sidebar-featured-list {
    display: flex;
    flex-direction: column;
}

.sidebar-featured-item {
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.3s ease;
}

.sidebar-featured-item:last-child {
    border-bottom: none;
}

.sidebar-featured-item:hover {
    background-color: #f8f9fa;
}

.sidebar-featured-link {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: inherit;
    gap: 12px;
}

.sidebar-featured-thumb {
    flex-shrink: 0;
    width: 40px;
    height: 58px;
    overflow: hidden;
    border-radius: 3px;
    background: #f0f0f0;
}

.sidebar-featured-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-featured-info {
    flex: 1;
    min-width: 0;
}

.sidebar-featured-title {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    margin: 0 0 6px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-featured-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.featured-year {
    font-size: 10px;
    color: #666;
    background: #f0f0f0;
    padding: 2px 5px;
    border-radius: 2px;
}

.featured-rating {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    color: white;
    background: #4caf50;
}

/* ==============================================
   WIDGET DE PUBLICIDAD
   ============================================== */

.ad-widget .widget-content {
    padding: 15px;
    text-align: center;
}

.ad-placeholder {
    width: 100%;
}

.ad-banner {
    width: 100%;
    background: #f0f0f0;
    border: 2px dashed #ccc;
    color: #999;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    border-radius: 3px;
}

/* ESTILOS PARA ADSENSE */
.ad-banner ins {
    display: block;
    background: transparent;
    border: none;
    outline: none;
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

/* TABLET */
@media screen and (max-width: 1024px) {
    .cineycine-layout-container {
        gap: 20px;
        padding: 15px;
    }
    
    .cineycine-sidebar {
        flex: 0 0 280px;
        width: 280px;
    }
}

/* MÓVIL - SIDEBAR DEBAJO */
@media screen and (max-width: 768px) {
    .cineycine-layout-container {
        flex-direction: column;
        gap: 30px;
        padding: 15px;
    }
    
    .cineycine-main-content {
        width: 100%;
        order: 1;
    }
    
    .cineycine-sidebar {
        width: 100%;
        flex: none;
        order: 2;
        max-width: 100%;
    }
    
    /* GRID HORIZONTAL EN MÓVIL PARA ÚLTIMAS PELÍCULAS */
    .sidebar-movies-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }
    
    .sidebar-movie-item {
        border-right: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .sidebar-movie-item:nth-child(even) {
        border-right: none;
    }
    
    .sidebar-movie-link {
        flex-direction: column;
        text-align: center;
        padding: 15px 10px;
    }
    
    .sidebar-movie-thumb {
        width: 60px;
        height: 85px;
        margin: 0 auto;
    }
    
    .sidebar-movie-title {
        font-size: 12px;
        text-align: center;
        margin-bottom: 8px;
    }
    
    /* FEATURED TAMBIÉN EN GRID */
    .sidebar-featured-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }
    
    .sidebar-featured-item {
        border-right: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .sidebar-featured-item:nth-child(even) {
        border-right: none;
    }
    
    .sidebar-featured-link {
        flex-direction: column;
        text-align: center;
        padding: 12px 8px;
    }
    
    .sidebar-featured-thumb {
        width: 50px;
        height: 72px;
        margin: 0 auto;
    }
    
    .sidebar-featured-title {
        font-size: 11px;
        text-align: center;
        margin-bottom: 6px;
    }
    
    .sidebar-featured-meta {
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {
    .cineycine-layout-container {
        padding: 10px;
    }
    
    /* UNA SOLA COLUMNA EN MÓVIL PEQUEÑO */
    .sidebar-movies-list,
    .sidebar-featured-list {
        grid-template-columns: 1fr;
    }
    
    .sidebar-movie-item,
    .sidebar-featured-item {
        border-right: none;
    }
    
    .sidebar-movie-link {
        flex-direction: row;
        text-align: left;
        padding: 12px 15px;
    }
    
    .sidebar-movie-thumb {
        width: 45px;
        height: 65px;
        margin: 0;
    }
    
    .sidebar-movie-title {
        text-align: left;
        font-size: 13px;
    }
    
    .sidebar-featured-link {
        flex-direction: row;
        text-align: left;
        padding: 10px 15px;
    }
    
    .sidebar-featured-thumb {
        width: 35px;
        height: 50px;
        margin: 0;
    }
    
    .sidebar-featured-title {
        text-align: left;
        font-size: 12px;
    }
    
    .sidebar-featured-meta {
        justify-content: flex-start;
    }
}

/* ==============================================
   INTEGRACIÓN CON ESTILOS EXISTENTES
   ============================================== */

/* Asegurar que los estilos del contenido principal no se vean afectados */
.cineycine-main-content .movie-header,
.cineycine-main-content .movie-main-section,
.cineycine-main-content .movie-synopsis-section,
.cineycine-main-content .movie-content,
.cineycine-main-content .pros-cons-section,
.cineycine-main-content .cineycine-ratings-section,
.cineycine-main-content .editor-card,
.cineycine-main-content .comments-section {
    /* Los estilos existentes se mantienen igual */
}

/* SCROLL SUAVE PARA ENLACES INTERNOS */
html {
    scroll-behavior: smooth;
}

/* MEJORAS VISUALES ADICIONALES */
.sidebar-widget {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.sidebar-widget:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* LOADING PLACEHOLDER PARA IMÁGENES */
.sidebar-movie-thumb:empty,
.sidebar-featured-thumb:empty {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-placeholder 1.5s infinite;
}

@keyframes loading-placeholder {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/*
==============================================================
===============
CINEYCINE - LAYOUT CON SIDEBAR RESPONSIVE
==============================================================
=============== */

/* CONTENEDOR PRINCIPAL DE LAYOUT */
.cineycine-layout-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* CONTENIDO PRINCIPAL */
.cineycine-main-content {
    flex: 2;
    min-width: 0; /* Para evitar overflow */
}

.cineycine-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff;
    font-family: Arial, sans-serif;
    line-height: 1.4;
}

/* SIDEBAR */
.cineycine-sidebar {
    flex: 0 0 300px;
    width: 300px;
    background: transparent;
    border-radius: 5px;
    overflow: hidden;
}

/* WIDGETS DE SIDEBAR */
.sidebar-widget {
    margin-bottom: 20px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.sidebar-widget:last-child {
    margin-bottom: 0;
}

.sidebar-widget:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.widget-header {
    background: #2A4759;
    color: #EEEEEE;
    padding: 12px 15px;
    border-bottom: 1px solid #1d3442;
}

.widget-title {
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #EEEEEE;
}

.widget-content {
    padding: 0;
}

/* ==============================================
   LAYOUT OPTIMIZADO POR DISPOSITIVO
   ============================================== */

/* LAYOUT DESKTOP - Con Sidebar */
body.with-sidebar .cineycine-layout-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

body.with-sidebar .cineycine-main-content {
    flex: 2;
    min-width: 0;
}

body.with-sidebar .cineycine-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

body.with-sidebar .cineycine-sidebar {
    flex: 0 0 300px;
    width: 300px;
    background: #f8f9fa;
    border-radius: 5px;
    overflow: hidden;
}

/* LAYOUT MÓVIL/TABLET - Sin Sidebar */
body.no-sidebar .cineycine-layout-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    display: block;
}

body.no-sidebar .cineycine-main-content {
    width: 100%;
    max-width: 100%;
}

body.no-sidebar .cineycine-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 20px;
    background: #ffffff;
    font-family: Arial, sans-serif;
    line-height: 1.4;
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

/* Ocultar sidebar en pantallas menores a 1200px */
@media screen and (max-width: 1199px) {
    .cineycine-layout-container {
        max-width: 800px !important;
        display: block !important;
        padding: 20px;
    }
    
    .cineycine-main-content {
        width: 100% !important;
        flex: none !important;
    }
    
    .cineycine-container {
        max-width: 800px !important;
        padding: 20px !important;
    }
    
    .cineycine-sidebar {
        display: none !important;
    }
}

/* TABLET */
@media screen and (max-width: 1024px) {
    .cineycine-layout-container {
        padding: 15px !important;
    }
    
    .cineycine-container {
        padding: 15px !important;
    }
}

/* MÓVIL */
@media screen and (max-width: 768px) {
    .cineycine-layout-container {
        padding: 15px !important;
    }
    
    .cineycine-container {
        padding: 15px !important;
    }
    
    /* Estilos específicos para móvil */
    .movie-main-section {
        flex-direction: column !important;
        padding: 15px !important;
    }
    
    .movie-poster {
        width: 100% !important;
        max-width: 250px !important;
        margin: 0 auto !important;
    }
    
    .detail-row {
        flex-direction: column !important;
        gap: 5px !important;
    }
    
    .pros-cons-section {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .ratings-main-container {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .recommendations-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .movie-title {
        font-size: 24px !important;
        text-align: center !important;
    }
}

@media screen and (max-width: 480px) {
    .cineycine-layout-container {
        padding: 10px !important;
    }
    
    .cineycine-container {
        padding: 10px !important;
    }
    
    .movie-title {
        font-size: 20px !important;
    }
    
    .recommendations-grid {
        grid-template-columns: 1fr !important;
    }
    
    .rating-sphere {
        width: 70px !important;
        height: 70px !important;
    }
    
    .sphere-rating-value {
        font-size: 20px !important;
    }
}

/* ==============================================
   UTILIDADES CONDICIONALES
   ============================================== */

/* Clase para mostrar/ocultar contenido según dispositivo */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

@media screen and (max-width: 1199px) {
    .desktop-only {
        display: none;
    }
    
    .mobile-only {
        display: block;
    }
}

/*
==============================================================
COLORES PERSONALIZADOS HEADER Y TRENDING BAR
==============================================================
*/

/* HEADER PRINCIPAL */
.main-header-bar,
.ast-primary-header,
.site-header,
#masthead {
    background-color: #2A4759 !important;
    background: #2A4759 !important;
}

/* NOMBRE DEL SITIO */
.site-title,
.site-title a,
.ast-site-title-wrap .site-title,
.ast-site-title-wrap .site-title a {
    color: #ffffff !important;
}

/* MENÚ PRINCIPAL */
.main-header-menu a,
.ast-header-menu a,
.main-navigation a,
.ast-main-header-nav a {
    color: #ffffff !important;
}

.main-header-menu a:hover,
.ast-header-menu a:hover,
.main-navigation a:hover,
.ast-main-header-nav a:hover {
    color: #F79B72 !important;
}

/* MENÚ MÓVIL */
.main-header-menu-toggle,
.menu-toggle {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.main-header-menu-toggle:hover,
.menu-toggle:hover {
    color: #F79B72 !important;
    border-color: #F79B72 !important;
}

/* TRENDING BAR - ACTUALIZADO */
.trending-tags-bar {
    background: #F79B72 !important;
    border-bottom: 1px solid #e9723c !important;
}

.trending-label {
    color: #ffffff !important;
}

.trending-tag {
    color: #2A4759 !important;
    background: #ffffff !important;
    border: 1px solid rgba(42, 71, 89, 0.2) !important;
}

.trending-tag:hover {
    color: #ffffff !important;
    background: #2A4759 !important;
    border-color: #2A4759 !important;
    box-shadow: 0 2px 4px rgba(42, 71, 89, 0.3) !important;
}

/* ===============================================
   SUBMENÚS / DROPDOWN - MISMO FONDO QUE HEADER
   =============================================== */

/* Fondo de submenús */
.main-header-menu ul,
.ast-header-menu ul,
.main-navigation ul ul,
.ast-desktop-menu ul ul {
    background-color: #2A4759 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Enlaces de submenú */
.main-header-menu ul a,
.ast-header-menu ul a,
.main-navigation ul ul a,
.ast-desktop-menu ul ul a {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 12px 20px !important;
    transition: all 0.3s ease !important;
}

.main-header-menu ul a:hover,
.ast-header-menu ul a:hover,
.main-navigation ul ul a:hover,
.ast-desktop-menu ul ul a:hover {
    color: #F79B72 !important;
    background-color: rgba(247, 155, 114, 0.15) !important;
}

/* Últimos elementos sin border */
.main-header-menu ul li:last-child a,
.ast-header-menu ul li:last-child a,
.main-navigation ul ul li:last-child a,
.ast-desktop-menu ul ul li:last-child a {
    border-bottom: none !important;
}

/* Submenu con más de un nivel */
.main-header-menu ul ul,
.ast-header-menu ul ul,
.main-navigation ul ul ul,
.ast-desktop-menu ul ul ul {
    background-color: #2A4759 !important;
    border-left: 3px solid #F79B72 !important;
}

/* Responsive para submenús móviles */
@media (max-width: 921px) {
    .ast-mobile-popup-drawer,
    .ast-mobile-popup-inner {
        background-color: #2A4759 !important;
    }
    
    .ast-mobile-menu a {
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .ast-mobile-menu a:hover {
        color: #F79B72 !important;
        background-color: rgba(247, 155, 114, 0.15) !important;
    }
    
    .ast-mobile-menu ul {
        background-color: #2A4759 !important;
    }
}

/*
==============================================================
COLORES PERSONALIZADOS HEADER Y TRENDING BAR
==============================================================
*/

/* ===============================================
   HEADER PRINCIPAL - TEMA ASTRA
   =============================================== */

/* Fondo del header principal */
.main-header-bar,
.ast-primary-header,
.site-header,
#masthead {
    background-color: #2A4759 !important;
    background: #2A4759 !important;
}

/* Nombre del sitio/logo */
.site-title,
.site-title a,
.ast-site-title-wrap .site-title,
.ast-site-title-wrap .site-title a {
    color: #ffffff !important;
}

.site-title:hover,
.site-title a:hover {
    color: #ffffff !important;
}

/* Descripción del sitio */
.site-description,
.ast-site-title-wrap .site-description {
    color: #ffffff !important;
}

/* ===============================================
   MENÚ PRINCIPAL
   =============================================== */

/* Enlaces del menú principal */
.main-header-menu a,
.ast-header-menu a,
.main-navigation a,
.ast-main-header-nav a {
    color: #ffffff !important;
}

/* Hover en enlaces del menú */
.main-header-menu a:hover,
.ast-header-menu a:hover,
.main-navigation a:hover,
.ast-main-header-nav a:hover {
    color: #F79B72 !important;
}

/* Menú actual/activo */
.main-header-menu .current-menu-item > a,
.ast-header-menu .current-menu-item > a,
.main-navigation .current-menu-item > a,
.ast-main-header-nav .current-menu-item > a {
    color: #F79B72 !important;
}

/* ===============================================
   MENÚ MÓVIL
   =============================================== */

/* Botón del menú móvil */
.main-header-menu-toggle,
.ast-button-wrap .menu-toggle,
.menu-toggle {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.main-header-menu-toggle:hover,
.ast-button-wrap .menu-toggle:hover,
.menu-toggle:hover {
    color: #F79B72 !important;
    border-color: #F79B72 !important;
}

/* Fondo del menú móvil desplegable */
.main-header-menu,
.ast-header-menu,
.main-navigation .main-header-menu {
    background-color: #2A4759 !important;
}

/* Enlaces en menú móvil */
.main-header-menu li a,
.ast-header-menu li a {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.main-header-menu li a:hover,
.ast-header-menu li a:hover {
    color: #F79B72 !important;
    background-color: rgba(247, 155, 114, 0.1) !important;
}

/* ===============================================
   SUBMENU / DROPDOWN
   =============================================== */

/* Fondo de submenús */
.main-header-menu ul,
.ast-header-menu ul,
.main-navigation ul ul,
.ast-desktop-menu ul ul {
    background-color: #2A4759 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Enlaces de submenú */
.main-header-menu ul a,
.ast-header-menu ul a,
.main-navigation ul ul a,
.ast-desktop-menu ul ul a {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 12px 20px !important;
    transition: all 0.3s ease !important;
}

.main-header-menu ul a:hover,
.ast-header-menu ul a:hover,
.main-navigation ul ul a:hover,
.ast-desktop-menu ul ul a:hover {
    color: #F79B72 !important;
    background-color: rgba(247, 155, 114, 0.15) !important;
}

/* Últimos elementos sin border */
.main-header-menu ul li:last-child a,
.ast-header-menu ul li:last-child a,
.main-navigation ul ul li:last-child a,
.ast-desktop-menu ul ul li:last-child a {
    border-bottom: none !important;
}

/* Submenu con más de un nivel */
.main-header-menu ul ul,
.ast-header-menu ul ul,
.main-navigation ul ul ul,
.ast-desktop-menu ul ul ul {
    background-color: #2A4759 !important;
    border-left: 3px solid #F79B72 !important;
}

/* ===============================================
   HEADER TRANSPARENTE (si está activado)
   =============================================== */

.ast-theme-transparent-header .main-header-bar,
.ast-theme-transparent-header .ast-primary-header {
    background-color: #2A4759 !important;
    background: #2A4759 !important;
}

/* ===============================================
   BÚSQUEDA EN HEADER (si está activada)
   =============================================== */

.ast-search-menu-icon {
    color: #ffffff !important;
}

.ast-search-menu-icon:hover {
    color: #F79B72 !important;
}

/* Formulario de búsqueda */
.ast-search-box input[type="search"] {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #2A4759 !important;
}

/* ===============================================
   RESPONSIVE ESPECÍFICO PARA HEADER
   =============================================== */

@media (max-width: 921px) {
    /* Header en tablet/móvil */
    .ast-mobile-header-wrap .main-header-bar,
    .ast-mobile-header-wrap .ast-primary-header {
        background-color: #2A4759 !important;
    }
    
    /* Menú hamburguesa */
    .ast-mobile-menu-trigger-minimal {
        color: #ffffff !important;
    }
    
    .ast-mobile-menu-trigger-minimal:hover {
        color: #F79B72 !important;
    }
    
    /* Menú móvil desplegado */
    .ast-mobile-popup-drawer,
    .ast-mobile-popup-inner {
        background-color: #2A4759 !important;
    }
    
    .ast-mobile-menu a {
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .ast-mobile-menu a:hover {
        color: #F79B72 !important;
        background-color: rgba(247, 155, 114, 0.15) !important;
    }
    
    .ast-mobile-menu ul {
        background-color: #2A4759 !important;
    }
}

/* ===============================================
   TRENDING TAGS BAR - COORDINADO CON HEADER
   =============================================== */

.trending-tags-bar {
    background: #F79B72 !important;
    border-bottom: 1px solid #e9723c !important;
}

.trending-label {
    color: #ffffff !important;
    font-weight: bold !important;
}

.trending-icon {
    stroke: #ffffff !important;
    stroke-width: 2 !important;
}

.trending-tag {
    color: #ffffff !important;
    font-weight: 600 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.trending-tag:hover {
    color: #2A4759 !important;
    background: none !important;
}

.tag-separator {
    color: #ffffff !important;
}

/* ===============================================
   FIXES ADICIONALES PARA COMPATIBILIDAD
   =============================================== */

/* Asegurar que los estilos se apliquen con alta especificidad */
body .main-header-bar,
body .ast-primary-header,
body #masthead {
    background-color: #2A4759 !important;
}

body .site-title a,
body .main-header-menu a,
body .ast-header-menu a {
    color: #ffffff !important;
}

/* Override para temas con customizer */
.ast-header-custom-item,
.ast-header-custom-item a {
    color: #ffffff !important;
}

.ast-header-custom-item:hover,
.ast-header-custom-item a:hover {
    color: #F79B72 !important;
}

/* ===============================================
   BREADCRUMBS (si están activados)
   =============================================== */

.ast-breadcrumbs-wrapper {
    background-color: rgba(42, 71, 89, 0.05) !important;
}

.ast-breadcrumbs-wrapper .trail-items a {
    color: #2A4759 !important;
}

.ast-breadcrumbs-wrapper .trail-items a:hover {
    color: #F79B72 !important;
}

.site-main, #primary {
    margin-top: 10px !important;
    padding-top: 10px !important;
}

/* 
==============================================================
COLORES DINÁMICOS PARA RECOMENDACIONES - MISMOS QUE LA ESFERA
==============================================================
*/

/* Colores base para .rec-score según puntuación */
.rec-score {
    color: white;
    padding: 2px 6px;
    border-radius: 2px;
    font-weight: bold;
    font-size: 12px;
    transition: all 0.3s ease;
    display: inline-block;
    min-width: 25px;
    text-align: center;
}

/* COLORES ESPECÍFICOS - IGUALES A LA ESFERA */
.rec-score.rec-score-excellent {
    background: #228B22; /* Verde oscuro - 9-10 */
}

.rec-score.rec-score-good {
    background: #32CD32; /* Verde - 7-8 */
}

.rec-score.rec-score-ok {
    background: #90EE90; /* Verde claro - 6 */
    color: #333; /* Texto oscuro para mejor contraste */
}

.rec-score.rec-score-average {
    background: #FFA500; /* Naranja claro - 5 */
}

.rec-score.rec-score-poor {
    background: #FF8C00; /* Naranja - 3-4 */
}

.rec-score.rec-score-bad {
    background: #DC143C; /* Rojo - 1-2 */
}

/* Efecto hover para las recomendaciones */
.recommendation-item:hover .rec-score {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 
==============================================================
ACTUALIZAR COLORES DINÁMICOS EN SIDEBAR TAMBIÉN
==============================================================
*/

/* Aplicar los mismos colores a las películas de la sidebar */
.sidebar-movie-rating.rating-excellent,
.sidebar-featured-rating.rating-excellent {
    background: #228B22 !important; /* Verde oscuro */
}

.sidebar-movie-rating.rating-good,
.sidebar-featured-rating.rating-good {
    background: #32CD32 !important; /* Verde */
}

.sidebar-movie-rating.rating-ok,
.sidebar-featured-rating.rating-ok {
    background: #90EE90 !important; /* Verde claro */
    color: #333 !important; /* Texto oscuro */
}

.sidebar-movie-rating.rating-average,
.sidebar-featured-rating.rating-average {
    background: #FFA500 !important; /* Naranja claro */
}

.sidebar-movie-rating.rating-poor,
.sidebar-featured-rating.rating-poor {
    background: #FF8C00 !important; /* Naranja */
}

.sidebar-movie-rating.rating-bad,
.sidebar-featured-rating.rating-bad {
    background: #DC143C !important; /* Rojo */
}

/* 
==============================================================
RESPONSIVE PARA RECOMENDACIONES CON COLORES
==============================================================
*/

@media (max-width: 480px) {
    .rec-score {
        font-size: 11px;
        padding: 2px 5px;
        min-width: 22px;
    }
    
    .recommendation-item:hover .rec-score {
        transform: scale(1.05); /* Menos zoom en móvil */
    }
}

.detail-row {
    gap: 8px; /* Añade espacio entre label y value */
}

/*
==============================================================
FIX DEFINITIVO PARA MENÚS MÓVILES - COLORES CONSISTENTES
==============================================================
Añadir al final del archivo style.css para máxima prioridad
*/

/* ===============================================
   RESET Y LIMPIEZA PREVIA
   =============================================== */

/* Limpiar estilos previos que puedan causar conflictos */
@media (max-width: 921px) {
    /* Resetear cualquier background heredado */
    .ast-mobile-popup-drawer *,
    .ast-mobile-popup-inner *,
    .ast-mobile-menu * {
        background: none !important;
        background-color: transparent !important;
    }
}

/* ===============================================
   MENÚ MÓVIL - ESTILOS UNIFICADOS
   =============================================== */

@media (max-width: 921px) {
    
    /* ============ FONDO DEL HEADER MÓVIL ============ */
    .main-header-bar,
    .ast-primary-header,
    .ast-mobile-header-wrap,
    .ast-mobile-header-wrap .main-header-bar,
    .ast-mobile-header-wrap .ast-primary-header,
    .site-header,
    #masthead {
        background-color: #2A4759 !important;
        background: #2A4759 !important;
    }
    
    /* ============ BOTÓN HAMBURGUESA ============ */
    .main-header-menu-toggle,
    .ast-button-wrap .menu-toggle,
    .menu-toggle,
    .ast-mobile-menu-trigger-minimal,
    .ast-mobile-menu-trigger,
    .ast-header-break-point .ast-button-wrap .menu-toggle {
        color: #ffffff !important;
        border-color: #ffffff !important;
        background: transparent !important;
    }
    
    .main-header-menu-toggle:hover,
    .ast-button-wrap .menu-toggle:hover,
    .menu-toggle:hover,
    .ast-mobile-menu-trigger-minimal:hover,
    .ast-mobile-menu-trigger:hover {
        color: #F79B72 !important;
        border-color: #F79B72 !important;
        background: transparent !important;
    }
    
    /* ============ MENÚ DESPLEGABLE MÓVIL ============ */
    .ast-mobile-popup-drawer,
    .ast-mobile-popup-inner,
    .main-header-menu,
    .ast-header-menu,
    .main-navigation .main-header-menu,
    .ast-mobile-popup-content {
        background-color: #2A4759 !important;
        background: #2A4759 !important;
    }
    
    /* ============ ENLACES DEL MENÚ MÓVIL ============ */
    .ast-mobile-menu a,
    .ast-mobile-menu li a,
    .main-header-menu li a,
    .ast-header-menu li a,
    .ast-mobile-popup-content a,
    .ast-mobile-popup-inner a {
        color: #ffffff !important;
        background: transparent !important;
        background-color: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 15px 20px !important;
        display: block !important;
        transition: all 0.3s ease !important;
    }
    
    /* ============ HOVER EN ENLACES MÓVILES ============ */
    .ast-mobile-menu a:hover,
    .ast-mobile-menu li a:hover,
    .main-header-menu li a:hover,
    .ast-header-menu li a:hover,
    .ast-mobile-popup-content a:hover,
    .ast-mobile-popup-inner a:hover {
        color: #F79B72 !important;
        background-color: rgba(247, 155, 114, 0.15) !important;
        background: rgba(247, 155, 114, 0.15) !important;
    }
    
    /* ============ ENLACES ACTIVOS ============ */
    .ast-mobile-menu .current-menu-item > a,
    .ast-mobile-menu .current-menu-ancestor > a,
    .main-header-menu .current-menu-item > a,
    .ast-header-menu .current-menu-item > a {
        color: #F79B72 !important;
        background-color: rgba(247, 155, 114, 0.1) !important;
    }
    
    /* ============ SUBMENÚS MÓVILES ============ */
    .ast-mobile-menu ul,
    .ast-mobile-menu ul li,
    .main-header-menu ul,
    .ast-header-menu ul {
        background-color: #2A4759 !important;
        background: #2A4759 !important;
    }
    
    .ast-mobile-menu ul a,
    .ast-mobile-menu ul li a,
    .main-header-menu ul a,
    .ast-header-menu ul a {
        color: #ffffff !important;
        background: transparent !important;
        padding-left: 40px !important; /* Indentación para submenús */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    
    .ast-mobile-menu ul a:hover,
    .ast-mobile-menu ul li a:hover,
    .main-header-menu ul a:hover,
    .ast-header-menu ul a:hover {
        color: #F79B72 !important;
        background-color: rgba(247, 155, 114, 0.15) !important;
    }
    
    /* ============ ÚLTIMO ELEMENTO SIN BORDE ============ */
    .ast-mobile-menu li:last-child a,
    .main-header-menu li:last-child a,
    .ast-header-menu li:last-child a {
        border-bottom: none !important;
    }
    
    /* ============ LOGO Y TÍTULO EN MÓVIL ============ */
    .site-title,
    .site-title a,
    .ast-site-title-wrap .site-title,
    .ast-site-title-wrap .site-title a {
        color: #ffffff !important;
    }
    
    .site-description,
    .ast-site-title-wrap .site-description {
        color: #ffffff !important;
    }
    
    /* ============ BÚSQUEDA EN MÓVIL (si está activa) ============ */
    .ast-search-menu-icon {
        color: #ffffff !important;
    }
    
    .ast-search-menu-icon:hover {
        color: #F79B72 !important;
    }
    
    /* ============ BOTONES DE CIERRE ============ */
    .ast-mobile-popup-close,
    .ast-mobile-popup .ast-close-popup {
        color: #ffffff !important;
    }
    
    .ast-mobile-popup-close:hover,
    .ast-mobile-popup .ast-close-popup:hover {
        color: #F79B72 !important;
    }
}

/* ===============================================
   FIXES ESPECÍFICOS PARA DIFERENTES VERSIONES DE ASTRA
   =============================================== */

/* Para versiones más nuevas de Astra */
@media (max-width: 921px) {
    .ast-header-break-point .main-header-bar {
        background-color: #2A4759 !important;
    }
    
    .ast-header-break-point .ast-mobile-menu {
        background-color: #2A4759 !important;
    }
    
    .ast-header-break-point .ast-mobile-menu a {
        color: #ffffff !important;
    }
    
    .ast-header-break-point .ast-mobile-menu a:hover {
        color: #F79B72 !important;
    }
}

/* ===============================================
   OVERRIDES DE ALTA ESPECIFICIDAD
   =============================================== */

/* Asegurar que los estilos se apliquen con máxima prioridad */
@media (max-width: 921px) {
    body.ast-header-break-point .ast-mobile-popup-drawer,
    body.ast-header-break-point .ast-mobile-popup-inner,
    body .ast-mobile-popup-drawer,
    body .ast-mobile-popup-inner {
        background-color: #2A4759 !important;
    }
    
    body.ast-header-break-point .ast-mobile-menu a,
    body .ast-mobile-menu a {
        color: #ffffff !important;
        background: transparent !important;
    }
    
    body.ast-header-break-point .ast-mobile-menu a:hover,
    body .ast-mobile-menu a:hover {
        color: #F79B72 !important;
        background-color: rgba(247, 155, 114, 0.15) !important;
    }
    
    body.ast-header-break-point .main-header-bar,
    body .main-header-bar {
        background-color: #2A4759 !important;
    }
}

/* ===============================================
   TABLET ESPECÍFICO (768px - 921px)
   =============================================== */

@media (min-width: 768px) and (max-width: 921px) {
    .main-header-menu,
    .ast-header-menu {
        background-color: #2A4759 !important;
    }
    
    .main-header-menu a,
    .ast-header-menu a {
        color: #ffffff !important;
    }
    
    .main-header-menu a:hover,
    .ast-header-menu a:hover {
        color: #F79B72 !important;
    }
}

/* ===============================================
   DEBUGGING - REMOVER DESPUÉS DE CONFIRMAR
   =============================================== */

/* 
Descomentar estas líneas temporalmente para identificar qué elementos necesitan ajustes:

@media (max-width: 921px) {
    .ast-mobile-popup-drawer { border: 2px solid red !important; }
    .ast-mobile-menu { border: 2px solid blue !important; }
    .ast-mobile-menu a { border: 1px solid yellow !important; }
}
*/

/* ===================================================================
   MEJORAS ADICIONALES PARA ETIQUETAS EN MÓVIL
   Añadir al final del style.css o en el archivo mobile-optimized.css
   =================================================================== */

/* ESTILOS MEJORADOS PARA TODAS LAS SECCIONES DE ETIQUETAS */
.movie-tags-section,
.news-tags-section {
    background: #f5f6f7;
    padding: 25px;
    margin: 25px 0;
    border-radius: 10px;
    border: 1px solid #e1e4e8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tags-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    justify-content: center;
}

.tags-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Colores específicos por sección */
.news-tags-section .tags-icon {
    stroke: #F79B72;
}

.movie-tags-section .tags-icon {
    stroke: #e74c3c;
}

.tags-label {
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.news-tags-section .tags-label {
    color: #F79B72;
}

.movie-tags-section .tags-label {
    color: #e74c3c;
}

.tags-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.tag-pill {
    background: #273F4F;
    color: white;
    padding: 10px 18px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    box-shadow: 0 3px 6px rgba(39, 63, 79, 0.2);
    border: 2px solid transparent;
    white-space: nowrap; /* Evita que se partan las palabras */
    line-height: 1.2;
}

.tag-pill:hover {
    background: #e74c3c;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(231, 76, 60, 0.4);
    border-color: rgba(231, 76, 60, 0.3);
}

/* RESPONSIVE MEJORADO PARA MÓVILES */
@media (max-width: 768px) {
    .movie-tags-section,
    .news-tags-section {
        padding: 20px;
        margin: 20px 0;
    }
    
    .tags-header {
        margin-bottom: 15px;
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    
    .tags-label {
        font-size: 14px;
    }
    
    .tags-pills-container {
        justify-content: center;
        gap: 8px;
    }
    
    .tag-pill {
        padding: 8px 14px;
        font-size: 13px;
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .movie-tags-section,
    .news-tags-section {
        padding: 15px;
        margin: 15px 0;
    }
    
    .tags-header {
        margin-bottom: 12px;
    }
    
    .tags-icon {
        width: 18px;
        height: 18px;
    }
    
    .tags-label {
        font-size: 13px;
    }
    
    .tags-pills-container {
        gap: 6px;
    }
    
    .tag-pill {
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 20px;
    }
}

/* MEJORA PARA ETIQUETAS MUY LARGAS */
@media (max-width: 320px) {
    .tag-pill {
        font-size: 11px;
        padding: 5px 10px;
        max-width: calc(50% - 3px); /* Máximo 2 por línea en móviles muy pequeños */
        text-overflow: ellipsis;
        overflow: hidden;
    }
}
/* ==============================================
   CONTROLES DEL SLIDER - FLECHAS ELEGANTES
   ============================================== */

.slider-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    z-index: 5;
    pointer-events: none;
}

.slider-btn {
    background: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    border-radius: 4px; /* Menos redondeado */
    width: 35px; /* Más pequeño */
    height: 35px; /* Más pequeño */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 22px; /* Más pequeño */
    font-weight: bold;
    pointer-events: all;
    opacity: 0.8;
    backdrop-filter: blur(5px);
}

.slider-btn:hover {
    background: rgba(247, 155, 114, 0.8);
    opacity: 1;
    transform: scale(1.05); /* Menos efecto de escala */
}

.slider-btn:active {
    transform: scale(0.98);
}

/* Posicionamiento específico */
.prev-btn {
    left: 0;
}

.next-btn {
    right: 0;
}

/* ==============================================
   RESPONSIVE PARA FLECHAS
   ============================================== */

@media (max-width: 768px) {
    .slider-controls {
        padding: 0 10px;
    }
    
    .slider-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .slider-controls {
        padding: 0 8px;
    }
    
    .slider-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
        opacity: 0.7;
    }
    
    .slider-btn:hover {
        opacity: 0.9;
    }
}

/* 
==============================================================
COLORES DINÁMICOS PARA RECOMENDACIONES - MISMOS QUE LA ESFERA
==============================================================
*/