/*
 * Estilos específicos del Micrositio OM3 (Observatorio de Migraciones)
 * Este archivo solo se carga en páginas del micrositio OM3
 * Todos los selectores están encapsulados bajo .om3-microsite para evitar colisiones
 */

/* ========================================
   VARIABLES CSS ESPECÍFICAS PARA OM3
   ======================================== */
:root {
    /* Colores del contenedor y elementos del menú */
    --om3-bg-gray: #F2F4F5;
    --om3-text-gray: var(--Neutral-80);
    --om3-text-dark: #383838;
    --om3-icon-blue: var(--Primario-50);
    --om3-separator-cyan: #33B1E8;

    /* Colores para estilos de encabezados OM3 */
    --om3-style-blue: #00A0FF;
    --om3-style-orange: #F95812;
    --om3-style-purple: #504BBA;
    --om3-style-green: #3BC20A;
    --om3-style-pink: #F30C97;

    /* Colores de la barra decorativa inferior (5 bloques) */
    --om3-bar-cyan: #33B1E8;
    --om3-bar-indigo: #4C39A3;
    --om3-bar-magenta: #E91E63;
    --om3-bar-green: #43A047;
    --om3-bar-orange: #E65100;

    /* Dimensiones y espaciado del menú */
    --om3-nav-max-width: 1140px;
    --om3-nav-border-radius: 16px;
    --om3-bar-height: 6px;
    --om3-separator-width: 1px;

    /* OM3 Publications (Publicaciones) Color Palette */
    --om3pub-title:       #91085A;  /* encabezados y texto de chips */
    --om3pub-chip-bg:     #DEA0C5;  /* chips de categoría no seleccionados */
    --om3pub-overlay:     #4F1B3A;  /* fondo overlay de tarjetas */
    --om3pub-badge-bg:    #FBABDB;  /* fondo del badge PDF */
    --om3pub-badge-text:  #4F1B3A;  /* texto del badge */
    --om3pub-cta:         #D90B86;  /* botón "Ver documento" */
    --om3pub-detail-bar:  #F31299;  /* barra vertical en vista de detalle */
    --om3pub-detail-btn:  #A80968;  /* botón "Descargar documento" */

    /* OM3 Knowledge Capsule (Cápsulas de Conocimiento) Color Palette */
    --capsula-primary:     #F95812;  /* barra de acento y etiquetas de categoría */
    --capsula-chip-bg:     #F98058;  /* fondo de chips no seleccionados */
    --capsula-overlay:     #471200;  /* overlay oscuro en tarjetas */
    --capsula-badge-bg:    #F98058;  /* fondo del badge PDF/tipo */
    --capsula-badge-text:  #471200;  /* texto del badge */
    --capsula-cta-bg:      #DA4800;  /* botón "Ver cápsula" */
    --capsula-detail-bar:  #F95812;  /* barra vertical en detalle */
    --capsula-detail-btn:  #DA4800;  /* botón "Descargar PDF" */

    /* OM3 Microdatos (Descargas) Color Palette */
    --om3micro-primary:       #2C9108;  /* verde principal para iconos, sidebar, estados activos */
    --om3micro-primary-light: #A4F985;  /* verde claro para fondo de chips */
    --om3micro-card-bg:       #F0F0F0;  /* fondo gris de tarjetas */
    --om3micro-sidebar:       #2C9108;  /* sidebar de descarga */
    --om3micro-chip-active:   #2C9108;  /* chip/filtro activo */
    --om3micro-title:         #2C9108;  /* títulos de sección y acentos */
    --om3micro-badge-bg:      #2C9108;  /* fondo del badge de tipo de archivo */
    --om3micro-badge-text:    #FFFFFF;  /* texto del badge */

    /* OM3 Tableros (Dashboards) Color Palette */
    --tablero-primary:        #22A93E;  /* verde principal para encabezados y barras */
    --tablero-chip-bg:        #E6F5EA;  /* fondo de chips no seleccionados */
    --tablero-chip-text:      #11642C;  /* texto de chips */
    --tablero-chip-active-bg: #1F7E2D;  /* fondo de chip seleccionado */
    --tablero-card-bg:        #154404;  /* fondo de la sección de contenido de tarjetas */
    --tablero-btn-primary:    #1F7E2D;  /* botón verde oscuro */
    --tablero-btn-secondary:  #75CC6B;  /* botón verde claro */
    --tablero-btn-hover:      #145C20;  /* hover de botones primarios */
    --tablero-detail-bar:     #22A93E;  /* barra vertical en vista de detalle */
    --tablero-detail-download:#22A93E;  /* botón de descarga */
    --tablero-detail-external:#75CC6B;  /* botón de enlace externo */

    /* Colores semánticos para estados */
    --om3-error:              #E53935;  /* color de error/validación */
}

/* ========================================
   SISTEMA DE ALINEACIÓN VERTICAL OM3
   Sincroniza el ancho de componentes del home con el menú OM3
   Todos usan max-width: var(--om3-nav-max-width) para alinearse verticalmente
   ======================================== */

/* Aplicar alineación a componentes principales del home OM3 */
.om3-social-header__content,
.om3-migration-section,
.om3-informes-section .col-xl-10 > *,
.om3-bottom-grid {
    max-width: var(--om3-nav-max-width, 1140px);
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   ALINEACIÓN DE PÁGINAS INTERNAS OM3
   Aplica max-width 1140px a contenido de páginas internas
   ======================================== */

/* Contenido principal de páginas internas */
.om3-microsite .om3-inner-content,
.om3-microsite main > .container-fluid > .row > .col-xl-10 > * {
    max-width: var(--om3-nav-max-width, 1140px);
    margin-left: auto;
    margin-right: auto;
}

/* Hero de páginas internas con imagen */
.om3-hero {
    max-width: var(--om3-nav-max-width, 1140px);
    margin-left: auto;
    margin-right: auto;
}

/* Contenido después del hero (frames de TYPO3) */
.om3-microsite .frame-default,
.om3-microsite .frame-type-textmedia,
.om3-microsite .frame-type-text,
.om3-microsite .frame-type-image {
    max-width: var(--om3-nav-max-width, 1140px);
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   CONTENEDOR GENERAL DEL MICROSITIO
   ======================================== */
.om3-microsite {
    font-family: 'Nunito Sans';
    position: relative; /* Contexto de posicionamiento para hero background */
}

/* ========================================
   NAVEGACIÓN DEL MICROSITIO OM3
   ======================================== */

/* Contenedor externo - solo estructura, sin fondo */
.om3-nav-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    /* Sin background-color aquí - el fondo está en .om3-nav-content */
}

/* Contenedor de contenido con el fondo y bordes (limitado al ancho col-xl-10) */
.om3-nav-content {
    position: relative;
    max-width: var(--om3-nav-max-width, 1140px); /* Sincronizar con carousel */
    margin: 0 auto; /* Centrar dentro de col-xl-10 */
    background-color: var(--om3-bg-gray);
    border-radius: var(--om3-nav-border-radius) var(--om3-nav-border-radius) 0 0;
    overflow: visible; /* Permitir que el dropdown se extienda más allá del contenedor */
}

.card a:not(.btn) {
    color: var(--Neutral-100) !important;
}

.om3-tableros-card__title a {
    color: var(--Neutral-100) !important;
}

/* Barra decorativa de 5 colores (dentro de .om3-nav-content) */
.om3-bar-decorator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--om3-bar-height);
    background: linear-gradient(
        to right,
        var(--om3-bar-cyan) 0%,
        var(--om3-bar-cyan) 15%,
        var(--om3-bar-indigo) 15%,
        var(--om3-bar-indigo) 40%,
        var(--om3-bar-magenta) 40%,
        var(--om3-bar-magenta) 60%,
        var(--om3-bar-green) 60%,
        var(--om3-bar-green) 85%,
        var(--om3-bar-orange) 85%,
        var(--om3-bar-orange) 100%
    );
}

/* ========================================
   OM3 MOBILE HAMBURGER - Estado por defecto (Desktop)
   En desktop, la cabecera móvil está oculta y el menú visible
   ======================================== */
.om3-mobile-header {
    display: none;
}

.om3-nav-collapse {
    display: block;
}

/* Contenedores de dos columnas - transparentes en desktop */
.om3-mobile-columns {
    display: block;
}

.om3-column-left {
    display: block;
}

/* Columna derecha oculta en desktop */
.om3-column-right {
    display: none;
}

.om3-nav {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    margin: 0;
    padding: 0 0.5rem;
    list-style: none;
}

.om3-nav .nav-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    flex: 1 1 auto;
    background-image: linear-gradient(
        to bottom,
        transparent 0.5rem,
        var(--om3-separator-cyan) 0.5rem,
        var(--om3-separator-cyan) calc(100% - 0.5rem),
        transparent calc(100% - 0.5rem)
    );
    background-position: right;
    background-size: var(--om3-separator-width) 100%;
    background-repeat: no-repeat;
}

/* Eliminar separador del último ítem */
.om3-nav .nav-item:last-child {
    background-image: none;
}

.om3-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--om3-text-dark);
    padding: 1rem 0.25rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.om3-nav .nav-link:hover {
    color: var(--om3-bar-indigo);
    background-color: rgba(var(--Neutral-90), 0.5);
}

.om3-nav .nav-link .om3-nav-icon {
    margin-right: 0.5rem;
    font-size: 16px;
    line-height: 1;
    color: var(--om3-icon-blue);
}

.om3-nav .nav-link .om3-nav-label {
    font-size: 13px;
    font-weight: bold;
}

/* Estado activo del ítem del menú */
.om3-nav .nav-item.active .nav-link {
    color: var(--om3-bar-indigo);
    font-weight: 700;
}

/* ========================================
   DROPDOWN DEL MENÚ OM3 (Segundo nivel)
   ======================================== */

/* Item con dropdown */
.om3-nav .nav-item.om3-has-dropdown {
    position: relative;
}

/* Botón toggle del dropdown */
.om3-nav .om3-dropdown-toggle {
    border: none;
    background: transparent;
    cursor: pointer;
    gap: 0.25rem;
}

/* Flecha del dropdown - apunta hacia abajo en desktop (chevron_right rotado 90deg) */
.om3-nav .om3-dropdown-arrow {
    font-size: 13px;
    transition: transform 0.3s ease;
    margin-left: 0.25rem;
    transform: rotate(90deg); /* Rotar chevron_right para que apunte hacia abajo */
}

/* Flecha rotada hacia arriba cuando está abierto en desktop */
.om3-nav .nav-item.om3-dropdown-open .om3-dropdown-arrow {
    transform: rotate(-90deg);
}

/* Contenedor del dropdown */
.om3-nav .om3-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background-color: var(--om3-bg-gray);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 100;
}

/* Dropdown abierto */
.om3-nav .nav-item.om3-dropdown-open .om3-dropdown {
    opacity: 1;
    visibility: visible;
}

/* Enlaces del dropdown */
.om3-nav .om3-dropdown-link {
    display: block;
    padding: 0.625rem 1rem;
    color: var(--om3-text-dark);
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.om3-nav .om3-dropdown-link:hover {
    background-color: rgba(var(--Neutral-90), 0.5);
    color: var(--om3-bar-indigo);
}

.om3-nav .om3-dropdown-link.active {
    color: var(--om3-bar-indigo);
    font-weight: 700;
    background-color: rgba(var(--Primario-70-rgb), 0.1);
}

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

/* ========================================
   SECCIONES DEL HOME
   ======================================== */
.om3-slider-section {
    margin-bottom: 2rem;
}

/* Sección con fondo gris para informes y publicaciones */
.bg-om3-grey {
    background-color: var(--om3micro-card-bg);
}

/* Fila de agenda, noticias y redes sociales */
.om3-agenda-news-section > div {
    display: flex;
    flex-direction: column;
}

/* ========================================
   HERO SECTION (Páginas internas con imagen)
   ======================================== */
.om3-hero {
    position: relative;
    width: 100%;
    min-height: 350px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 0 0 var(--om3-nav-border-radius) var(--om3-nav-border-radius);
    overflow: hidden;
}

/* Caja del título posicionada en esquina inferior izquierda */
.om3-hero-title-box {
    position: absolute;
    bottom: 56px;  /* Distancia al borde inferior de la imagen según Figma */
    left: 0;
    background-color: var(--Neutral-100);
    padding: 1rem 2rem;
    max-width: 60%;
}

.om3-hero-title {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--Neutral-0);
    line-height: 1.2;
}

/* Caja de metadatos de imagen */
.om3-hero-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.85);
    height: 56px;              /* Altura fija según Figma */
    padding: 0 40px;           /* 40px padding izquierdo/derecho según Figma */
    display: flex;
    align-items: center;       /* Centrado vertical del contenido */
    gap: 0.5rem;
    max-width: 60%;
}

.om3-hero-meta-icon {
    color: var(--Primario-50, #0072CE);
    flex-shrink: 0;
}

.om3-hero-meta-icon .material-symbols-outlined {
    font-size: 1.25rem;
    color: var(--Neutral-100);
}

.om3-hero-meta-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.om3-hero-meta-description,
.om3-hero-meta-author {
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    color: var(--Neutral-100);
    line-height: 16px;
}

.om3-hero-meta-description strong,
.om3-hero-meta-author strong {
    color: var(--Primario-70,);
}

/* ========================================
   UTILIDADES Y HELPERS
   ======================================== */

/* Clase para ocultar badge placeholder (mantiene altura consistente) */
.om3-badge--placeholder {
    visibility: hidden;
}

/* Clase para ocultar mensaje de no resultados (JavaScript toggleará display) */
.om3-no-results--hidden {
    display: none;
}

/* Ancho máximo para media wrapper de video */
.om3-capsulas-detail__media-wrapper--video {
    max-width: 100%;
}

/* Asegurar que las columnas tengan la misma altura en desktop */
@media (min-width: 768px) {
    .om3-agenda-news-section > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }
}

/* ========================================
   BARRA SUPERIOR OM3 - Estilos base
   Nota: Estilos principales en sección "BARRA SUPERIOR OM3" más abajo
   ======================================== */

/* Logotipo y nombre - estilos base */

/* Logotipo del Observatorio */
.om3-social-header__logo {
    height: 48px;
    width: auto;
    object-fit: contain;
}

/* Nombre oficial del Observatorio (texto en SVG) */
.om3-social-header__name {
    height: 42px;
    width: auto;
    object-fit: contain;
    max-width: 280px;
}

/* ========================================
   RESPONSIVIDAD
   ======================================== */

/* ========================================
   DESKTOP AMPLIO CON RESTRICCIÓN col-xl-10 (1400px - 1599px)
   Primer paso: ocultar iconos cuando el contenido empieza a ajustarse
   ======================================== */
@media (min-width: 1400px) and (max-width: 1599.98px) {
    /* PRIORIDAD 1: Ocultar iconos para ahorrar espacio dentro de col-xl-10 */
    .om3-nav .nav-link .om3-nav-icon,
    .om3-nav .om3-dropdown-toggle .om3-nav-icon {
        display: none;
    }

    /* Reducir padding ligeramente */
    .om3-nav .nav-item {
        padding: 0 0.4rem;
    }

    .om3-nav .nav-link,
    .om3-nav .om3-dropdown-toggle {
        padding: 0.85rem 0.25rem;
    }

    /* Mantener tamaño de fuente relativamente grande */
    .om3-nav .nav-link .om3-nav-label,
    .om3-nav .om3-dropdown-toggle .om3-nav-label {
        font-size: 0.9rem;
    }

    /* Flecha dropdown ligeramente más pequeña */
    .om3-nav .om3-dropdown-arrow {
        font-size: 1rem;
        margin-left: 0.15rem;
    }

    /* MANTENER: flex-wrap: nowrap (inherited from base) */
    /* Intentar mantener línea única sin iconos */
}

/* ========================================
   DESKTOP MEDIO (1200px - 1399px)
   Spacing más agresivo cuando col-xl-10 está más restringido
   ======================================== */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* Ocultar iconos para ahorrar espacio */
    .om3-nav .nav-link .om3-nav-icon,
    .om3-nav .om3-dropdown-toggle .om3-nav-icon {
        display: none;
    }

    /* Reducir padding para maximizar espacio */
    .om3-nav .nav-item {
        padding: 0 0.25rem;
    }

    .om3-nav .nav-link,
    .om3-nav .om3-dropdown-toggle {
        padding: 0.75rem 0.2rem;
    }

    /* Reducir tamaño de fuente moderadamente */
    .om3-nav .nav-link .om3-nav-label,
    .om3-nav .om3-dropdown-toggle .om3-nav-label {
        font-size: 0.85rem;
    }

    /* Reducir tamaño de flecha dropdown */
    .om3-nav .om3-dropdown-arrow {
        font-size: 0.9rem;
        margin-left: 0.1rem;
    }
}

/* ========================================
   TABLET VIEW (992px - 1199px)
   Escalar proporcionalmente para que todos los items quepan
   ======================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Contenedor: sin overflow hidden para permitir dropdown */
    .om3-nav-content {
        overflow: visible;
    }

    /* Nav: permitir wrapping como último recurso */
    .om3-nav {
        flex-wrap: wrap;
        padding: 0 0.25rem;
    }

    /* Reducir tamaño de fuente en labels - más pequeño */
    .om3-nav .nav-link .om3-nav-label {
        font-size: 0.65rem;
    }

    /* Ocultar iconos para ahorrar espacio */
    .om3-nav .nav-link .om3-nav-icon {
        display: none;
    }

    /* Ocultar iconos en dropdown toggle también */
    .om3-nav .om3-dropdown-toggle .om3-nav-icon {
        display: none;
    }

    /* Reducir padding de los enlaces */
    .om3-nav .nav-link {
        padding: 0.5rem 0.1rem;
    }

    /* Reducir tamaño de flecha dropdown */
    .om3-nav .om3-dropdown-arrow {
        font-size: 0.9rem;
        margin-left: 0.05rem;
    }

    /* Reducir gap del toggle */
    .om3-nav .om3-dropdown-toggle {
        gap: 0.05rem;
        padding: 0.5rem 0.1rem;
    }

    /* Reducir tamaño de fuente en toggle labels */
    .om3-nav .om3-dropdown-toggle .om3-nav-label {
        font-size: 0.65rem;
    }

    /* Items más compactos */
    .om3-nav .nav-item {
        padding: 0 0.1rem;
    }

    /* Asegurar que nav-item tiene position relative para dropdown */
    .om3-nav .nav-item.om3-has-dropdown {
        position: relative;
    }

    /* Dropdown en tablet: posición y visibilidad */
    .om3-nav .om3-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        transform: none;
        min-width: 180px;
        z-index: 1000;
    }
}

/* Mobile y pantallas pequeñas (<992px) */
@media (max-width: 991.98px) {
    /* ========================================
       MENÚ OM3 RESPONSIVE - LAYOUT DOS COLUMNAS
       Columna izquierda: items principales
       Columna derecha: subpáginas del item seleccionado
       ======================================== */

    /* Contenedor de dos columnas para el menú móvil */
    .om3-mobile-columns {
        display: flex;
        width: 100%;
        min-height: 280px;
    }

    /* Columna izquierda: items principales (50% width) */
    .om3-column-left {
        flex: 0 0 50%;
        max-width: 50%;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }

    /* Columna derecha: subpáginas (50% width) */
    .om3-column-right {
        display: block; /* Mostrar en móvil (oculto por defecto en desktop) */
        flex: 0 0 50%;
        max-width: 50%;
        position: relative;
        overflow-y: auto;
        background-color: rgba(0, 0, 0, 0.02);
    }

    /* Contenedor de navegación: vertical */
    .om3-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
    }

    /* Items ocupan todo el ancho, sin separadores verticales */
    .om3-nav .nav-item {
        width: 100%;
        padding: 0;
        flex: none;
        background-image: none; /* Eliminar separador vertical */
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        /* Sin overflow: hidden para evitar cortar contenido del dropdown-toggle */
    }

    .om3-nav .nav-item:last-child {
        border-bottom: none;
    }

    /* Links con padding aumentado para touch (WCAG 48px) */
    .om3-nav .nav-link {
        padding: 0.875rem 1rem;
        min-height: 48px;
        justify-content: flex-start;
        width: 100%;
        white-space: normal;  /* Permitir que el texto se ajuste */
        text-align: left;
    }

    /* Toggle del dropdown y nav-link: mismos estilos en móvil */
    .om3-nav .nav-link,
    .om3-nav .om3-dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 0.875rem 1rem !important;
        min-height: 48px;
        white-space: normal !important;
        text-align: left !important;
    }

    /* Icono en móvil - mismo estilo para nav-link y dropdown-toggle */
    .om3-nav .nav-link .om3-nav-icon,
    .om3-nav .om3-dropdown-toggle .om3-nav-icon {
        font-size: 1.2rem;
        margin-right: 0.5rem;
        flex-shrink: 0;
    }

    /* Label en móvil - mismo estilo para nav-link y dropdown-toggle */
    .om3-nav .nav-link .om3-nav-label,
    .om3-nav .om3-dropdown-toggle .om3-nav-label {
        flex: 1;
        white-space: normal !important;
        word-break: normal;
        text-align: left;
        font-size: 0.85rem;
        line-height: 1.3;
    }

    /* Flecha del dropdown a la derecha - resetear rotación de desktop, apunta a la derecha */
    .om3-nav .om3-dropdown-arrow {
        margin-left: auto;
        flex-shrink: 0;
        font-size: 1.1rem;
        transition: transform 0.2s ease;
        transform: rotate(0deg); /* Resetear rotación de desktop - apunta a la derecha */
    }

    /* Flecha apunta a la izquierda cuando está abierto (rotación 180deg) */
    .om3-nav .nav-item.om3-dropdown-open .om3-dropdown-arrow {
        transform: rotate(180deg);
    }

    /* Dropdown oculto en columna izquierda - se muestra en columna derecha via JS */
    .om3-nav .om3-dropdown {
        display: none;
    }

    /* Dropdown visible en columna derecha */
    .om3-column-right .om3-dropdown {
        display: block;
        position: static;
        width: 100%;
        max-height: none;
        height: auto;
        opacity: 1;
        visibility: visible;
        background-color: transparent;
        border-radius: 0;
        box-shadow: none;
        padding: 0.5rem 0;
        margin: 0;
        list-style: none;
    }

    /* Item con dropdown: posición relativa */
    .om3-nav .nav-item.om3-has-dropdown {
        position: relative;
    }

    /* Links del dropdown en columna derecha - sin indent extra */
    .om3-column-right .om3-dropdown-link {
        padding: 0.75rem 1rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        /* Permitir wrap de texto largo */
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        text-align: left;
        font-size: 0.9rem;
        color: var(--Neutral-30);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        max-width: 100%;
        box-sizing: border-box;
    }

    .om3-column-right .om3-dropdown-link:last-child {
        border-bottom: none;
    }

    .om3-column-right .om3-dropdown-link:hover,
    .om3-column-right .om3-dropdown-link.active {
        font-weight: 700;
        color: var(--Neutral-10);
        background-color: rgba(0, 0, 0, 0.03);
    }

    /* ========================================
       OM3 MOBILE HAMBURGER - Estilos móviles
       Cabecera con hamburguesa y menú colapsable
       ======================================== */

    /* Cabecera móvil - centrada por defecto, izquierda cuando abierto */
    .om3-mobile-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1rem;
        background-color: var(--om3-bg-gray);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        transition: justify-content 0.2s ease;
    }

    /* Cuando el menú está abierto, alinear a la izquierda como otros items */
    .om3-mobile-header:has(.om3-hamburger[aria-expanded="true"]) {
        justify-content: flex-start;
        padding-left: 1.25rem;
    }

    /* Botón hamburguesa con icono + texto */
    .om3-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 48px;
        padding: 0.5rem 1rem;
        border: none;
        background: transparent;
        cursor: pointer;
        border-radius: 4px;
    }

    .om3-hamburger:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }


    /* Icono hamburguesa (3 líneas) - color oscuro por defecto */
    .om3-hamburger-icon {
        display: block;
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23383838' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        flex-shrink: 0;
    }

    /* Texto "Menú" - color oscuro por defecto */
    .om3-hamburger-label {
        font-family: 'Nunito Sans', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        color: var(--Neutral-30);
    }

    /* === ESTADO EXPANDIDO: icono X y color azul #0084D3 === */

    /* Icono X cuando el menú está abierto - color azul */
    .om3-hamburger[aria-expanded="true"] .om3-hamburger-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230084D3' stroke-linecap='round' stroke-width='2' d='M7 7l16 16M23 7L7 23'/%3e%3c/svg%3e");
    }

    /* Texto "Menú" en azul cuando abierto */
    .om3-hamburger[aria-expanded="true"] .om3-hamburger-label {
        color: #0084D3;
    }

    /* Contenedor colapsable - oculto por defecto en móvil */
    .om3-nav-collapse {
        display: none;
        overflow: hidden;
    }

    /* Menú abierto con animación */
    .om3-nav-collapse.om3-nav-open {
        display: block;
        animation: om3SlideDown 0.3s ease-out;
    }

    @keyframes om3SlideDown {
        from {
            opacity: 0;
            max-height: 0;
        }
        to {
            opacity: 1;
            max-height: 1000px;
        }
    }

    /* Animación de cierre */
    .om3-nav-collapse.om3-nav-closing {
        display: block;
        animation: om3SlideUp 0.25s ease-in forwards;
    }

    @keyframes om3SlideUp {
        from {
            opacity: 1;
            max-height: 1000px;
        }
        to {
            opacity: 0;
            max-height: 0;
        }
    }

    .om3-hero-title {
        font-size: 2rem;
    }

    /* Barra Social: ajustes para tablets */
    .om3-social-header {
        padding: 0.875rem 1rem;
    }

    .om3-social-header__logo {
        height: 42px;
    }

    .om3-social-header__name {
        height: 36px;
        max-width: 240px;
    }

    .om3-social-links {
        gap: 1.25rem;
    }
}

/* Móviles - Ajustes adicionales para pantallas pequeñas */
@media (max-width: 767.98px) {
    /* Contenedor de contenido: sin border-radius en móvil */
    .om3-nav-content {
        max-width: 100%;
        border-radius: 0;
    }

    /* Menú: ajustes de tamaño para móviles */
    .om3-nav .nav-link {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
    }

    .om3-nav .nav-link .om3-nav-icon {
        font-size: 1.2rem;
        margin-right: 0.5rem;
    }

    .om3-nav .nav-link .om3-nav-label {
        font-size: 0.9rem;
    }

    /* Dropdown links más compactos en móvil - mantener wrap */
    .om3-nav .om3-dropdown-link {
        padding: 0.875rem 1.25rem 0.875rem 2.5rem;
        font-size: 1rem;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Hero más compacto en móvil, sin border-radius */
    .om3-hero {
        min-height: 250px;
        border-radius: 0;
    }

    .om3-hero-title-box {
        bottom: 44px;  /* Escalado proporcional desde 56px */
        padding: 0.75rem 1.25rem;
        max-width: 80%;
    }

    .om3-hero-title {
        font-size: 1.5rem;
    }

    .om3-hero-meta {
        height: 44px;           /* Escalado proporcional desde 56px */
        padding: 0 20px;        /* Escalado proporcional desde 40px */
        max-width: 90%;
    }

    .om3-hero-meta-description,
    .om3-hero-meta-author {
        font-size: 0.75rem;
    }

    /* Secciones más compactas en móvil */
    .om3-slider-section {
        margin-bottom: 1rem;
    }

    .bg-om3-grey {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Barra Social: ajustes para móviles */
    .om3-social-header {
        max-width: 100%;
        padding: 1rem 0.75rem;
        border-bottom: 1px solid var(--om3-separator-cyan);
    }

    /* Apilar zonas en móvil */
    .om3-social-header__identity,
    .om3-social-header__social {
        justify-content: center !important;
        text-align: center;
        margin-bottom: 0.75rem;
    }

    .om3-social-header__social {
        margin-bottom: 0;
    }

    /* Reducir tamaño de logotipos */
    .om3-social-header__logo {
        height: 36px;
    }

    .om3-social-header__name {
        height: 32px;
        max-width: 200px;
    }

    /* Enlaces en dos filas si es necesario */
    .om3-social-links {
        gap: 1rem;
        justify-content: center;
    }

    .om3-social-link {
        font-size: 0.8rem;
    }

    .om3-social-icon {
        width: 28px;
        height: 28px;
        padding: 5px;
    }

    .om3-social-text {
        font-size: 0.8rem;
    }
}

/* Pantallas muy pequeñas */
@media (max-width: 575.98px) {
    /* Menú: tamaños más compactos para pantallas muy pequeñas */
    .om3-nav .nav-link {
        padding: 0.75rem 0.875rem;
        min-height: 44px;
    }

    .om3-nav .nav-link .om3-nav-icon {
        font-size: 1.1rem;
        margin-right: 0.5rem;
    }

    .om3-nav .nav-link .om3-nav-label {
        font-size: 0.85rem;
    }

    .om3-nav .om3-dropdown-link {
        padding: 0.625rem 1rem 0.625rem 2rem;
        font-size: 0.85rem;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Barra Social: ajustes adicionales para pantallas muy pequeñas */
    .om3-social-links {
        gap: 0.75rem;
    }

    .om3-social-header__name {
        max-width: 160px;
    }
}

/* ========================================
   ACCESIBILIDAD - MENÚ OM3
   ======================================== */

/* Focus visible para navegación por teclado - hereda de regla global en theme.css */
.om3-nav .om3-dropdown-link:focus-visible {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Reducir movimiento para usuarios que lo prefieran (WCAG) */
@media (prefers-reduced-motion: reduce) {
    .om3-nav .om3-dropdown,
    .om3-nav .om3-dropdown-arrow,
    .om3-nav .nav-link {
        transition: none;
    }
}

/* Asegurar que los overlays tengan suficiente contraste */
.om3-hero-overlay {
    /* Contraste mejorado para cumplir WCAG AA */
}

/* ========================================
   IMPRESIÓN
   ======================================== */
@media print {
    .om3-nav-container {
        display: none;
    }

    .om3-hero {
        min-height: 200px;
        page-break-inside: avoid;
    }

    .om3-hero-overlay {
        background: rgba(0, 0, 0, 0.3);
    }
}

/* ========================================
   ESTILOS DE ENCABEZADOS OM3
   (Aplicados directamente al elemento h1/h2/h3)
   ======================================== */

/* Patrón A: Barra Inferior */
h1::after {
    background-color: transparent !important;
}
.om3-header-bottom-blue {
    padding-bottom: 0.75rem !important;
    border-bottom: 5px solid var(--om3-style-blue) !important;
    margin-bottom: 1.5rem !important;
}

.om3-header-bottom-orange {
    padding-bottom: 0.75rem !important;
    border-bottom: 5px solid var(--om3-style-orange) !important;
    margin-bottom: 1.5rem !important;
}

.om3-header-bottom-purple {
    padding-bottom: 0.75rem !important;
    border-bottom: 5px solid var(--om3-style-purple) !important;
    margin-bottom: 1.5rem !important;
}

.om3-header-bottom-green {
    padding-bottom: 0.75rem !important;
    border-bottom: 5px solid var(--om3-style-green) !important;
    margin-bottom: 1.5rem !important;
}

.om3-header-bottom-pink {
    padding-bottom: 0.75rem !important;
    border-bottom: 5px solid var(--om3-style-pink) !important;
    margin-bottom: 1.5rem !important;
}

/* Patrón B: Rectángulo Lateral Izquierdo (con flexbox en header) */

.om3-header-left-blue,
.om3-header-left-orange,
.om3-header-left-purple,
.om3-header-left-green,
.om3-header-left-pink {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 1.5rem !important;
}

.om3-header-left-blue::before,
.om3-header-left-orange::before,
.om3-header-left-purple::before,
.om3-header-left-green::before,
.om3-header-left-pink::before {
    content: "" !important;
    flex-shrink: 0 !important;
    width: 72px !important;
    align-self: stretch !important;
}

.om3-header-left-blue::before {
    background-color: var(--om3-style-blue) !important;
}

.om3-header-left-orange::before {
    background-color: var(--om3-style-orange) !important;
}

.om3-header-left-purple::before {
    background-color: var(--om3-style-purple) !important;
}

.om3-header-left-green::before {
    background-color: var(--om3-style-green) !important;
}

.om3-header-left-pink::before {
    background-color: var(--om3-style-pink) !important;
}

/* ========================================
   RESPONSIVIDAD - ESTILOS DE ENCABEZADOS
   ======================================== */

/* Móviles: Reducir ancho del rectángulo lateral */
@media (max-width: 767.98px) {
    .om3-header-left-blue::before,
    .om3-header-left-orange::before,
    .om3-header-left-purple::before,
    .om3-header-left-green::before,
    .om3-header-left-pink::before {
        width: 15px !important;
    }

    .om3-header-left-blue,
    .om3-header-left-orange,
    .om3-header-left-purple,
    .om3-header-left-green,
    .om3-header-left-pink {
        gap: 12px !important;
    }
}

/* ========================================
   OM3 INFORMES - LISTA DE INFORMES
   ======================================== */

/* Contenedor principal del listado */
.om3-informes-list {
    padding: 2rem 0;
}

/* Encabezado con título y controles */
.om3-informes-header {
    margin-bottom: 1.5rem;
}

.om3-informes-header__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.om3-informes-header__title-area {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Barra lateral decorativa del título - 72x32px */
.om3-informes-header__bar {
    width: 72px;
    height: 32px;
    background-color: var(--om3lastnews-bar);
    border-radius: 0;
    flex-shrink: 0;
}

/* Título principal - 28px, bold, 32px line-height */
.om3-informes-header__title {
    font-family: var(--h1-font-family);
    font-size: 28px;
    font-weight: 700;
    color: var(--om3lastnews-title);
    margin: 0;
    line-height: 32px;
}

/* Contenedor del título */
.om3-informes-header__title-content {
    flex-shrink: 0;
}

/* Texto meta a la derecha del título */
.om3-informes-header__meta {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-small);
    color: var(--Neutral-60);
    line-height: 1.4;
}

/* Contador de documentos dentro del meta */
.om3-informes-header__count {
    display: inline;
    font-weight: 400;
    color: var(--Neutral-60);
}

/* Controles de filtrado (año y búsqueda) */
.om3-informes-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.om3-informes-controls__select {
    min-width: 180px;
    padding: 0.5rem 2rem 0.5rem 1rem;
    font-family: var(--nunito-font);
    font-size: var(--paragraph-font-size-small);
    color: var(--Neutral-30);
    background-color: var(--Neutral-100);
    border: 1px solid var(--Neutral-80);
    border-radius: 6px;
    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' fill='%23383838'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25rem;
}

.om3-informes-controls__search {
    position: relative;
    min-width: 220px;
}

.om3-informes-controls__search-input {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-family: var(--nunito-font);
    font-size: var(--paragraph-font-size-small);
    color: var(--Neutral-30);
    background-color: var(--Neutral-100);
    border: 1px solid var(--Neutral-80);
    border-radius: 6px;
}

.om3-informes-controls__search-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--Neutral-50);
    display: flex;
    align-items: center;
    justify-content: center;
}

.om3-informes-controls__search-btn:hover {
    color: var(--om3-style-purple);
}

/* Chips de filtro por categoría */
.om3-informes-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.om3-informes-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-family: var(--nunito-font);
    font-size: var(--caption-font-size);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.om3-informes-chip--default {
    background-color: rgba(80, 75, 186, 0.12);
    color: var(--om3-style-purple);
}

.om3-informes-chip--default:hover {
    background-color: rgba(80, 75, 186, 0.2);
    color: var(--om3-style-purple);
}

.om3-informes-chip--active {
    background-color: var(--om3-style-purple) !important;
    color: var(--Neutral-100) !important;
}

.om3-informes-chip--active:hover {
    background-color: var(--om3lastnews-chip-hover) !important;
    color: var(--Neutral-100) !important;
}

.om3-informes-chip__close {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}


/* Grid de tarjetas */
.om3-informes-grid {
    margin-top: 1.5rem;
}

/* ========================================
   OM3 INFORMES - PAGINACIÓN
   ======================================== */

.om3-informes-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.om3-informes-pagination__wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--om3-style-purple);
    border-radius: 8px;
}

.om3-informes-pagination__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    font-family: var(--nunito-font);
    font-size: var(--paragraph-font-size-small);
    font-weight: 600;
    color: var(--om3-style-purple);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.om3-informes-pagination__item:hover:not(.om3-informes-pagination__item--disabled):not(.om3-informes-pagination__item--active) {
    background-color: rgba(80, 75, 186, 0.1);
}

.om3-informes-pagination__item--active {
    background-color: var(--om3-style-purple);
    color: var(--Neutral-100);
}

.om3-informes-pagination__item--disabled {
    color: var(--Neutral-70);
    cursor: not-allowed;
    pointer-events: none;
}

.om3-informes-pagination__item--nav {
    background-color: var(--Neutral-70);
    color: var(--Neutral-100);
    border-radius: 50%;
    min-width: 32px;
    height: 32px;
}

.om3-informes-pagination__item--nav:hover:not(.om3-informes-pagination__item--disabled) {
    background-color: var(--om3-style-purple);
}

.om3-informes-pagination__item--text {
    min-width: auto;
    padding: 0 0.75rem;
}

.om3-informes-pagination__ellipsis {
    padding: 0 0.25rem;
    color: var(--om3-style-purple);
}


/* ========================================
   OM3 INFORMES - VISTA DE DETALLE
   ======================================== */

.om3-informes-detail {
    padding: 2rem 0;
}

/* Contenedor del encabezado con barra lateral - Bug 6: agrupa categoría, título y teaser */
.om3-informes-detail__header-wrapper {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Barra lateral decorativa - 72px width, altura variable según contenido */
.om3-informes-detail__category-bar {
    width: 72px;
    min-height: auto;
    background-color: var(--om3lastnews-bar);
    border-radius: 0;
    flex-shrink: 0;
    align-self: stretch;
}

/* Contenido del encabezado (categoría, título, subtítulo) */
.om3-informes-detail__header-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.om3-informes-detail__category {
    font-family: var(--nunito-font);
    font-size: var(--caption-font-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--om3-style-purple);
    margin: 0;
}

/* Enlace de categoría para filtrar */
.om3-informes-detail__category-link {
    color: var(--om3-style-purple);
    text-decoration: none;
    transition: color 0.2s ease;
}

.om3-informes-detail__category-link:hover {
    text-decoration: underline;
    color: var(--om3-style-purple);
}

/* Título y subtítulo */
.om3-informes-detail__title {
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size-large);
    font-weight: var(--h1-font-weight-bold);
    color: var(--Neutral-30);
    margin: 0 0 0.5rem 0;
    line-height: var(--h1-line-height);
}

.om3-informes-detail__subtitle {
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size-medium);
    font-weight: var(--h2-font-weight);
    color: var(--Neutral-50);
    margin: 0 0 1rem 0;
    line-height: var(--h2-line-height);
}

/* Meta información (chips, badge, fecha) */
.om3-informes-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    margin-left: calc(72px + 1rem); /* Alinear con contenido del título */
}

.om3-informes-detail__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background-color: rgba(80, 75, 186, 0.12);
    color: var(--om3-style-purple);
    border-radius: 50px;
    font-family: var(--nunito-font);
    font-size: 11px;
    font-weight: 600;
}

.om3-informes-detail__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--Neutral-80);
    border-radius: 50px;
    font-family: var(--nunito-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--Neutral-50);
}

.om3-informes-detail__badge .material-symbols-outlined {
    font-size: 14px;
    color: var(--om3-error);
}

.om3-informes-detail__date {
    font-family: var(--paragraph-font-family);
    font-size: var(--caption-font-size);
    color: var(--Neutral-60);
}

/* Contenido del cuerpo */
.om3-informes-detail__content {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-large);
    line-height: var(--paragraph-line-height);
    color: var(--Neutral-30);
    margin-left: calc(72px + 1rem); /* Alinear con contenido del título */
}

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

.om3-informes-detail__content a {
    color: var(--Primario-50);
    text-decoration: underline;
}

.om3-informes-detail__content a:hover {
    color: var(--Primario-40);
}

/* Elementos de contenido adicionales */
.om3-informes-detail__content-elements {
    margin-left: calc(72px + 1rem); /* Alinear con contenido del título */
}

/* Contenedor centrado para imagen y botón */
.om3-informes-detail__media-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 373px;
    margin: 0 auto;
}

/* Imagen de portada (columna derecha) - 373x407px según Figma */
.om3-informes-detail__figure {
    margin: 0;
    width: 100%;
    max-width: 373px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.om3-informes-detail__cover {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Placeholder para imagen de portada cuando no hay imagen */
.om3-informes-detail__cover--placeholder {
    background-color: var(--Neutral-90);
    min-height: 300px;
    object-fit: contain;
}

/* Botón de descarga */
.om3-informes-detail__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: fit-content;
    max-width: 373px;
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
    background-color: var(--om3-style-purple);
    color: var(--Neutral-100);
    border: none;
    border-radius: 6px;
    font-family: var(--nunito-font);
    font-size: var(--button1-font-size);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.om3-informes-detail__download:hover {
    background-color: #3f3a9a;
    color: var(--Neutral-100);
}


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

/* ========================================
   OM3 INFORMES - RESPONSIVIDAD
   ======================================== */

@media (max-width: 991.98px) {
    .om3-informes-header__top {
        flex-direction: column;
        align-items: stretch;
    }

    .om3-informes-controls {
        width: 100%;
    }

    .om3-informes-controls__select,
    .om3-informes-controls__search {
        flex: 1;
        min-width: 0;
    }

    .om3-informes-detail__title {
        font-size: var(--h1-font-size-medium);
    }

    .om3-informes-detail__subtitle {
        font-size: var(--h3-font-size-medium);
    }
}

@media (max-width: 767.98px) {
    .om3-informes-list {
        padding: 1.5rem 0;
    }

    .om3-informes-header__title {
        font-size: var(--h2-font-size-large);
    }

    .om3-informes-header__bar {
        width: 4px;
        height: 36px;
    }

    .om3-informes-controls {
        flex-direction: column;
    }

    .om3-informes-controls__select,
    .om3-informes-controls__search {
        width: 100%;
    }

    /* Altura responsive controlada en news.css via aspect-ratio */

    .om3-informes-pagination__wrapper {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.5rem;
    }

    .om3-informes-pagination__item--text {
        display: none;
    }

    .om3-informes-detail__category-bar {
        width: 48px;
    }

    .om3-informes-detail__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .om3-informes-detail__meta,
    .om3-informes-detail__content,
    .om3-informes-detail__content-elements {
        margin-left: calc(48px + 1rem); /* Reducir margen para barra móvil */
    }
}

@media (max-width: 575.98px) {
    .om3-informes-chips {
        gap: 0.35rem;
    }

    .om3-informes-chip {
        padding: 0.4rem 0.75rem;
        font-size: 10px;
    }
}

/* Asegurar que contenedores internos hereden 100% del ancho */
.om3-slider-section .frame-type-news_pi1 .frame-group-container,
.om3-slider-section .frame-type-news_pi1 .frame-group-inner,
.om3-slider-section .frame-type-news_pi1 .frame-container,
.om3-slider-section .frame-type-news_pi1 .frame-inner,
.om3-slider-section .frame-type-news_pi1 .news-container-xxx,
.om3-slider-section .frame-type-news_pi1 .news-container {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* ========================================
   OM3 PUBLICACIONES - LISTA DE PUBLICACIONES
   ======================================== */

/* Contenedor principal del listado */
.om3-publicaciones-list {
    padding: 2rem 0;
}

/* Encabezado con título y controles */
.om3-publicaciones-header {
    margin-bottom: 1.5rem;
}

.om3-publicaciones-header__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.om3-publicaciones-header__title-area {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Barra lateral decorativa del título - color magenta */
.om3-publicaciones-header__bar {
    width: 72px;
    height: 32px;
    background-color: var(--om3pub-detail-bar);
    border-radius: 0;
    flex-shrink: 0;
}

/* Título principal - color magenta */
.om3-publicaciones-header__title {
    font-family: var(--h1-font-family);
    font-size: 28px;
    font-weight: 700;
    color: var(--om3pub-title);
    margin: 0;
    line-height: 32px;
}

/* Contenedor del título */
.om3-publicaciones-header__title-content {
    flex-shrink: 0;
}

/* Texto meta */
.om3-publicaciones-header__meta {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-small);
    color: var(--Neutral-60);
    line-height: 1.4;
}

/* Contador de documentos */
.om3-publicaciones-header__count {
    display: inline;
    font-weight: 700;
    color: var(--om3pub-title);
}

/* Controles de filtrado (año y búsqueda) */
.om3-publicaciones-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.om3-publicaciones-controls__select {
    min-width: 180px;
    padding: 0.5rem 2rem 0.5rem 1rem;
    font-family: var(--nunito-font);
    font-size: var(--paragraph-font-size-small);
    color: var(--Neutral-30);
    background-color: var(--Neutral-100);
    border: 1px solid var(--om3pub-title);
    border-radius: 6px;
    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' fill='%2391085A'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25rem;
}

.om3-publicaciones-controls__search {
    position: relative;
    min-width: 220px;
}

.om3-publicaciones-controls__search-input {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-family: var(--nunito-font);
    font-size: var(--paragraph-font-size-small);
    color: var(--Neutral-30);
    background-color: var(--Neutral-100);
    border: 1px solid var(--om3pub-title);
    border-radius: 6px;
}

.om3-publicaciones-controls__search-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--om3pub-title);
    display: flex;
    align-items: center;
    justify-content: center;
}

.om3-publicaciones-controls__search-btn:hover {
    color: var(--om3pub-detail-bar);
}

/* Chips de filtro por categoría */
.om3-publicaciones-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.om3-publicaciones-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-family: var(--nunito-font);
    font-size: var(--caption-font-size);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.om3-publicaciones-chip--default {
    background-color: var(--om3pub-chip-bg);
    color: var(--om3pub-title);
}

.om3-publicaciones-chip--default:hover {
    background-color: #D18BB5;
    color: var(--om3pub-title);
}

.om3-publicaciones-chip--active {
    background-color: var(--om3pub-title) !important;
    color: var(--Neutral-100) !important;
}

.om3-publicaciones-chip--active:hover {
    background-color: #7A064A !important;
    color: var(--Neutral-100) !important;
}

.om3-publicaciones-chip__close {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}


/* Grid de tarjetas */
.om3-publicaciones-grid {
    margin-top: 1.5rem;
}

/* Tarjeta individual */
/* Altura controlada en news.css: 359px desktop, aspect-ratio responsive */
.om3-publicaciones-card {
    background-color: var(--Neutral-90);
    border-radius: 8px;
}

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

/* Overlay con fondo sólido magenta oscuro */
.om3-publicaciones-card .overlay--solid {
    background-color: var(--om3pub-overlay);
    opacity: 90%;
    padding: 1.25rem;
}

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

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

/* Botón CTA - color magenta brillante */
.om3-publicaciones-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--om3pub-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-publicaciones-card__cta:hover {
    background-color: #B60976;
    color: var(--Neutral-100);
    border-color: rgba(255, 255, 255, 0.5);
}


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

/* ========================================
   OM3 PUBLICACIONES - PAGINACIÓN
   ======================================== */

.om3-publicaciones-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.om3-publicaciones-pagination__wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--om3pub-title);
    border-radius: 8px;
}

.om3-publicaciones-pagination__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    font-family: var(--nunito-font);
    font-size: var(--paragraph-font-size-small);
    font-weight: 600;
    color: var(--om3pub-title);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.om3-publicaciones-pagination__item:hover:not(.om3-publicaciones-pagination__item--disabled):not(.om3-publicaciones-pagination__item--active) {
    background-color: rgba(145, 8, 90, 0.1);
}

.om3-publicaciones-pagination__item--active {
    background-color: var(--om3pub-title);
    color: var(--Neutral-100);
}

.om3-publicaciones-pagination__item--disabled {
    color: var(--Neutral-70);
    cursor: not-allowed;
    pointer-events: none;
}

.om3-publicaciones-pagination__item--nav {
    background-color: var(--Neutral-70);
    color: var(--Neutral-100);
    border-radius: 50%;
    min-width: 32px;
    height: 32px;
}

.om3-publicaciones-pagination__item--nav:hover:not(.om3-publicaciones-pagination__item--disabled) {
    background-color: var(--om3pub-title);
}

.om3-publicaciones-pagination__item--text {
    min-width: auto;
    padding: 0 0.75rem;
}

.om3-publicaciones-pagination__ellipsis {
    padding: 0 0.25rem;
    color: var(--om3pub-title);
}


/* ========================================
   OM3 PUBLICACIONES - VISTA DE DETALLE
   ======================================== */

.om3-publicaciones-detail {
    padding: 2rem 0;
}

/* Contenedor del encabezado con barra lateral */
.om3-publicaciones-detail__header-wrapper {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Barra lateral decorativa - magenta brillante */
.om3-publicaciones-detail__category-bar {
    width: 72px;
    min-height: auto;
    background-color: var(--om3pub-detail-bar);
    border-radius: 0;
    flex-shrink: 0;
    align-self: stretch;
}

/* Contenido del encabezado */
.om3-publicaciones-detail__header-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.om3-publicaciones-detail__category {
    font-family: var(--nunito-font);
    font-size: var(--caption-font-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--om3pub-title);
    margin: 0;
}

/* Enlace de categoría */
.om3-publicaciones-detail__category-link {
    color: var(--om3pub-title);
    text-decoration: none;
    transition: color 0.2s ease;
}

.om3-publicaciones-detail__category-link:hover {
    text-decoration: underline;
    color: var(--om3pub-title);
}

/* Título y subtítulo */
.om3-publicaciones-detail__title {
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size-large);
    font-weight: var(--h1-font-weight-bold);
    color: var(--Neutral-30);
    margin: 0 0 0.5rem 0;
    line-height: var(--h1-line-height);
}

.om3-publicaciones-detail__subtitle {
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size-medium);
    font-weight: var(--h2-font-weight);
    color: var(--Neutral-50);
    margin: 0 0 1rem 0;
    line-height: var(--h2-line-height);
}

/* Meta información (chips, badge, fecha) */
.om3-publicaciones-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    margin-left: calc(72px + 1rem); /* Alinear con contenido del título */
}

.om3-publicaciones-detail__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background-color: rgba(145, 8, 90, 0.12);
    color: var(--om3pub-title);
    border-radius: 50px;
    font-family: var(--nunito-font);
    font-size: 11px;
    font-weight: 600;
}

.om3-publicaciones-detail__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--Neutral-80);
    border-radius: 50px;
    font-family: var(--nunito-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--Neutral-50);
}

.om3-publicaciones-detail__badge .material-symbols-outlined {
    font-size: 14px;
    color: var(--om3-error);
}

.om3-publicaciones-detail__date {
    font-family: var(--paragraph-font-family);
    font-size: var(--caption-font-size);
    color: var(--Neutral-60);
}

/* Contenido del cuerpo */
.om3-publicaciones-detail__content {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-large);
    line-height: var(--paragraph-line-height);
    color: var(--Neutral-30);
    margin-left: calc(72px + 1rem); /* Alinear con contenido del título */
}

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

.om3-publicaciones-detail__content a {
    color: var(--om3pub-title);
    text-decoration: underline;
}

.om3-publicaciones-detail__content a:hover {
    color: var(--om3pub-detail-bar);
}

/* Estilos para encabezados de contenido con color magenta */
.om3-publicaciones-detail__content h2,
.om3-publicaciones-detail__content h3,
.om3-publicaciones-detail__content h4,
.om3-pub-heading {
    color: var(--om3pub-detail-bar);
    font-weight: 700;
}

/* Acento de texto magenta */
.om3-pub-accent {
    color: var(--om3pub-detail-bar);
}

/* Citas o bloques destacados */
.om3-publicaciones-detail__content blockquote,
.om3-publicaciones-detail .quotation {
    border-left: 4px solid var(--om3pub-detail-bar);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--Neutral-40);
}

/* Elementos de contenido adicionales */
.om3-publicaciones-detail__content-elements {
    margin-left: calc(72px + 1rem); /* Alinear con contenido del título */
}

/* Contenedor centrado para imagen y botón */
.om3-publicaciones-detail__media-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 373px;
    margin: 0 auto;
}

/* Imagen de portada */
.om3-publicaciones-detail__figure {
    margin: 0;
    width: 100%;
    max-width: 373px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.om3-publicaciones-detail__cover {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Placeholder para imagen */
.om3-publicaciones-detail__cover--placeholder {
    background-color: var(--Neutral-90);
    min-height: 300px;
    object-fit: contain;
}

/* Botón de descarga - magenta oscuro */
.om3-publicaciones-detail__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: fit-content;
    max-width: 373px;
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
    background-color: var(--om3pub-detail-btn);
    color: var(--Neutral-100);
    border: none;
    border-radius: 6px;
    font-family: var(--nunito-font);
    font-size: var(--button1-font-size);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.om3-publicaciones-detail__download:hover {
    background-color: #8A0758;
    color: var(--Neutral-100);
}


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

/* ========================================
   OM3 PUBLICACIONES - RESPONSIVIDAD
   ======================================== */

@media (max-width: 991.98px) {
    .om3-publicaciones-header__top {
        flex-direction: column;
        align-items: stretch;
    }

    .om3-publicaciones-controls {
        width: 100%;
    }

    .om3-publicaciones-controls__select,
    .om3-publicaciones-controls__search {
        flex: 1;
        min-width: 0;
    }

    .om3-publicaciones-detail__title {
        font-size: var(--h1-font-size-medium);
    }

    .om3-publicaciones-detail__subtitle {
        font-size: var(--h3-font-size-medium);
    }
}

@media (max-width: 767.98px) {
    .om3-publicaciones-list {
        padding: 1.5rem 0;
    }

    .om3-publicaciones-header__title {
        font-size: var(--h2-font-size-large);
    }

    .om3-publicaciones-header__bar {
        width: 4px;
        height: 36px;
    }

    .om3-publicaciones-controls {
        flex-direction: column;
    }

    .om3-publicaciones-controls__select,
    .om3-publicaciones-controls__search {
        width: 100%;
    }

    /* Altura responsive controlada en news.css via aspect-ratio */

    .om3-publicaciones-pagination__wrapper {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.5rem;
    }

    .om3-publicaciones-pagination__item--text {
        display: none;
    }

    .om3-publicaciones-detail__category-bar {
        width: 48px;
    }

    .om3-publicaciones-detail__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .om3-publicaciones-detail__meta,
    .om3-publicaciones-detail__content,
    .om3-publicaciones-detail__content-elements {
        margin-left: calc(48px + 1rem); /* Reducir margen para barra móvil */
    }
}

@media (max-width: 575.98px) {
    .om3-publicaciones-chips {
        gap: 0.35rem;
    }

    .om3-publicaciones-chip {
        padding: 0.4rem 0.75rem;
        font-size: 10px;
    }
}

/* ========================================
   OM3 CÁPSULAS DE CONOCIMIENTO - LISTA
   ======================================== */

/* Contenedor principal del listado */
.om3-capsulas-list {
    padding: 2rem 0;
}

/* Encabezado con título y controles */
.om3-capsulas-header {
    margin-bottom: 1.5rem;
}

.om3-capsulas-header__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.om3-capsulas-header__title-area {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Barra lateral decorativa del título - color naranja */
.om3-capsulas-header__bar {
    width: 72px;
    height: 32px;
    background-color: var(--capsula-primary);
    border-radius: 0;
    flex-shrink: 0;
}

/* Título principal - color naranja */
.om3-capsulas-header__title {
    font-family: var(--h1-font-family);
    font-size: 28px;
    font-weight: 700;
    color: var(--capsula-primary);
    margin: 0;
    line-height: 32px;
}

/* Contenedor del título */
.om3-capsulas-header__title-content {
    flex-shrink: 0;
}

/* Texto meta */
.om3-capsulas-header__meta {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-small);
    color: var(--Neutral-60);
    line-height: 1.4;
}

/* Contador de documentos */
.om3-capsulas-header__count {
    display: inline;
    font-weight: 700;
    color: var(--capsula-primary);
}

/* Controles de filtrado (año y búsqueda) */
.om3-capsulas-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.om3-capsulas-controls__select {
    min-width: 180px;
    padding: 0.5rem 2rem 0.5rem 1rem;
    font-family: var(--nunito-font);
    font-size: var(--paragraph-font-size-small);
    color: var(--Neutral-30);
    background-color: var(--Neutral-100);
    border: 1px solid var(--capsula-primary);
    border-radius: 6px;
    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' fill='%23F95812'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25rem;
}

.om3-capsulas-controls__search {
    position: relative;
    min-width: 220px;
}

.om3-capsulas-controls__search-input {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-family: var(--nunito-font);
    font-size: var(--paragraph-font-size-small);
    color: var(--Neutral-30);
    background-color: var(--Neutral-100);
    border: 1px solid var(--capsula-primary);
    border-radius: 6px;
}

.om3-capsulas-controls__search-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--capsula-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.om3-capsulas-controls__search-btn:hover {
    color: var(--capsula-cta-bg);
}

/* Chips de filtro por categoría */
.om3-capsulas-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.om3-capsulas-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-family: var(--nunito-font);
    font-size: var(--caption-font-size);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.om3-capsulas-chip--default {
    background-color: var(--capsula-chip-bg);
    color: var(--capsula-primary);
}

.om3-capsulas-chip--default:hover {
    background-color: #E86D40;
    color: var(--Neutral-100);
}

.om3-capsulas-chip--active {
    background-color: var(--capsula-primary) !important;
    color: var(--Neutral-100) !important;
}

.om3-capsulas-chip--active:hover {
    background-color: #D14E0F !important;
    color: var(--Neutral-100) !important;
}

.om3-capsulas-chip__close {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}


/* Grid de tarjetas */
.om3-capsulas-grid {
    margin-top: 1.5rem;
}

/* Tarjeta individual */
/* Altura controlada en news.css: 359px desktop, aspect-ratio responsive */
.om3-capsulas-card {
    background-color: var(--Neutral-90);
    border-radius: 8px;
}

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

/* Overlay con fondo sólido marrón oscuro */
.om3-capsulas-card .overlay--solid {
    background-color: var(--capsula-overlay);
    opacity: 90%;
    padding: 1.25rem;
}

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

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

/* Botón CTA - color naranja oscuro */
.om3-capsulas-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--capsula-cta-bg);
    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-capsulas-card__cta:hover {
    background-color: #B53D00;
    color: var(--Neutral-100);
    border-color: rgba(255, 255, 255, 0.5);
}


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

/* ========================================
   OM3 CÁPSULAS - PAGINACIÓN
   ======================================== */

.om3-capsulas-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.om3-capsulas-pagination__wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--capsula-primary);
    border-radius: 8px;
}

.om3-capsulas-pagination__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    font-family: var(--nunito-font);
    font-size: var(--paragraph-font-size-small);
    font-weight: 600;
    color: var(--capsula-primary);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.om3-capsulas-pagination__item:hover:not(.om3-capsulas-pagination__item--disabled):not(.om3-capsulas-pagination__item--active) {
    background-color: rgba(249, 88, 18, 0.1);
}

.om3-capsulas-pagination__item--active {
    background-color: var(--capsula-primary);
    color: var(--Neutral-100);
}

.om3-capsulas-pagination__item--disabled {
    color: var(--Neutral-70);
    cursor: not-allowed;
    pointer-events: none;
}

.om3-capsulas-pagination__item--nav {
    background-color: var(--Neutral-70);
    color: var(--Neutral-100);
    border-radius: 50%;
    min-width: 32px;
    height: 32px;
}

.om3-capsulas-pagination__item--nav:hover:not(.om3-capsulas-pagination__item--disabled) {
    background-color: var(--capsula-primary);
}

.om3-capsulas-pagination__item--text {
    min-width: auto;
    padding: 0 0.75rem;
}

.om3-capsulas-pagination__ellipsis {
    padding: 0 0.25rem;
    color: var(--capsula-primary);
}


/* ========================================
   OM3 CÁPSULAS - VISTA DE DETALLE
   ======================================== */

.om3-capsulas-detail {
    padding: 2rem 0;
}

/* Contenedor del encabezado con barra lateral */
.om3-capsulas-detail__header-wrapper {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Barra lateral decorativa - naranja brillante */
.om3-capsulas-detail__category-bar {
    width: 72px;
    min-height: auto;
    background-color: var(--capsula-detail-bar);
    border-radius: 0;
    flex-shrink: 0;
    align-self: stretch;
}

/* Contenido del encabezado */
.om3-capsulas-detail__header-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.om3-capsulas-detail__category {
    font-family: var(--nunito-font);
    font-size: var(--caption-font-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--capsula-primary);
    margin: 0;
}

/* Tipo de contenido (Infografía / Video) */
.om3-capsulas-detail__type {
    font-family: var(--nunito-font);
    font-size: var(--paragraph-font-size-small);
    font-weight: 600;
    color: var(--capsula-primary);
    margin: 0;
}

/* Enlace de categoría */
.om3-capsulas-detail__category-link {
    color: var(--capsula-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.om3-capsulas-detail__category-link:hover {
    text-decoration: underline;
    color: var(--capsula-primary);
}

/* Título y subtítulo */
.om3-capsulas-detail__title {
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size-large);
    font-weight: var(--h1-font-weight-bold);
    color: var(--Neutral-30);
    margin: 0 0 0.5rem 0;
    line-height: var(--h1-line-height);
}

.om3-capsulas-detail__subtitle {
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size-medium);
    font-weight: var(--h2-font-weight);
    color: var(--Neutral-50);
    margin: 0 0 1rem 0;
    line-height: var(--h2-line-height);
}

/* Meta información (chips, badge, fecha) */
.om3-capsulas-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    margin-left: calc(72px + 1rem); /* Alinear con contenido del título */
}

.om3-capsulas-detail__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background-color: rgba(249, 88, 18, 0.12);
    color: var(--capsula-primary);
    border-radius: 50px;
    font-family: var(--nunito-font);
    font-size: 11px;
    font-weight: 600;
}

.om3-capsulas-detail__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--Neutral-80);
    border-radius: 50px;
    font-family: var(--nunito-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--Neutral-50);
}

.om3-capsulas-detail__badge .material-symbols-outlined {
    font-size: 14px;
    color: var(--om3-error);
}

.om3-capsulas-detail__date {
    font-family: var(--paragraph-font-family);
    font-size: var(--caption-font-size);
    color: var(--Neutral-60);
}

/* Contenido del cuerpo */
.om3-capsulas-detail__content {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-large);
    line-height: var(--paragraph-line-height);
    color: var(--Neutral-30);
    margin-left: calc(72px + 1rem); /* Alinear con contenido del título */
}

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

.om3-capsulas-detail__content a {
    color: var(--capsula-primary);
    text-decoration: underline;
}

.om3-capsulas-detail__content a:hover {
    color: var(--capsula-cta-bg);
}

/* Estilos para encabezados de contenido con color naranja */
.om3-capsulas-detail__content h2,
.om3-capsulas-detail__content h3,
.om3-capsulas-detail__content h4,
.om3-cap-heading {
    color: var(--capsula-detail-bar);
    font-weight: 700;
}

/* Acento de texto naranja */
.om3-cap-accent {
    color: var(--capsula-detail-bar);
}

/* Citas o bloques destacados */
.om3-capsulas-detail__content blockquote,
.om3-capsulas-detail .quotation {
    border-left: 4px solid var(--capsula-detail-bar);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--Neutral-40);
}

/* Elementos de contenido adicionales */
.om3-capsulas-detail__content-elements {
    margin-left: calc(72px + 1rem); /* Alinear con contenido del título */
}

/* Contenedor centrado para imagen y botón */
.om3-capsulas-detail__media-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 373px;
    margin: 0 auto;
}

/* Imagen de portada */
.om3-capsulas-detail__figure {
    margin: 0;
    width: 100%;
    max-width: 373px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.om3-capsulas-detail__cover {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Placeholder para imagen */
.om3-capsulas-detail__cover--placeholder {
    background-color: var(--Neutral-90);
    min-height: 300px;
    object-fit: contain;
}

/* Botón de descarga - naranja oscuro */
.om3-capsulas-detail__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: fit-content;
    max-width: 373px;
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
    background-color: var(--capsula-detail-btn);
    color: var(--Neutral-100);
    border: none;
    border-radius: 6px;
    font-family: var(--nunito-font);
    font-size: var(--button1-font-size);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.om3-capsulas-detail__download:hover {
    background-color: #B53D00;
    color: var(--Neutral-100);
}


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

/* ========================================
   OM3 CÁPSULAS - VIDEO/AUDIOVISUAL
   ======================================== */

.om3-capsulas-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--Neutral-90);
}

.om3-capsulas-video-wrapper iframe,
.om3-capsulas-video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Leyenda debajo del video */
.om3-capsulas-video-caption {
    font-family: var(--nunito-font);
    font-size: var(--caption-font-size, 0.875rem);
    font-weight: 600;
    color: var(--capsula-primary);
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

/* Descripción del video */
.om3-capsulas-video-description {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size-small, 0.875rem);
    color: var(--Neutral-50);
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* Tarjeta de video relacionado */
.om3-capsulas-related-video {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--Neutral-95);
    border-radius: 8px;
}

.om3-capsulas-related-video__thumbnail {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.om3-capsulas-related-video__thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.om3-capsulas-related-video__title {
    font-family: var(--nunito-font);
    font-size: var(--paragraph-font-size-small, 0.875rem);
    font-weight: 600;
    color: var(--Neutral-30);
    margin: 0;
}

/* ========================================
   OM3 CÁPSULAS - RESPONSIVIDAD
   ======================================== */

@media (max-width: 991.98px) {
    .om3-capsulas-header__top {
        flex-direction: column;
        align-items: stretch;
    }

    .om3-capsulas-controls {
        width: 100%;
    }

    .om3-capsulas-controls__select,
    .om3-capsulas-controls__search {
        flex: 1;
        min-width: 0;
    }

    .om3-capsulas-detail__title {
        font-size: var(--h1-font-size-medium);
    }

    .om3-capsulas-detail__subtitle {
        font-size: var(--h3-font-size-medium);
    }
}

@media (max-width: 767.98px) {
    .om3-capsulas-list {
        padding: 1.5rem 0;
    }

    .om3-capsulas-header__title {
        font-size: var(--h2-font-size-large);
    }

    .om3-capsulas-header__bar {
        width: 4px;
        height: 36px;
    }

    .om3-capsulas-controls {
        flex-direction: column;
    }

    .om3-capsulas-controls__select,
    .om3-capsulas-controls__search {
        width: 100%;
    }

    /* Altura responsive controlada en news.css via aspect-ratio */

    .om3-capsulas-pagination__wrapper {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.5rem;
    }

    .om3-capsulas-pagination__item--text {
        display: none;
    }

    .om3-capsulas-detail__category-bar {
        width: 48px;
    }

    .om3-capsulas-detail__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .om3-capsulas-detail__meta,
    .om3-capsulas-detail__content,
    .om3-capsulas-detail__content-elements {
        margin-left: calc(48px + 1rem); /* Reducir margen para barra móvil */
    }
}

@media (max-width: 575.98px) {
    .om3-capsulas-chips {
        gap: 0.35rem;
    }

    .om3-capsulas-chip {
        padding: 0.4rem 0.75rem;
        font-size: 10px;
    }
}

/* ========================================
   OM3 MICRODATOS - DESCARGAS (DOWNLOADS)
   ======================================== */

/* Contenedor principal */
.om3-microdatos-list {
    padding: 2rem 0;
}

/* ----------------------------------------
   HEADER: Título, meta y controles
   ---------------------------------------- */
.om3-microdatos-header {
    margin-bottom: 2rem;
}

.om3-microdatos-header__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.om3-microdatos-header__title-area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Barra decorativa verde */
.om3-microdatos-header__bar {
    width: 80px;
    height: 6px;
    background-color: var(--om3micro-primary);
    border-radius: 3px;
}

.om3-microdatos-header__title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--om3micro-title);
    margin: 0;
    line-height: 1.2;
}

.om3-microdatos-header__meta {
    font-size: 0.95rem;
    color: var(--om3-text-dark);
}

.om3-microdatos-header__count {
    font-weight: 700;
}

/* ----------------------------------------
   CONTROLES: Año y búsqueda
   ---------------------------------------- */
.om3-microdatos-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.om3-microdatos-controls__select {
    min-width: 180px;
    padding: 0.5rem 2rem 0.5rem 1rem;
    font-size: 0.9rem;
    border: 1px solid var(--Neutral-90);
    border-radius: 6px;
    background-color: var(--Neutral-100);
    color: var(--om3-text-dark);
    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 24 24'%3E%3Cpath fill='%23383838' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.om3-microdatos-controls__search {
    display: flex;
    align-items: stretch;
    min-width: 280px;
    max-width: 350px;
}

.om3-microdatos-controls__search-input {
    flex: 1;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border: 1px solid var(--Neutral-90);
    border-right: none;
    border-radius: 6px 0 0 6px;
    background-color: var(--Neutral-100);
}

.om3-microdatos-controls__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    background-color: var(--om3micro-primary);
    color: var(--Neutral-100);
    border: 1px solid var(--om3micro-primary);
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.om3-microdatos-controls__search-btn:hover {
    background-color: #247507;
}


/* ----------------------------------------
   CHIPS: Filtros de etiquetas/categorías
   ---------------------------------------- */
.om3-microdatos-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.om3-microdatos-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--om3-text-dark);
    background-color: var(--om3micro-primary-light);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.om3-microdatos-chip:hover {
    background-color: #8FE86D;
}


.om3-microdatos-chip--active {
    background-color: var(--om3micro-chip-active) !important;
    color: var(--Neutral-100) !important;
}

.om3-microdatos-chip--active:hover {
    background-color: #247507 !important;
}

.om3-microdatos-chip__close {
    font-size: 16px;
    opacity: 0.8;
}

.om3-microdatos-chip__close:hover {
    opacity: 1;
}

/* ----------------------------------------
   GRID: Tarjetas de documentos
   ---------------------------------------- */
.om3-microdatos-grid {
    margin-bottom: 2rem;
}

/* ----------------------------------------
   CARD: Tarjeta de documento individual
   ---------------------------------------- */
.om3-microdatos-card {
    display: flex;
    align-items: stretch;
    background-color: var(--om3micro-card-bg);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    min-height: 140px;
}

.om3-microdatos-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

/* Icono circular verde */
.om3-microdatos-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin: 1rem;
    background-color: var(--om3micro-primary);
    border-radius: 50%;
    color: var(--Neutral-100);
}

.om3-microdatos-card__icon .material-symbols-outlined {
    font-size: 24px;
}

/* Contenido central */
.om3-microdatos-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 0.5rem 1rem 0;
    min-width: 0; /* Para text-overflow */
}

.om3-microdatos-card__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--om3-text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.om3-microdatos-card__title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    font-style: italic;
    color: var(--om3micro-title);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    /* Limitar a 2 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.om3-microdatos-card__title a {
    color: inherit !important;
    text-decoration: underline;
}

.om3-microdatos-card__title a:hover {
    text-decoration: none;
}

/* Badge de tipo de archivo */
.om3-microdatos-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--om3micro-badge-text);
    background-color: var(--om3micro-badge-bg);
    border-radius: 12px;
    margin-bottom: 0.5rem;
    width: fit-content;
}

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

/* Badge variante outline (gris) */
.om3-microdatos-card__badge--outline {
    background-color: transparent;
    color: var(--om3-text-dark);
    border: 1px solid var(--Neutral-80);
}

.om3-microdatos-card__badge--outline .material-symbols-outlined {
    color: var(--om3micro-primary);
}

/* Fecha de publicación */
.om3-microdatos-card__date {
    font-size: 0.8rem;
    color: var(--Neutral-50);
}

.om3-microdatos-card__date strong {
    font-weight: 700;
    color: var(--om3-text-dark);
}

/* Sidebar de descarga (barra verde derecha) */
.om3-microdatos-card__sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    background-color: var(--om3micro-sidebar);
    color: var(--Neutral-100);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.om3-microdatos-card__sidebar:hover {
    background-color: #247507;
}

.om3-microdatos-card__sidebar .material-symbols-outlined {
    font-size: 24px;
}

/* ----------------------------------------
   CONTADOR DE RESULTADOS
   ---------------------------------------- */
.om3-microdatos-results {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--om3-text-dark);
}

.om3-microdatos-results__count {
    font-weight: 700;
}

/* ----------------------------------------
   MENSAJE SIN RESULTADOS
   ---------------------------------------- */
.om3-microdatos-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--Neutral-50);
}

.om3-microdatos-no-results__icon {
    font-size: 48px;
    color: var(--Neutral-80);
    margin-bottom: 1rem;
}

.om3-microdatos-no-results__text {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.om3-microdatos-no-results__hint {
    font-size: 0.9rem;
    color: var(--Neutral-70);
}

/* ----------------------------------------
   MENSAJE SIN RESULTADOS - INFORMES
   ---------------------------------------- */
.om3-informes-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--Neutral-50);
}

.om3-informes-no-results__icon {
    font-size: 48px;
    color: var(--om3-style-purple, #91085A);
    opacity: 0.5;
    margin-bottom: 1rem;
}

.om3-informes-no-results__icon .material-symbols-outlined {
    font-size: inherit;
}

.om3-informes-no-results__text {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.om3-informes-no-results__hint {
    font-size: 0.9rem;
    color: var(--Neutral-70);
}

/* ----------------------------------------
   MENSAJE SIN RESULTADOS - PUBLICACIONES
   ---------------------------------------- */
.om3-publicaciones-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--Neutral-50);
}

.om3-publicaciones-no-results__icon {
    font-size: 48px;
    color: var(--om3pub-title, #91085A);
    opacity: 0.5;
    margin-bottom: 1rem;
}

.om3-publicaciones-no-results__icon .material-symbols-outlined {
    font-size: inherit;
}

.om3-publicaciones-no-results__text {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.om3-publicaciones-no-results__hint {
    font-size: 0.9rem;
    color: var(--Neutral-70);
}

/* ----------------------------------------
   MENSAJE SIN RESULTADOS - CAPSULAS
   ---------------------------------------- */
.om3-capsulas-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--Neutral-50);
}

.om3-capsulas-no-results__icon {
    font-size: 48px;
    color: var(--capsula-primary, #F95812);
    opacity: 0.5;
    margin-bottom: 1rem;
}

.om3-capsulas-no-results__icon .material-symbols-outlined {
    font-size: inherit;
}

.om3-capsulas-no-results__text {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.om3-capsulas-no-results__hint {
    font-size: 0.9rem;
    color: var(--Neutral-70);
}

/* ----------------------------------------
   RESPONSIVE: Tablet
   ---------------------------------------- */
@media (max-width: 991.98px) {
    .om3-microdatos-header__top {
        flex-direction: column;
        align-items: stretch;
    }

    .om3-microdatos-controls {
        justify-content: flex-start;
    }

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

/* ----------------------------------------
   RESPONSIVE: Mobile
   ---------------------------------------- */
@media (max-width: 575.98px) {
    .om3-microdatos-header__title {
        font-size: 1.5rem;
    }

    .om3-microdatos-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .om3-microdatos-controls__select {
        width: 100%;
    }

    .om3-microdatos-controls__search {
        min-width: 100%;
    }

    .om3-microdatos-chips {
        gap: 0.5rem;
    }

    .om3-microdatos-chip {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }

    .om3-microdatos-card {
        min-height: 120px;
    }

    .om3-microdatos-card__icon {
        width: 40px;
        height: 40px;
        margin: 0.75rem;
    }

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

    .om3-microdatos-card__content {
        padding: 0.75rem 0.5rem 0.75rem 0;
    }

    .om3-microdatos-card__title {
        font-size: 0.9rem;
    }

    .om3-microdatos-card__sidebar {
        width: 36px;
    }

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

/* ========================================
   OM3 TABLEROS (DASHBOARDS) - LIST VIEW
   ======================================== */

/* Contenedor principal de la lista de tableros */
.om3-tableros-list {
    padding: 2rem 0;
}

/* ----------------------------------------
   ENCABEZADO - TABLEROS
   ---------------------------------------- */
.om3-tableros-header {
    margin-bottom: 2rem;
}

.om3-tableros-header__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

/* Área del título con barra decorativa */
.om3-tableros-header__title-area {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 280px;
}

.om3-tableros-header__bar {
    width: 8px;
    min-height: 60px;
    background-color: var(--tablero-primary);
    border-radius: 4px;
    flex-shrink: 0;
    align-self: stretch;
}

.om3-tableros-header__title-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.om3-tableros-header__title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: var(--Neutral-20, #1a1a1a);
    margin: 0;
    line-height: 1.2;
}

.om3-tableros-header__meta {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--Neutral-60, #666);
    line-height: 1.4;
}

.om3-tableros-header__count {
    color: var(--tablero-primary);
    font-weight: 700;
}

/* Pill de resultados */
.om3-tableros-header__results-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--tablero-primary);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tablero-primary);
    background-color: transparent;
    white-space: nowrap;
}

/* ----------------------------------------
   CONTROLES DE FILTRO - TABLEROS
   ---------------------------------------- */
.om3-tableros-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.om3-tableros-controls__select {
    appearance: none;
    background-color: var(--Neutral-100);
    border: 1px solid var(--Neutral-70);
    border-radius: 8px;
    padding: 0.6rem 2.5rem 0.6rem 1rem;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--Neutral-40, #333);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    min-width: 180px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.om3-tableros-controls__select:hover {
    border-color: var(--tablero-primary);
}

/* Buscador */
.om3-tableros-controls__search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 250px;
}

.om3-tableros-controls__search-input {
    width: 100%;
    padding: 0.6rem 2.5rem 0.6rem 1rem;
    border: 1px solid var(--Neutral-70);
    border-radius: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--Neutral-40, #333);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.om3-tableros-controls__search-input:hover {
    border-color: var(--tablero-primary);
}

.om3-tableros-controls__search-input::placeholder {
    color: var(--Neutral-60, #999);
}

.om3-tableros-controls__search-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--Neutral-60, #666);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.om3-tableros-controls__search-btn:hover {
    color: var(--tablero-primary);
}

.om3-tableros-controls__search-btn .material-symbols-outlined {
    font-size: 20px;
}

/* ----------------------------------------
   CHIPS DE FILTRO - TABLEROS
   ---------------------------------------- */
.om3-tableros-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.om3-tableros-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--tablero-chip-bg);
    color: var(--tablero-chip-text);
    border: 1px solid var(--tablero-chip-text);
    border-radius: 16px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.om3-tableros-chip:hover {
    background-color: rgba(31, 126, 45, 0.15);
}


.om3-tableros-chip--active {
    background-color: var(--tablero-chip-active-bg) !important;
    color: var(--Neutral-100) !important;
    border-color: var(--tablero-chip-active-bg) !important;
}

.om3-tableros-chip--active:hover {
    background-color: var(--tablero-btn-hover) !important;
}

.om3-tableros-chip__close {
    font-size: 16px;
    margin-left: 0.25rem;
    display: none;
}

.om3-tableros-chip--active .om3-tableros-chip__close {
    display: inline-flex;
}

/* ----------------------------------------
   GRID DE TARJETAS - TABLEROS
   ---------------------------------------- */
.om3-tableros-grid {
    margin-top: 1.5rem;
}

/* ----------------------------------------
   TARJETA INDIVIDUAL - TABLEROS
   ---------------------------------------- */
.om3-tableros-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 359px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--Neutral-100);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.om3-tableros-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}


/* Sección de imagen (55% superior) */
.om3-tableros-card__image-wrapper {
    position: relative;
    flex: 0 0 55%;
    overflow: hidden;
}

.om3-tableros-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.om3-tableros-card__image--placeholder {
    object-fit: contain;
    padding: 1rem;
    background-color: #f5f5f5;
}

/* Botón de favorito */
.om3-tableros-card__favorite {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.om3-tableros-card__favorite:hover {
    background-color: var(--Neutral-100);
    transform: scale(1.1);
}

.om3-tableros-card__favorite .material-symbols-outlined {
    font-size: 20px;
    color: var(--Neutral-60, #666);
}

.om3-tableros-card__favorite--active .material-symbols-outlined {
    color: var(--tablero-primary);
    font-variation-settings: 'FILL' 1;
}

/* Sección de contenido (45% inferior) */
.om3-tableros-card__content {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background-color: var(--tablero-card-bg);
    color: var(--Neutral-100);
}

.om3-tableros-card__title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 0.25rem 0;
    color: var(--Neutral-100);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Enlaces en tarjetas de tableros - color blanco solo dentro de .om3-tableros-card__title */
.om3-tableros-card__title .frame a[class=""],
.om3-tableros-card__title .frame a:not([class]),
.om3-tableros-card__title .frame a:not([class]):hover {
    color: var(--Neutral-100);
}

.om3-tableros-card__title a {
    color: inherit;
    text-decoration: none;
}

.om3-tableros-card__title a:hover {
    text-decoration: underline;
}

.om3-tableros-card__date {
    font-family: Verdana, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: var(--Neutral-100);
    margin-bottom: 0.75rem;
}

/* Botones de acción */
.om3-tableros-card__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.om3-tableros-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 6px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
}

.om3-tableros-card__btn--primary {
    background-color: #EDFEE7;
    color: #071801;
    border: none;
}

.om3-tableros-card__btn--primary:hover {
    background-color: #D4F5C8;
}

.om3-tableros-card__btn--primary .material-symbols-outlined {
    color: #071801;
}

.om3-tableros-card__btn .material-symbols-outlined {
    font-size: 16px;
}

/* Estilo secundario para botón "Consultar Tablero" */
.om3-tableros-card__btn--secondary {
    background-color: transparent;
    color: #EDFEE7;
    border: 1px solid #EDFEE7;
}

.om3-tableros-card__btn--secondary:hover,
.om3-tableros-card__btn--secondary:focus {
    background-color: rgba(237, 254, 231, 0.15);
}

.om3-tableros-card__btn--secondary .material-symbols-outlined {
    color: #EDFEE7;
}

/* ----------------------------------------
   MENSAJE SIN RESULTADOS - TABLEROS
   ---------------------------------------- */
.om3-tableros-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--Neutral-50);
}

.om3-tableros-no-results__icon {
    font-size: 48px;
    color: var(--tablero-primary);
    opacity: 0.5;
    margin-bottom: 1rem;
}

.om3-tableros-no-results__icon .material-symbols-outlined {
    font-size: inherit;
}

.om3-tableros-no-results__text {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.om3-tableros-no-results__hint {
    font-size: 0.9rem;
    color: var(--Neutral-70);
}

/* ----------------------------------------
   PAGINACIÓN - TABLEROS
   ---------------------------------------- */
.om3-tableros-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--tablero-primary);
    border-radius: 6px;
    background-color: var(--Neutral-100);
}

.om3-tableros-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    border: none;
    background: transparent;
    color: var(--tablero-primary);
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.om3-tableros-pagination__item:hover:not(.om3-tableros-pagination__item--disabled):not(.om3-tableros-pagination__item--active) {
    background-color: var(--tablero-chip-bg);
}

.om3-tableros-pagination__item--active {
    background-color: var(--tablero-primary);
    color: var(--Neutral-100);
}

.om3-tableros-pagination__item--disabled {
    color: var(--Neutral-80, #bbb);
    cursor: not-allowed;
}

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

/* ========================================
   OM3 TABLEROS (DASHBOARDS) - DETAIL VIEW
   ======================================== */

.om3-tableros-detail {
    padding: 2rem 0;
}

/* ----------------------------------------
   FILA DE ENCABEZADO (50/50) - DETALLE
   ---------------------------------------- */
.om3-tableros-detail__header-row {
    margin-bottom: 2rem;
}

.om3-tableros-detail__header-wrapper {
    display: flex;
    gap: 1.5rem;
    height: 100%;
}

/* Barra lateral verde (72px ancho, altura dinámica) */
.om3-tableros-detail__sidebar {
    width: 72px;
    min-width: 72px;
    background-color: #3BC20A;
    border-radius: 4px;
    flex-shrink: 0;
    align-self: stretch;
}

.om3-tableros-detail__header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Etiqueta de categoría "TABLEROS ESTADÍSTICOS" */
.om3-tableros-detail__category {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #3BC20A;
    margin: 0 0 0.75rem 0;
    letter-spacing: 0.5px;
}

/* Título principal H1 */
.om3-tableros-detail__title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: var(--Neutral-20, #1a1a1a);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

/* Subtítulo H2 (teaser) */
.om3-tableros-detail__subtitle {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--Neutral-50, #666);
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

/* ----------------------------------------
   META INFORMACIÓN - DETALLE
   ---------------------------------------- */
.om3-tableros-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

/* Tag de categoría (chip estilo pill) */
.om3-tableros-detail__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    background-color: transparent;
    color: var(--Neutral-40, #333);
    border: 1px solid var(--Neutral-70);
    border-radius: 20px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Fecha de publicación */
.om3-tableros-detail__date {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--Neutral-50, #666);
}

.om3-tableros-detail__date strong {
    color: var(--Neutral-40, #333);
    font-weight: 700;
}

/* ----------------------------------------
   DESCRIPCIÓN (bodytext) - COLUMNA DERECHA
   ---------------------------------------- */
.om3-tableros-detail__description {
    font-family: 'Verdana', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--Neutral-30, #444);
}

.om3-tableros-detail__description p {
    margin-bottom: 1rem;
}

.om3-tableros-detail__description p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------
   DASHBOARD WRAPPER (Tableau) - FULL WIDTH
   ---------------------------------------- */
.om3-tableros-detail__dashboard-wrapper {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--Neutral-90, #e0e0e0);
    background-color: var(--Neutral-100);
}

/* Ocultar los botones del TableauEmbed cuando está dentro de om3-tableros-detail */
.om3-tableros-detail__dashboard-wrapper .tableau-embed-wrapper__actions {
    display: none;
}

/* Ocultar el título del contentElement TableauEmbed en el detalle de Tableros */
.om3-tableros-detail__dashboard-wrapper > .no-frame > header {
    display: none;
}

.om3-tableros-detail__figure {
    margin: 0;
}

.om3-tableros-detail__cover {
    width: 100%;
    height: auto;
    display: block;
}

/* ----------------------------------------
   BOTONES DE ACCIÓN (FUERA DEL DASHBOARD)
   ---------------------------------------- */
.om3-tableros-detail__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.om3-tableros-detail__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 48px;
}

/* Botón Descargar PDF (izquierda) - fondo verde */
.om3-tableros-detail__btn--download {
    background-color: #3BC20A;
    color: var(--Neutral-100);
    border: none;
}

.om3-tableros-detail__btn--download:hover {
    background-color: #33a808;
}

/* Botón Consultar Tablero (derecha) - outline verde */
.om3-tableros-detail__btn--external {
    background-color: transparent;
    color: #3BC20A;
    border: 1px solid #3BC20A;
}

.om3-tableros-detail__btn--external:hover {
    background-color: rgba(59, 194, 10, 0.1);
}

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

/* ----------------------------------------
   TABLEAU EMBED CONTAINER STYLES
   ---------------------------------------- */
.tableau-embed-wrapper {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--Neutral-100);
    border: 1px solid var(--Neutral-90, #e0e0e0);
}

.tableau-embed-wrapper__container {
    width: 100%;
    min-height: 500px;
}

.tableau-embed-wrapper__actions {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: #f9f9f9;
    border-top: 1px solid var(--Neutral-90, #e0e0e0);
    flex-wrap: wrap;
}

.tableau-embed-wrapper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    flex: 1;
    min-width: 150px;
}

.tableau-embed-wrapper__btn--download {
    background-color: var(--tablero-detail-download, #22A93E);
    color: var(--Neutral-100);
}

.tableau-embed-wrapper__btn--download:hover {
    background-color: var(--tablero-btn-hover, #145C20);
}

.tableau-embed-wrapper__btn--external {
    background-color: transparent;
    color: var(--tablero-chip-text, #11642C);
    border: 2px solid var(--tablero-detail-external, #75CC6B);
}

.tableau-embed-wrapper__btn--external:hover {
    background-color: var(--tablero-chip-bg, #E6F5EA);
}

.tableau-embed-wrapper__btn .material-symbols-outlined {
    font-size: 18px;
}

/* ----------------------------------------
   RESPONSIVE: Tablet - TABLEROS
   ---------------------------------------- */
@media (max-width: 991.98px) {
    .om3-tableros-header__top {
        flex-direction: column;
        align-items: stretch;
    }

    .om3-tableros-controls {
        justify-content: flex-start;
    }

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

    .om3-tableros-detail__title {
        font-size: 1.75rem;
    }

    .om3-tableros-detail__subtitle {
        font-size: 1.1rem;
    }
}

/* ----------------------------------------
   RESPONSIVE: Mobile - TABLEROS
   ---------------------------------------- */
@media (max-width: 575.98px) {
    .om3-tableros-header__title {
        font-size: 1.5rem;
    }

    .om3-tableros-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .om3-tableros-controls__select {
        width: 100%;
    }

    .om3-tableros-controls__search {
        min-width: 100%;
    }

    .om3-tableros-chips {
        gap: 0.5rem;
    }

    .om3-tableros-chip {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }

    .om3-tableros-card {
        height: auto;
        min-height: 320px;
    }

    .om3-tableros-card__content {
        padding: 0.875rem 1rem;
    }

    .om3-tableros-card__title {
        font-size: 0.9rem;
    }

    .om3-tableros-card__actions {
        flex-direction: column;
    }

    .om3-tableros-card__btn {
        width: 100%;
        justify-content: center;
    }

    .om3-tableros-detail__header-wrapper {
        gap: 1rem;
    }

    .om3-tableros-detail__category-bar {
        width: 6px;
    }

    .om3-tableros-detail__title {
        font-size: 1.5rem;
    }

    .om3-tableros-detail__actions {
        flex-direction: column;
    }

    .om3-tableros-detail__btn {
        width: 100%;
    }

    .tableau-embed-wrapper__actions {
        flex-direction: column;
    }

    .tableau-embed-wrapper__btn {
        width: 100%;
    }
}

/* ========================================
   TOAST NOTIFICATIONS PARA TABLEAU ACTIONS
   Sistema de notificaciones visuales para feedback de acciones
   ======================================== */

/* Contenedor de toasts - posición fija en esquina inferior derecha */
.tableau-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

/* Estilo base de cada toast */
.tableau-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 8px;
    background: #333;
    color: var(--Neutral-100);
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateX(120%);
    transition: transform 0.3s ease;
    pointer-events: auto;
    max-width: 350px;
}

/* Animación de entrada */
.tableau-toast.show {
    transform: translateX(0);
}

/* Variantes de color por tipo de toast */
.tableau-toast--success {
    background: #3BC20A;
    color: var(--Neutral-100);
}

.tableau-toast--error {
    background: #dc3545;
    color: var(--Neutral-100);
}

.tableau-toast--info {
    background: #0d6efd;
    color: var(--Neutral-100);
}

.tableau-toast--warning {
    background: #ffc107;
    color: #212529;
}

.tableau-toast--loading {
    background: #6c757d;
    color: var(--Neutral-100);
}

/* Icono dentro del toast */
.tableau-toast .material-symbols-outlined {
    font-size: 22px;
    flex-shrink: 0;
}

/* Animación de rotación para icono de carga */
.tableau-toast--loading .material-symbols-outlined {
    animation: toast-spin 1.5s linear infinite;
}

@keyframes toast-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Mensaje del toast */
.tableau-toast__message {
    flex: 1;
    line-height: 1.4;
}

/* Responsive: ajustar posición en móviles */
@media (max-width: 576px) {
    .tableau-toast-container {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .tableau-toast {
        max-width: 100%;
    }
}

/* Enlaces en elementos de contenido de texto - color primario azul */
.frame-type-textmedia a:not(.btn):not([class]),
.frame-type-textpic a:not(.btn):not([class]),
.frame-type-text a:not(.btn):not([class]),
.frame-type-textmedia a[class=""],
.frame-type-textpic a[class=""],
.frame-type-text a[class=""] {
    color: var(--Primario-40);
}

.frame-type-textmedia a:not(.btn):not([class]):hover,
.frame-type-textpic a:not(.btn):not([class]):hover,
.frame-type-text a:not(.btn):not([class]):hover,
.frame-type-textmedia a[class=""]:hover,
.frame-type-textpic a[class=""]:hover,
.frame-type-text a[class=""]:hover {
    color: var(--Primario-40);
    text-decoration: underline;
}

/* =============================================================================
   OM3 Menu Card - Variante con Enlace Completo
   =============================================================================
   Tarjetas de submenú donde toda la tarjeta es clickeable.
   Se activa automáticamente en páginas con backend layout OM3.
   Colores definidos en root.css como variables --om3-menucard-*
   ============================================================================= */

/* Contenedor del enlace que envuelve toda la tarjeta */
.card-menu--om3-link .card-link-wrapper {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    outline: none;
}

/* Tarjeta base OM3 */
.card-menu--om3-link .card {
    background-color: var(--om3-menucard-bg);
    border: 1px solid var(--om3-menucard-border);
    border-radius: 8px;
    transition: background-color var(--transition-hover, 0.2s ease),
                border-color var(--transition-hover, 0.2s ease),
                box-shadow var(--transition-hover, 0.2s ease);
    height: 100%;
    cursor: pointer;
}

/* Título de tarjeta */
.card-menu--om3-link .card-title {
    color: var(--om3-menucard-text);
    margin-bottom: 0.5rem;
    transition: color var(--transition-hover, 0.2s ease);
    font-family: var(--h4-font-family, 'Nunito Sans', Helvetica);
    font-weight: var(--h4-font-weight-bold, 700);
}

/* Subtítulo de tarjeta */
.card-menu--om3-link .card-subtitle {
    color: var(--Neutral-50);
    margin-bottom: 0.5rem;
}

/* Texto de tarjeta */
.card-menu--om3-link .card-text {
    color: var(--Neutral-30);
    font-family: var(--paragraph-font-family, 'Verdana');
    font-size: var(--paragraph-font-size, 13px);
    line-height: var(--paragraph-line-height, 1.6);
}

/* Cuerpo de tarjeta - padding consistente */
.card-menu--om3-link .card-body {
    padding: 1.25rem;
}

/* Estado hover - cambio de fondo y texto */
.card-menu--om3-link .card-link-wrapper:hover .card {
    background-color: var(--om3-menucard-hover-bg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-menu--om3-link .card-link-wrapper:hover .card-title {
    color: var(--om3-menucard-hover-text);
}

/* Estado focus - accesibilidad WCAG 2.2 AA */
.card-menu--om3-link .card-link-wrapper:focus .card,
.card-menu--om3-link .card-link-wrapper:focus-visible .card {
    background-color: var(--om3-menucard-focus-bg);
}

.card-menu--om3-link .card-link-wrapper:focus .card-title,
.card-menu--om3-link .card-link-wrapper:focus-visible .card-title {
    color: var(--om3-menucard-focus-text);
}

/* Imagen dentro de tarjeta clickeable */
.card-menu--om3-link .card-img-top {
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.card-menu--om3-link .card-img-top img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition-hover, 0.2s ease);
}

/* Efecto sutil de zoom en imagen al hover */
.card-menu--om3-link .card-link-wrapper:hover .card-img-top img {
    transform: scale(1.02);
}

/* Responsive: ajustes para móviles */
@media (max-width: 767.98px) {
    .card-menu--om3-link .card-body {
        padding: 1rem;
    }

    .card-menu--om3-link .card-title {
        font-size: var(--h5-font-size-medium, 18px);
    }
}

/* ============================================
   Split Typography Header Component
   ============================================
   Componente para cabeceras con tipografía dividida
   Primera palabra en estilo regular, resto en negrita rosa
   Usado con: .om3-header-split-typography
   ============================================ */

.om3-header-split-typography {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.om3-header-split-typography .split-first {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 32px;
    color: var(--Neutral-30);
    display: block;
}

.om3-header-split-typography .split-rest {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 32px;
    color: var(--Pink-accent);
    display: block;
}

/* Fallback: si JS no se ejecuta, mostrar header normal */
.om3-header-split-typography:not(.split-initialized) {
    display: block;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 32px;
    color: var(--Neutral-30);
}

/* Responsive: ajustar tamaño en móviles */
@media (max-width: 767px) {
    .om3-header-split-typography .split-first,
    .om3-header-split-typography .split-rest {
        font-size: 24px;
        line-height: 28px;
    }
}

/* ============================================
   Split Typography Header Component - Orange Variant
   ============================================
   Componente para cabeceras con tipografía dividida
   Primera palabra en estilo regular, resto en negrita naranja
   Usado con: .om3-header-split-typography-orange
   ============================================ */

.om3-header-split-typography-orange {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.om3-header-split-typography-orange .split-first {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 32px;
    color: var(--Neutral-30);
    display: block;
}

.om3-header-split-typography-orange .split-rest {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 32px;
    color: var(--Complementario-60);
    display: block;
}

/* Fallback: si JS no se ejecuta, mostrar header normal */
.om3-header-split-typography-orange:not(.split-initialized) {
    display: block;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 32px;
    color: var(--Neutral-30);
}

/* Responsive: ajustar tamaño en móviles */
@media (max-width: 767px) {
    .om3-header-split-typography-orange .split-first,
    .om3-header-split-typography-orange .split-rest {
        font-size: 24px;
        line-height: 28px;
    }
}

/* =================================================================== */
/* Ajuste de espaciado entre Sección 4 y Sección 5 (Figma: 70px)     */
/* =================================================================== */

/* Eliminar todos los espaciados de sección 4 */
.om3-agenda-news-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    row-gap: 0 !important; /* Eliminar gap vertical de Bootstrap g-4 */
}

/* Eliminar padding de la última columna (OM3 en redes sociales) */
.om3-agenda-news-section .om3-redes-col {
    padding-bottom: 0 !important;
}

/* Eliminar cualquier margen del contenido dinámico en la última columna */
.om3-agenda-news-section .om3-redes-col > * {
    margin-bottom: 0 !important;
}

/* =================================================================== */
/* Sección "Acerca de este micrositio" - Footer OM3 Home             */
/* =================================================================== */

.om3-footer-info-section {
    margin-top: 70px;
    margin-bottom: 2rem;
    padding-top: 0 !important;
}

.om3-about-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.om3-about-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.om3-about-logo {
    width: 100%;
    display: flex;
    justify-content: center;
}

.om3-about-logo img {
    width: 100%;
    height: auto;
}

.om3-about-link-wrapper {
    text-align: center;
    width: 100%;
}

.om3-about-link {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 12px;
    line-height: 110%;
    letter-spacing: 0;
    text-align: center;
    text-decoration: underline;
    text-decoration-style: solid;
    color: var(--Neutral-40);
    transition: var(--transition-color);
    display: inline-block;
}

.om3-about-link:hover,
.om3-about-link:focus {
    color: var(--Neutral-30);
    text-decoration: underline;
}

/* Responsive: en móvil centrar todo */
@media (max-width: 767px) {
    /* Restaurar espaciado normal en móvil */
    .om3-agenda-news-section {
        margin-bottom: 1.5rem !important;
        padding-bottom: 0 !important;
        row-gap: 1.5rem !important; /* Restaurar gap de Bootstrap en móvil */
    }

    .om3-agenda-news-section .om3-redes-col {
        padding-bottom: 0 !important;
    }

    .om3-footer-info-section {
        margin-top: 0;
        margin-bottom: 1.5rem;
        padding-top: 0 !important;
    }

    .om3-about-link {
        font-size: 11px;
    }
}

/* =================================================================== */
/* Botones RTE OM3 - Estilos para enlaces en editor de texto           */
/* =================================================================== */

/* OM3 Data Button Link - Botón verde con flecha (sin icono PDF) */
.btn-om3-data {
    background-color: var(--om3micro-primary, #2C9108) !important;
    color: var(--Neutral-100, #FFFFFF) !important;
    border: none;
}

/* Asegurar color blanco en enlaces */
a.btn-om3-data,
a.btn-om3-data:link,
a.btn-om3-data:visited {
    color: var(--Neutral-100, #FFFFFF) !important;
}

/* Eliminar cualquier icono ::before heredado - solo usar flecha de btn-fut */
.btn-om3-data::before {
    content: none !important;
    display: none !important;
}

.btn-om3-data:hover,
.btn-om3-data:focus {
    background-color: #248007 !important;
    color: var(--Neutral-100, #FFFFFF) !important;
}


/* OM3 PDF Download Button - Verde con iconos de PDF y descarga */
.btn-om3-pdf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--om3micro-primary, #2C9108);
    color: var(--Neutral-100, #FFFFFF);
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    border: none;
    transition: background-color 0.2s ease;
}

/* Asegurar color blanco en enlaces */
a.btn-om3-pdf,
a.btn-om3-pdf:link,
a.btn-om3-pdf:visited {
    color: var(--Neutral-100, #FFFFFF) !important;
}

.btn-om3-pdf::before {
    content: 'picture_as_pdf';
    font-family: 'Material Symbols Local';
    font-size: 1.25rem;
    font-weight: normal;
    line-height: 1;
}

.btn-om3-pdf::after {
    content: 'download';
    font-family: 'Material Symbols Local';
    font-size: 1.25rem;
    font-weight: normal;
    line-height: 1;
}

.btn-om3-pdf:hover,
.btn-om3-pdf:focus {
    background-color: #248007;
    color: var(--Neutral-100, #FFFFFF);
    text-decoration: none;
}


/* OM3 Contact PDF Button - Naranja con iconos de PDF y descarga */
.btn-om3-contact-pdf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #A63500;
    color: var(--Neutral-100, #FFFFFF);
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    border: none;
    transition: background-color 0.2s ease;
}

/* Asegurar color blanco en enlaces */
a.btn-om3-contact-pdf,
a.btn-om3-contact-pdf:link,
a.btn-om3-contact-pdf:visited {
    color: var(--Neutral-100, #FFFFFF) !important;
}

.btn-om3-contact-pdf::before {
    content: 'picture_as_pdf';
    font-family: 'Material Symbols Local';
    font-size: 1.25rem;
    font-weight: normal;
    line-height: 1;
}

.btn-om3-contact-pdf::after {
    content: 'download';
    font-family: 'Material Symbols Local';
    font-size: 1.25rem;
    font-weight: normal;
    line-height: 1;
}

.btn-om3-contact-pdf:hover,
.btn-om3-contact-pdf:focus {
    background-color: #8A2D00;
    color: var(--Neutral-100, #FFFFFF);
    text-decoration: none;
}


/* ==========================================================================
   Estilos personalizados de acordeón para página OM3 (ID y subpáginas)
   Aplica a: FAQ, Glosario y acordeones estándar
   Configurado via constante TypoScript: migCoSite.om3AccordionPageId
   ========================================================================== */

/* Acordeón abierto - Botón con fondo naranja */
.om3-accordion-custom .accordion-button:not(.collapsed) {
    background-color: var(--Complementario-50);
    color: var(--Neutral-100);
}

/* Acordeón abierto - Icono en color blanco */
.om3-accordion-custom .accordion-button:not(.collapsed)::after {
    color: var(--Neutral-100);
}

/* Acordeón abierto - Cuerpo con fondo claro */
.om3-accordion-custom .accordion-collapse.show .accordion-body {
    background-color: var(--Complementario-98);
}

/* Borde inferior del ítem de acordeón */
.om3-accordion-custom .accordion-item {
    border-bottom: 1px solid var(--Complementario-50);
}

/* Desactivar borde azul predeterminado para FAQ/Glosario en página de acordeón personalizado */
.om3-accordion-custom .accordion:has(.content-element.faq),
.om3-accordion-custom .accordion:has(.content-element.glosario) {
    border-bottom: none;
}

/* ==========================================================================
   OM3 CATEGORY DESCRIPTION
   Componente para mostrar descripciones de categorías seleccionadas en filtros.
   Se muestra dinámicamente cuando el usuario selecciona un chip de categoría.
   ========================================================================== */

/* Contenedor principal - animación de entrada */
.om3-category-description {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    animation: om3-category-fade-in 0.3s ease-out;
}

/* Estado oculto */
.om3-category-description[hidden] {
    display: none;
}

/* Animación de entrada */
@keyframes om3-category-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Título de categoría - h3 typography según Figma */
.om3-category-description__title {
    font-family: var(--h3-font-family);
    font-size: var(--h3-font-size-large);        /* 28px */
    font-weight: var(--h3-font-weight-semibold); /* 600 */
    line-height: 32px;                            /* Especificación Figma */
    letter-spacing: 0;
    margin-bottom: 1rem;
    margin-top: 0;
}

/* Contenido RTE - una sola columna */
.om3-category-description__content {
    font-family: var(--nunito-font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--Neutral-30);
}

.om3-category-description__content p {
    margin-bottom: 0.75rem;
}

.om3-category-description__content p:last-child {
    margin-bottom: 0;
}

/* Links dentro del contenido RTE */
.om3-category-description__content a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.om3-category-description__content a:hover {
    text-decoration-thickness: 2px;
}

/* Listas dentro del contenido RTE */
.om3-category-description__content ul,
.om3-category-description__content ol {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
}

.om3-category-description__content li {
    margin-bottom: 0.25rem;
}

/* ==========================================================================
   VARIANTES DE COLOR POR SECCIÓN
   Cada tipo de lista OM3 tiene su propio color de título
   ========================================================================== */

/* Publicaciones - Magenta */
.om3-publicaciones-category-description .om3-category-description__title {
    color: var(--om3pub-title);  /* #91085A */
}

/* Informes - Púrpura */
.om3-informes-category-description .om3-category-description__title {
    color: var(--om3-purple);    /* #443CE7 */
}

/* Microdatos - Verde */
.om3-microdatos-category-description .om3-category-description__title {
    color: var(--om3micro-title); /* #2C9108 */
}

/* Tableros - Verde (usa el mismo color que microdatos) */
.om3-tableros-category-description .om3-category-description__title {
    color: var(--om3micro-title); /* #2C9108 */
}

/* Cápsulas de Conocimiento - Naranja complementario */
.om3-capsulas-category-description .om3-category-description__title {
    color: var(--Complementario-50);
}

/* ==========================================================================
   RESPONSIVE - Ajustes para móvil
   ========================================================================== */

@media (max-width: 767.98px) {
    .om3-category-description {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .om3-category-description__title {
        font-size: var(--h3-font-size-medium); /* 24px en móvil */
        line-height: 28px;
    }

    .om3-category-description__content {
        font-size: 0.9375rem; /* 15px */
    }
}

/* ==========================================================================
   BARRA SUPERIOR OM3 - Breadcrumb + Identidad en filas apiladas
   Layout:
     - Fila 1: Breadcrumb (ancho completo)
     - Fila 2: Identidad (logo + nombre) alineada a la derecha
   Gap de 20px hacia el menú inferior
   ========================================================================== */

/* Contenedor principal - con margen inferior de 20px hacia el menú */
.om3-social-header {
    position: relative;
    background-color: transparent;
    width: 100%;
    margin: 0 auto 20px;
    padding: 1rem 0;
}

/* Contenedor flex vertical - filas apiladas */
.om3-social-header__content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

/* Fila 1: Breadcrumb - ancho completo */
.om3-social-header__breadcrumb {
    width: 100%;
}

/* Resetear estilos del breadcrumb container dentro de OM3 header */
.om3-social-header__breadcrumb .breadcrumb-container {
    padding: 0;
    margin: 0;
}

/* Fila 2: Zona de identidad - alineada a la derecha */
.om3-social-header__identity {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

/* ==========================================================================
   OM3 BREADCRUMB STYLING
   Breadcrumb ahora está dentro del header (Om3Header.html)
   Usa selector :has() para detectar homepage via .om3-home-content
   ========================================================================== */

/* Base: Breadcrumb dentro del header OM3 */
.om3-social-header__breadcrumb .mig-breadcrumb {
    font-size: 0.875rem;
}

/* OM3 Homepage: Breadcrumb con caja de fondo blanco */
.om3-microsite:has(.om3-home-content) .om3-social-header__breadcrumb .mig-breadcrumb {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    padding: 4px 12px;
    background-color: var(--Neutral-100);
}

/* ==========================================================================
   HERO BACKGROUND IMAGE (HOMEPAGE)
   Imagen de fondo decorativa con opacidad reducida
   ========================================================================== */

/* Contenedor del fondo hero */
.om3-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 435px;
    max-height: 435px;
    overflow: hidden;
    z-index: -100;
    pointer-events: none;
}

/* Imagen de fondo */
.om3-hero-background__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.77;
}

/* Asegurar que el contenido esté por encima del hero background */
.om3-home-content {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   GRID INFERIOR 2x3 (HOMEPAGE)
   Estructura: Agenda (spans 2 rows) | Noticias | Redes
                                     | Contact  | About
   ========================================================================== */

/* Grid container */
.om3-bottom-grid {
    display: grid;
    grid-template-columns: 3fr 6fr 3fr;
    grid-template-rows: auto auto;
}

/* Agenda: columna 1, filas 1-2 (span vertical) */
.om3-bottom-grid__agenda {
    grid-column: 1;
    grid-row: 1 / 3;
}

/* Noticias: columna 2, fila 1 */
.om3-bottom-grid__noticias {
    grid-column: 2;
    grid-row: 1;
}

/* Redes sociales: columna 3, fila 1 */
.om3-bottom-grid__redes {
    grid-column: 3;
    grid-row: 1;
}

/* Contact: columna 2, fila 2 */
.om3-bottom-grid__contact {
    grid-column: 2;
    grid-row: 2;
}

/* About: columna 3, fila 2 (centrado, contenido apilado verticalmente) */
.om3-bottom-grid__about {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;  /* Apilar elementos verticalmente */
    align-items: center;
    justify-content: center;
    gap: 1rem;  /* Espacio entre elementos apilados */
}

/* Contenido About */
.om3-about-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.om3-about-logo img {
    max-height: 80px;
    width: auto;
}

.om3-about-link {
    color: var(--Primario-50);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.om3-about-link:hover {
    color: var(--Primario-40);
    text-decoration: underline;
}

/* Asegurar que el contenido llene el ancho disponible en las celdas del grid */
.om3-bottom-grid__agenda,
.om3-bottom-grid__noticias,
.om3-bottom-grid__redes,
.om3-bottom-grid__contact,
.om3-bottom-grid__about {
    min-width: 0;  /* Permitir que el grid item se encoja si es necesario */
}

/* Elementos de contenido dentro del grid deben llenar su contenedor */
.om3-bottom-grid > div > .frame,
.om3-bottom-grid > div > .frame-default,
.om3-bottom-grid > div > .frame-type-textmedia,
.om3-bottom-grid > div > .frame-type-text {
    width: 100%;
    max-width: 100%;  /* Sobreescribir max-width global de 1140px */
    margin-left: 0;
    margin-right: 0;
}

/* Forzar eliminación de padding superior e inferior para elementos dentro de About */
.om3-bottom-grid__about > .frame,
.om3-bottom-grid__about > .frame-default,
.om3-bottom-grid__about > .frame-type-image,
.om3-bottom-grid__about > .frame-type-textmedia,
.om3-bottom-grid__about > .frame-type-text {
    padding-top: 0 !important;
}

/* ==========================================================================
   RESPONSIVE - BOTTOM GRID
   ========================================================================== */

/* Tablet: 2 columnas, layout reorganizado */
@media (max-width: 991.98px) {
    .om3-bottom-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 24px;
        row-gap: 32px;
    }

    /* Agenda ocupa columna 1, fila 1 */
    .om3-bottom-grid__agenda {
        grid-column: 1;
        grid-row: 1;
    }

    /* Noticias ocupa columna 2, fila 1 */
    .om3-bottom-grid__noticias {
        grid-column: 2;
        grid-row: 1;
    }

    /* Redes ocupa columna 1, fila 2 */
    .om3-bottom-grid__redes {
        grid-column: 1;
        grid-row: 2;
    }

    /* Contact ocupa columna 2, fila 2 */
    .om3-bottom-grid__contact {
        grid-column: 2;
        grid-row: 2;
    }

    /* About ocupa columna 1-2, fila 3 */
    .om3-bottom-grid__about {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    /* Ocultar imagen de fondo hero en tablet y móvil */
    .om3-hero-background {
        display: none;
    }
}

/* Móvil: 1 columna, todo apilado */
@media (max-width: 767.98px) {
    .om3-bottom-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 24px;
        row-gap: 24px;
    }

    .om3-bottom-grid__agenda,
    .om3-bottom-grid__noticias,
    .om3-bottom-grid__redes,
    .om3-bottom-grid__contact,
    .om3-bottom-grid__about {
        grid-column: 1;
        grid-row: auto;
    }

    /* Breadcrumb OM3 ajustes móvil */
    .om3-microsite .breadcrumb-container .mig-breadcrumb {
        font-size: 0.8125rem;
    }

    .om3-microsite:has(.om3-home-content) .breadcrumb-container .mig-breadcrumb {
        padding: 3px 10px;
    }
}

/* ==========================================================================
   RESPONSIVE - HEADER OM3
   ========================================================================== */

/* Móvil: centrar ambas filas y reducir margen */
@media (max-width: 767.98px) {
    .om3-social-header {
        margin-bottom: 24px;
    }

    .om3-social-header__content {
        align-items: center;
    }

    /* Breadcrumb centrado en móvil */
    .om3-social-header__breadcrumb {
        text-align: center;
    }

    /* Identidad centrada en móvil */
    .om3-social-header__identity {
        justify-content: center;
    }

    .om3-social-header__identity > div {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   RTE STYLES - Estilos personalizados para el editor de texto enriquecido
   Usado en: Templates con campos RTE (bodytext, etc.)
   ========================================================================== */

/* Párrafo con color púrpura OM3 */
p.rte-text-purple {
    color: var(--om3lastnews-bar, #4B45BF);
}

/* Párrafo con color magenta OM3 */
p.rte-text-magenta {
    color: var(--om3pub-cta, #D90B86);
}

/* Botón de enlace para Publicaciones - estilo outlined */
a.btn-publications-link {
    display: inline-block;
    min-height: 24px;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--om3-publication-pagination, #D90B87);
    background-color: transparent;
    color: var(--om3-publication-pagination, #D90B87);
    font-family: 'Nunito Sans', var(--nunito-font), sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

a.btn-publications-link:hover {
    background-color: var(--om3-publication-pagination, #D90B87);
    color: #FFFFFF;
}

/* ==========================================================================
   OM3 SIMPLE LIST TEMPLATES
   Variantes simplificadas sin chips de categorías ni descripciones.
   Soportan múltiples instancias en la misma página mediante ID único.
   Los estilos heredan de las plantillas originales con prefijo -simple.
   ========================================================================== */

/* --------------------------------------------------------------------------
   OM3 PUBLICACIONES SIMPLE - Hereda de om3-publicaciones
   -------------------------------------------------------------------------- */

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

/* Header */
.om3-publicaciones-simple-header {
    margin-bottom: 2rem;
}

.om3-publicaciones-simple-header__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.om3-publicaciones-simple-header__title-area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 280px;
}

.om3-publicaciones-simple-header__bar {
    width: 80px;
    height: 8px;
    background-color: var(--om3pub-title, #91085A);
    border-radius: 4px;
}

.om3-publicaciones-simple-header__title {
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size-large);
    font-weight: var(--h1-font-weight-bold);
    line-height: 1.2;
    color: var(--om3pub-title, #91085A);
    margin: 0;
}

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

.om3-publicaciones-simple-header__count {
    font-weight: 700;
    color: var(--Neutral-30);
}

/* Controls */
.om3-publicaciones-simple-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.om3-publicaciones-simple-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;
}

.om3-publicaciones-simple-controls__search {
    position: relative;
    min-width: 250px;
}

.om3-publicaciones-simple-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;
}

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

/* Grid - Los estilos de tarjetas se heredan de om3-publicaciones-card en news.css */
.om3-publicaciones-simple-grid {
    margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   OM3 INFORMES SIMPLE - Hereda de om3-informes
   -------------------------------------------------------------------------- */

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

.om3-informes-simple-header {
    margin-bottom: 2rem;
}

.om3-informes-simple-header__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.om3-informes-simple-header__title-area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 280px;
}

.om3-informes-simple-header__bar {
    width: 80px;
    height: 8px;
    background-color: var(--om3-purple, #443CE7);
    border-radius: 4px;
}

.om3-informes-simple-header__title {
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size-large);
    font-weight: var(--h1-font-weight-bold);
    line-height: 1.2;
    color: var(--om3-purple, #443CE7);
    margin: 0;
}

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

.om3-informes-simple-header__count {
    font-weight: 700;
    color: var(--Neutral-30);
}

/* Controls */
.om3-informes-simple-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.om3-informes-simple-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;
}

.om3-informes-simple-controls__search {
    position: relative;
    min-width: 250px;
}

.om3-informes-simple-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;
}

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

/* Grid - Los estilos de tarjetas se heredan de om3-informes-card en news.css */
.om3-informes-simple-grid {
    margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   OM3 CÁPSULAS SIMPLE - Hereda de om3-capsulas
   -------------------------------------------------------------------------- */

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

.om3-capsulas-simple-header {
    margin-bottom: 2rem;
}

.om3-capsulas-simple-header__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.om3-capsulas-simple-header__title-area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 280px;
}

.om3-capsulas-simple-header__bar {
    width: 80px;
    height: 8px;
    background-color: var(--Complementario-50);
    border-radius: 4px;
}

.om3-capsulas-simple-header__title {
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size-large);
    font-weight: var(--h1-font-weight-bold);
    line-height: 1.2;
    color: var(--Complementario-50);
    margin: 0;
}

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

.om3-capsulas-simple-header__count {
    font-weight: 700;
    color: var(--Neutral-30);
}

/* Controls */
.om3-capsulas-simple-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.om3-capsulas-simple-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;
}

.om3-capsulas-simple-controls__search {
    position: relative;
    min-width: 250px;
}

.om3-capsulas-simple-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;
}

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

/* Grid - Los estilos de tarjetas se heredan de om3-capsulas-card en news.css */
.om3-capsulas-simple-grid {
    margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   OM3 TABLEROS SIMPLE - Hereda de om3-tableros
   -------------------------------------------------------------------------- */

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

.om3-tableros-simple-header {
    margin-bottom: 2rem;
}

.om3-tableros-simple-header__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.om3-tableros-simple-header__title-area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 280px;
}

.om3-tableros-simple-header__bar {
    width: 80px;
    height: 8px;
    background-color: var(--om3micro-primary, #2C9108);
    border-radius: 4px;
}

.om3-tableros-simple-header__title {
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size-large);
    font-weight: var(--h1-font-weight-bold);
    line-height: 1.2;
    color: var(--om3micro-primary, #2C9108);
    margin: 0;
}

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

.om3-tableros-simple-header__count {
    font-weight: 700;
    color: var(--Neutral-30);
}

/* Controls */
.om3-tableros-simple-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.om3-tableros-simple-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;
}

.om3-tableros-simple-controls__search {
    position: relative;
    min-width: 250px;
}

.om3-tableros-simple-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;
}

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

/* Grid - Los estilos de tarjetas se heredan de om3-tableros-card */
.om3-tableros-simple-grid {
    margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   RESPONSIVE - SIMPLE TEMPLATES
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .om3-publicaciones-simple-header__top,
    .om3-informes-simple-header__top,
    .om3-capsulas-simple-header__top,
    .om3-tableros-simple-header__top {
        flex-direction: column;
        align-items: stretch;
    }

    .om3-publicaciones-simple-controls,
    .om3-informes-simple-controls,
    .om3-capsulas-simple-controls,
    .om3-tableros-simple-controls {
        justify-content: flex-start;
    }

    .om3-publicaciones-simple-controls__search,
    .om3-informes-simple-controls__search,
    .om3-capsulas-simple-controls__search,
    .om3-tableros-simple-controls__search {
        flex: 1;
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .om3-publicaciones-simple-header__title,
    .om3-informes-simple-header__title,
    .om3-capsulas-simple-header__title,
    .om3-tableros-simple-header__title {
        font-size: 1.5rem;
    }

    .om3-publicaciones-simple-controls,
    .om3-informes-simple-controls,
    .om3-capsulas-simple-controls,
    .om3-tableros-simple-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .om3-publicaciones-simple-controls__select,
    .om3-informes-simple-controls__select,
    .om3-capsulas-simple-controls__select,
    .om3-tableros-simple-controls__select {
        width: 100%;
    }

    .om3-publicaciones-simple-controls__search,
    .om3-informes-simple-controls__search,
    .om3-capsulas-simple-controls__search,
    .om3-tableros-simple-controls__search {
        min-width: 100%;
    }
}