/* ==========================================================================
   MEDIOS CMS - COMPONENT: SINGLE (Noticias y Páginas)
   Estilos del cuerpo de lectura, tipografía de artículo, modo lectura,
   barras de herramientas móviles, multimedia y avisos entre párrafos.
   ========================================================================== */

/* Redondeo de imágenes en el cuerpo del artículo */
.cms-single-body img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 1rem !important;
}

.cms-single-body p:has(> img) {
    text-align: center !important;
}

/* Figuras dentro del cuerpo */
.cms-single-body figure {
    position: relative !important;
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    border-radius: 1rem;
    overflow: hidden;
}

.cms-single-body figure img {
    width: 100% !important;
    height: auto !important;
    border-radius: 1rem !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Epígrafes / Figcaptions Premium */
figure figcaption,
figure.group.relative figcaption,
.cms-single-body figure figcaption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0.85rem 1.25rem !important;
    background: rgba(0, 0, 0, 0.75) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 0.75rem !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 10 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

figure figcaption *,
figure.group.relative figcaption *,
.cms-single-body figure figcaption * {
    color: #ffffff !important;
    text-align: left !important;
    font-size: calc(1rem * var(--text-zoom, 1)) !important;
    line-height: 1.3 !important;
}

figure figcaption::before,
figure.group.relative figcaption::before,
.cms-single-body figure figcaption::before {
    content: 'photo_camera';
    font-family: 'Material Symbols Outlined' !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

/* Espaciado superior en móviles (30px uniforme) */
@media (max-width: 767px) {
    .cms-single-top-spacing {
        padding-top: 1.875rem !important;
    }
}

/* Espaciado de Banner Top en Interior de Noticia (solo cuando existe anuncio activo) */
.cms-ad-zone-single-main-top {
    margin-top: -12px !important;
    margin-bottom: 30px !important;
}

/* Tipografía de Contenido Prose y Embeds */
.prose img,
.prose iframe,
.prose .instagram-media,
.prose .twitter-tweet,
.prose .wp-embedded-content { 
    margin-left: auto !important; 
    margin-right: auto !important;
    display: block !important; 
}

.prose p { margin-bottom: 1.5rem; }
.prose h2 { font-weight: 700; font-size: 2.2rem; margin-top: 3.5rem; margin-bottom: 1.5rem; }
.prose h3 { font-weight: 800; font-size: 1.8rem; margin-top: 2.5rem; margin-bottom: 1.2rem; }
.prose blockquote { border-left: 4px solid var(--primary-color); padding-left: 1rem; font-style: italic; font-weight: 500; color: #6b7280; font-size: 1.25rem; }

/* Resaltado de Lectura por Voz */
.cms-reading-highlight { transition: all 0.3s ease; border-radius: 4px; border-bottom: 2px solid transparent; }
.cms-reading-active { background-color: rgba(var(--primary-rgb, 230,0,126), 0.15) !important; border-bottom-color: var(--primary-color) !important; box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 230,0,126), 0.05); }

/* Modo Lectura Activo */
.reading-mode-active #cms-main-sidebar { display: none !important; }
.reading-mode-active #cms-main-article { grid-column: span 12 / span 12 !important; max-width: 800px !important; margin-left: auto !important; margin-right: auto !important; }

/* Ocultar botón de Modo Lectura en pantallas chicas (< 1024px) */
@media (max-width: 1023px) {
    #cms-reading-mode-trigger {
        display: none !important;
    }
}

/* Barra de Herramientas Responsive (< 600px) */
@media (max-width: 600px) {
    #cms-action-container {
        justify-content: space-around !important;
        gap: 15px !important;
        padding: 12px 6px !important;
    }
    #cms-action-container button,
    #cms-action-container .group {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0px !important;
        flex: none !important;
    }
    #cms-action-container button span:not(.material-symbols-outlined),
    #cms-action-container .cms-listen-trigger-text {
        display: none !important;
    }
    #cms-action-container #cms-voice-settings-trigger {
        margin-left: 6px !important;
        margin-top: 0px !important;
    }
}

/* Imagen / Video Destacado a Ancho Completo en Móvil (< 1024px) */
@media (max-width: 1023px) {
    .cms-single-featured-media {
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
        width: calc(100% + 3rem) !important;
        max-width: none !important;
        border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
    }
    #cms-main-article .cms-single-featured-media,
    #cms-main-article .cms-single-featured-media *,
    html body .cms-single-featured-media,
    html body .cms-single-featured-media figure,
    html body .cms-single-featured-media figure.rounded-2xl,
    html body .cms-single-featured-media figure img,
    html body .cms-single-featured-media img,
    html body .cms-single-featured-media img:not(.rounded-full):not(.avatar),
    html body .cms-single-featured-media .aspect-video,
    html body .cms-single-featured-media iframe,
    html body .cms-single-featured-media figcaption {
        border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .cms-single-featured-media figure {
        box-shadow: none !important;
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .cms-single-featured-media figure img {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }
    .cms-single-featured-media figcaption {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Avisos Entre Párrafos en Móvil (< 1024px) */
    .cms-single-body .cms-ad-v7,
    .cms-single-body [class*="cms-ad-zone-"],
    [class*="cms-ad-zone-single-content-p"] {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        align-items: center !important;
        width: 100% !important;
    }
    .cms-single-body .cms-ad-v7 .cms-ad-unit,
    .cms-single-body [class*="cms-ad-zone-"] .cms-ad-unit,
    [class*="cms-ad-zone-single-content-p"] .cms-ad-unit {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    .cms-single-body .cms-ad-v7 .cms-ad-unit a,
    .cms-single-body [class*="cms-ad-zone-"] .cms-ad-unit a,
    [class*="cms-ad-zone-single-content-p"] .cms-ad-unit a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    .cms-single-body .cms-ad-v7 .cms-ad-unit img,
    .cms-single-body [class*="cms-ad-zone-"] .cms-ad-unit img,
    [class*="cms-ad-zone-single-content-p"] .cms-ad-unit img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
}