/* AnimeSGD V16 - Marcos transparentes por categoría HOME */
.cdb-poster-frame {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    object-fit: fill !important;
    pointer-events: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Los marcos originales miden 370 x 499. Mantener esa relación evita deformarlos. */
body.home .media-card__poster.has-cdb-poster-frame,
.search-result-poster.has-cdb-poster-frame,
.cdb-archive-card__poster.has-cdb-poster-frame {
    position: relative !important;
    aspect-ratio: 370 / 499 !important;
    overflow: hidden !important;
}

body.home .media-card__poster.has-cdb-poster-frame > img:not(.cdb-poster-frame),
.search-result-poster.has-cdb-poster-frame > img:not(.cdb-poster-frame),
.cdb-archive-card__poster.has-cdb-poster-frame > img:not(.cdb-poster-frame) {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 370 / 499 !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* Ficha individual */
body.single .cdb-v509-movie-card__poster.has-cdb-poster-frame,
body.single .cdb-single-poster.has-cdb-poster-frame {
    position: relative !important;
    aspect-ratio: 370 / 499 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.single .cdb-v509-movie-card__poster.has-cdb-poster-frame > img:not(.cdb-poster-frame),
body.single .cdb-single-poster.has-cdb-poster-frame > img:not(.cdb-poster-frame) {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: 370 / 499 !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Evitar que los efectos hover del tema deformen el marco. */
body.home .media-card:hover .cdb-poster-frame,
.search-result-card:hover .cdb-poster-frame,
.cdb-archive-card:hover .cdb-poster-frame,
body.single .has-cdb-poster-frame:hover .cdb-poster-frame {
    transform: none !important;
    filter: none !important;
}

/* La capa de hover queda debajo del marco; el centro transparente sigue mostrando el botón. */
body.home .has-cdb-poster-frame .media-card__overlay {
    z-index: 3 !important;
}

/* El marco ya lleva el nombre/calidad de la sección: evitar etiquetas duplicadas. */
body.home .has-cdb-poster-frame .media-card__badge,
body.home .has-cdb-poster-frame .cdb-cover-label--quality,
body.single .has-cdb-poster-frame .cdb-v509-movie-card__poster-quality {
    display: none !important;
}

/* Mantener estado/audio visibles sin tapar el encabezado del marco. */
body.home .has-cdb-poster-frame .cdb-cover-label--status {
    top: 38px !important;
    z-index: 6 !important;
}
body.home .has-cdb-poster-frame .cdb-cover-label--audio {
    z-index: 6 !important;
}
body.single .has-cdb-poster-frame .cdb-v509-movie-card__language {
    top: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    z-index: 6 !important;
}


/* V21: la bandera ya está integrada dentro del marco; ocultar etiquetas duplicadas. */
body.home .has-cdb-poster-frame .cdb-cover-label--audio,
.search-result-poster.has-cdb-poster-frame + .search-result-body .cdb-cover-label--audio,
.cdb-archive-card__poster.has-cdb-poster-frame + .cdb-archive-card__body .cdb-cover-label--audio,
body.single .has-cdb-poster-frame .cdb-v509-movie-card__language {
    display: none !important;
}
/* Evitar que el hover del tema mueva el marco demasiado y de la sensación de carátula pequeña. */
body.home .media-card:hover .media-card__poster.has-cdb-poster-frame,
.search-result-card:hover .search-result-poster.has-cdb-poster-frame,
.cdb-archive-card:hover .cdb-archive-card__poster.has-cdb-poster-frame {
    transform: none !important;
}


/* V22: corrección específica para la ficha individual.
   Usamos un relleno por background-image debajo del marco para asegurar que
   la portada siempre se vea completa en la publicación. */
body.single .cdb-v509-movie-card__poster.has-cdb-poster-frame {
    position: relative !important;
    width: min(370px, 100%) !important;
    max-width: 370px !important;
    margin: 0 auto !important;
    aspect-ratio: 370 / 499 !important;
    overflow: hidden !important;
}
body.single .cdb-v22-single-poster-fill {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
body.single .cdb-v509-movie-card__poster.has-cdb-poster-frame > img:not(.cdb-poster-frame) {
    opacity: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}
body.single .cdb-v509-movie-card__poster.has-cdb-poster-frame > .cdb-poster-frame {
    z-index: 4 !important;
}
@media (max-width: 680px) {
    body.single .cdb-v509-movie-card__poster.has-cdb-poster-frame {
        width: min(300px, 78vw) !important;
        max-width: 300px !important;
    }
}


/* V24: corrección definitiva de la carátula dentro del post.
   El problema era que reglas antiguas del tema aplicaban fondo oscuro al <img>
   del marco. Como el marco es un PNG/WebP transparente, ese fondo tapaba la
   carátula de abajo. Estas reglas tienen mayor especificidad y fuerzan el
   marco a conservar transparencia real. */
body.single .cdb-v509-movie-card__poster.has-cdb-poster-frame {
    position: relative !important;
    width: min(370px, 100%) !important;
    max-width: 370px !important;
    aspect-ratio: 370 / 499 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.single .cdb-v509-movie-card__poster.has-cdb-poster-frame > img.cdb-v24-poster-image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

body.single .cdb-v509-movie-card__poster.has-cdb-poster-frame > img.cdb-poster-frame {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: fill !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    pointer-events: none !important;
}

/* Anular la solución temporal V22 basada en background-image. */
body.single .cdb-v22-single-poster-fill {
    display: none !important;
}
body.single .cdb-v509-movie-card__poster.has-cdb-poster-frame > img:not(.cdb-poster-frame) {
    opacity: 1 !important;
}

@media (max-width: 680px) {
    body.single .cdb-v509-movie-card__poster.has-cdb-poster-frame {
        width: min(300px, 78vw) !important;
        max-width: 300px !important;
    }
}