/* ap-topbar.css Estilos compartidos para la barra superior (topbar) del sitio. Mover aquí las reglas permite que todas las páginas incluyan el mismo archivo y mantengan la barra fija (sticky) sin duplicar código inline. */ /* Barra superior fija */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; padding: 12px 0; /* Ajusta este min-height si cambias el diseño interno de la topbar */ min-height: 112px; /* Color más oscuro para distinguir claramente la franja superior */ background: linear-gradient(90deg, #001026 0%, #00203a 100%); color: #ffffff; box-shadow: 0 6px 22px rgba(2,6,23,0.18); backdrop-filter: blur(6px); } /* Placeholder blanco y más visible para inputs dentro de la search-bar */ .search-bar input::placeholder { color: rgba(255,255,255,0.85); } /* Por si se usa una marca en el para detectar topbar fija */ body[data-has-fixed-topbar] { box-sizing: border-box; } /* Barra promocional dentro de la topbar */ .promo-bar { /* Anuncio: usar un azul significativamente más oscuro que el buscador y la topbar para enfatizar la franja promocional. No tocamos el estilo inline del buscador (en header.html) para que conserve su degradado. */ background: linear-gradient(90deg, #001026 0%, #00203a 100%); color: #ffffff; font-weight: 700; padding: 8px 0; text-align: center; border-bottom: none; box-shadow: 0 8px 28px rgba(0,8,26,0.22); transform: translateY(-8px); opacity: 0; transition: transform 360ms cubic-bezier(.2,.9,.25,1), opacity 320ms ease; } .promo-bar.show { transform: translateY(0); opacity: 1; } /* Ensure the topbar container background is identical so there is no seam */ .topbar { background: linear-gradient(90deg, #001026 0%, #00203a 100%); } /* Consideraciones responsive: si reduce mucho el alto, decrementar min-height */ @media (max-width: 640px) { .topbar { min-height: 84px; padding: 8px 0; } } /* Nota: el script en header.html aplica `document.body.style.paddingTop = h + 'px'` para evitar que el contenido quede oculto detrás de la topbar fija. */