/* Estilos básicos para el mega-menu MinCiencia */
.minciencia-menu { list-style: none; margin: 0; padding: 0; display: flex; align-self: stretch; }
.minciencia-menu > li { position: relative; display: flex; align-items: stretch; }
/* El link ocupa todo el alto del header (no solo el alto de su texto) para que el
   área de hover llegue sin cortes hasta el mega-menú, que ahora se alinea con el
   borde inferior del header (igual que el buscador) en vez del borde del link. */
.minciencia-menu > li > a { display: flex; align-items: center; padding: 18px 20px; color: #ffffff; text-decoration: none; }
/* Puente invisible: el header trae padding-block-end (~1rem) debajo del <li> estirado,
   y el mega-menú abre en el borde exterior del header (para alinearse con el buscador).
   Sin este puente, al bajar el mouse hay un tramo sin ningún elemento del <li> debajo
   del cursor y el navegador dispara mouseleave antes de llegar al mega-menú, cerrándolo. */
.minciencia-menu > li::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 32px;
}

.minciencia-mega-nav { overflow: visible; position: relative; }
.minciencia-menu { overflow: visible; }

:root{
    --mm-bg: #2C2E7B; /* panel derecho (hijos) */
    --mm-left-bg: #26286E; /* columna izquierda (categorías padre) */
    --mm-hover: #BDBDFF; /* lavanda: hover/foco/estado activo */
}

/* position: fixed (no absolute) para que el ancho sea 100% del viewport real,
   sin importar cuán angosto/centrado sea el contenedor que envuelve al <li>.
   El "top" exacto (pegado al link, sin hueco) lo calcula script.js en cada hover. */
.minciencia-megamenu { position: fixed; left: 0; top: 100%; width: 100vw; max-width: none; box-sizing: border-box; background: var(--mm-bg); color: #fff; font-family: "Museo Sans", sans-serif; visibility: hidden; opacity: 0; transform: translateY(10px); pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,0.15); z-index: 99999; transition: opacity 220ms ease, transform 220ms ease, visibility 220ms; display: flex; align-items: stretch; }
/* Mostrar cuando cualquier li tenga hover/focus-within (más robusto para distintas estructuras) */
.minciencia-menu li:hover .minciencia-megamenu,
.minciencia-menu li:focus-within .minciencia-megamenu,
.minciencia-menu > li.open > .minciencia-megamenu,
.minciencia-megamenu.active { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }

/* contorno temporal para diagnóstico (elimina si no necesario) */
.minciencia-megamenu.debug-outline { outline: 2px dashed rgba(255,255,255,0.25); }

/* small fade for right groups */
.minciencia-megamenu .mm-right-group { opacity: 0; transform: translateY(6px); transition: opacity 160ms ease, transform 160ms ease; }
.minciencia-megamenu .mm-right-group.active { opacity: 1; transform: translateY(0); }

.minciencia-megamenu .mm-container { max-width: 1140px; width: 100%; margin: 0 auto; min-height: 232px; display: flex; align-items: stretch; position: relative; }

/* Columna izquierda: categorías padre */
.minciencia-megamenu .mm-left { flex: 0 0 405px; width: 405px; background: var(--mm-left-bg); box-sizing: border-box; padding: 24px 0; }
.minciencia-megamenu .mm-left-list { list-style: none; margin: 0; padding: 0; min-height: 120px; }
.minciencia-megamenu .mm-left-item { margin-bottom: 0; }
.minciencia-megamenu .mm-left-item > a {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 40px; min-height: 44px; box-sizing: border-box;
    font-size: 16px; font-weight: 500; line-height: 24px;
    color: #fff; text-decoration: none; cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.minciencia-megamenu .mm-left-item > a::after {
    content: ''; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-top: 2px solid currentColor;
    transform: rotate(45deg); opacity: .8; flex: 0 0 auto;
}
.minciencia-megamenu .mm-left-item:hover > a,
.minciencia-megamenu .mm-left-item.active > a { color: var(--mm-hover); }
.minciencia-megamenu .mm-left-item > a:focus-visible { outline: 2px solid var(--mm-hover); outline-offset: -2px; }

/* Columna derecha: hijos de la categoría activa */
.minciencia-megamenu .mm-right { flex: 1 1 auto; padding: 24px 0; background: transparent; }
.minciencia-megamenu .mm-right-inner { display: block; }
.minciencia-megamenu .mm-right-group { display: none; }
.minciencia-megamenu .mm-right-group.active { display: block; }
.minciencia-megamenu .mm-right-group ul { list-style: none; margin: 0; padding: 0; }
.minciencia-megamenu .mm-right-item { margin-bottom: 0; }
.minciencia-megamenu .mm-right-item a {
    display: flex; align-items: center;
    padding: 14px 48px; min-height: 44px; box-sizing: border-box;
    font-size: 16px; font-weight: 500; line-height: 24px;
    color: #fff; text-decoration: none;
    transition: color .15s ease;
}
.minciencia-megamenu .mm-right-item a:hover { color: var(--mm-hover); }
.minciencia-megamenu .mm-right-item a:focus-visible { outline: 2px solid var(--mm-hover); outline-offset: -2px; }

/* Responsive: en pantallas pequeñas usa comportamiento apilado */
@media (max-width: 768px) {
    .minciencia-megamenu { position: static; display: block; }
    .minciencia-megamenu .mm-left, .minciencia-megamenu .mm-right { width: 100%; }
}

/* allow header to show overflow for megamenu if necessary */
.site-header { overflow: visible; }

/* Tercer nivel para móvil (lo genera script.js); en escritorio se usa la columna derecha */
.minciencia-megamenu .mm-m-sub { display: none; }

/* Botón hamburguesa (solo móvil; se muestra bajo el breakpoint vía CSS dinámico) */
.minciencia-mm-toggle {
    display: none; align-items: center; justify-content: center;
    width: 52px; height: 52px; padding: 0; margin: 0;
    background: #3D50F0; border: 0; border-radius: 8px;
    cursor: pointer; flex: 0 0 auto;
    transition: background .15s ease;
}
.minciencia-mm-toggle:hover { background: #4A5DFF; }
.minciencia-mm-toggle:focus-visible { outline: 2px solid var(--mm-hover); outline-offset: 2px; }
.minciencia-mm-toggle-bars,
.minciencia-mm-toggle-bars::before,
.minciencia-mm-toggle-bars::after {
    display: block; width: 26px; height: 3px; border-radius: 2px;
    background: #fff; transition: transform .2s ease, opacity .2s ease;
}
.minciencia-mm-toggle-bars { position: relative; }
.minciencia-mm-toggle-bars::before,
.minciencia-mm-toggle-bars::after { content: ''; position: absolute; left: 0; }
.minciencia-mm-toggle-bars::before { top: -9px; }
.minciencia-mm-toggle-bars::after { top: 9px; }
/* Abierto: se transforma en X */
.minciencia-mm-toggle[aria-expanded="true"] .minciencia-mm-toggle-bars { background: transparent; }
.minciencia-mm-toggle[aria-expanded="true"] .minciencia-mm-toggle-bars::before { transform: translateY(9px) rotate(45deg); }
.minciencia-mm-toggle[aria-expanded="true"] .minciencia-mm-toggle-bars::after { transform: translateY(-9px) rotate(-45deg); }
.screen-reader-text.mm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }