/* =================================================================== */
/* Variables CSS - Paleta OM3 LastNews (púrpura)                        */
/* Migrado desde om3-site.css para disponibilidad en cualquier página   */
/* =================================================================== */
:root {
    --om3lastnews-bar:        #4B45BF;
    --om3lastnews-title:      #2E2A6F;
    --om3lastnews-chip-hover: #3f3a9a;
    --om3lastnews-badge:      #B5B2F4;
    --om3lastnews-cta:        #615CC7;
    --om3lastnews-cta-hover:  #504ab0;
}

/* =================================================================== */
/* News Templates Styles - Migración Colombia                          */
/* =================================================================== */
/*
 * Estilos personalizados para las plantillas de noticias
 * Utiliza exclusivamente variables CSS definidas en root.css
 * Todas las clases tienen prefijo 'news-' para evitar colisiones
 */

/* =================================================================== */
/* 1. COMPONENTES REUTILIZABLES                                        */
/* =================================================================== */

/* ============================================================ */
/* UTILIDADES REUTILIZABLES BEM - Clases base para componentes  */
/* ============================================================ */

/* --- Overlay Base (posicionamiento absoluto inferior) --- */
/* Escopado a contenedores de noticias para evitar colisiones con otros componentes */
.om3-news-list .overlay,
.om3-capsulas-section .overlay,
.om3-capsulas-list .overlay,
.om3-capsulas-simple-list .overlay,
.om3-informes-section .overlay,
.om3-informes-list .overlay,
.om3-informes-simple-list .overlay,
.relatorias-list .overlay,
.om3-publicaciones-section .overlay,
.om3-publicaciones-list .overlay,
.om3-publicaciones-simple-list .overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

.om3-informes-section .overlay--solid,
.om3-informes-list .overlay--solid,
.om3-informes-simple-list .overlay--solid {
    background-color: #0F0B5F;
}

/* Modificador: overlay con fondo sólido oscuro */
.om3-news-list .overlay--solid,
.om3-capsulas-section .overlay--solid,
.om3-capsulas-list .overlay--solid,
.om3-capsulas-simple-list .overlay--solid,
.om3-informes-section .overlay--solid,
.om3-informes-list .overlay--solid,
.om3-informes-simple-list .overlay--solid,
.relatorias-list .overlay--solid,
.om3-publicaciones-section .overlay--solid,
.om3-publicaciones-list .overlay--solid,
.om3-publicaciones-simple-list .overlay--solid {
    opacity: 90%;
    padding: 1.25rem;
}

/* Modificador: overlay con gradiente hacia arriba */
.om3-news-list .overlay--gradient,
.om3-capsulas-section .overlay--gradient,
.om3-capsulas-list .overlay--gradient,
.om3-capsulas-simple-list .overlay--gradient,
.om3-informes-section .overlay--gradient,
.om3-informes-list .overlay--gradient,
.om3-informes-simple-list .overlay--gradient,
.relatorias-list .overlay--gradient,
.om3-publicaciones-section .overlay--gradient,
.om3-publicaciones-list .overlay--gradient,
.om3-publicaciones-simple-list .overlay--gradient {
    background: linear-gradient(
        to top,
        #1D1B4F 0%,
        rgba(29, 27, 79, 0.9) 40%,
        rgba(29, 27, 79, 0.4) 70%,
        rgba(29, 27, 79, 0) 100%
    );
    padding: 20px 24px;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Modificador: altura parcial para informes */
.om3-news-list .overlay--partial,
.om3-capsulas-section .overlay--partial,
.om3-capsulas-list .overlay--partial,
.om3-capsulas-simple-list .overlay--partial,
.om3-informes-section .overlay--partial,
.om3-informes-list .overlay--partial,
.om3-informes-simple-list .overlay--partial,
.relatorias-list .overlay--partial,
.om3-publicaciones-section .overlay--partial,
.om3-publicaciones-list .overlay--partial,
.om3-publicaciones-simple-list .overlay--partial {
    height: 55%;
}

/* --- Tarjeta Base --- */
/* Tarjetas de tipo portrait (Publicaciones, Informes, Capsulas) */
/* Escopado a contenedores de noticias para evitar colisiones con Bootstrap .card */
/* Proporción 17:22 (portada de libro) - responsive con aspect-ratio */
.om3-news-list .card.publication-card-standard,
.om3-capsulas-section .card.om3-capsulas-card,
.om3-capsulas-list .card.om3-capsulas-card,
.om3-capsulas-simple-list .card.om3-capsulas-card,
.om3-informes-section .card.om3-informes-card,
.om3-informes-list .card.om3-informes-card,
.om3-informes-simple-list .card.om3-informes-card,
.relatorias-list .card.relatorias-card,
.om3-publicaciones-section .card.om3-publicaciones-card,
.om3-publicaciones-list .card.om3-publicaciones-card,
.om3-publicaciones-simple-list .card.om3-publicaciones-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 266px;
    aspect-ratio: 17 / 22; /* Proporción de portada (17×22) */
    margin-inline: auto; /* Centrar tarjeta en su columna */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.om3-news-list .card.publication-card-standard:hover,
.om3-capsulas-section .card.om3-capsulas-card:hover,
.om3-capsulas-list .card.om3-capsulas-card:hover,
.om3-capsulas-simple-list .card.om3-capsulas-card:hover,
.om3-informes-section .card.om3-informes-card:hover,
.om3-informes-list .card.om3-informes-card:hover,
.om3-informes-simple-list .card.om3-informes-card:hover,
.relatorias-list .card.relatorias-card:hover,
.om3-publicaciones-section .card.om3-publicaciones-card:hover,
.om3-publicaciones-list .card.om3-publicaciones-card:hover,
.om3-publicaciones-simple-list .card.om3-publicaciones-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.om3-news-list .card.publication-card-standard:focus-within,
.om3-capsulas-section .card.om3-capsulas-card:focus-within,
.om3-capsulas-list .card.om3-capsulas-card:focus-within,
.om3-capsulas-simple-list .card.om3-capsulas-card:focus-within,
.om3-informes-section .card.om3-informes-card:focus-within,
.om3-informes-list .card.om3-informes-card:focus-within,
.om3-informes-simple-list .card.om3-informes-card:focus-within,
.relatorias-list .card.relatorias-card:focus-within,
.om3-publicaciones-section .card.om3-publicaciones-card:focus-within,
.om3-publicaciones-list .card.om3-publicaciones-card:focus-within,
.om3-publicaciones-simple-list .card.om3-publicaciones-card:focus-within {
    outline: 2px solid var(--Complementario-60);
    outline-offset: 2px;
}

/* Responsive: Tablet y móvil - mantener proporción 17:22 */
@media (max-width: 991.98px) {
    .om3-news-list .card.publication-card-standard,
    .om3-capsulas-section .card.om3-capsulas-card,
    .om3-capsulas-list .card.om3-capsulas-card,
    .om3-capsulas-simple-list .card.om3-capsulas-card,
    .om3-informes-section .card.om3-informes-card,
    .om3-informes-list .card.om3-informes-card,
    .om3-informes-simple-list .card.om3-informes-card,
    .relatorias-list .card.relatorias-card,
    .om3-publicaciones-section .card.om3-publicaciones-card,
    .om3-publicaciones-list .card.om3-publicaciones-card,
    .om3-publicaciones-simple-list .card.om3-publicaciones-card {
        max-width: 100%; /* Llenar columna en tablet */
        aspect-ratio: 17 / 22; /* Mantener proporción en responsive */
    }
}

/* Responsive: Móvil pequeño - limitar ancho máximo */
@media (max-width: 575.98px) {
    .om3-news-list .card.publication-card-standard,
    .om3-capsulas-section .card.om3-capsulas-card,
    .om3-capsulas-list .card.om3-capsulas-card,
    .om3-capsulas-simple-list .card.om3-capsulas-card,
    .om3-informes-section .card.om3-informes-card,
    .om3-informes-list .card.om3-informes-card,
    .om3-informes-simple-list .card.om3-informes-card,
    .relatorias-list .card.relatorias-card,
    .om3-publicaciones-section .card.om3-publicaciones-card,
    .om3-publicaciones-list .card.om3-publicaciones-card,
    .om3-publicaciones-simple-list .card.om3-publicaciones-card {
        max-width: 300px; /* Límite razonable en móvil */
    }
}

/* Elemento: contenedor de imagen absoluta */
.om3-news-list .card__image-wrapper,
.om3-capsulas-section .card__image-wrapper,
.om3-capsulas-list .card__image-wrapper,
.om3-capsulas-simple-list .card__image-wrapper,
.om3-informes-section .card__image-wrapper,
.om3-informes-list .card__image-wrapper,
.om3-informes-simple-list .card__image-wrapper,
.relatorias-list .card__image-wrapper,
.om3-publicaciones-section .card__image-wrapper,
.om3-publicaciones-list .card__image-wrapper,
.om3-publicaciones-simple-list .card__image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* Elemento: imagen con cover */
.om3-news-list .card__image,
.om3-capsulas-section .card__image,
.om3-capsulas-list .card__image,
.om3-capsulas-simple-list .card__image,
.om3-informes-section .card__image,
.om3-informes-list .card__image,
.om3-informes-simple-list .card__image,
.relatorias-list .card__image,
.om3-publicaciones-section .card__image,
.om3-publicaciones-list .card__image,
.om3-publicaciones-simple-list .card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.om3-news-list .card:hover .card__image,
.om3-capsulas-section .card:hover .card__image,
.om3-capsulas-list .card:hover .card__image,
.om3-capsulas-simple-list .card:hover .card__image,
.om3-informes-section .card:hover .card__image,
.om3-informes-list .card:hover .card__image,
.om3-informes-simple-list .card:hover .card__image,
.relatorias-list .card:hover .card__image,
.om3-publicaciones-section .card:hover .card__image,
.om3-publicaciones-list .card:hover .card__image,
.om3-publicaciones-simple-list .card:hover .card__image {
    transform: scale(1.05);
}

/* Modificador: portada de libro/publicación - imagen llena la tarjeta */
.om3-news-list .card__image--book-cover,
.om3-capsulas-section .card__image--book-cover,
.om3-capsulas-list .card__image--book-cover,
.om3-capsulas-simple-list .card__image--book-cover,
.om3-informes-section .card__image--book-cover,
.om3-informes-list .card__image--book-cover,
.om3-informes-simple-list .card__image--book-cover,
.relatorias-list .card__image--book-cover,
.om3-publicaciones-section .card__image--book-cover,
.om3-publicaciones-list .card__image--book-cover,
.om3-publicaciones-simple-list .card__image--book-cover {
    object-fit: cover;
    object-position: center;
}

/* Modificador: miniatura de PDF */
.om3-capsulas-section .card__image--pdf-thumb,
.om3-capsulas-list .card__image--pdf-thumb,
.om3-capsulas-simple-list .card__image--pdf-thumb,
.om3-informes-section .card__image--pdf-thumb,
.om3-informes-list .card__image--pdf-thumb,
.om3-informes-simple-list .card__image--pdf-thumb,
.relatorias-list .card__image--pdf-thumb,
.om3-publicaciones-section .card__image--pdf-thumb,
.om3-publicaciones-list .card__image--pdf-thumb,
.om3-publicaciones-simple-list .card__image--pdf-thumb {
    object-fit: contain;
    object-position: center top;
    background-color: var(--Neutral-90);
}

/* Modificador: miniatura de video (YouTube/Vimeo) */
.om3-capsulas-section .card__image--video-thumb,
.om3-capsulas-list .card__image--video-thumb,
.om3-capsulas-simple-list .card__image--video-thumb {
    object-fit: cover;
    object-position: center;
}

/* Elemento: título de tarjeta (blanco, Nunito 900) */
.om3-news-list .card__title,
.om3-capsulas-section .card__title,
.om3-capsulas-list .card__title,
.om3-capsulas-simple-list .card__title,
.om3-informes-section .card__title,
.om3-informes-list .card__title,
.om3-informes-simple-list .card__title,
.relatorias-list .card__title,
.om3-publicaciones-section .card__title,
.om3-publicaciones-list .card__title,
.om3-publicaciones-simple-list .card__title {
    font-family: var(--nunito-font);
    font-size: 16px;
    font-weight: 900;
    line-height: 18px;
    letter-spacing: 0;
    color: var(--Neutral-100);
    margin: 0;
}

.om3-news-list .card__title a,
.om3-capsulas-section .card__title a,
.om3-capsulas-list .card__title a,
.om3-capsulas-simple-list .card__title a,
.om3-informes-section .card__title a,
.om3-informes-list .card__title a,
.om3-informes-simple-list .card__title a,
.relatorias-list .card__title a,
.om3-publicaciones-section .card__title a,
.om3-publicaciones-list .card__title a,
.om3-publicaciones-simple-list .card__title a {
    font: inherit;
    color: inherit;
    text-decoration: none;
}

.om3-news-list .card__title a:hover,
.om3-capsulas-section .card__title a:hover,
.om3-capsulas-list .card__title a:hover,
.om3-capsulas-simple-list .card__title a:hover,
.om3-informes-section .card__title a:hover,
.om3-informes-list .card__title a:hover,
.om3-informes-simple-list .card__title a:hover,
.relatorias-list .card__title a:hover,
.om3-publicaciones-section .card__title a:hover,
.om3-publicaciones-list .card__title a:hover,
.om3-publicaciones-simple-list .card__title a:hover {
    text-decoration: underline;
}


/* Elemento: fecha de tarjeta */
.om3-news-list .card__date,
.om3-capsulas-section .card__date,
.om3-capsulas-list .card__date,
.om3-capsulas-simple-list .card__date,
.om3-informes-section .card__date,
.om3-informes-list .card__date,
.om3-informes-simple-list .card__date,
.relatorias-list .card__date,
.om3-publicaciones-section .card__date,
.om3-publicaciones-list .card__date,
.om3-publicaciones-simple-list .card__date {
    font-family: var(--paragraph-font-family);
    font-weight: var(--h5-font-weight-bold);
    font-size: var(--paragraph2-font-size-small);
    color: var(--Neutral-100);
    margin: 0;
}

/* --- Formateo de fecha con capitalización del mes --- */
/* Aplica text-transform capitalize para mostrar "23 Ene 2026" en lugar de "23 ene 2026" */
.om3-date-value {
    text-transform: capitalize;
}

/* --- Utilidades de Truncado de Texto --- */
/* Escopado a contenedores de noticias para evitar colisiones */
.om3-capsulas-section .text-clamp--2,
.om3-capsulas-list .text-clamp--2,
.om3-capsulas-simple-list .text-clamp--2,
.om3-informes-section .text-clamp--2,
.om3-informes-list .text-clamp--2,
.om3-informes-simple-list .text-clamp--2,
.relatorias-list .text-clamp--2,
.om3-publicaciones-section .text-clamp--2,
.om3-publicaciones-list .text-clamp--2,
.om3-publicaciones-simple-list .text-clamp--2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.om3-capsulas-section .text-clamp--3,
.om3-capsulas-simple-list .text-clamp--3,
.om3-informes-section .text-clamp--3,
.om3-informes-simple-list .text-clamp--3,
.relatorias-list .text-clamp--3,
.om3-publicaciones-section .text-clamp--3,
.om3-publicaciones-simple-list .text-clamp--3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* --- Estilos para imagen placeholder en tarjetas OM3 --- */
/* Placeholder usa contain para ajustarse al ancho y fondo blanco para espacio vacío */
.om3-capsulas-section .card__image--placeholder,
.om3-capsulas-list .card__image--placeholder,
.om3-capsulas-simple-list .card__image--placeholder,
.om3-informes-section .card__image--placeholder,
.om3-informes-list .card__image--placeholder,
.om3-informes-simple-list .card__image--placeholder,
.relatorias-list .card__image--placeholder,
.om3-publicaciones-section .card__image--placeholder,
.om3-publicaciones-list .card__image--placeholder,
.om3-publicaciones-simple-list .card__image--placeholder {
    object-fit: contain;
    object-position: center;
    background-color: var(--Neutral-100);
    width: 100%;
    height: 100%;
}

/* Fondo blanco en el wrapper cuando hay placeholder */
.om3-capsulas-section .card__image-wrapper:has(.card__image--placeholder),
.om3-capsulas-list .card__image-wrapper:has(.card__image--placeholder),
.om3-capsulas-simple-list .card__image-wrapper:has(.card__image--placeholder),
.om3-informes-section .card__image-wrapper:has(.card__image--placeholder),
.om3-informes-list .card__image-wrapper:has(.card__image--placeholder),
.om3-informes-simple-list .card__image-wrapper:has(.card__image--placeholder),
.relatorias-list .card__image-wrapper:has(.card__image--placeholder),
.om3-publicaciones-section .card__image-wrapper:has(.card__image--placeholder),
.om3-publicaciones-list .card__image-wrapper:has(.card__image--placeholder),
.om3-publicaciones-simple-list .card__image-wrapper:has(.card__image--placeholder) {
    background-color: var(--Neutral-100);
}

/* ============================================================ */

/* Date Tag Component */
.news-date-tag {
    display: inline-block;
    color: var(--Primario-50);
    font-family: var(--paragraph-font-family);
    font-size: var(--caption-featured-font-size);
    font-weight: 400;
    line-height: var(--caption-featured-line-height);
    white-space: nowrap;
}

.news-date-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
}

.white-label{
    color: var(--Primario-90) !important;
}

.news-date-featured {
    background-color: transparent;
    color: var(--Primario-90);
    padding: 0;
    /* Tipografía caption para fechas destacadas */
    font-family: var(--caption-font-family);
    font-weight: var(--caption-font-weight);
    font-style: var(--caption-font-style);
    font-size: var(--caption-featured-font-size);
    line-height: var(--caption-featured-line-height);
    letter-spacing: var(--caption-letter-spacing);
    vertical-align: middle;
    display: block;
    margin-bottom: 12px;
}

/* Category Badges Component */
.news-category-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* Categorías dentro de noticias destacadas */
.news-featured-content .news-category-badges {
    margin-top: 12px;
    margin-bottom: 0;
}

.news-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-family: var(--nunito-font);
    font-weight: 700;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--Neutral-30);
    white-space: nowrap;
}

/* Badge primario (primera categoria) */
.news-badge--primary {
    background-color: var(--Primario-80);
    border: 1px solid var(--Primario-70);
}

/* Badge secundario (categorias siguientes) */
.news-badge--secondary {
    background-color: var(--Neutral-90);
    border: 1px solid var(--Neutral-70);
}

.news-badge-small {
    padding: 2px 8px;
    font-size: 10px;
}

.news-badge-medium {
    padding: 4px 12px;
    font-size: 13px;
}

.news-badge-large {
    padding: 6px 16px;
    font-size: 14px;
}

/* Play Icon Component */
.news-play-icon-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.news-play-icon {
    color: var(--Neutral-100);
    background-color: rgba(var(--Neutral-0-rgb), 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-play-icon-small .news-play-icon {
    font-size: 24px;
    width: 32px;
    height: 32px;
}

.news-play-icon-medium .news-play-icon {
    font-size: 32px;
    width: 48px;
    height: 48px;
}

.news-play-icon-large .news-play-icon {
    font-size: 48px;
    width: 72px;
    height: 72px;
}

/* View More Button Component */
.news-view-more-wrapper {
    margin-top: 32px;
}

.news-button-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: var(--Primario-50);
    color: var(--Neutral-100);
    font-family: var(--nunito-font);
    font-size: var(--button1-font-size);
    font-weight: var(--button1-font-weight);
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-hover);
}

.news-button-primary:hover {
    background-color: var(--Primario-60);
    color: var(--Neutral-100);
    text-decoration: none;
}

.news-button-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.news-button-icon {
    font-size: 18px;
}

/* Generic News Card Component */
.news-card {
    background-color: var(--Neutral-100);
    border: 1px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-hover),
                background-color var(--transition-hover),
                border-color var(--transition-hover);
}

.news-card:hover {
    box-shadow: 0 4px 12px rgba(var(--Neutral-0-rgb), 0.1);
    background-color: var(--Primario-98);
    border-color: var(--Secundario-80);
}

.news-card-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.news-card-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.news-card-placeholder {
    background-color: var(--Neutral-98);
    padding: 40px;
}

.news-card-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-card-title {
    font-family: var(--h6-font-family);
    font-size: var(--h6-font-size-medium);
    font-weight: var(--h6-font-weight);
    line-height: 18px;
    color: var(--Neutral-30);
    margin: 0 0 8px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--line-clamp, 2);
    line-clamp: var(--line-clamp, 2);
}

.news-card-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-hover);
}

.news-card-link:hover {
    color: var(--Primario-50);
    text-decoration: none;
}

.news-card-teaser {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size);
    font-weight: 400;
    line-height: 20px;
    color: var(--Neutral-10);
    margin: 0 0 12px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--line-clamp, 2);
    line-clamp: var(--line-clamp, 2);
}

/* =================================================================== */
/* 2. LAYOUT: ÚLTIMAS NOTICIAS (103)                                   */
/* =================================================================== */

.news-ultimas-noticias {
    padding: 24px 0;
}

/* Noticia Destacada */
.news-featured-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.news-featured-image-wrapper {
    position: relative;
    width: 100%;
    min-height: 290px;
    max-height: 366px;
    overflow: hidden;
}

.news-featured-image {
    width: 100%;
    height: auto;
    min-height: 290px;
    max-height: 366px;
    object-fit: cover;
    display: block;
}

.news-featured-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right,
        rgba(var(--Secundario-20-rgb), 0.85) 0%,
        rgba(var(--Secundario-20-rgb), 0.85) 50%,
        rgba(var(--Secundario-20-rgb), 0) 50%,
        rgba(var(--Secundario-20-rgb), 0) 100%);
    z-index: 1;
    border-radius: inherit;
}

.news-featured-content {
    position: absolute;
    bottom: 32px;
    left: 24px;
    right: calc(50% + 48px); /* 48px desde el borde derecho del overlay (que ocupa 50% del ancho) */
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.news-featured-title {
    font-family: var(--h4-font-family);
    font-size: var(--h4-font-size-large);
    font-weight: var(--h4-font-weight-extrabold);
    color: var(--Neutral-100);
    margin: 0 0 12px 0;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
}

.news-featured-teaser {
    font-family: var(--description-font-family);
    font-size: var(--description-font-size);
    color: var(--Neutral-100);
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Noticias sin imagen (lista) */
.news-no-image-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.news-no-image-item {
    padding: 16px;
    background-color: var(--Neutral-100);
    border: 1px solid var(--Neutral-90);
    border-radius: 8px;
    transition: border-color var(--transition-hover);
}

.news-no-image-item:hover {
    border-color: var(--Primario-50);
}

.news-no-image-title {
    font-family: var(--h5-font-family);
    font-size: var(--h5-font-size-large);
    font-weight: var(--h1-font-weight-semibold);
    color: var(--Neutral-20);
    margin: 0 0 8px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.news-no-image-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-hover);
}

.news-no-image-link:hover {
    color: var(--Primario-50);
    text-decoration: underline;
}

.news-no-image-teaser {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-medium);
    color: var(--Neutral-50);
    margin: 0 0 12px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

/* =================================================================== */
/* 3. LAYOUT: LO MÁS LEÍDO (104)                                       */
/* =================================================================== */

.news-most-read {
    padding: 24px 0;
}

.news-most-read-wrapper {
    position: relative;
    padding-left: 16px;
}

.news-most-read-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--Neutral-80);
}

.news-most-read-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.news-most-read-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.news-most-read-number {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--Primario-40);
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-most-read-number-text {
    font-family: var(--nunito-font);
    font-size: 12px;
    font-weight: var(--h1-font-weight-bold);
    color: var(--Neutral-100);
    line-height: 1;
}

.news-most-read-title {
    font-family: var(--h5-font-family);
    font-size: var(--h5-font-size-large);
    font-weight: var(--h1-font-weight-semibold);
    color: var(--Neutral-20);
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.news-most-read-link {
    color: var(--Neutral-30);
    font-size: var(--h6-font-size-medium);
    font-weight: var(--button2-font-weight-small);
    text-decoration: none;
    transition: color var(--transition-hover);
}

.news-most-read-link:hover {
    color: var(--Primario-50);
    text-decoration: underline;
}

/* =================================================================== */
/* 4. LAYOUT: ESPECIALES AUDIOVISUALES (105)                           */
/* =================================================================== */

.news-audiovisuales {
    padding: 24px 0;
}

/* Tarjeta horizontal de video principal */
/* Escopado a contenedor .news-audiovisuales para evitar colisiones */
.news-audiovisuales .video-card {
    width: 100%;
    padding-bottom: 54%; /* Proporción 326:176 aprox (54%) */
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    transition: transform var(--transition-hover);
}

.news-audiovisuales .video-card:hover {
    transform: scale(1.01);
}

/* Overlay oscuro semitransparente */
.news-audiovisuales .video-overlay {
    background: rgba(var(--Secundario-30-rgb), 0.6);
    z-index: 1;
}

/* Botón de reproducción circular */
.news-audiovisuales .video-play-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--Primario-70);
    z-index: 3;
    cursor: pointer;
    transition: all var(--transition-hover);
}

.news-audiovisuales .video-play-btn:hover {
    background-color: var(--Primario-60);
    transform: translateY(-50%) scale(1.1);
}

.news-audiovisuales .video-play-btn .material-symbols-outlined {
    font-size: 32px;
    color: var(--Neutral-100);
}

/* Contenido textual (fecha, título, tags) */
.news-audiovisuales .video-content {
    left: 80px; /* Espacio para el botón play + margen */
    right: 24px;
    z-index: 2;
    max-width: calc(100% - 104px); /* Asegurar que no se superponga al botón */
}

/* Fecha del video */
.news-audiovisuales .video-date {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-small);
    color: var(--Neutral-100);
    margin-bottom: 0.25rem;
}

/* Título del video */
.news-audiovisuales .video-title {
    color: var(--Neutral-100);
    margin-bottom: 0.5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Etiquetas del video */
.news-audiovisuales .video-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: rgba(var(--Neutral-100-rgb), 0.2);
    color: var(--Neutral-100);
    font-family: var(--nunito-font);
    font-size: var(--caption-font-size);
    font-weight: var(--h1-font-weight-semibold);
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.5;
}

/* Legacy styles - mantener para compatibilidad con videos secundarios */
.news-audio-visual-featured {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.news-audio-visual-featured-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 300px;
}

.news-audio-visual-featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-audio-visual-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--Secundario-30-rgb), 0.6);
    z-index: 1;
    border-radius: inherit;
}

.news-audio-visual-featured-content {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    z-index: 2;
}

.news-audio-visual-featured-title {
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size-large);
    font-weight: var(--h1-font-weight-semibold);
    color: var(--Neutral-100);
    margin: 16px 0 12px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Videos secundarios */
.news-audio-visual-secondary-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.news-audio-visual-secondary {
    display: flex;
    gap: 12px;
    padding: 0;
    background-color: transparent;
    border: none;
}

.news-audio-visual-thumbnail {
    position: relative;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: 6px;
    overflow: hidden;
}

.news-audio-visual-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-audio-visual-content {
    flex: 1;
    min-width: 0;
}

.news-audio-visual-title {
    font-family: var(--h6-font-family);
    font-size: var(--h6-font-size-large);
    font-weight: var(--h1-font-weight-semibold);
    color: var(--Neutral-20);
    margin: 0 0 8px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.news-audio-visual-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-hover);
}

.news-audio-visual-link:hover {
    color: var(--Primario-50);
}

.news-audio-visual-teaser {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-small);
    color: var(--Neutral-50);
    margin: 0 0 8px 0;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.news-audio-visual-separator {
    height: 1px;
    background-color: var(--Neutral-90);
    border: none;
    margin: 16px 0;
}

/* Elemento de texto sin miniatura (último item) */
.news-audio-visual-text-only {
    padding: 0;
    background-color: transparent;
    border: none;
}

/* Elemento de texto (legacy - no usado en Audiovisuales) */
.news-audio-visual-text {
    padding: 16px;
    background-color: var(--Neutral-100);
    border: 1px solid var(--Neutral-90);
    border-radius: 8px;
    height: 100%;
}

.news-audio-visual-text-title {
    font-family: var(--h4-font-family);
    font-size: var(--h4-font-size-large);
    font-weight: var(--h1-font-weight-semibold);
    color: var(--Neutral-20);
    margin: 0 0 12px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.news-audio-visual-text-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-hover);
}

.news-audio-visual-text-link:hover {
    color: var(--Primario-50);
}

.news-audio-visual-text-teaser {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-medium);
    color: var(--Neutral-50);
    margin: 0 0 12px 0;
    line-height: var(--paragraph-line-height);
}

/* =================================================================== */
/* 5. LAYOUT: NOTAS DE PRENSA (106)                                    */
/* =================================================================== */

.news-notas-prensa {
    padding: 24px 0;
}

.news-notas-prensa-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.news-nota-prensa-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background-color: var(--Neutral-98);
    border: 1px solid var(--Neutral-90);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(var(--Neutral-0-rgb), 0.05);
    transition: box-shadow var(--transition-hover);
}

.news-nota-prensa-card:hover {
    box-shadow: 0 4px 12px rgba(var(--Neutral-0-rgb), 0.1);
}

.news-nota-prensa-content {
    flex: 1;
    min-width: 0;
}

.news-nota-prensa-title {
    font-family: var(--h5-font-family);
    font-size: var(--h5-font-size-large);
    font-weight: var(--h1-font-weight-semibold);
    color: var(--Neutral-20);
    margin: 0 0 8px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.news-nota-prensa-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-hover);
}

.news-nota-prensa-link:hover {
    color: var(--Primario-50);
}

.news-nota-prensa-teaser {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-medium);
    color: var(--Neutral-50);
    margin: 0 0 12px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: var(--paragraph-line-height);
}

.news-nota-prensa-thumbnail {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
}

.news-nota-prensa-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =================================================================== */
/* 6. LAYOUT: COMUNICADOS (107)                                        */
/* =================================================================== */

/* Contenedor principal de comunicados */
.news-comunicados {
    padding: 24px 0;
}

/* Teaser en vista de detalle de comunicados */
.news-comunicado-teaser {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-medium);
    color: var(--Neutral-50);
    margin: 0 0 12px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: var(--paragraph-line-height);
}

/* Grid de comunicados sin imagen */
.news-comunicados-grid {
    margin-bottom: 24px;
}

/* Ítems ocultos hasta que se activa "cargar más" */
.news-comunicados-grid-item[aria-hidden="true"] {
    display: none;
}

/* Animación de aparición al revelar ítems */
.news-comunicados-grid-item.news-item-revealing {
    animation: newsItemFadeIn 0.3s ease forwards;
}

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

/* Contenedor del botón "Cargar más comunicados" */
.news-comunicados-load-more-wrapper {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

/* Ocultar contenedor del botón cuando no hay más ítems */
.news-comunicados-load-more-wrapper[aria-hidden="true"] {
    display: none;
}

/* =================================================================== */
/* 7. LAYOUT: LISTADO PAGINADO (108)                                   */
/* =================================================================== */

.news-paginado {
    padding: 24px 0;
}

.news-paginado-card {
    background-color: var(--Neutral-100);
    border: 1px solid var(--Neutral-90);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    transition: box-shadow var(--transition-hover);
}

.news-paginado-card:hover {
    box-shadow: 0 4px 12px rgba(var(--Neutral-0-rgb), 0.1);
}

.news-paginado-image-wrapper {
    width: 100%;
    overflow: hidden;
}

.news-paginado-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.news-paginado-content {
    padding: 16px;
    flex: 1;
}

.news-paginado-title {
    font-family: var(--h6-font-family);
    font-size: var(--h6-font-size-large);
    font-weight: var(--h1-font-weight-semibold);
    color: var(--Neutral-20);
    margin: 0 0 8px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.news-paginado-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-hover);
}

.news-paginado-link:hover {
    color: var(--Primario-50);
}

.news-paginado-teaser {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-small);
    color: var(--Neutral-50);
    margin: 0 0 12px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: var(--paragraph-line-height);
}

/* =================================================================== */
/* 8. PAGINACIÓN                                                       */
/* =================================================================== */

.news-pagination {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.news-pagination-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.news-pagination-item {
    margin: 0;
}

.news-pagination-link {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    background-color: var(--Neutral-100);
    border: 1px solid var(--Neutral-90);
    border-radius: 6px;
    font-family: var(--nunito-font);
    font-size: var(--paragraph-font-size-medium);
    font-weight: var(--h1-font-weight-semibold);
    color: var(--Primario-40);
    text-decoration: none;
    justify-content: center;
    transition: all var(--transition-hover);
    cursor: pointer;
}

.news-pagination-link:hover:not(.disabled):not(.active) {
    background-color: var(--Primario-98);
    border-color: var(--Primario-50);
    color: var(--Primario-50);
    text-decoration: none;
}

.news-pagination-link.active {
    background-color: var(--Primario-50);
    border-color: var(--Primario-50);
    color: var(--Neutral-100);
    cursor: default;
}

.news-pagination-link.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.news-pagination-text {
    font-size: var(--paragraph-font-size-small);
}

/* =================================================================== */
/* 8.1 OM3 PAGINATION COMPONENT                                        */
/* =================================================================== */
/*
 * Componente de paginación reutilizable para listas OM3
 * Soporta colores personalizados vía CSS custom properties
 * Diseño: Smart Ellipsis con Primera/Última, flechas y números
 * Usado por: Om3Publicaciones, Om3KnowledgeCapsule, Om3Informes
 */

/* Utilidad para ocultar mensaje de sin resultados (usado por Om3NoResults) */
.om3-no-results--hidden {
    display: none;
}

.om3-pagination {
    /* Variables de color - pueden ser sobrescritas via style attribute */
    --om3-pag-color: var(--Primario-50);
    --om3-pag-text-active: var(--Neutral-100);
    --om3-pag-disabled: var(--Neutral-60);

    display: none; /* Oculto por defecto, JS lo muestra si hay páginas */
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.om3-pagination.is-visible {
    display: block;
}

.om3-pagination__wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* Botones de texto (Primera/Última) */
.om3-pagination__label {
    font-family: var(--nunito-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--om3-pag-color);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    transition: opacity 0.2s ease;
}

.om3-pagination__label:hover:not(:disabled) {
    opacity: 0.8;
}

.om3-pagination__label:disabled {
    color: var(--om3-pag-disabled);
    cursor: not-allowed;
}

/* Botones de flecha (anterior/siguiente) */
.om3-pagination__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: none;
    background-color: var(--om3-pag-color);
    color: var(--om3-pag-text-active);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.om3-pagination__arrow:hover:not(:disabled) {
    opacity: 0.85;
}


.om3-pagination__arrow:disabled {
    background-color: var(--om3-pag-disabled);
    cursor: not-allowed;
}

.om3-pagination__arrow .material-symbols-outlined {
    font-size: 20px;
}

/* Números de página */
.om3-pagination__numbers {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.om3-pagination__number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--om3-pag-color);
    font-family: var(--nunito-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.om3-pagination__number:hover:not(.is-active):not(.is-ellipsis) {
    background-color: rgba(0, 0, 0, 0.05);
}


.om3-pagination__number.is-active {
    background-color: var(--om3-pag-color);
    color: var(--om3-pag-text-active);
    cursor: default;
}

.om3-pagination__number.is-ellipsis {
    cursor: default;
    pointer-events: none;
    min-width: auto;
    padding: 0 0.25rem;
}

/* Responsive - OM3 Pagination */
@media (max-width: 576px) {
    .om3-pagination__label {
        display: none;
    }

    .om3-pagination__wrapper {
        gap: 0.25rem;
    }

    .om3-pagination__arrow,
    .om3-pagination__number {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .om3-pagination__arrow .material-symbols-outlined {
        font-size: 18px;
    }

    .om3-pagination__number {
        font-size: 13px;
    }
}

/* Accesibilidad - OM3 Pagination */
.om3-pagination__wrapper [aria-current="page"] {
    font-weight: 700;
}

/* Reducir movimiento para usuarios con preferencia */
@media (prefers-reduced-motion: reduce) {
    .om3-pagination__label,
    .om3-pagination__arrow,
    .om3-pagination__number {
        transition: none;
    }
}

/* =================================================================== */
/* 8.2 OM3 CHIPS FILTER - Badges de categorías                         */
/* =================================================================== */
/*
 * Componente de chips/badges de filtro para listas OM3
 * Soporta colores personalizados vía CSS custom properties
 * Usado por: Om3Publicaciones, Om3KnowledgeCapsule, Om3Informes,
 *            Om3Microdatos, Om3Tableros
 */

/* Contenedor de chips (fieldset) - Reset de estilos por defecto */
[class*="-chips"] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    /* Reset fieldset defaults */
    border: none;
    padding: 0;
    margin-inline: 0;
    min-inline-size: auto;
}

/* Legend oculto visualmente pero accesible para lectores de pantalla */
[class*="-chips"] > .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Estilo base de chips - Estado no seleccionado */
[class$="-chip"],
[class*="-chip "] {
    /* Layout */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;

    /* Tipografía - Estado no seleccionado */
    font-family: var(--nunito-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 100%;
    color: var(--Neutral-20);

    /* Color - usa CSS custom property del inline style */
    background-color: var(--om3-chip-unselected-bg, var(--Primario-70));
}

/* Estado seleccionado/activo */
[class*="-chip--active"] {
    /* Tipografía - Estado seleccionado */
    font-weight: 700;
    line-height: 14px;
    color: var(--Neutral-30);

    /* Color */
    background-color: var(--Primario-50);
}

/* Hover en chips no activos */
[class$="-chip"]:hover:not([class*="--active"]),
[class*="-chip "]:hover:not([class*="--active"]) {
    opacity: 0.85;
}

/* Focus visible - hereda de regla global en theme.css */

/* Icono de cerrar en chip activo */
[class*="-chip__close"] {
    display: flex;
    font-size: 1rem;
}

/* Responsive - Chips */
@media (max-width: 576px) {
    [class*="-chips"] {
        gap: 0.375rem;
    }

    [class$="-chip"],
    [class*="-chip "] {
        padding: 0.375rem 0.75rem;
        font-size: 12px;
    }
}

/* Reducir movimiento para usuarios con preferencia */
@media (prefers-reduced-motion: reduce) {
    [class$="-chip"],
    [class*="-chip "] {
        transition: none;
    }
}

/* =================================================================== */
/* 9. NEW LAYOUT: Notas de Prensa & Comunicados (Feature.md)          */
/* =================================================================== */

/* Sección general de listado */
.news-list-section {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Item individual de noticia */
.news-item {
    position: relative;
}

/* Título de la noticia */
.news-title {
    font-family: var(--h3-font-family);
    font-size: var(--h3-font-size-large);
    font-weight: var(--h3-font-weight-bold);
    color: var(--Neutral-30);
    margin-bottom: 0.5rem;
    line-height: var(--h3-line-height);
}

.news-title a {
    font: inherit; /* Hereda del título padre */
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-hover);
}

.news-title a:hover {
    color: var(--Primario-50);
}

/* Fecha de publicación */
.news-date {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-medium);
    color: var(--Primario-50) !important;
    margin-bottom: 0.5rem;
}

/* Extracto de la noticia con truncamiento a 2 líneas */
.news-excerpt {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-medium);
    color: var(--Neutral-30);
    margin-bottom: 1rem;
    line-height: var(--paragraph-line-height);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Etiquetas/Tags */
.news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Badge primario (primera etiqueta - Nota de prensa) */
.badge-press {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--Primario-90);
    color: var(--Primario-40);
    font-family: var(--nunito-font);
    font-size: var(--caption-font-size);
    font-weight: var(--h1-font-weight-semibold);
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.5;
}

/* Badge secundario (etiquetas adicionales) */
.badge-secondary {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--Neutral-90);
    color: var(--Neutral-40);
    font-family: var(--nunito-font);
    font-size: var(--caption-font-size);
    font-weight: var(--h1-font-weight-semibold);
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.5;
}

/* Imagen de la noticia */
.news-image-link {
    display: block;
    text-decoration: none;
}

.news-image-link img {
    transition: opacity var(--transition-hover);
}

.news-image-link:hover img {
    opacity: 0.9;
}

/* Asegurar que object-fit-cover funcione correctamente */
.object-fit-cover {
    object-fit: cover;
}

/* Separador entre noticias */
.news-separator {
    border: none;
    border-top: 1px solid var(--Neutral-90);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}


/* Botón Ver todo con estilo outline-primary */
.btn-outline-primary-transparent {
    border: 1px solid var(--Primario-40) !important;
    color: var(--Primario-40);
    background-color: var(--Neutral-100);
    border-radius: 0.375rem;
    transition: all var(--transition-hover);
}

.btn-outline-primary-transparent:hover {
    background-color: var(--Primario-50);
    color: var(--Neutral-100);
    border-color: var(--Primario-50);
}

/* Ajustes para el icono de Material Symbols */
.material-symbols-outlined {
    font-family: 'Material Symbols Local';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    vertical-align: middle;
}

/* =================================================================== */
/* 9. LAYOUT: AGENDA (109)                                             */
/* =================================================================== */

/* Agenda List Container */
.news-agenda-list {
    display: flex;
    flex-direction: column;
}

/* Agenda Item */
.agenda-item {
    display: flex;
    align-items: flex-start;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Fecha destacada del evento */
.agenda-date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--Complementario-60);
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    min-width: 70px;
}

.agenda-day {
    font-family: var(--nunito-font);
    font-size: 1.5rem;
    font-weight: var(--h1-font-weight-bold);
    color: var(--Neutral-100);
    line-height: 1.2;
    display: block;
}

.agenda-month {
    font-family: var(--nunito-font);
    font-size: 0.75rem;
    color: var(--Neutral-50);
    text-transform: uppercase;
    display: block;
}

/* Detalles del evento */
.agenda-title {
    font-family: var(--h5-font-family);
    font-size: var(--h5-font-size-large);
    font-weight: var(--h5-font-weight-bold);
    color: var(--Neutral-30);
    margin-bottom: 0.25rem;
    line-height: var(--h5-line-height);
}

.agenda-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-hover);
}

.agenda-title a:hover {
    color: var(--Primario-50);
}

.agenda-description {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-medium);
    color: var(--Neutral-40);
    margin-bottom: 0.5rem;
    line-height: var(--paragraph-line-height);
}

.agenda-time {
    font-family: var(--nunito-font);
    font-size: var(--paragraph-font-size-medium);
    font-weight: var(--h1-font-weight-semibold);
    color: var(--Complementario-60);
    margin: 0;
}

/* Separador entre eventos de agenda */
.agenda-separator {
    border: none;
    border-top: 1px solid var(--Neutral-70);
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Agenda Detail Header */
.news-agenda-detail-header {
    background-color: var(--Neutral-90);
    padding: 1.5rem;
}

.news-agenda-detail-date-badge {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 0.75rem;
    text-align: center;
    min-width: 100px;
}

.news-agenda-detail-day {
    font-family: var(--nunito-font);
    font-size: 2.5rem;
    font-weight: var(--h1-font-weight-bold);
    color: var(--Neutral-100);
    line-height: 1;
    display: block;
}

.news-agenda-detail-month {
    font-family: var(--nunito-font);
    font-size: 0.875rem;
    font-weight: var(--h1-font-weight-semibold);
    color: var(--Neutral-50);
    text-transform: uppercase;
    margin-top: 0.5rem;
    display: block;
}

.news-agenda-detail-year {
    font-family: var(--nunito-font);
    font-size: var(--paragraph-font-size-small);
    color: var(--Neutral-50);
    margin-top: 0.25rem;
    display: block;
}

.news-agenda-detail-date-text {
    font-family: var(--h5-font-family);
    font-size: var(--h5-font-size-large);
    color: var(--Neutral-30);
    margin-bottom: 0.5rem;
}

.news-agenda-detail-time {
    font-family: var(--h4-font-family);
    font-size: var(--h4-font-size-large);
    font-weight: var(--h4-font-weight-bold);
    color: var(--Complementario-60);
    margin: 0;
}

/* Imagen de detalle de agenda */
.news-agenda-detail-media {
    text-align: center;
}

.news-agenda-detail-figure {
    display: inline-block;
    margin: 0 0 1rem;
}

.news-agenda-detail-img {
    max-width: 600px;
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: opacity var(--transition-hover);
}

.news-agenda-detail-img:hover {
    opacity: 0.9;
}

.news-agenda-detail-caption {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-small);
    color: var(--Neutral-40);
    margin-top: 0.5rem;
    text-align: center;
}

/* =================================================================== */
/* 10. LAYOUT: PUBLICACIONES (109)                                     */
/* =================================================================== */

/* Contenedor principal de publicaciones */
.om3-news-list {
    padding: 24px 0;
}

/* Contenedor sin padding para tarjeta compacta destacada */
.om3-news-list.om3-news-list--compact-featured {
    padding: 0;
}

/* ------------------------------------------------------------ */
/* TÍTULO DE SECCIÓN PUBLICACIONES                               */
/* ------------------------------------------------------------ */

.publications-section-header {
    margin-bottom: 2rem;
}

.publications-section-title {
    font-family: var(--nunito-font);
    font-weight: 400;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0;
    color: var(--Neutral-30);
    margin: 0;
}

/* Última palabra resaltada en color var(--om3-purple) */
.publications-title-highlight {
    color: var(--om3-purple);
    font-weight: 800;
}

/* ------------------------------------------------------------ */
/* TARJETA DESTACADA (Primer elemento) - Overlay con degradado  */
/* ------------------------------------------------------------ */

.publication-card-featured {
    position: relative;
    /* Ancho flexible para usar Bootstrap grid */
    width: 100%;
    height: 480px;
    border-radius: 12px;
    overflow: hidden;
}

.publication-featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Overlay solo en sección de texto - #0F0B5F al 95% */
.publication-featured-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Solo sección de texto, no toda la tarjeta */
    background-color: rgba(15, 11, 95, 0.95); /* #0F0B5F al 95% */
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

/* Badge "ÚLTIMA PUBLICACIÓN" - posición flush top-right sin margen */
.om3-news-list .badge-publication {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    font-family: var(--nunito-font);
    font-size: 13px;
    font-weight: 900;
    background-color: var(--Neutral-100);
    color: #514CA9;
    padding: 0.5rem 1rem;
    /* Esquina superior derecha alineada con la tarjeta */
    border-radius: 0 12px 0 0.5rem;
    text-transform: uppercase;
}

/* Título destacado - Nunito Sans, 900 weight, 16px, 18px line-height, blanco */
.publication-featured-title {
    font-family: var(--nunito-font);
    font-size: 16px;
    font-weight: 900;
    line-height: 18px;
    letter-spacing: 0;
    color: var(--Neutral-100); /* #FFFFFF */
    margin-bottom: 0.75rem;
}

.publication-featured-title a {
    color: inherit;
    text-decoration: none;
}

.publication-featured-title a:hover {
    text-decoration: underline;
}


/* Teaser destacado */
.publication-featured-teaser {
    font-family: var(--paragraph-font-family);
    font-size: 14px;
    font-weight: 400;
    color: var(--Neutral-100);
    margin-bottom: 1.25rem;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Botón outline blanco (primer elemento) */
.btn-publication-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--Neutral-100);
    border: 1px solid var(--Neutral-100);
    padding: 0.625rem 1.25rem;
    border-radius: 0.375rem;
    font-family: var(--nunito-font);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-hover);
}

.btn-publication-outline:hover {
    background: var(--Neutral-100);
    color: var(--Secundario-10);
}


/* ------------------------------------------------------------ */
/* TARJETA ESTÁNDAR (Elementos secundarios) - Diseño dividido   */
/* Extiende .card de utilidades BEM                             */
/* ------------------------------------------------------------ */

/* Proporción específica para publicaciones estándar */
.publication-card-standard {
    aspect-ratio: 17 / 22;
}

/* Nota: Usa .card__image-wrapper, .card__image de utilidades BEM */
/* Nota: Usa .overlay--solid para overlay inferior */
/* Nota: Usa .card__title para títulos */

/* Escopado a contenedor .om3-news-list para evitar colisiones */
.om3-news-list .title-highlight-link {
    text-decoration: none;
    color: inherit;
}

.om3-news-list .title-highlight-link:hover {
    text-decoration: underline;
}


/* Título h6 - Nunito Sans, 900 weight, 16px, 18px line-height */
.om3-news-list .title-highlight {
    font-family: var(--nunito-font);
    font-weight: 900;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 0;
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* Nota: Fecha usa .card__date de utilidades BEM */

/* Botón sólido (elementos secundarios) */
.btn-publication-solid {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--om3-purple);
    color: var(--Neutral-100);
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 0.375rem;
    font-family: var(--nunito-font);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
    transition: all var(--transition-hover);
}

.btn-publication-solid:hover {
    background-color: var(--om3-purple-dark);
    color: var(--Neutral-100);
}


/* ------------------------------------------------------------ */
/* TARJETA COMPACTA DESTACADA - Publicación única centrada      */
/* Dimensiones Tarjeta OM3: 340px × 440px (proporción 17:22)    */
/* Contenedor coincide exactamente con salida del crop variant  */
/* ------------------------------------------------------------ */

.publication-card-compact-featured {
    position: relative;
    width: 340px;
    max-width: 100%;
    min-height: 440px;
    aspect-ratio: 17 / 22;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--Secundario-10);
}

.publication-compact-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.publication-compact-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(15, 11, 95, 0.95) 60%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    gap: 10px;
}

.publication-compact-title {
    font-family: var(--nunito-font);
    font-size: 14px;
    font-weight: 900;
    line-height: 16px;
    letter-spacing: 0;
    color: var(--Neutral-100);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.publication-compact-title-link {
    color: inherit;
    text-decoration: none;
}

.publication-compact-title-link:hover {
    text-decoration: underline;
}


.btn-publication-compact {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    color: var(--Neutral-100);
    border: 1px solid var(--Neutral-100);
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    font-family: var(--nunito-font);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
    transition: all var(--transition-hover);
}

.btn-publication-compact:hover {
    background: var(--Neutral-100);
    color: var(--Secundario-10);
}


.btn-publication-compact .material-symbols-outlined {
    font-size: 16px;
}

/* Badge reutiliza .badge-publication existente de .om3-news-list */

/* ------------------------------------------------------------ */
/* FOOTER DE PUBLICACIONES                                      */
/* ------------------------------------------------------------ */

.om3-news-list .publications-footer {
    /* Ancho completo de la columna padre */
    width: 100%;
    margin-top: 1.5rem;
    padding: 1.5rem 0;
    background-color: transparent;
}

.om3-news-list .publications-footer-text {
    font-family: var(--nunito-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--Neutral-20);
}

.om3-news-list .publications-footer-desc {
    font-family: var(--paragraph-font-family);
    font-size: 14px;
    color: var(--Neutral-50);
    line-height: 1.5;
}

/* Botón CTA del footer con dropdown */
.btn-publication-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--om3-purple);
    color: var(--Neutral-100);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-family: var(--nunito-font);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-hover);
}

.btn-publication-cta:hover {
    background-color: var(--om3-purple);
    color: var(--Neutral-100);
}


/* Publicaciones - Vista de detalle */
.om3-news-detail {
    padding: 32px 0;
}

.om3-news-detail h1 {
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size-large);
    line-height: var(--h2-line-height);
    color: var(--Neutral-10);
    font-weight: var(--h2-font-weight-bold);
    margin-bottom: 1rem;
}

/* Barra lateral púrpura característica de publicaciones */
.om3-news-detail .border-bar {
    border-left: 12px solid var(--om3-style-purple);
    padding-left: 2rem;
}

.om3-news-detail .pdf-info {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--Neutral-50);
    font-size: var(--paragraph-font-size-small);
}

.om3-news-detail .pdf-info .material-symbols-outlined {
    font-size: 18px;
    color: var(--Neutral-50);
}

/* Fecha de publicación con valor en púrpura */
.om3-news-detail .publication-date-value {
    color: var(--om3-style-purple);
    font-weight: 600;
}

.om3-news-detail .news-bodytext p {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-large);
    line-height: var(--paragraph-line-height);
    color: var(--Neutral-30);
    margin-bottom: 1rem;
}

/* Botón de descarga púrpura para publicaciones */
.om3-news-detail .btn-publication-download {
    background-color: var(--om3-style-purple);
    border: 2px solid var(--om3-style-purple);
    color: var(--Neutral-100);
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    transition: all var(--transition-hover);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    font-family: var(--button1-font-family);
    font-size: var(--button1-font-size);
}

.om3-news-detail .btn-publication-download:hover {
    background-color: #3f3a9a;
    border-color: #3f3a9a;
    color: var(--Neutral-100);
}


.om3-news-detail .cover-shadow {
    box-shadow: 0 0.5rem 1rem rgba(var(--Neutral-0-rgb), 0.15);
    border-radius: 8px;
}

/* =================================================================== */
/* 11. LAYOUT: CAROUSEL OVERLAY (110)                                  */
/* =================================================================== */

/* Contenedor del carousel */
.news-carousel-overlay {
    position: relative;
    width: 100%;
    /* Bordes redondeados solo en la parte inferior */
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

/* Bordes redondeados solo en la parte inferior del carousel-inner */
.news-carousel-overlay .carousel-inner {
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.news-carousel-overlay .carousel-item {
    min-height: 500px;
    position: relative;
}

.news-carousel-overlay .carousel-item img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 0;
}

/* Tarjeta anclada - posicionada flush en bottom-left */
.news-card-floating {
    background: var(--Neutral-100);
    /* Esquina inferior izquierda sin radio (anclada), superior derecha con radio */
    border-radius: 0 12px 0 0;
    padding: 1.5rem 2rem 1.5rem 1.5rem;
    /* Sombra sutil solo hacia arriba */
    box-shadow: 0 -4px 20px rgba(var(--Neutral-0-rgb), 0.1);
    /* Figma spec: ancho fijo 339px, altura auto (hug content) */
    width: 339px;
    /* Borde solo en la parte inferior con color primario */
    border: none;
    border-bottom: 4px solid var(--Primario-50);
    /* Z-index para estar encima de imagen pero debajo de controles */
    z-index: 5;
}

/* Título - h5, #222222, Nunito, weight 900, 18px */
.news-card-floating h5 {
    font-family: var(--nunito-font);
    font-size: 18px;
    font-weight: 900;
    color: var(--Neutral-20);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.news-card-floating h5 a {
    color: inherit;
    text-decoration: none;
}

.news-card-floating h5 a:hover {
    color: var(--Primario-50);
}

.news-card-floating p {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-medium);
    color: var(--Neutral-30);
    margin-bottom: 1rem;
    line-height: var(--paragraph-line-height);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.news-card-floating .read-more {
    color: var(--Primario-50);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--transition-hover);
}

.news-card-floating .read-more:hover {
    color: var(--Primario-40);
    text-decoration: underline;
}

/* Atribución de imagen (Imagen / Fuente) */
.news-card-floating .image-attribution {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--Neutral-80);
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-small);
    color: var(--Neutral-50);
    line-height: 1.5;
}

.news-card-floating .image-attribution strong {
    color: var(--Primario-50);
    font-weight: 600;
}

.news-card-floating .image-attribution span {
    display: block;
    margin-bottom: 0.25rem;
}

.news-card-floating .image-attribution span:last-child {
    margin-bottom: 0;
}

/* Caption anclado en bottom-left, sin margen (flush con bordes) */
.news-carousel-overlay .carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: auto;
    top: auto;
    text-align: left;
    padding: 0;
}

/* Eliminar padding del contenedor interno para anclaje flush */
.news-carousel-overlay .carousel-caption .container {
    padding-left: 0;
    margin-left: 0;
}

.news-carousel-overlay .carousel-caption .row {
    margin-left: 0;
}

.news-carousel-overlay .carousel-caption .col-lg-5,
.news-carousel-overlay .carousel-caption .col-md-8 {
    padding-left: 0;
}

/* Cápsula de controles del carousel */
.carousel-controls-capsule {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--Neutral-100);
    border-radius: 50px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(var(--Neutral-0-rgb), 0.15);
    z-index: 10;
}

.carousel-controls-capsule button {
    background: transparent;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Neutral-40);
    transition: color var(--transition-hover);
}

.carousel-controls-capsule button:hover {
    color: var(--Primario-50);
}

.carousel-controls-capsule .separator {
    width: 1px;
    height: 24px;
    background-color: var(--Neutral-80);
    margin: 0 0.25rem;
}

.carousel-controls-capsule .carousel-indicators-inline {
    display: flex;
    gap: 6px;
    margin: 0 0.5rem;
}

.carousel-controls-capsule .carousel-indicators-inline button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--Neutral-80);
    padding: 0;
    transition: background-color var(--transition-hover);
}

.carousel-controls-capsule .carousel-indicators-inline button.active {
    background-color: var(--Primario-50);
}

/* Ocultar controles default de Bootstrap */
.news-carousel-overlay .carousel-control-prev,
.news-carousel-overlay .carousel-control-next,
.news-carousel-overlay > .carousel-indicators {
    display: none;
}

/* =================================================================== */
/* 12. LAYOUT: OM3 ÚLTIMAS NOTICIAS (111)                              */
/* =================================================================== */

/* Contenedor principal */
.om3-last-news {
    padding: 32px 0;
}

/* Encabezado de sección - título y botón en la misma línea */
.om3-last-news .section-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.om3-last-news .section-title {
    margin: 0;
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size-large);
    line-height: 1.2;
}

.om3-last-news .title-dark {
    color: var(--Neutral-30);
    font-weight: 400;
}

.om3-last-news .title-primary {
    color: var(--Primario-60);
    font-weight: 700;
}

/* Botón "Ver todas las noticias" - fondo blanco, color Primario-50 */
.om3-last-news .btn-view-all {
    background-color: var(--Neutral-100);
    color: var(--Primario-50);
    border: 1px solid var(--Primario-50);
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.625rem 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    transition: all var(--transition-hover);
}

.om3-last-news .btn-view-all:hover {
    background-color: var(--Primario-50);
    color: var(--Neutral-100);
}

.om3-last-news .btn-outline-primary {
    border-color: var(--Primario-60);
    color: var(--Primario-60);
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.625rem 1.25rem;
    transition: all var(--transition-hover);
}

.om3-last-news .btn-outline-primary:hover {
    background-color: var(--Primario-60);
    color: var(--Neutral-100);
}

/* Tarjetas de noticias */
.om3-last-news .card {
    border: none;
    background: transparent;
}

/* Imagen responsiva con proporción 269:200 según Figma */
.om3-last-news .card-image {
    width: 100%;                    /* Llena el ancho de la columna */
    aspect-ratio: 269 / 200;        /* Mantiene proporción del diseño */
    object-fit: cover;              /* Recorta sin distorsión */
    border-radius: 8px 8px 0 0;     /* Solo esquinas superiores */
}

.om3-last-news .text-primary-60 {
    color: var(--Primario-60);
    font-weight: 600;
    font-size: var(--paragraph-font-size-small);
}

.om3-last-news .card-title {
    font-family: var(--h4-font-family);
    font-size: var(--h4-font-size-large);
    font-weight: var(--h4-font-weight-bold);
    color: var(--Neutral-30);
    margin-bottom: 0.5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Teaser con color #141414 */
.om3-last-news .card-text {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-medium);
    color: var(--Neutral-10);
    margin-bottom: 1rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: var(--paragraph-line-height);
}

.om3-last-news .badge-pill {
    background-color: var(--Neutral-90);
    color: var(--Neutral-30);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.om3-last-news .card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: opacity var(--transition-hover);
}

.om3-last-news .card-link:hover {
    opacity: 0.9;
}

.om3-last-news .card-link:hover .card-title {
    color: var(--Primario-60);
}

/* =================================================================== */
/* 13. RESPONSIVE DESIGN                                               */
/* =================================================================== */

@media (max-width: 768px) {
    .news-featured-image,
    .news-featured-image-wrapper {
        min-height: 290px;
        max-height: 366px;
        height: auto;
    }

    .news-audio-visual-featured-image,
    .news-audio-visual-featured-wrapper {
        min-height: 300px;
        height: 300px;
    }

    .news-featured-content {
        bottom: 16px;
        left: 16px;
        right: 16px;
    }

    .news-featured-title {
        font-size: var(--h2-font-size-medium);
    }

    .news-featured-teaser {
        font-size: var(--paragraph-font-size-medium);
    }

    .news-nota-prensa-card,
    .news-audio-visual-secondary {
        flex-direction: column;
    }

    .news-nota-prensa-thumbnail,
    .news-audio-visual-thumbnail {
        width: 100%;
        height: 180px;
    }

    .news-most-read-title {
        font-size: var(--h5-font-size-medium);
    }

    .news-pagination-text {
        display: none;
    }

    .news-paginado-card {
        margin-bottom: 16px;
    }

    /* Ajustes responsive para nuevo layout */
    .news-title {
        font-size: var(--h3-font-size-medium);
    }

    .news-separator {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    /* Ajustes responsive para tarjeta de video */
    .video-card {
        padding-bottom: 60%; /* Más alto en móvil para mejor visualización */
    }

    .video-play-btn {
        width: 48px;
        height: 48px;
        margin-left: 0.75rem !important;
    }

    .video-play-btn .material-symbols-outlined {
        font-size: 28px;
    }

    .video-content {
        left: 72px; /* Menos espacio en móvil */
        right: 16px;
        max-width: calc(100% - 88px);
        padding: 0.75rem !important;
    }

    .video-title {
        font-size: var(--h4-font-size-large);
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .video-date {
        font-size: var(--caption-font-size);
    }

    /* Responsive: Publicaciones (109) - tablet */
    .publication-card-featured {
        /* Altura auto en tablet */
        height: auto;
        min-height: 400px;
        aspect-ratio: 459 / 480;
    }

    .publication-featured-image {
        height: 100%;
    }

    .publication-featured-overlay {
        padding: 1.25rem;
    }

    .publication-featured-title {
        font-size: 16px;
        line-height: 18px;
    }

    .publication-featured-teaser {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .publication-card-standard {
        /* Mantener proporción en tablet */
        aspect-ratio: 17 / 22;
    }

    .btn-publication-solid,
    .btn-publication-outline {
        padding: 0.5rem 1rem;
        font-size: 13px;
    }

    .om3-news-list .publications-footer {
        padding: 1rem 0;
        margin-top: 1.5rem;
    }

    .om3-news-list .publications-footer-text {
        font-size: 16px;
    }

    /* Responsive: Carousel Overlay (110) */
    .news-carousel-overlay {
        border-radius: 0 0 8px 8px; /* Ligeramente menor en tablet */
    }

    .news-carousel-overlay .carousel-inner {
        border-radius: 0 0 8px 8px;
    }

    .news-carousel-overlay .carousel-item,
    .news-carousel-overlay .carousel-item img {
        min-height: 400px;
        height: 400px;
    }

    /* En tablet/móvil, la tarjeta se posiciona relativa al flujo */
    .news-carousel-overlay .carousel-caption {
        position: relative;
        bottom: auto;
        left: auto;
        background-color: var(--Neutral-100);
    }

    .news-carousel-overlay .carousel-caption .container {
        padding-left: 0;
        padding-right: 0;
    }

    .news-card-floating {
        /* Proporcional: ~85% del ancho original en tablet */
        width: 290px;
        border-radius: 0;
        padding: 1.25rem;
        box-shadow: none;
        border-bottom: 4px solid var(--Primario-50);
    }

    .news-card-floating h5 {
        font-size: 16px;
    }

    .news-card-floating .image-attribution {
        font-size: var(--caption-font-size);
    }

    .carousel-controls-capsule {
        bottom: 1rem;
        right: 1rem;
        padding: 0.375rem 0.75rem;
    }

    /* Responsive: OM3 Últimas Noticias (111) */
    .om3-last-news .section-title {
        font-size: var(--h3-font-size-large);
    }

    .om3-last-news .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .om3-last-news .card-image {
        width: 100%;
        aspect-ratio: 269 / 200;    /* Mantiene proporción en móvil */
    }
}

@media (max-width: 576px) {
    .news-button-primary {
        width: 100%;
        justify-content: center;
    }

    .news-pagination-list {
        gap: 4px;
    }

    .news-pagination-link {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        font-size: var(--paragraph-font-size-small);
    }

    /* Botón Ver todo full-width en móvil */
    .btn-outline-primary-transparent {
        width: 100%;
        justify-content: center;
    }

    /* Responsive: Publicaciones (109) - móviles pequeños */
    .publication-card-featured {
        height: auto;
        min-height: 320px;
        aspect-ratio: auto;
    }

    .publication-featured-overlay {
        padding: 1rem;
    }

    .publication-featured-title {
        font-size: 16px;
        line-height: 18px;
    }

    .publication-card-standard {
        /* Mantener proporción en móviles */
        aspect-ratio: 17 / 22;
    }

    .om3-news-list .publications-footer {
        margin-top: 1rem;
        padding: 1rem 0;
    }

    .om3-news-list .publications-footer .row {
        text-align: center;
    }

    .publications-footer-text,
    .publications-footer-desc {
        text-align: center;
        margin-bottom: 1rem;
    }

    .btn-publication-cta {
        width: 100%;
        justify-content: center;
    }

    /* Responsive: Carousel Overlay (110) - móviles pequeños */
    .news-carousel-overlay {
        border-radius: 0 0 6px 6px;
    }

    .news-carousel-overlay .carousel-inner {
        border-radius: 0 0 6px 6px;
    }

    .news-card-floating {
        /* Full width en móviles pequeños */
        width: 100%;
        border-radius: 0 0 6px 0; /* Solo esquina inferior derecha */
    }

    /* Ajustes adicionales para tarjeta de video en móviles pequeños */
    .video-card {
        padding-bottom: 70%; /* Aún más alto en móviles pequeños */
    }

    .video-play-btn {
        width: 40px;
        height: 40px;
        margin-left: 0.5rem !important;
    }

    .video-play-btn .material-symbols-outlined {
        font-size: 24px;
    }

    .video-content {
        left: 60px;
        right: 12px;
        max-width: calc(100% - 72px);
        padding: 0.5rem !important;
    }

    .video-title {
        font-size: var(--h5-font-size-large);
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .video-tag {
        font-size: 10px;
        padding: 0.2rem 0.5rem;
    }
}

/* =================================================================== */
/* LAYOUT: HOME NEWS GRID (119)                                        */
/* Grilla de noticias para homepage - 2 columnas                       */
/* Diseño según Documentation/Features/news/home/feature.md            */
/* =================================================================== */

.news-home-grid {
    padding: 24px 0;
}

/* Tarjeta de noticia para home */
.news-home-card {
    background-color: var(--Neutral-100);
    border: 1px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-hover),
                background-color var(--transition-hover),
                border-color var(--transition-hover);
}

.news-home-card:hover {
    box-shadow: var(--shadow-hover);
    background-color: var(--Primario-98);
    border-color: var(--Secundario-80);
}

.news-home-card:focus-within {
    outline: 2px solid var(--Complementario-60);
    outline-offset: 2px;
}

/* Imagen */
.news-home-card__image-link {
    display: block;
    text-decoration: none;
}

.news-home-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Contenido */
.news-home-card__content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Fecha - Verdana 400, 12px, color Primario-50 */
.news-home-card__date {
    font-family: var(--paragraph-font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--Primario-50);
    margin-bottom: 8px;
}

/* Título - Nunito Sans 900, 16px, color Neutral-30 */
.news-home-card__title {
    font-family: var(--nunito-font);
    font-weight: 900;
    font-size: 16px;
    line-height: 18px;
    color: var(--Neutral-30);
    margin: 0 0 8px 0;
}

.news-home-card__title a,
.news-home-card__title a.news-home-card__link {
    font: inherit; /* Hereda del h4 padre */
    color: var(--Neutral-30);
    text-decoration: none;
    transition: color var(--transition-hover);
}

.news-home-card__title a:hover {
    color: var(--Primario-50);
}


/* Teaser con 3 líneas - Verdana 400, 13px, color Neutral-10 */
.news-home-card__teaser {
    font-family: var(--paragraph-font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: var(--Neutral-10);
    margin: 0 0 12px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Tags/Categorías - Nunito Sans 11px, pills con fondo Neutral-90 */
.news-home-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.news-home-card__tag {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--Neutral-90);
    color: var(--Neutral-30);
    font-family: var(--nunito-font);
    font-size: 11px;
    font-weight: 600;
    border-radius: 12px;
    white-space: nowrap;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .news-home-card__content {
        padding: 12px;
    }

    .news-home-card__title {
        font-size: 15px;
        line-height: 17px;
    }

    .news-home-card__teaser {
        font-size: 12px;
        line-height: 18px;
    }
}

/* =================================================================== */
/* 11. ACCESSIBILITY                                                   */
/* =================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


.carousel-item a[class=""], .carousel-item a:not([class], .carousel-item a[class=""]:hover) {
    color: var(--Neutral-20);
}

/* =================================================================== */
/* BOOTSTRAP 5 CAROUSEL Z-INDEX FIX - GLOBAL                           */
/* Bootstrap 5 solo define z-index para carousel-fade, no para slide   */
/* Este fix asegura el orden correcto de capas durante transiciones    */
/* Aplica a: CarouselOverlayLeft, CarouselOM3 y otros carousels        */
/* =================================================================== */

/* Contenedor del carousel necesita stacking context propio */
.news-carousel-overlay-left .carousel-inner,
.news-carousel-om3 .carousel-inner {
    position: relative;
    z-index: 0;
}

/* Slide activo - capa base visible */
.news-carousel-overlay-left .carousel-item.active,
.news-carousel-om3 .carousel-item.active {
    z-index: 1;
}

/* Slides entrantes durante transicion - deben aparecer encima */
.news-carousel-overlay-left .carousel-item.carousel-item-next,
.news-carousel-overlay-left .carousel-item.carousel-item-prev,
.news-carousel-om3 .carousel-item.carousel-item-next,
.news-carousel-om3 .carousel-item.carousel-item-prev {
    z-index: 2;
}

/* Slides inactivos - ocultos detras */
.news-carousel-overlay-left .carousel-item:not(.active):not(.carousel-item-next):not(.carousel-item-prev),
.news-carousel-om3 .carousel-item:not(.active):not(.carousel-item-next):not(.carousel-item-prev) {
    z-index: 0;
}

/* ============================================
   NEWS CAROUSEL OVERLAY LEFT (Layout 118)
   Carrusel de noticias para sección Novedades Homepage
   Desktop: Split overlay izquierda (35-40%) + imagen derecha
   Mobile: Layout apilado vertical
   ============================================ */

/* Contenedor principal - ancho 100% de la sección */
.news-carousel-overlay-left {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.news-carousel-overlay-left__carousel {
    position: relative;
    width: 100%;
}

.news-carousel-overlay-left__inner {
    position: relative;
    width: 100%;
}

/* Cada slide - altura controlada por la imagen para mostrarla completa */
.news-carousel-overlay-left__item {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* SIN aspect-ratio - la imagen controla la altura */
}

/* Contenedor de imagen (derecha 68%) - Figma: 775/1138 = 68.1%
   La imagen dicta la altura del componente */
.news-carousel-overlay-left__image-container {
    position: relative;
    width: 68%;
    margin-left: 32%;
    z-index: 1;
}

/* Imagen muestra completa sin recorte - altura natural basada en ancho */
.news-carousel-overlay-left__image {
    width: 100%;
    height: auto;
    display: block;
    /* SIN object-fit - muestra la imagen completa en sus proporciones naturales */
}

/* Zona de texto (izquierda 32%) - Figma: 363/1138 = 31.9%
   Estructura de capas: bg-image (z:1) -> overlay (z:2) -> content (z:3) */
.news-carousel-overlay-left__text-zone {
    position: absolute;
    top: 0;
    left: 0;
    width: 32%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Imagen de fondo ampliada/recortada - efecto zoom */
.news-carousel-overlay-left__bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.news-carousel-overlay-left__bg-image img {
    width: 300%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

/* Capa de overlay semi-transparente sobre la imagen de fondo
   Opacidad: 90% = imagen sutil de fondo, texto legible */
.news-carousel-overlay-left__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: rgba(15, 33, 64, 0.90);
}

/* Contenido de texto sobre las capas */
.news-carousel-overlay-left__content {
    position: relative;
    z-index: 3;
    padding: 24px;
    width: 100%;
}

/* Título - h4, Nunito Sans 800, 24px, blanco */
.news-carousel-overlay-left__title {
    font-family: var(--nunito-font), sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 26px;
    color: var(--Neutral-100) !important;
    margin-bottom: 12px;
}

.news-carousel-overlay-left__title a {
    font: inherit; /* Hereda del h4: 24px Nunito Sans 800 */
    color: var(--Neutral-100) !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.news-carousel-overlay-left__title a:hover,
.news-carousel-overlay-left__title a:focus {
    opacity: 0.9;
    text-decoration: underline;
}

/* Teaser - Verdana 400, 15px, blanco/gris claro */
.news-carousel-overlay-left__teaser {
    font-family: var(--paragraph-font-family), Verdana, sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--Neutral-90);
    margin-bottom: 16px;
}

/* Enlace "Ver más" con chevron */
.news-carousel-overlay-left__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--nunito-font), sans-serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.1;
    color: var(--Neutral-100);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.news-carousel-overlay-left__link:hover,
.news-carousel-overlay-left__link:focus {
    opacity: 0.90;
    text-decoration: underline;
    color: var(--Neutral-100);
}

.news-carousel-overlay-left__link .material-symbols-outlined {
    font-size: 18px;
}

/* Cápsula de controles - Desktop: bottom-right */
.news-carousel-overlay-left__controls {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: rgba(20, 20, 20, 0.9);
    border-radius: 24px;
}

/* Indicadores (dots) */
.news-carousel-overlay-left__indicators {
    display: flex;
    align-items: center;
    gap: 6px;
}

.news-carousel-overlay-left__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: var(--Neutral-50);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.news-carousel-overlay-left__dot:hover {
    background-color: var(--Neutral-70);
}

.news-carousel-overlay-left__dot.active,
.news-carousel-overlay-left__dot[aria-current="true"] {
    background-color: var(--Primario-50);
    transform: scale(1.1);
}


/* Botones de control (prev/next/pause) */
.news-carousel-overlay-left__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: var(--Neutral-100);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease;
}

.news-carousel-overlay-left__btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
}


.news-carousel-overlay-left__btn .material-symbols-outlined {
    font-size: 20px;
}

/* Estado pausado del botón */
.news-carousel-overlay-left__btn--pause[aria-pressed="false"] .material-symbols-outlined::before {
    content: "play_arrow";
}

/* ============================================
   NEWS CAROUSEL OVERLAY LEFT - RESPONSIVE
   ============================================ */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .news-carousel-overlay-left {
        max-width: 100%;
    }

    /* Ajuste proporcional para tablet: 35% overlay / 65% imagen */
    .news-carousel-overlay-left__text-zone {
        width: 35%;
    }

    .news-carousel-overlay-left__image-container {
        width: 65%;
        margin-left: 35%;
    }

    .news-carousel-overlay-left__title {
        font-size: 20px;
        line-height: 24px;
    }

    .news-carousel-overlay-left__teaser {
        font-size: 14px;
        line-height: 22px;
    }
}

/* Mobile (<768px) - Layout apilado */
@media (max-width: 767px) {
    .news-carousel-overlay-left__item {
        display: flex;
        flex-direction: column;
        /* SIN aspect-ratio - imagen controla altura */
    }

    /* Imagen en la parte superior - ancho completo, sin margen */
    .news-carousel-overlay-left__image-container {
        position: relative;
        width: 100%;
        margin-left: 0;
    }

    /* Zona de texto abajo - sin efecto split en mobile */
    .news-carousel-overlay-left__text-zone {
        position: relative;
        width: 100%;
        height: auto;
        background: var(--Secundario-10);
    }

    /* Ocultar imagen de fondo y overlay en mobile - layout apilado */
    .news-carousel-overlay-left__bg-image,
    .news-carousel-overlay-left__overlay {
        display: none;
    }

    .news-carousel-overlay-left__content {
        padding: 16px 24px 24px;
    }

    .news-carousel-overlay-left__title {
        font-size: 18px;
        line-height: 22px;
    }

    .news-carousel-overlay-left__teaser {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 12px;
    }

    .news-carousel-overlay-left__link {
        font-size: 13px;
    }

    /* Controles - centrados abajo del card */
    .news-carousel-overlay-left__controls {
        position: relative;
        bottom: auto;
        right: auto;
        margin: 16px auto;
        justify-content: center;
    }
}

/* Mobile pequeño (<576px) */
@media (max-width: 575px) {
    /* SIN aspect-ratio - imagen muestra completa en todas las resoluciones */

    .news-carousel-overlay-left__content {
        padding: 12px 16px 20px;
    }

    .news-carousel-overlay-left__title {
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 8px;
    }

    .news-carousel-overlay-left__teaser {
        font-size: 12px;
        line-height: 18px;
    }

    .news-carousel-overlay-left__controls {
        padding: 6px 10px;
        gap: 6px;
    }

    .news-carousel-overlay-left__dot {
        width: 8px;
        height: 8px;
    }

    .news-carousel-overlay-left__btn {
        width: 24px;
        height: 24px;
    }

    .news-carousel-overlay-left__btn .material-symbols-outlined {
        font-size: 18px;
    }
}

/* =================================================================== */
/* NEWS CAROUSEL OM3 (Layout 120)                                       */
/* Sin border-radius superior - Integrado con menú OM3                  */
/* Controles en inferior izquierda - Altura fija 340px                  */
/* =================================================================== */

/* Contenedor principal - sin esquinas superiores para integración con menú
   Sincronizado con navegación OM3 usando la misma variable CSS
   Altura dinámica basada en aspect-ratio de la imagen (155:68) */
.news-carousel-om3 {
    position: relative;
    width: 100%;
    max-width: var(--om3-nav-max-width, 1140px);
    margin-left: auto;
    margin-right: auto;
    /* Eliminar height fija, usar aspect-ratio dinámico */
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.news-carousel-om3__carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.news-carousel-om3__inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Cada slide - altura dinámica sin valor fijo */
.news-carousel-om3__item {
    position: relative;
    width: 100%;
    display: flex;
    overflow: hidden;
}

/* Contenedor de imagen (derecha 60%) - proporción fija 1550×680 (155:68)
   aspect-ratio garantiza que la imagen completa se muestre sin recorte */
.news-carousel-om3__image-container {
    position: relative;
    width: 60%;
    margin-left: 40%;
    aspect-ratio: 155 / 68;
    z-index: 1;
}

/* Imagen - object-fit cover dentro del contenedor con aspect-ratio correcto
   La imagen se muestra completa porque el contenedor tiene la misma proporción */
.news-carousel-om3__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Zona de texto (izquierda 40%) - altura igual a la imagen
   Estructura de capas: bg-image (z:1) -> overlay (z:2) -> content (z:3) */
.news-carousel-om3__text-zone {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Imagen de fondo ampliada/recortada - efecto zoom */
.news-carousel-om3__bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.news-carousel-om3__bg-image img {
    width: 300%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

/* Capa de overlay semi-transparente sobre la imagen de fondo
   Opacidad: 90% = imagen sutil de fondo, texto legible */
.news-carousel-om3__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: rgba(15, 33, 64, 0.90);
}

/* Contenido de texto sobre las capas - padding 24px */
.news-carousel-om3__content {
    position: relative;
    z-index: 3;
    padding: 24px;
    width: 100%;
}

/* Título - h4, Nunito Sans 800, 24px/26px, blanco - SIN truncar */
.news-carousel-om3__title {
    font-family: var(--nunito-font), sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 26px;
    color: var(--Neutral-100) !important;
    margin-bottom: 12px;
}

.news-carousel-om3__title a {
    font: inherit; /* Hereda del h4: 24px Nunito Sans 800 */
    color: var(--Neutral-100) !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.news-carousel-om3__title a:hover,
.news-carousel-om3__title a:focus {
    opacity: 0.9;
    text-decoration: underline;
}

/* Teaser - Verdana 400, 15px/24px, blanco/gris claro */
.news-carousel-om3__teaser {
    font-family: var(--paragraph-font-family), Verdana, sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--Neutral-90);
    margin-bottom: 16px;
}

/* Enlace "Ver más" con chevron */
.news-carousel-om3__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--nunito-font), sans-serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.1;
    color: var(--Neutral-100);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.news-carousel-om3__link:hover,
.news-carousel-om3__link:focus {
    opacity: 0.90;
    text-decoration: underline;
    color: var(--Neutral-100);
}

.news-carousel-om3__link .material-symbols-outlined {
    font-size: 18px;
}

/* Controles - INFERIOR IZQUIERDA, directamente sobre el overlay (sin fondo propio) */
.news-carousel-om3__controls {
    position: absolute;
    bottom: 21px;
    left: 24px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Indicadores (dots) - Estilo pastilla activa / dots inactivos */
.news-carousel-om3__indicators {
    display: flex;
    align-items: center;
    gap: 6px;
}

.news-carousel-om3__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: var(--Neutral-50);
    cursor: pointer;
    padding: 0;
    transition: all 0.25s ease;
}

.news-carousel-om3__dot:hover:not(.active):not([aria-current="true"]) {
    background-color: var(--Neutral-70);
}

.news-carousel-om3__dot.active,
.news-carousel-om3__dot[aria-current="true"] {
    width: 24px;
    height: 10px;
    background-color: var(--Primario-50);
    border-radius: 5px;
    transform: none;
}


/* Botones de control (prev/next/pause) */
.news-carousel-om3__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: var(--Neutral-100);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease;
}

.news-carousel-om3__btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
}


.news-carousel-om3__btn .material-symbols-outlined {
    font-size: 20px;
}

/* ============================================
   NEWS CAROUSEL OM3 - RESPONSIVE
   ============================================ */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .news-carousel-om3 {
        max-width: 100%;
        /* Sin altura fija - se mantiene aspect-ratio */
    }

    /* Mantener proporciones 60%/40% en tablet */
    .news-carousel-om3__text-zone {
        width: 40%;
    }

    .news-carousel-om3__image-container {
        width: 60%;
        margin-left: 40%;
    }

    .news-carousel-om3__title {
        font-size: 20px;
        line-height: 24px;
    }

    .news-carousel-om3__teaser {
        font-size: 14px;
        line-height: 22px;
    }

    .news-carousel-om3__controls {
        bottom: 16px;
        left: 16px;
    }
}

/* Mobile (<768px) - Layout apilado */
@media (max-width: 767px) {
    .news-carousel-om3 {
        height: auto;
        border-radius: 0 0 8px 8px;
    }

    .news-carousel-om3__item {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    /* Imagen en la parte superior - ancho completo, sin margen */
    .news-carousel-om3__image-container {
        position: relative;
        width: 100%;
        height: 200px;
        margin-left: 0;
    }

    /* Imagen centrada en mobile - layout apilado vertical */
    .news-carousel-om3__image {
        object-position: center center;
    }

    /* Zona de texto abajo - sin efecto split en mobile */
    .news-carousel-om3__text-zone {
        position: relative;
        width: 100%;
        height: auto;
        background: var(--Secundario-10);
    }

    /* Ocultar imagen de fondo y overlay en mobile - layout apilado */
    .news-carousel-om3__bg-image,
    .news-carousel-om3__overlay {
        display: none;
    }

    .news-carousel-om3__content {
        padding: 16px 24px 24px;
    }

    .news-carousel-om3__title {
        font-size: 18px;
        line-height: 22px;
    }

    .news-carousel-om3__teaser {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 12px;
    }

    .news-carousel-om3__link {
        font-size: 13px;
    }

    /* Controles - centrados abajo del card */
    .news-carousel-om3__controls {
        position: relative;
        bottom: auto;
        left: auto;
        margin: 16px auto;
        justify-content: center;
    }
}

/* Mobile pequeño (<576px) */
@media (max-width: 575px) {
    .news-carousel-om3__image-container {
        height: 180px;
    }

    .news-carousel-om3__content {
        padding: 12px 16px 20px;
    }

    .news-carousel-om3__title {
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 8px;
    }

    .news-carousel-om3__teaser {
        font-size: 12px;
        line-height: 18px;
    }

    .news-carousel-om3__controls {
        gap: 6px;
    }

    .news-carousel-om3__dot {
        width: 8px;
        height: 8px;
    }

    .news-carousel-om3__dot.active,
    .news-carousel-om3__dot[aria-current="true"] {
        width: 18px;
        height: 8px;
    }

    .news-carousel-om3__btn {
        width: 24px;
        height: 24px;
    }

    .news-carousel-om3__btn .material-symbols-outlined {
        font-size: 18px;
    }
}

.news-date-capitalize {
    text-transform: capitalize;
}

/* =================================================================== */
/* NEWS DETAIL: DETALLE DE NOTICIA (Layout 121)                        */
/* Vista de detalle completa con compartir, slider, autor y recomendados */
/* =================================================================== */

/* Contenedor principal del articulo */
.news-detalle-noticia {
    padding: 24px 0 48px;
}

/* --- Header: Share + Badges + Title --- */
.news-detalle-noticia__header {
    text-align: center;
    margin-bottom: 24px;
}

/* Encabezado del plugin (campo header de tt_content) */
.news-detalle-noticia__plugin-header {
    font-family: var(--nunito-font);
    font-weight: 800;
    font-size: 24px;
    line-height: 26px;
    letter-spacing: 0;
    text-align: center;
    color: var(--Primario-40);
    margin: 0 0 8px 0;
}

/* Share links */
.news-detalle-noticia__share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.news-detalle-noticia__share-label {
    font-family: var(--nunito-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--Neutral-30);
}

.news-detalle-noticia__share-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.news-detalle-noticia__share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: var(--Primario-50);
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
}

.news-detalle-noticia__share-btn:hover {
    background-color: var(--Primario-98);
    transform: scale(1.1);
    color: var(--Primario-50);
}


.news-detalle-noticia__share-icon {
    width: 20px;
    height: 20px;
}

.news-detalle-noticia__share-btn .material-symbols-outlined {
    font-size: 20px;
}

/* Badges de categoria/tags */
.news-detalle-noticia__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-bottom: 16px;
}

.news-detalle-noticia__badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 16px;
    font-family: var(--nunito-font);
    font-weight: 700;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--Neutral-30);
    white-space: nowrap;
}

.news-detalle-noticia__badge--primary {
    background-color: var(--Primario-80);
    border: 1px solid var(--Primario-70);
}

.news-detalle-noticia__badge--secondary {
    background-color: var(--Neutral-90);
    border: 1px solid var(--Neutral-70);
}

/* Titulo principal - sin underline bar */
.news-detalle-noticia__title {
    font-family: var(--nunito-font);
    font-weight: 900;
    font-size: 42px;
    line-height: 42px;
    color: var(--Neutral-0);
    margin: 0;
    text-align: center;
}

/* Override para quitar underline si existe globalmente en h1 */
.news-detalle-noticia__title::after {
    display: none !important;
    content: none !important;
}

/* --- Media Section (Image/Slider) --- */
.news-detalle-noticia__media {
    position: relative;
    margin-bottom: 32px;
    border-radius: 8px;
    overflow: visible;
}

/* Badge de fecha flotante - 50% arriba, 50% abajo del borde superior */
.news-detalle-noticia__date-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background-color: var(--Primario-40);
    color: var(--Neutral-100);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: Verdana, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    text-transform: capitalize;
}

/* Contenedores de imagen individual y carousel */
.news-detalle-noticia__single-image,
.news-detalle-noticia__carousel {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

/* Carousel con altura fija 16:9 - sin transiciones de altura dinamicas */
.news-detalle-noticia__carousel {
    /* Sin transition: height - ya no se manipula desde JS */
}

/* Carousel-inner con aspect-ratio fijo 16:9 */
.news-detalle-noticia__carousel .carousel-inner,
.news-detalle-noticia__carousel-inner {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden; /* Evita que contenido exceda bounds */
    background-color: var(--Neutral-90); /* Fondo para letterboxing */
}

/* Cada slide rellena el container 16:9 completamente con z-index para control de apilamiento */
.news-detalle-noticia__carousel .carousel-item,
.news-detalle-noticia__carousel-item {
    position: relative; /* Requerido para que z-index funcione */
    width: 100%;
    height: 100%; /* Rellena el carousel-inner (que tiene aspect-ratio 16:9) */
    display: flex;
    align-items: center; /* Centrado vertical del contenido */
    justify-content: center; /* Centrado horizontal del contenido */
    z-index: 0; /* Base z-index para slides inactivos */
}

/* Slide activo siempre aparece encima */
.news-detalle-noticia__carousel .carousel-item.active,
.news-detalle-noticia__carousel-item.active {
    z-index: 1;
}

/* Slides en transición (entrando/saliendo) aparecen encima durante la animación */
.news-detalle-noticia__carousel .carousel-item.carousel-item-next,
.news-detalle-noticia__carousel .carousel-item.carousel-item-prev,
.news-detalle-noticia__carousel-item.carousel-item-next,
.news-detalle-noticia__carousel-item.carousel-item-prev {
    z-index: 2;
}

/* Slides inactivos que NO están en transición se mantienen atrás explícitamente */
.news-detalle-noticia__carousel .carousel-item:not(.active):not(.carousel-item-next):not(.carousel-item-prev),
.news-detalle-noticia__carousel-item:not(.active):not(.carousel-item-next):not(.carousel-item-prev) {
    z-index: 0;
}

/* Imagenes dentro del carousel con object-fit para ajuste 16:9 */
.news-detalle-noticia__image {
    width: 100%;
    height: 100%; /* Rellena el media-wrapper */
    object-fit: contain; /* Muestra imagen completa, centrada, sin recorte */
    object-position: center; /* Centrado explicito */
    display: block;
}

/* Imagenes fuera del carousel (single image) mantienen auto height */
.news-detalle-noticia__single-image .news-detalle-noticia__image {
    height: auto;
}

/* ========================================
   VIDEO WRAPPER - 16:9 Aspect Ratio
   ======================================== */

.news-detalle-noticia__video-wrapper {
    width: 100%;
    height: 100%; /* Rellena el carousel-item */
    overflow: hidden;
    background-color: var(--Neutral-90);
}

.news-detalle-noticia__video-wrapper iframe,
.news-detalle-noticia__video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain; /* Asegura que video se ajuste sin crop */
}

/* Video fuera del carousel (single video) usa aspect-ratio */
.news-detalle-noticia__single-image .news-detalle-noticia__video-wrapper {
    aspect-ratio: 16 / 9;
    height: auto;
}

/* ========================================
   MEDIA WRAPPER - 16:9 Aspect Ratio (para imagenes en carousel)
   ======================================== */

.news-detalle-noticia__media-wrapper {
    width: 100%;
    height: 100%; /* Rellena el carousel-item (que es 100% del carousel-inner) */
    background-color: var(--Neutral-90); /* Fondo para letterboxing/pillarboxing */
}

/* Responsive: mobile adjustments */
@media (max-width: 767.98px) {
    .news-detalle-noticia__video-wrapper {
        border-radius: 4px;
    }

    .news-detalle-noticia__carousel-item .news-detalle-noticia__video-wrapper {
        border-radius: 0;
    }
}

/* Carousel controls capsule */
.news-detalle-noticia__carousel-controls {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: rgba(20, 20, 20, 0.9);
    border-radius: 24px;
}

.news-detalle-noticia__carousel-indicators {
    display: flex;
    align-items: center;
    gap: 6px;
}

.news-detalle-noticia__carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: var(--Neutral-50);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.news-detalle-noticia__carousel-dot:hover {
    background-color: var(--Neutral-70);
}

.news-detalle-noticia__carousel-dot.active,
.news-detalle-noticia__carousel-dot[aria-current="true"] {
    background-color: var(--Primario-50);
    transform: scale(1.1);
}


.news-detalle-noticia__carousel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: var(--Neutral-100);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease;
}

.news-detalle-noticia__carousel-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
}


.news-detalle-noticia__carousel-btn .material-symbols-outlined {
    font-size: 20px;
}

/* Media metadata (imagen descripcion/fuente) - Estilo Figma */
.news-detalle-noticia__media-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    max-width: 60%;
    font-family: Verdana, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: var(--Neutral-100);
    background-color: var(--Neutral-10);
    padding: 12px 24px;
}

/* Icono de camara a la izquierda */
.news-detalle-noticia__media-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.news-detalle-noticia__media-icon .material-symbols-outlined {
    font-size: 24px;
    color: var(--Neutral-100);
}

/* Contenedor de texto (descripcion y fuente) */
.news-detalle-noticia__media-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.news-detalle-noticia__media-description,
.news-detalle-noticia__media-source {
    display: block;
}

.news-detalle-noticia__media-meta strong {
    color: var(--Primario-70);
    font-weight: 700;
}

/* --- Body Content --- */
.news-detalle-noticia__body {
    margin-top: 32px;
}

.news-detalle-noticia__content {
    /* Contenedor de contenido principal */
}

/* Teaser - H5 */
.news-detalle-noticia__teaser {
    font-family: var(--nunito-font);
    font-weight: 900;
    font-size: 18px;
    line-height: 24px;
    color: var(--Neutral-10);
    margin: 0 0 16px 0;
}

.news-detalle-noticia__teaser p {
    margin: 0;
}

/* Bodytext */
.news-detalle-noticia__bodytext {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-large);
    line-height: var(--paragraph-line-height);
    color: var(--Neutral-20);
}

.news-detalle-noticia__bodytext p {
    margin-bottom: 16px;
}

.news-detalle-noticia__bodytext p:last-child {
    margin-bottom: 0;
}

.news-detalle-noticia__content-elements {
    margin-top: 24px;
}

/* Author box */
.news-detalle-noticia__author-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--Neutral-80);
}

.news-detalle-noticia__author {
    font-family: Verdana, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: var(--Neutral-30);
}

.news-detalle-noticia__author strong {
    font-weight: 700;
}

.news-detalle-noticia__author-separator {
    color: var(--Neutral-70);
}

.news-detalle-noticia__author-date {
    font-family: Verdana, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--Neutral-30);
    text-transform: capitalize;
}

/* --- Recommended Sidebar --- */
.news-detalle-noticia__recommended {
    background-color: var(--Neutral-98);
    border-radius: 8px;
    padding: 20px;
}

.news-detalle-noticia__recommended-title {
    font-family: var(--nunito-font);
    font-weight: 900;
    font-size: 20px;
    line-height: 24px;
    color: var(--Neutral-10);
    margin: 0 0 16px 0;
}

.news-detalle-noticia__recommended-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.news-detalle-noticia__recommended-card {
    display: flex;
    gap: 12px;
}

.news-detalle-noticia__recommended-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    order: 2;
}

.news-detalle-noticia__recommended-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.news-detalle-noticia__recommended-thumb--placeholder {
    background-color: var(--Neutral-90);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Neutral-50);
}

.news-detalle-noticia__recommended-thumb--placeholder .material-symbols-outlined {
    font-size: 32px;
}

.news-detalle-noticia__recommended-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    order: 1;
}

.news-detalle-noticia__recommended-card-title {
    font-family: var(--nunito-font);
    font-weight: 900;
    font-size: 16px;
    line-height: 18px;
    color: var(--Neutral-30);
    margin: 0;
}

.news-detalle-noticia__recommended-card-title a {
    font: inherit; /* Hereda del título padre */
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.news-detalle-noticia__recommended-card-title a:hover {
    color: var(--Primario-50);
}

.news-detalle-noticia__recommended-date {
    font-family: Verdana, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--Primario-50);
    text-transform: capitalize;
}

.news-detalle-noticia__recommended-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.news-detalle-noticia__recommended-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    background-color: var(--Neutral-90);
    font-family: var(--nunito-font);
    font-weight: 600;
    font-size: 10px;
    color: var(--Neutral-50);
}

.news-detalle-noticia__recommended-empty {
    font-family: var(--paragraph-font-family);
    font-size: 13px;
    color: var(--Neutral-50);
    text-align: center;
    padding: 20px 0;
    margin: 0;
}

.news-detalle-noticia__bodytext ul li {
    list-style-type: disc !important;
    display: list-item !important;
    margin-left: 1.5em !important;
}

.news-detalle-noticia__bodytext ul {
    padding-left: 2rem !important;
}

/* --- Responsive: Tablet --- */
@media (max-width: 991px) {
    .news-detalle-noticia__title {
        font-size: 34px;
        line-height: 38px;
    }

    .news-detalle-noticia__media-meta {
        max-width: 70%;
    }

    .news-detalle-noticia__teaser {
        font-size: 17px;
        line-height: 23px;
    }
}

/* --- Responsive: Mobile --- */
@media (max-width: 767px) {
    .news-detalle-noticia {
        padding: 16px 0 32px;
    }

    .news-detalle-noticia__title {
        font-size: 28px;
        line-height: 32px;
    }

    .news-detalle-noticia__share {
        flex-direction: column;
        gap: 8px;
    }

    .news-detalle-noticia__teaser {
        font-size: 16px;
        line-height: 22px;
    }

    .news-detalle-noticia__carousel-controls {
        bottom: 8px;
        right: 8px;
        padding: 6px 10px;
    }

    .news-detalle-noticia__media-meta {
        position: static;
        max-width: 100%;
        margin-top: 12px;
        background-color: rgba(var(--Neutral-90-rgb, 229, 231, 235), 0.8);
        color: var(--Neutral-30);
        text-shadow: none;
        border-radius: 4px;
    }

    .news-detalle-noticia__author-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .news-detalle-noticia__author-separator {
        display: none;
    }

    .news-detalle-noticia__recommended {
        margin-top: 24px;
    }
}

/* --- Responsive: Small Mobile --- */
@media (max-width: 575px) {
    .news-detalle-noticia__title {
        font-size: 24px;
        line-height: 28px;
    }

    .news-detalle-noticia__date-badge {
        font-size: 11px;
        padding: 3px 6px;
    }

    .news-detalle-noticia__recommended-card {
        flex-direction: column;
    }

    .news-detalle-noticia__recommended-image {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        order: 1;
    }

    .news-detalle-noticia__recommended-content {
        order: 2;
    }

    .news-detalle-noticia__recommended-thumb {
        width: 100%;
        height: 100%;
    }
}

/* =================================================================== */
/* COMPONENT: Event List Item (Layout 122)                             */
/* =================================================================== */
/* Lista de eventos con tarjetas horizontales mostrando fecha,         */
/* información del evento, badge de modalidad y enlace de acción.      */
/* Utilizado en: Resources/Private/Partials/News/List/EventList.html   */
/* =================================================================== */

/* Variable local para color complementario 80 */
.om3-event-list {
    --local-complementario-80: #FBAF96;
}

/* Contenedor principal de la lista de eventos */
.om3-event-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Tarjeta de evento individual */
.event-card {
    display: flex;
    gap: 20px;
    padding-bottom: 24px;
}

/* --- Columna izquierda: Fecha --- */
.event-date-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 50px;
    flex-shrink: 0;
}

/* Cuadrado con día y número */
.date-square {
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius-md, 8px);
    background-color: var(--Complementario-50, #DA4800);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    color: var(--Neutral-100, #FFFFFF);
    overflow: hidden;
}

/* Nombre corto del día (LUN, MAR, etc.) */
.date-square .day-short {
    font-family: 'Verdana', sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.5px;
}

/* Número del día */
.date-square .day-number {
    font-family: var(--nunito-font, 'Nunito Sans', sans-serif);
    font-weight: 900;
    font-size: 20px;
    line-height: 1;
    text-align: center;
}

/* Nombre corto del mes */
.month-short {
    font-family: 'Verdana', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    color: var(--Neutral-30, #4A4A4A);
}

/* --- Columna derecha: Información del evento --- */
.event-info-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-grow: 1;
}

/* Título del evento */
h6.event-title {
    font-family: var(--nunito-font, 'Nunito Sans', sans-serif);
    font-weight: 900;
    font-size: 16px;
    line-height: 18px;
    margin: 0;
}

h6.event-title a {
    text-decoration: none;
    color: var(--Neutral-30) !important;
    transition: var(--transition-color, color 0.2s ease);
}

h6.event-title a:hover,
h6.event-title a:focus {
    color: var(--Complementario-50, #DA4800);
}

/* Fila de metadatos (hora) */
.event-meta-row {
    font-family: 'Verdana', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
}

.event-meta-row .meta-label {
    color: var(--Neutral-30, #4A4A4A);
    margin-right: 4px;
}

.event-meta-row .meta-value {
    color: var(--Complementario-50, #DA4800);
}

/* Badge de modalidad */
.modality-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 26px;
    box-sizing: border-box;
    padding: 4px 12px 4px 6px;
    border-radius: 16px;
    border: 1px solid transparent;
    background-color: var(--local-complementario-80);
}

.modality-badge .badge-icon {
    font-size: 16px;
}

.modality-badge .badge-key {
    font-family: var(--nunito-font, 'Nunito Sans', sans-serif);
    font-weight: 700;
    font-size: 13px;
    line-height: 100%;
}

.modality-badge .badge-val {
    font-family: var(--nunito-font, 'Nunito Sans', sans-serif);
    font-weight: 500;
    font-size: 13px;
    line-height: 100%;
    margin-left: 2px;
}

/* Fila de acción (enlace "Más información") */
.event-action-row {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
}

.link-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--nunito-font, 'Nunito Sans', sans-serif);
    font-weight: 900;
    font-size: 12px;
    line-height: 110%;
    text-align: right;
    color: var(--Complementario-50, #DA4800);
    text-decoration: none;
    transition: var(--transition-hover, transform 0.2s ease);
}

.link-more .icon-add {
    font-size: 14px;
    font-weight: 900;
}

.link-more:hover,
.link-more:focus {
    transform: translateX(2px);
}


/* Separador entre eventos */
.event-divider {
    border: 0;
    border-bottom: 1px solid var(--Neutral-90, #E5E5E5);
    margin: 0;
}

/* Contenedor del botón CTA */
.events-cta-container {
    margin-top: 10px;
}

/* Botón CTA "Ver todos los eventos" */
.btn-event-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border: 1px solid var(--Complementario-50, #DA4800);
    border-radius: var(--border-radius-full, 9999px);
    font-family: var(--nunito-font, 'Nunito Sans', sans-serif);
    font-weight: 700;
    font-size: 14px;
    color: var(--Complementario-50, #DA4800);
    text-decoration: none;
    transition: var(--transition-default, all 0.2s ease);
}

.btn-event-outline:hover,
.btn-event-outline:focus {
    background-color: var(--Complementario-50, #DA4800);
    color: var(--Neutral-100, #FFFFFF);
}


/* --- Responsive: Mobile --- */
@media (max-width: 576px) {
    .event-card {
        flex-direction: column;
        gap: 12px;
    }

    .event-date-col {
        flex-direction: row;
        width: 100%;
        gap: 12px;
        align-items: center;
    }

    .date-square {
        width: 44px;
        height: 44px;
    }

    .date-square .day-short {
        font-size: 9px;
    }

    .date-square .day-number {
        font-size: 18px;
    }

    .month-short {
        font-size: 12px;
    }

    h6.event-title {
        font-size: 14px;
        line-height: 16px;
    }

    .modality-badge {
        height: 24px;
        padding: 3px 10px 3px 5px;
    }

    .modality-badge .badge-icon {
        font-size: 14px;
    }

    .modality-badge .badge-key,
    .modality-badge .badge-val {
        font-size: 12px;
    }

    .btn-event-outline {
        width: 100%;
        justify-content: center;
    }
}

/* =================================================================== */
/* 17. LAYOUT: HIGHLIGHT CARD (123) - Tarjeta de Última Publicación    */
/* =================================================================== */
/* Tarjeta prominente con imagen a la izquierda y contenido a la derecha
   Usada para destacar la última publicación en secciones de noticias
   Referencia visual: Documentation/Features/news/img_1.png */

/* --- Contenedor principal de la tarjeta --- */
.news-highlight-card {
    display: flex;
    flex-direction: row;
    background-color: var(--Neutral-98);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-default);
    min-height: 280px;
    max-width: 100%;
}

.news-highlight-card:hover {
    box-shadow: var(--shadow-hover);
}

/* --- Columna de imagen (izquierda) --- */
.news-highlight-card__image {
    flex: 0 0 45%;
    max-width: 45%;
    position: relative;
    overflow: hidden;
}

.news-highlight-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.news-highlight-card:hover .news-highlight-card__img {
    transform: scale(1.02);
}

/* Placeholder cuando no hay imagen */
.news-highlight-card__placeholder {
    width: 100%;
    height: 100%;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--Neutral-90);
}

.news-highlight-card__placeholder .material-symbols-outlined {
    font-size: 64px;
    color: var(--Neutral-60);
}

/* --- Columna de contenido (derecha) --- */
.news-highlight-card__content {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 48px 32px 24px;
    justify-content: flex-start;
    gap: 16px;
}

/* --- Badge "Última publicación" --- */
.news-highlight-card__badge {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    background-color: var(--Neutral-20);
    color: var(--Neutral-100);
    font-family: var(--nunito-font);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 0 0 4px 0;
    letter-spacing: 0.5px;
}

/* --- Título de la noticia --- */
.news-highlight-card__title {
    font-family: var(--h3-font-family);
    font-size: var(--h3-font-size-medium);
    font-weight: var(--h3-font-weight-bold);
    line-height: var(--h3-line-height);
    color: var(--Primario-30);
    margin: 0;
    /* Limitar a 4 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-highlight-card__title-link {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-color);
}

.news-highlight-card__title-link:hover,
.news-highlight-card__title-link:focus {
    color: var(--Primario-50);
    text-decoration: underline;
}

/* --- Chip PDF --- */
.news-highlight-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--Neutral-95);
    border: 1px solid var(--Neutral-80);
    border-radius: 6px;
    padding: 8px 14px;
    align-self: flex-start;
    transition: var(--transition-default);
}

.news-highlight-card__chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Neutral-40);
}

.news-highlight-card__chip-icon svg {
    fill: currentColor;
}

.news-highlight-card__chip-text {
    font-family: var(--nunito-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--Neutral-30);
}

.news-highlight-card__chip-size {
    font-weight: 400;
    color: var(--Neutral-50);
}

/* --- Fecha de publicación --- */
.news-highlight-card__date {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--nunito-font);
    font-size: 14px;
    color: var(--Neutral-40);
}

.news-highlight-card__date-label {
    font-weight: 700;
    color: var(--Neutral-30);
}

.news-highlight-card__date time {
    font-weight: 400;
}

/* --- Botón CTA --- */
.news-highlight-card__cta {
    margin-top: auto;
    padding-top: 8px;
}

.news-highlight-card__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nunito-font);
    font-size: 14px;
    font-weight: 700;
    color: #312D83;
    background-color: transparent;
    border: 2px solid #312D83;
    border-radius: 8px;
    padding: 12px 24px;
    text-decoration: none;
    transition: var(--transition-default);
    cursor: pointer;
}

.news-highlight-card__button:hover,
.news-highlight-card__button:focus {
    background-color: #312D83;
    color: var(--Neutral-100);
}


.news-highlight-card__button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #312D83;
    transition: transform 0.2s ease, color 0.2s ease;
}

.news-highlight-card__button:hover .news-highlight-card__button-icon,
.news-highlight-card__button:focus .news-highlight-card__button-icon {
    transform: translateX(4px);
    color: var(--Neutral-100);
}

.news-highlight-card__button-icon svg {
    stroke: currentColor;
}

/* --- Estado vacío --- */
.news-highlight-card--empty {
    justify-content: center;
    align-items: center;
    min-height: 200px;
    background-color: var(--Neutral-95);
}

.news-highlight-card__empty-message {
    font-family: var(--nunito-font);
    font-size: 16px;
    color: var(--Neutral-50);
    text-align: center;
    padding: 32px;
    margin: 0;
}

/* --- Responsive: Tablet --- */
@media (max-width: 991px) {
    .news-highlight-card__image {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .news-highlight-card__content {
        padding: 44px 24px 20px;
        gap: 12px;
    }

    .news-highlight-card__title {
        font-size: 20px;
        -webkit-line-clamp: 3;
    }
}

/* --- Responsive: Mobile --- */
@media (max-width: 767px) {
    .news-highlight-card {
        flex-direction: column;
        min-height: auto;
    }

    .news-highlight-card__image {
        flex: 0 0 auto;
        max-width: 100%;
        height: 200px;
    }

    .news-highlight-card__placeholder {
        min-height: 200px;
    }

    .news-highlight-card__content {
        padding: 40px 20px 20px;
        gap: 12px;
    }

    .news-highlight-card__badge {
        font-size: 12px;
        padding: 6px 12px;
        border-radius: 0 0 4px 0;
    }

    .news-highlight-card__title {
        font-size: 18px;
        line-height: 1.3;
        -webkit-line-clamp: 3;
    }

    .news-highlight-card__chip {
        padding: 6px 10px;
    }

    .news-highlight-card__chip-text {
        font-size: 13px;
    }

    .news-highlight-card__date {
        font-size: 13px;
    }

    .news-highlight-card__button {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
    }
}
/* ========================================
   OM3 INFORMES - TARJETA
   (Migrado desde om3-site.css)
   ======================================== */

/* Tarjeta individual - Extiende .card de news.css */
/* Estilos específicos de OM3 Informes (fondo y borde) */
/* Altura controlada en news.css: 359px desktop, aspect-ratio responsive */
.om3-informes-card {
    background-color: var(--Neutral-90);
    border-radius: 8px;
}

/* Focus específico OM3 con color naranja (global) */
.om3-informes-card:focus-within {
    outline: 2px solid var(--Complementario-60);
    outline-offset: 2px;
}

/* Imagen placeholder cuando no hay imagen asignada */
.card__image--placeholder {
    background-color: var(--Neutral-80);
}

/* Badge de tipo de archivo */
.om3-informes-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--om3lastnews-badge);
    border-radius: 50px;
    font-family: var(--nunito-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--om3lastnews-badge);
    width: fit-content;
}

.om3-informes-card__badge .material-symbols-outlined {
    font-size: 14px;
}

/* Nota: Fecha usa .card__date de news.css */

/* Botón CTA */
.om3-informes-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--om3lastnews-cta);
    color: var(--Neutral-100);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    font-family: var(--nunito-font);
    font-size: var(--button2-font-size);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    width: fit-content;
    margin-top: 0.5rem;
}

.om3-informes-card__cta:hover {
    background-color: var(--om3lastnews-cta-hover);
    color: var(--Neutral-100);
    border-color: rgba(255, 255, 255, 0.5);
}

.om3-informes-card__cta .material-symbols-outlined {
    font-size: 18px;
}

/* ========================================
   RELATORÍAS - TARJETA
   Variante azul primario de informes
   ======================================== */

/* Tarjeta individual - Extiende .card de news.css */
.relatorias-card {
    background-color: var(--Neutral-90);
    border-radius: 8px;
}

/* Focus específico OM3 con color naranja (global) */
.relatorias-card:focus-within {
    outline: 2px solid var(--Complementario-60);
    outline-offset: 2px;
}

/* Badge de tipo de archivo - azul Primario-80 */
.relatorias-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--Primario-80, #A7C5FA);
    border-radius: 50px;
    font-family: var(--nunito-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--Primario-80, #A7C5FA);
    width: fit-content;
}

.relatorias-card__badge .material-symbols-outlined {
    font-size: 14px;
}

/* Botón CTA - ghost/outline con borde blanco */
.relatorias-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--Primario-50);
    color: var(--Neutral-100) !important;
    border: 1px solid var(--Neutral-100);
    border-radius: 6px;
    font-family: var(--nunito-font);
    font-size: var(--button2-font-size);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    width: fit-content;
    margin-top: 0.5rem;
}

.relatorias-card__cta:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--Neutral-100);
    border-color: var(--Neutral-100);
}

.relatorias-card__cta .material-symbols-outlined {
    font-size: 18px;
}

/* Overlay sólido azul oscuro para relatorías */
.relatorias-list .overlay--solid {
    background-color: var(--Primario-30, #042871);
}

/* ========================================
   RELATORÍAS - CONTENEDOR Y CONTROLES
   (Layout, encabezado, filtros y grid)
   ======================================== */

.relatorias-list {
    padding: 2rem 0 4rem;
    background-color: var(--Neutral-100);
}

.relatorias-header {
    margin-bottom: 2rem;
}

.relatorias-header__top {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1.5rem;
}

/* Alinear el área de meta a la derecha dentro de la columna 1fr */
.relatorias-header__area {
    justify-self: end;
}

/* Separador entre encabezado y grid de tarjetas */
.relatorias-divider {
    border: none;
    border-top: 1px solid var(--Neutral-70);
    margin: 0 0 2rem;
}

.relatorias-header__meta {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size);
    color: var(--Neutral-40);
}

.relatorias-header__count {
    font-weight: 700;
    color: var(--Primario-50, #1053D4);
}

/* Controles de filtrado */
.relatorias-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.relatorias-controls__select {
    padding: 0.5rem 2rem 0.5rem 1rem;
    border: 1px solid var(--Neutral-70);
    border-radius: 8px;
    background-color: var(--Neutral-100);
    font-family: var(--nunito-font);
    font-size: 0.9rem;
    color: var(--Neutral-30);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23666666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

.relatorias-controls__search {
    position: relative;
    min-width: 250px;
}

.relatorias-controls__search-input {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    border: 1px solid var(--Neutral-70);
    border-radius: 8px;
    font-family: var(--nunito-font);
    font-size: 0.9rem;
}

.relatorias-controls__search-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--Neutral-50);
    cursor: pointer;
}

/* Grid de relatorías */
.relatorias-grid {
    margin-bottom: 2rem;
}

/* Mensaje sin resultados para relatorías */
.relatorias-no-results {
    text-align: center;
    padding: 3rem 1rem;
}

.relatorias-no-results__icon {
    font-size: 48px;
    color: var(--Neutral-60);
}

.relatorias-no-results__text {
    font-size: 1.1rem;
    color: var(--Neutral-30);
}

.relatorias-no-results__hint {
    font-size: 0.9rem;
    color: var(--Neutral-50);
}

/* --- Responsive: Relatorías --- */
@media (max-width: 991.98px) {
    .relatorias-header__top {
        grid-template-columns: 1fr;
    }

    /* Restablecer alineación a la izquierda en móvil */
    .relatorias-header__area {
        justify-self: start;
    }

    .relatorias-controls {
        justify-content: flex-start;
    }

    .relatorias-controls__search {
        flex: 1;
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .relatorias-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .relatorias-controls__select {
        width: 100%;
    }

    .relatorias-controls__search {
        min-width: 100%;
    }
}

/* ========================================
   OM3 CÁPSULAS - ICONO DE REPRODUCCIÓN
   (Migrado desde om3-site.css)
   ======================================== */

/* Icono de reproducción en lista para videos */
.om3-capsulas-card .news-play-icon-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.om3-capsulas-card .news-play-icon {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Neutral-100);
    transition: all 0.2s ease;
}

.om3-capsulas-card:hover .news-play-icon {
    background-color: var(--capsula-cta-bg);
    transform: scale(1.1);
}

.om3-capsulas-card .news-play-icon .material-symbols-outlined {
    font-size: 32px;
}

/* ========================================
   PAGINACIÓN MICRODATOS (estilo verde)
   (Migrado desde om3-site.css)
   ======================================== */

.news-pagination--microdatos {
    margin-top: 2rem;
}

.news-pagination--microdatos .news-pagination-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-pagination--microdatos .news-pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--om3-text-dark);
    background-color: transparent;
    border: 1px solid var(--Neutral-90);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.news-pagination--microdatos .news-pagination-link:hover:not(.active):not(.disabled) {
    background-color: var(--om3micro-primary-light);
    border-color: var(--om3micro-primary);
    color: var(--om3micro-primary);
}

.news-pagination--microdatos .news-pagination-link.active {
    background-color: var(--om3micro-primary);
    border-color: var(--om3micro-primary);
    color: var(--Neutral-100);
}

.news-pagination--microdatos .news-pagination-link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.news-pagination--microdatos .news-pagination-prev,
.news-pagination--microdatos .news-pagination-next,
.news-pagination--microdatos .news-pagination-first,
.news-pagination--microdatos .news-pagination-last {
    gap: 0.25rem;
}

/* ========================================
   RELATORÍAS - VISTA DE DETALLE (Layout 129)
   Usado por: Resources/Private/Partials/News/Detail/Relatorias.html
   ======================================== */

/* Contenedor de media (imagen + descarga) */
.relatorias-detail__media-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Figura de la imagen de portada */
.relatorias-detail__figure {
    max-width: 262px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0;
}

.relatorias-detail__cover {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.relatorias-detail__cover--placeholder {
    opacity: 0.6;
}

/* Miniatura generada desde primera página del PDF */
.relatorias-detail__cover--pdf-thumb {
    border: 1px solid var(--Neutral-90, #E5E5E5);
}

/* Metadatos FAL debajo de la imagen */
.relatorias-detail__media-title {
    font-family: var(--nunito-font), sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--Neutral-30);
    margin: 0;
    text-align: center;
    max-width: 262px;
}

.relatorias-detail__media-description {
    font-family: var(--nunito-font), sans-serif;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--Neutral-50);
    margin: 0;
    text-align: center;
    max-width: 262px;
}

/* Etiqueta "RELATORIA" */
.relatorias-detail__label {
    font-family: var(--nunito-font), sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 18px;
    color: var(--Primario-50);
    text-transform: uppercase;
    margin: 0 0 0.75rem 0;
    letter-spacing: 0.02em;
}

/* Título principal */
.relatorias-detail__title {
    font-family: var(--nunito-font), sans-serif;
    font-weight: 900;
    font-size: 42px;
    line-height: 42px;
    color: var(--Neutral-0);
    margin: 0 0 1.25rem 0;
}

/* Ocultar la línea amarilla decorativa del h1 global */
.relatorias-detail__title::after {
    display: none;
}

/* Bloque de meta (badge + fecha) */
.relatorias-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Badge PDF */
.relatorias-detail__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 24px;
    padding: 4px 12px 4px 6px;
    border-radius: 16px;
    background-color: var(--Neutral-90);
    color: var(--Neutral-50);
    font-family: var(--nunito-font), sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.relatorias-detail__badge:hover,
.relatorias-detail__badge:focus-visible {
    background-color: var(--Neutral-80, #C9C9C9);
    color: var(--Neutral-30, #333);
    text-decoration: none;
}

.relatorias-detail__badge .material-symbols-outlined {
    font-size: 14px;
}

/* Fecha de publicación */
.relatorias-detail__date {
    font-family: var(--nunito-font), sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: var(--Neutral-50);
}

.relatorias-detail__date strong {
    font-weight: 700;
}

.relatorias-detail__date-value {
    font-weight: 400;
}

/* Botón de descarga */
.relatorias-detail__download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: var(--Primario-50);
    color: var(--Neutral-100, #FFFFFF);
    font-family: var(--nunito-font), sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.25;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    max-width: 262px;
    width: 100%;
    justify-content: center;
}

.relatorias-detail__download:hover,
.relatorias-detail__download:focus-visible {
    background-color: var(--Primario-40);
    color: var(--Neutral-100, #FFFFFF);
    text-decoration: none;
}

.relatorias-detail__download .material-symbols-outlined {
    font-size: 18px;
}

.relatorias-detail__download-text {
    white-space: nowrap;
}

/* Contenido del cuerpo */
.relatorias-detail__content {
    font-family: var(--nunito-font), sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--Neutral-10, #1A1A1A);
}

.relatorias-detail__content p {
    margin-bottom: 1rem;
}

.relatorias-detail__content img {
    max-width: 100%;
    height: auto;
}

/* --- Responsive: Relatorías Detalle --- */

/* Tablet */
@media (max-width: 991.98px) {
    .relatorias-detail__title {
        font-size: 34px;
        line-height: 36px;
    }

    .relatorias-detail__media-wrapper {
        align-items: center;
        margin-bottom: 1.5rem;
    }
}

/* Móvil */
@media (max-width: 575.98px) {
    .relatorias-detail__title {
        font-size: 28px;
        line-height: 30px;
    }

    .relatorias-detail__figure {
        max-width: 220px;
    }

    .relatorias-detail__media-title,
    .relatorias-detail__media-description {
        max-width: 220px;
    }

    .relatorias-detail__download {
        max-width: 220px;
    }
}

/* =================================================================== */
/* LAYOUT: AGENDA DE EVENTOS (130)                                      */
/* Vista de lista de eventos con filtros y tarjetas en grid 2 columnas  */
/* =================================================================== */

/* --- Variables CSS para Agenda de Eventos --- */
.agenda-eventos-list {
    --agenda-card-bg: var(--Primario-98);
    --agenda-card-radius: 8px;
    --agenda-card-padding-x: 24px;
    --agenda-card-padding-y: 16px;
    --agenda-card-gap: 16px;
    --agenda-date-box-size: 50px;
    --agenda-date-box-bg: var(--Primario-50);
    --agenda-date-box-radius: 8px;
    --agenda-divider-color: var(--Primario-60);
    --agenda-title-color: var(--Neutral-30);
    --agenda-text-color: var(--Neutral-20);
    --agenda-muted-color: var(--Neutral-40);
    --agenda-link-color: var(--Primario-40);
    --agenda-modality-bg: var(--Primario-80);
}

/* --- Contenedor principal --- */
.agenda-eventos-list {
    padding: 2rem 0;
}

/* --- Sidebar (columna izquierda) --- */
.agenda-eventos-sidebar {
    position: sticky;
    top: 2rem;
    padding-right: 1.5rem;
}

/* --- Encabezado --- */
.agenda-eventos-header {
    margin-bottom: 1.5rem;
}

.agenda-eventos-header__title {
    font-family: var(--nunito-font);
    font-size: 32px;
    font-weight: 800;
    line-height: 36px;
    color: var(--Neutral-10);
    margin: 0 0 1rem;
}

.agenda-eventos-header__description {
    font-family: var(--nunito-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--Neutral-30);
}

.agenda-eventos-header__description p {
    margin-bottom: 0.5rem;
}

.agenda-eventos-header__description p:last-child {
    margin-bottom: 0;
}

/* --- Filtros (layout vertical en sidebar) --- */
.agenda-eventos-filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Toggle de tiempo (Próximos/Pasados) - horizontal dentro del sidebar */
.agenda-eventos-filters__time-toggle {
    display: flex;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--Primario-50);
}

.agenda-eventos-toggle-btn {
    flex: 1;
    padding: 0.5rem 1rem;
    font-family: var(--nunito-font);
    font-size: 14px;
    font-weight: 600;
    border: none;
    background-color: transparent;
    color: var(--Primario-50);
    cursor: pointer;
    transition: all 0.2s ease;
}

.agenda-eventos-filters__time-toggle .agenda-eventos-toggle-btn:first-child {
    border-right: 1px solid var(--Primario-50);
}

.agenda-eventos-toggle-btn--active,
.agenda-eventos-toggle-btn:hover {
    background-color: var(--Primario-50);
    color: var(--Neutral-100);
}

.agenda-eventos-toggle-btn:focus-visible {
    outline: 2px solid var(--Primario-40);
    outline-offset: 2px;
}

/* Contenedor de selectores en filas separadas */
.agenda-eventos-filters__selects-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Grupo individual de selector con etiqueta arriba */
.agenda-eventos-filters__select-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Etiqueta sobre los selectores */
.agenda-eventos-filters__select-label {
    font-family: var(--nunito-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--Neutral-40);
}

/* Selector de categoría - fondo azul */
.agenda-eventos-filters__category-select {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 1rem;
    font-family: var(--nunito-font);
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    background-color: var(--Primario-80);
    color: var(--Neutral-20);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333333' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.agenda-eventos-filters__category-select:focus-visible {
    outline: 2px solid var(--Primario-40);
    outline-offset: 2px;
}

/* Selector de items por página - fondo azul */
.agenda-eventos-filters__per-page-select {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 1rem;
    font-family: var(--nunito-font);
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    background-color: var(--Primario-70);
    color: var(--Neutral-20);
    cursor: pointer;
    min-width: 120px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333333' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.agenda-eventos-filters__per-page-select:focus-visible {
    outline: 2px solid var(--Primario-40);
    outline-offset: 2px;
}

/* Contador de eventos */
.agenda-eventos-filters__counter {
    font-family: var(--nunito-font);
    font-size: 14px;
    color: var(--Neutral-50);
    padding-top: 0.5rem;
    border-top: 1px solid var(--Neutral-80);
    margin-top: 0.5rem;
}

.agenda-eventos-filters__counter-number {
    font-weight: 700;
    color: var(--Primario-50);
}

/* --- Grid de tarjetas --- */
.agenda-eventos-grid {
    margin-bottom: 2rem;
}

/* --- Tarjeta de evento --- */
.agenda-event-card {
    display: flex;
    gap: var(--agenda-card-gap);
    padding: var(--agenda-card-padding-y) var(--agenda-card-padding-x);
    background-color: var(--agenda-card-bg);
    border-radius: var(--agenda-card-radius);
    min-height: 292px;
    max-width: 362px;
    width: 100%;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.agenda-event-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.agenda-event-card:focus-visible {
    outline: 2px solid var(--Primario-50);
    outline-offset: 2px;
}

/* Columna de fecha */
.agenda-event-card__date-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.agenda-event-card__date-box {
    width: var(--agenda-date-box-size);
    height: var(--agenda-date-box-size);
    background-color: var(--agenda-date-box-bg);
    border-radius: var(--agenda-date-box-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 6px;
    color: var(--Neutral-100);
}

.agenda-event-card__day-short {
    font-family: var(--nunito-font);
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.agenda-event-card__day-number {
    font-family: var(--nunito-font);
    font-size: 24px;
    font-weight: 900;
    margin-top: -10px;
}

.agenda-event-card__month {
    font-family: var(--nunito-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--agenda-muted-color);
    text-transform: uppercase;
    margin-top: 4px;
}

/* Columna de contenido */
.agenda-event-card__content-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Título */
.agenda-event-card__title {
    font-family: var(--nunito-font);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--agenda-title-color);
    margin: 0 0 8px;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.agenda-event-card__title-link {
    color: inherit;
    text-decoration: none;
}

.agenda-event-card__title-link:hover {
    text-decoration: underline;
    color: var(--Primario-40);
}

/* Hora */
.agenda-event-card__time {
    font-family: var(--nunito-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--agenda-text-color);
    margin-bottom: 8px;
}

.agenda-event-card__time-label {
    color: var(--agenda-muted-color);

}

.agenda-event-card__time-value {
    margin-left: 4px;
    color: var(--Primario-50);
}

/* Badge de modalidad */
.agenda-event-card__modality-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background-color: var(--agenda-modality-bg);
    border-radius: 4px;
    font-family: var(--nunito-font);
    font-size: 12px;
    color: var(--Neutral-20);
    margin-bottom: 8px;
    width: fit-content;
}

.agenda-event-card__modality-icon {
    font-size: 16px;
}

.agenda-event-card__modality-label {
    color: var(--agenda-muted-color);
}

.agenda-event-card__modality-value {
    font-weight: 600;
}

/* Teaser */
.agenda-event-card__teaser {
    font-family: var(--nunito-font);
    font-size: 13px;
    line-height: 1.5;
    color: var(--agenda-text-color);
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Divider */
.agenda-event-card__divider {
    border: none;
    border-top: 1px solid var(--agenda-divider-color);
    margin: 0 0 12px;
}

/* Metadata */
.agenda-event-card__metadata {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-family: var(--nunito-font);
    font-size: var(--paragraph-font-size-small) !important;
    color: var(--agenda-muted-color);
    margin-bottom: 12px;
}

.agenda-event-card__metadata-icon {
    font-size: 18px;
    flex-shrink: 0;
}

/* Contenedor de texto RTE - muestra solo los primeros 2 bloques de contenido */
.agenda-event-card__metadata-text {
    line-height: 1.4;
    overflow: hidden;
}

/* Ocultar elementos a partir del tercer hijo directo */
.agenda-event-card__metadata-text > :nth-child(n+3) {
    display: none;
}

/* Estilos RTE para ubicación del evento */
.agenda-event-card__metadata-text p {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
}

.agenda-event-card__metadata-text strong,
.agenda-event-card__metadata-text b {
    font-weight: 700;
}

.agenda-event-card__metadata-text em,
.agenda-event-card__metadata-text i {
    font-style: italic;
}

/* Enlace de acción */
.agenda-event-card__action {
    margin-top: auto;
}

.agenda-event-card__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--nunito-font);
    font-size: 12px;
    font-weight: 900;
    color: var(--agenda-link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.agenda-event-card__link:hover {
    color: var(--Primario-30);
    text-decoration: underline;
}

.agenda-event-card__link-icon {
    font-size: 18px;
}

/* --- No Results --- */
.agenda-eventos-no-results {
    display: none;
    text-align: center;
    padding: 3rem 1rem;
}

.agenda-eventos-no-results__icon {
    font-size: 48px;
    color: var(--Neutral-70);
    margin-bottom: 1rem;
}

.agenda-eventos-no-results__icon .material-symbols-outlined {
    font-size: inherit;
}

.agenda-eventos-no-results__text {
    font-family: var(--nunito-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--Neutral-40);
    margin-bottom: 0.5rem;
}

.agenda-eventos-no-results__hint {
    font-family: var(--nunito-font);
    font-size: 14px;
    color: var(--Neutral-50);
}

/* --- Responsive: Agenda de Eventos --- */

/* Tablet y menor - sidebar se apila encima del contenido */
@media (max-width: 991.98px) {
    .agenda-eventos-sidebar {
        position: static;
        padding-right: 0;
        margin-bottom: 2rem;
    }

    .agenda-eventos-filters {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 1rem;
        background-color: var(--Neutral-98);
        border-radius: 8px;
    }

    .agenda-eventos-filters__time-toggle {
        width: auto;
        flex-shrink: 0;
    }

    .agenda-eventos-toggle-btn {
        flex: none;
        padding: 0.5rem 1rem;
    }

    .agenda-eventos-filters__selects-row {
        display: flex;
        gap: 0.75rem;
        flex: 1;
    }

    .agenda-eventos-filters__select-group {
        flex: 1;
        min-width: 140px;
    }

    .agenda-eventos-filters__counter {
        border-top: none;
        border-left: 1px solid var(--Neutral-80);
        padding-top: 0;
        padding-left: 1rem;
        margin-top: 0;
    }

    .agenda-event-card {
        max-width: 100%;
    }
}

/* Móvil */
@media (max-width: 575.98px) {
    .agenda-eventos-header__title {
        font-size: 26px;
        line-height: 30px;
    }

    .agenda-eventos-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .agenda-eventos-filters__time-toggle {
        width: 100%;
    }

    .agenda-eventos-toggle-btn {
        flex: 1;
    }

    .agenda-eventos-filters__selects-row {
        flex-direction: column;
        gap: 1rem;
    }

    .agenda-eventos-filters__select-group {
        min-width: 0;
    }

    .agenda-eventos-filters__counter {
        border-left: none;
        border-top: 1px solid var(--Neutral-80);
        padding-left: 0;
        padding-top: 0.5rem;
        margin-top: 0.5rem;
        text-align: center;
    }

    .agenda-event-card {
        flex-direction: column;
        padding: 1rem;
    }

    .agenda-event-card__date-col {
        flex-direction: row;
        gap: 8px;
        margin-bottom: 12px;
    }

    .agenda-event-card__month {
        margin-top: 0;
        align-self: center;
    }

    .agenda-event-card__title {
        font-size: 18px;
    }
}

/* ======================================================
   Vista de Detalle de Evento - Agenda de Eventos (130)
   Template: Partials/News/Event/Detail.html
   ====================================================== */

/* Contenedor principal del artículo */
.agenda-event-detail {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Título principal del evento */
.agenda-event-detail__title {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 900;
    font-size: 42px;
    line-height: 1.15;
    color: var(--Neutral-0);
    margin-bottom: 1rem;
}

/* Eliminar barra amarilla global de h1::after */
.agenda-event-detail__title::after {
    display: none;
}

/* Fecha del evento con ícono */
.agenda-event-detail__date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 900;
    font-size: 16px;
    color: var(--Primario-50);
    margin-bottom: 1rem;
}

.agenda-event-detail__date .material-symbols-outlined {
    font-size: 20px;
    color: var(--Primario-50);
}

/* Badge de modalidad */
.agenda-event-detail__modality-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--Primario-80);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--Neutral-0);
    margin-bottom: 1rem;
}

.agenda-event-detail__modality-icon {
    font-size: 18px;
}

.agenda-event-detail__modality-label {
    font-weight: 700;
}

/* Contenedor del bodytext (metadatos tipo enlace, ubicación, etc.) */
.agenda-event-detail__body {
    margin-bottom: 1rem;
}

.agenda-event-detail__body-label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--Neutral-30);
    margin-bottom: 0.25rem;
}

.agenda-event-detail__body-text {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: var(--Neutral-30);
    line-height: 1.5;
}

.agenda-event-detail__body-text p {
    margin-bottom: 0.5rem;
}

.agenda-event-detail__body-text a {
    color: var(--Primario-50);
    text-decoration: underline;
    word-break: break-all;
}

.agenda-event-detail__body-text a:hover,
.agenda-event-detail__body-text a:focus-visible {
    color: var(--Primario-30);
}

/* Columna derecha: Contenedor de media */
.agenda-event-detail__media {
    position: relative;
    margin-bottom: 0.75rem;
}

/* Imagen del evento */
.agenda-event-detail__image {
    width: 100%;
    border-radius: var(--border-radius-md);
    object-fit: cover;
    display: block;
}

/* Botón de expandir imagen */
.agenda-event-detail__expand-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--Neutral-100);
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
}

.agenda-event-detail__expand-btn:hover,
.agenda-event-detail__expand-btn:focus-visible {
    background-color: rgba(0, 0, 0, 0.75);
    outline: 2px solid var(--Neutral-100);
    outline-offset: 2px;
}

.agenda-event-detail__expand-btn .material-symbols-outlined {
    font-size: 22px;
}

/* Metadatos bajo la imagen (descripción, autor) */
.agenda-event-detail__media-meta {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
    color: var(--Neutral-50);
    line-height: 1.5;
    padding-top: 4px;
}

.agenda-event-detail__media-meta-label {
    font-weight: 700;
}

/* ============================
   Lightbox overlay
   ============================ */
.agenda-event-detail__lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.agenda-event-detail__lightbox--active {
    opacity: 1;
    visibility: visible;
}

/* Botón de cerrar lightbox */
.agenda-event-detail__lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--Neutral-100);
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
    z-index: 1;
}

.agenda-event-detail__lightbox-close:hover,
.agenda-event-detail__lightbox-close:focus-visible {
    background-color: rgba(255, 255, 255, 0.3);
    outline: 2px solid var(--Neutral-100);
    outline-offset: 2px;
}

.agenda-event-detail__lightbox-close .material-symbols-outlined {
    font-size: 28px;
}

/* Imagen en el lightbox */
.agenda-event-detail__lightbox-img {
    max-width: 90vw;
    max-height: 90dvh;
    object-fit: contain;
    border-radius: var(--border-radius-sm);
}

/* Anuncio para lectores de pantalla */
.agenda-event-detail__lightbox-announcer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================
   Sección inferior (teaser + content elements)
   ============================ */
.agenda-event-detail__teaser {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.35;
    color: var(--Neutral-30);
    margin-top: 32px;
    margin-bottom: 0;
}

.agenda-event-detail__content-elements {
    margin-top: 24px;
}

/* ============================
   Modificador: Sin imagen
   ============================ */
.agenda-event-detail--no-image .agenda-event-detail__left-col {
    flex: 0 0 100%;
    max-width: 100%;
}

/* ============================
   Responsive: Tablet (768px - 991px)
   ============================ */
@media (max-width: 991px) {
    .agenda-event-detail__title {
        font-size: 36px;
    }

    .agenda-event-detail__teaser {
        font-size: 24px;
    }
}

/* Responsive: Mobile (<768px) */
@media (max-width: 767px) {
    .agenda-event-detail {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .agenda-event-detail__title {
        font-size: 34px;
    }

    .agenda-event-detail__media-col {
        order: -1;
    }

    .agenda-event-detail__teaser {
        font-size: 22px;
        margin-top: 24px;
    }

    .agenda-event-detail__lightbox-img {
        max-width: 95vw;
        max-height: 85dvh;
    }
}

/* =====================================================
   DETALLE COMUNICADO - Vista de detalle para Comunicados (layout 107)
   Partial: Resources/Private/Partials/News/Detail/DetalleComunicado.html
   ===================================================== */

/* Contenedor principal del articulo */
.news-comunicado-detail {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Encabezado del plugin (campo header de tt_content) */
.news-comunicado-detail__plugin-header {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--Primario-50);
    text-align: center;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Titulo principal del comunicado - sin subrayado amarillo */
.news-comunicado-detail__title {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    color: var(--Neutral-10);
    text-align: center;
    margin-bottom: 16px;
    text-decoration: none;
    background-image: none;
    border-bottom: none;
}

/* Desactivar subrayado amarillo en cualquier pseudo-elemento */
.news-comunicado-detail__title::after,
.news-comunicado-detail__title::before {
    display: none;
    content: none;
}

/* Header centrado */
.news-comunicado-detail__header {
    text-align: center;
    margin-bottom: 24px;
}

/* ============================
   Seccion de fecha con linea divisoria
   ============================ */
.news-comunicado-detail__date-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px 0 32px;
}

/* Linea divisoria horizontal */
.news-comunicado-detail__date-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--Primario-50);
    transform: translateY(-50%);
}

/* Badge de fecha centrado sobre la linea */
.news-comunicado-detail__date-badge {
    position: relative;
    z-index: 1;
    background-color: var(--Primario-40);
    color: var(--Neutral-100);
    padding: 4px 12px;
    border-radius: 4px;
    font-family: Verdana, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    text-transform: capitalize;
}

/* ============================
   Contenido principal
   ============================ */
.news-comunicado-detail__body {
    margin-top: 24px;
}

.news-comunicado-detail__content {
    padding-right: 1rem;
}

/* Teaser del comunicado - tipografia Black */
.news-comunicado-detail__teaser {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 900;
    font-size: 18px;
    line-height: 24px;
    color: var(--Neutral-0);
    margin-bottom: 24px;
    vertical-align: middle;
}

/* Texto principal del comunicado */
.news-comunicado-detail__bodytext {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--Neutral-30);
}

.news-comunicado-detail__bodytext p {
    margin-bottom: 1rem;
}

.news-comunicado-detail__bodytext a {
    color: var(--Primario-50);
    text-decoration: underline;
}

.news-comunicado-detail__bodytext a:hover,
.news-comunicado-detail__bodytext a:focus {
    color: var(--Primario-40);
}

/* Content elements adicionales */
.news-comunicado-detail__content-elements {
    margin-top: 24px;
}

/* ============================
   Responsive: Tablet (768px - 991px)
   ============================ */
@media (max-width: 991px) {
    .news-comunicado-detail__title {
        font-size: 32px;
    }
}

/* ============================
   Responsive: Mobile (<768px)
   ============================ */
@media (max-width: 767px) {
    .news-comunicado-detail {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .news-comunicado-detail__title {
        font-size: 28px;
    }

    .news-comunicado-detail__content {
        padding-right: 0;
    }

    .news-comunicado-detail__date-section {
        margin: 16px 0 24px;
    }
}

/* ============================
   Responsive: Mobile pequeño (<576px)
   ============================ */
@media (max-width: 575px) {
    .news-comunicado-detail__date-badge {
        font-size: 11px;
        padding: 4px 10px;
    }

    .news-comunicado-detail__title {
        font-size: 24px;
    }
}

/* =================================================================== */
/* SEARCH AGENDA - Formulario de búsqueda simplificado para agenda      */
/* Componente pill-shaped con diseño minimalista                        */
/* =================================================================== */

.search-agenda-wrapper {
    display: flex;
    align-items: center;
    background-color: var(--Neutral-100);
    border: 1px solid var(--Neutral-40);
    border-radius: 50rem;
    padding: 4px 4px 4px 16px;
    max-width: 400px;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-agenda-wrapper:focus-within {
    border-color: var(--Primario-40);
    box-shadow: 0 0 0 2px rgba(var(--Primario-40-rgb), 0.15);
}

.search-agenda-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--nunito-font);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.4;
    color: var(--Neutral-30);
    padding: 6px 8px;
    outline: none;
    min-width: 0;
}

.search-agenda-input::placeholder {
    color: var(--Neutral-30);
    font-weight: 300;
}

.search-agenda-input:-webkit-autofill,
.search-agenda-input:-webkit-autofill:hover,
.search-agenda-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px var(--Neutral-100) inset !important;
    -webkit-text-fill-color: var(--Neutral-30) !important;
}

.search-agenda-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border: none;
    border-radius: 38px;
    background-color: var(--Neutral-40);
    color: var(--Neutral-100);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.search-agenda-button:hover {
    background-color: var(--Primario-40);
}

.search-agenda-button:focus-visible {
    outline: 2px solid var(--Primario-40);
    outline-offset: 2px;
}

.search-agenda-button .material-symbols-outlined {
    font-size: 22px;
    line-height: 1;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 576px) {
    .search-agenda-wrapper {
        max-width: 100%;
    }

    .search-agenda-input {
        font-size: 16px;
    }
}