/* * IEICII Hub v235 · Micrositios de eventos: ancho completo y layout adaptativo * Cargado al final del exclusivamente en /eventos/{slug}... * Corrige la colisión histórica entre event-public-v184.css y public-event-guide-v182.css. */ /* 1) El micrositio de un evento aprovecha mejor pantallas grandes sin ir de borde a borde. */ body.public-body main.container.public-main-v116{ width:calc(100vw - 48px)!important; max-width:1440px!important; margin-left:auto!important; margin-right:auto!important; padding-left:0!important; padding-right:0!important; } /* 2) Todas las piezas principales comparten exactamente los mismos bordes. */ body.public-body .event-hero-detail-v140, body.public-body .event-guide-v1594, body.public-body .event-public-menu-v1594, body.public-body .event-overview-layout-v1594, body.public-body .event-public-benefits-v185, body.public-body .event-registration-hub-v1594, body.public-body .event-subpage-cta-v184{ width:100%!important; max-width:none!important; margin-left:0!important; margin-right:0!important; } /* 3) Página principal del evento: contenido + resumen lateral, ambos usando el ancho disponible. */ body.public-body .event-overview-layout-v1594:not(.event-subpage-layout-v184){ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(300px,340px)!important; gap:clamp(22px,2.4vw,34px)!important; align-items:start!important; } body.public-body .event-overview-layout-v1594:not(.event-subpage-layout-v184)>.event-content-v1594{ width:100%!important; max-width:none!important; min-width:0!important; } body.public-body .event-at-glance-v1594{ width:100%!important; max-width:none!important; } /* * 4) Subpáginas: una sola columna REAL. * Antes v184 declaraba una columna, pero v182 se cargaba después y volvía a crear * una segunda columna de 280–330 px aunque no existiera sidebar. Ese era el hueco * blanco visible en FAQ, certificación, guía, convocatoria, programa, etc. */ body.public-body .event-overview-layout-v1594.event-subpage-layout-v184{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:0!important; width:100%!important; max-width:none!important; margin-top:0!important; } body.public-body .event-subpage-layout-v184>.event-content-v1594, body.public-body .event-subpage-layout-v184 .event-content-v1594{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; width:100%!important; max-width:none!important; min-width:0!important; gap:22px!important; } body.public-body .event-subpage-layout-v184 .event-content-v1594>.card.section, body.public-body .event-subpage-layout-v184 .event-subpage-detail, body.public-body .event-subpage-layout-v184 .event-system-page-v184{ width:100%!important; max-width:none!important; min-width:0!important; } /* El contenido enriquecido puede usar toda la tarjeta. Elementos anchos no quedan comprimidos. */ body.public-body .event-subpage-layout-v184 .event-system-page-v184 .rich{ width:100%!important; max-width:none!important; min-width:0!important; } body.public-body .event-subpage-layout-v184 .event-system-page-v184 .rich table, body.public-body .event-subpage-layout-v184 .event-system-page-v184 .rich iframe, body.public-body .event-subpage-layout-v184 .event-system-page-v184 .rich video, body.public-body .event-subpage-layout-v184 .event-system-page-v184 .rich figure{ max-width:100%!important; } body.public-body .event-subpage-layout-v184 .event-system-page-v184 .rich img{ max-width:100%!important; height:auto!important; } /* 5) Módulos operativos (programa, cronograma, tarjetas y acciones) llenan la columna disponible. */ body.public-body .event-ops-list-v184, body.public-body .event-program-public-v184, body.public-body .event-public-ops-links-v184, body.public-body .event-subpage-actions-v184{ width:100%!important; max-width:none!important; } body.public-body .event-ops-row-v184, body.public-body .event-program-row-v184{ width:100%!important; max-width:none!important; } /* 6) El menú del micrositio usa el ancho disponible. En escritorio envuelve; no corta el primer tab. */ @media (min-width:921px){ body.public-body .event-public-menu-v1594{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; align-content:center!important; overflow:visible!important; white-space:normal!important; } body.public-body .event-public-menu-v1594 a{ flex:0 0 auto!important; max-width:100%!important; } } /* 7) En anchos intermedios evitamos una columna principal demasiado estrecha. */ @media (max-width:1180px){ body.public-body .event-overview-layout-v1594:not(.event-subpage-layout-v184){ grid-template-columns:minmax(0,1fr)!important; } body.public-body .event-at-glance-v1594{ position:relative!important; top:auto!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; } body.public-body .event-at-glance-v1594>.eyebrow, body.public-body .event-at-glance-v1594>h2, body.public-body .event-at-glance-v1594>dl, body.public-body .event-at-glance-v1594>.btn, body.public-body .event-at-glance-v1594>.event-login-link-v1594, body.public-body .event-at-glance-v1594>small{ grid-column:1/-1!important; } } /* 8) Tablet/móvil: ancho útil alto, menú desplazable y sin scroll lateral de la página. */ @media (max-width:920px){ body.public-body main.container.public-main-v116{ width:calc(100vw - 28px)!important; max-width:none!important; } body.public-body .event-public-menu-v1594{ display:flex!important; flex-wrap:nowrap!important; overflow-x:auto!important; overflow-y:hidden!important; overscroll-behavior-inline:contain; scrollbar-width:thin; -webkit-overflow-scrolling:touch; } body.public-body .event-public-menu-v1594 a{ flex:0 0 auto!important; white-space:nowrap!important; } body.public-body .event-menu-label-v1594{display:none!important} } @media (max-width:720px){ body.public-body main.container.public-main-v116{ width:calc(100vw - 22px)!important; padding-top:20px!important; } body.public-body .event-system-page-v184{ padding:20px!important; } body.public-body .event-subpage-layout-v184 .event-content-v1594{ gap:16px!important; } body.public-body .event-subpage-cta-v184{ margin-left:0!important; margin-right:0!important; } } /* 9) Seguridad visual: ningún hijo del micrositio debe generar ancho fantasma. */ body.public-body .event-content-v1594, body.public-body .event-content-v1594>*{ min-width:0; } body.public-body .event-subpage-layout-v184 pre, body.public-body .event-subpage-layout-v184 code{ max-width:100%; overflow-wrap:anywhere; }