/* ========================================================= AI Regula Solutions - CLS Stability Patch Objetivo: bajar CLS en desktop/mobile estabilizando header, hero, sidebar, ads, imágenes y widgets dinámicos. Cargar en después de main.min.css y style-ai.min.css. ========================================================= */ :root { --ars-header-h-desktop: 84px; --ars-header-h-mobile: 70px; --ars-sidebar-card-gap: 24px; } html { scrollbar-gutter: stable both-edges; } body { overflow-x: hidden; } /* Evita que la carga tardía de fuentes altere demasiado las cajas */ body, button, input, select, textarea { font-family: 'IBM Plex Sans', 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; font-synthesis-weight: none; text-rendering: optimizeLegibility; } /* --------------------------------------------------------- 1) Header: reserva de alto estable + sticky sin sacar del flujo --------------------------------------------------------- */ .navbar-area.style-two { min-height: var(--ars-header-h-desktop); z-index: 1030; } .navbar-area.style-two, .navbar-area.style-two.sticky { position: sticky !important; top: 0; left: auto; width: 100%; animation: none !important; background-color: var(--whiteColor, #fff); } .navbar-area.style-two .navbar, .navbar-area.style-two.sticky .navbar { min-height: calc(var(--ars-header-h-desktop) - 22px); margin-top: 20px; padding: 2px 0; border-top: 2px solid var(--titleColor, #0f0f0f); border-bottom: 2px solid var(--titleColor, #0f0f0f); } /* No cambiar altura ni padding al volverse sticky: ese salto mueve todo */ .navbar-area.style-two.sticky .navbar { margin-top: 20px; padding: 2px 0; border-top: 2px solid var(--titleColor, #0f0f0f); border-bottom: 2px solid var(--titleColor, #0f0f0f); } .navbar-area.style-two .navbar-collapse { min-height: 58px; } .navbar-area.style-two .navbar .navbar-nav > .nav-item > .nav-link, .navbar-area.style-two .navbar .navbar-nav .nav-item .nav-link, .navbar-area.style-two .search-btn, .navbar-area.style-two .other-options .btn { min-height: 48px; display: inline-flex; align-items: center; } /* Logo con caja fija: el cambio light/dark no altera dimensiones */ .navbar-area.style-two .logo { position: relative; display: inline-block; flex: 0 0 260px; width: 260px; height: 37px; line-height: 0; } .navbar-area.style-two .logo img { position: absolute; inset: 0; display: block; width: 260px !important; height: 37px !important; object-fit: contain; max-width: none !important; } /* El dropdown ya es absolute; solo se evita que cambie layout al aparecer */ .navbar-area .navbar .navbar-nav .nav-item .dropdown-menu { contain: layout paint; will-change: transform, opacity; } /* Offcanvas fuera del flujo, sin empujar la página */ .responsive-navbar.offcanvas { position: fixed !important; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); max-width: 92vw; contain: layout paint size; } .responsive-navbar .offcanvas-header { min-height: 88px; } .responsive-navbar .offcanvas-header .logo { position: relative; display: inline-block; width: 260px; height: 37px; line-height: 0; } .responsive-navbar .offcanvas-header .logo img { display: block; width: 260px !important; height: 37px !important; object-fit: contain; } /* Evita conflicto entre Bootstrap collapse y acordeón custom */ .responsive-navbar .responsive-menu-list, .responsive-navbar .responsive-menu > li { min-height: 55px; height: auto !important; line-height: 1.25 !important; } .responsive-navbar .responsive-menu a, .responsive-navbar .responsive-menu button.nav-link { min-height: 55px; display: flex !important; align-items: center; } .responsive-navbar .responsive-menu-items { padding-left: 18px; } .responsive-navbar .responsive-menu-items.collapse:not(.show) { display: none !important; } .responsive-navbar .responsive-menu-items.collapse.show { display: block !important; } @media (max-width: 991.98px) { .navbar-area.style-two { min-height: var(--ars-header-h-mobile); } .navbar-area.style-two .navbar, .navbar-area.style-two.sticky .navbar { min-height: 58px; margin-top: 10px; padding: 10px 0; } .navbar-area.style-two .navbar-collapse { min-height: 48px; flex-basis: auto; } .navbar-area.style-two .logo { flex-basis: 220px; width: 220px; height: 32px; } .navbar-area.style-two .logo img { width: 220px !important; height: 32px !important; } } @media (max-width: 380px) { .navbar-area.style-two .logo { flex-basis: 180px; width: 180px; height: 30px; } .navbar-area.style-two .logo img { width: 180px !important; height: 30px !important; } } /* --------------------------------------------------------- 2) Hero / LCP: caja estable --------------------------------------------------------- */ #dBodyPrincipal { margin-top: 45px; } .news-details .single-img.ratio-box, .post-hero-image, .ratio-box { display: block; width: 100%; aspect-ratio: var(--w) / var(--h); overflow: hidden; background: #eef2f7; contain: layout paint; } .hero-lcp, .post-main-img { display: block; width: 100%; height: 100% !important; object-fit: cover; } .post-title-ai { line-height: 1.15; margin: .5rem 0 1rem; text-wrap: balance; } .avatar-airegula { inline-size: 40px; block-size: 40px; aspect-ratio: 1 / 1; object-fit: cover; display: block; flex: 0 0 40px; } /* --------------------------------------------------------- 3) Imágenes de cuerpo, relacionados, prev/next --------------------------------------------------------- */ .cuerpo-noticia-ai-regula img, .news-details-wrap img, .sidebar img { max-width: 100%; } .cuerpo-noticia-ai-regula img { display: block; height: auto; } /* Cuando el HTML del body viene de BD sin width/height, reservar un 16:9 razonable */ .cuerpo-noticia-ai-regula p > img:only-child, .cuerpo-noticia-ai-regula figure > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #eef2f7; } .thumb-570, .card-img-top.thumb-570 { display: block; width: 100%; height: auto; aspect-ratio: 570 / 432; object-fit: cover; background: #eef2f7; } .thumb-120 { display: block; width: 120px; height: 120px; aspect-ratio: 1 / 1; object-fit: cover; flex: 0 0 120px; } .news-pagination .news-img, .thumbnail-news-card.style-one .news-img { flex: 0 0 120px; width: 120px; height: 120px; } /* Carrusel: evita que el slide activo cambie altura entre grupos */ #relacionadosCarousel .carousel-inner { min-height: 410px; } #relacionadosCarousel .card { min-height: 390px; } /* --------------------------------------------------------- 4) Sidebar: reservar espacio por widget, pero sin forzar todos a 387px --------------------------------------------------------- */ .sidebar-right { min-height: 1200px; } .sidebar-widget-airegula { margin-bottom: var(--ars-sidebar-card-gap); contain: layout paint; } .sidebar-widget-airegula.sidebar-widget--trending, .sidebar-widget-airegula:first-child { min-height: 520px; } .sidebar-widget-airegula.sidebar-widget--ad, .sidebar-widget-airegula:has(.ads-container) { min-height: 340px; } .sidebar-widget-airegula.sidebar-widget--proposal, .sidebar-widget-airegula.sidebar-widget--sponsor { min-height: 300px; } .sidebar-widget-airegula.sidebar-widget--gas, .gas-widget-stable { min-height: 610px; } .sidebar-widget-airegula.sidebar-widget--categories { min-height: 420px; } .sidebar-widget-airegula.sidebar-widget--tags { min-height: 260px; } .ads-container, .ad-mpu, .ad-slot, ins.adsbygoogle { display: block; width: 100%; min-height: 280px; text-align: center; background: #f4f6f8; overflow: hidden; } .adsbygoogle-observe, .cuerpo-noticia-ai-regula ins.adsbygoogle { display: block !important; min-height: 280px; margin: 28px 0; background: #f4f6f8; } /* Banners laterales sin dimensiones en HTML */ .sidebar a > img[src*='envianos-tu-propuesta'], .sidebar a > img[src*='anunciate-aqui'], .sidebar a > img[src*='mediakit'] { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #f4f6f8; } /* --------------------------------------------------------- 5) Gasolinas: tarjetas y selector con altura estable --------------------------------------------------------- */ .card-fuel--regular, .card-fuel--premium, .card-fuel--diesel { min-width: 96px; min-height: 132px; } .card-fuel--regular { background: #2D6E55; color: #fff; } .card-fuel--regular .card-header { background: #1E4C3E; color: #fff; } .card-fuel--premium { background: #B23149; color: #fff; } .card-fuel--premium .card-header { background: #7E2838; color: #fff; } .card-fuel--diesel { background: #494949; color: #fff; } .card-fuel--diesel .card-header { background: #333; color: #fff; } .card-fuel-price { font-size: 1rem; min-height: 24px; } .card-fuel-unit { margin: 0; min-height: 20px; } #selectEstados { min-height: 44px; } #titEstado { min-height: 32px; display: block; } /* --------------------------------------------------------- 6) Formularios / widgets externos --------------------------------------------------------- */ .g-recaptcha { display: block; min-height: 78px; } #editor-toolbar { min-height: 42px; } #editor-container { min-height: 200px; } /* SWG / iframes de servicios no deben ocupar flujo */ iframe[src*='news.google.com/swg/ui/'] { position: fixed !important; top: -9999px !important; left: -9999px !important; width: 0 !important; height: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } /* Preloader y theme switcher fuera del flujo, sin cambios de caja */ .preloader-area, .switch-theme-mode { position: fixed !important; contain: layout paint size; } /* --------------------------------------------------------- 7) Reglas de seguridad visual --------------------------------------------------------- */ .link-touch { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 8px; line-height: 1.4; } .form-control-contact { color: #212529 !important; background-color: #fff !important; border: 1px solid #6c757d !important; } .form-control-contact:focus { border-color: #2352ee !important; box-shadow: 0 0 0 .2rem rgba(35, 82, 238, .25) !important; } .form-control-contact::placeholder { color: #555 !important; opacity: 1 !important; } .theme-dark .form-control-contact { background-color: #2c2c2c !important; color: #fff !important; border: 1px solid #666 !important; } .theme-dark .form-control-contact::placeholder { color: #ddd !important; }