/* ============================================================ HR UTP HEADER Y FOOTER CENTRALIZADO COMPORTAMIENTO GENERAL ------------------------------------------------------------ 1. Franjas del header: 100% del ancho de pantalla. 2. Contenido interno: máximo 1920px y centrado. 3. Escritorio normal: - botón + logo a la izquierda; - menú horizontal centrado geométricamente. 4. Móvil / tablet / modo compacto: - botón a la izquierda; - logo centrado geométricamente; - menú horizontal oculto. 5. Footer conservado. 6. Offcanvas conservado. ============================================================ */ /* ============================================================ NORMALIZACIÓN BÁSICA ============================================================ */ html, body { width: 100%; max-width: none; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; } /* ============================================================ CONTENEDOR GLOBAL HEADER ============================================================ */ #utp-global-header, .utp-global-header { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } #utp-global-header:has(> header) { display: contents !important; } :not(body):has(> #utp-global-header:only-child > header) { display: contents !important; } #utp-global-header #utp-header { position: sticky; top: 0; z-index: 1000; } /* Header generado por HR */ #utp-global-header > header, .utp-global-header > header, .header-sin-menu-secundario { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ============================================================ CONTENEDOR GLOBAL FOOTER ============================================================ */ #utp-global-footer, .utp-global-footer { width: 100% !important; max-width: none !important; margin: 40px 0 0; padding: 0; } /* ============================================================ CONTENEDOR GENÉRICO HR ============================================================ */ .utp-container { width: 90%; max-width: 1200px; margin-left: auto; margin-right: auto; } /* ============================================================ MODO 1 CABECERA CON MENÚ SECUNDARIO ============================================================ */ /* ============================================================ FRANJA BLANCA MENÚ SECUNDARIO OCUPA TODO EL ANCHO ============================================================ */ .menu-institucional { position: sticky !important; top: 0 !important; z-index: 1000; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; min-height: 74px; background-color: var(--blanco, #ffffff) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); } /* ============================================================ MODO 2 CABECERA SIN MENÚ SECUNDARIO ============================================================ */ .header-sin-menu-secundario { width: 100% !important; max-width: none !important; } /* ============================================================ FRANJA AZUL ÚNICA OCUPA TODO EL ANCHO ============================================================ */ .cabecera-unica { position: sticky; top: 0; z-index: 1000; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; /* Mismo alto que .menu-institucional en estilos-utp.css. */ min-height: 76px; background-color: var(--institucional, #003D6D); color: var(--blanco, #ffffff); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* ============================================================ MENÚ PRINCIPAL AZUL ============================================================ */ .cabecera-unica .menu-principal-azul { width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; row-gap: 0.15rem; column-gap: 0.1rem; } .cabecera-unica .menu-principal-azul .nav-item { display: flex; } .cabecera-unica .menu-principal-azul .nav-link { color: var(--blanco, #ffffff) !important; font-size: 12pt; font-weight: 500; padding: 0.3rem 0.5rem; line-height: 1; white-space: nowrap; } .cabecera-unica .menu-principal-azul .nav-link:hover, .cabecera-unica .menu-principal-azul .nav-link:focus { color: var(--blanco, #ffffff) !important; text-decoration: underline; } /* ============================================================ BOTÓN + LOGO COMPORTAMIENTO BASE / ESCRITORIO NORMAL ============================================================ */ .sticky-left-group { position: relative; display: flex; align-items: center; flex-shrink: 0; /* Sin width: el ancho lo dan las columnas (col-10 col-lg-auto): en móvil el grupo ocupa casi todo el ancho y el logo queda a la derecha, como en los sitios institucionales. */ margin: 0 !important; gap: 0.35rem; z-index: 3; } /* ============================================================ CONTENEDOR DEL LOGO ============================================================ */ .sticky-brand { position: static; display: flex; align-items: center; justify-content: flex-start; min-width: 0; width: auto; padding: 0.35rem 0.4rem; margin: 0 !important; flex-shrink: 1; } .sticky-brand a { display: flex; align-items: center; justify-content: flex-start; width: auto; max-width: 100%; text-decoration: none; } /* ============================================================ LOGO DEL SITIO ============================================================ */ .logo-sticky { display: block; width: auto; height: 55px; max-width: 300px; max-height: 55px; object-fit: contain; flex-shrink: 0; filter: brightness(0) saturate(100%) invert(20%) sepia(25%) saturate(2500%) hue-rotate(170deg) brightness(85%) contrast(105%); } /* Identificadores de marca UTP (identificadorMarcaUTP.php): son los SVG oficiales a color, no se recolorean. */ .logo-sticky[src*="/identificadores-utp/"] { filter: none; /* Mismo tamaño en todos los anchos, como en los sitios institucionales. */ width: auto; height: 55px; max-width: none; max-height: 55px; } /* ============================================================ LOGO BLANCO CABECERA AZUL ============================================================ */ .logo-sticky-blanco { filter: brightness(0) invert(1); } /* ============================================================ UN SOLO MENÚ: MISMA DISTRIBUCIÓN QUE .menu-institucional estilos-utp.css aplica estas reglas solo a .menu-institucional (botón + logo | menú | accesibilidad, el menú pasa a una segunda línea si no cabe). Se repiten aquí para .cabecera-unica; los colores siguen siendo los de la franja azul. ============================================================ */ .cabecera-unica div { align-items: center; justify-content: center; max-width: 1920px; margin: 0; } @media (min-width: 992px) { .cabecera-unica div:not(.offcanvas.offcanvas-end *) { margin: 0 auto !important; } /* Buscador de escritorio a la derecha del menú, con el mismo ancho y separación que en la franja azul de dos menús. */ .cabecera-unica .col.order-2:has(.buscador-institucional) { display: flex !important; gap: 20px; } /* El menú tiene prioridad: el buscador se achica hasta 180px antes de que el menú pase a más líneas. */ .cabecera-unica .col.order-2:has(.buscador-institucional) > nav { flex: 1 1 auto; } .cabecera-unica .buscador-institucional-desktop { flex: 0 1 360px; min-width: 180px; max-width: 360px; } } /* Buscador en celular y tableta: fila propia debajo de la barra. */ .cabecera-unica .cabecera-unica-buscador { display: flex; padding-bottom: 0.5rem; } .cabecera-unica .cabecera-unica-buscador:not(:has(.buscador-institucional)) { display: none !important; } /* El modo sin menú secundario usa una cabecera azul. Se fijan aquí visibilidad y dimensiones para que los SVG de oficinas no dependan de reglas heredadas de cabecera.css o estilos-utp.css. */ .cabecera-unica img.logo-sticky.logo-sticky-blanco { display: block !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: 55px !important; max-width: 300px !important; max-height: 55px !important; object-fit: contain; filter: brightness(0) saturate(0) invert(1) !important; } /* ============================================================ BOTÓN MENÚ LATERAL ============================================================ */ .btnMenuLateral { display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--institucional, #003D6D); } /* ============================================================ BOTÓN SOBRE FONDO BLANCO ============================================================ */ .menu-institucional .btnMenuLateral, .menu-institucional .btnMenuLateral:hover, .menu-institucional .btnMenuLateral:focus { color: var(--institucional, #003D6D) !important; border-color: var(--institucional, #003D6D); background-color: transparent; } /* ============================================================ BOTÓN SOBRE FONDO AZUL ============================================================ */ .cabecera-unica .btn-menu-azul, .cabecera-unica .btn-menu-azul:hover, .cabecera-unica .btn-menu-azul:focus { color: var(--blanco, #ffffff) !important; border-color: rgba(255, 255, 255, 0.65); background-color: transparent; } /* ============================================================ ESPACIO DERECHO / ACCESIBILIDAD ============================================================ */ .sticky-right-spacer { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto !important; margin-right: 0 !important; z-index: 3; } /* ============================================================ TABLET Y MÓVIL < 992px COMPORTAMIENTO: - botón permanece a la izquierda; - logo pasa al centro exacto; - menú horizontal no se muestra. ============================================================ */ @media (max-width: 991.98px) { /* ======================================================== ESPACIO DERECHO ======================================================== */ .sticky-right-spacer { position: relative; margin-left: auto; z-index: 3; } } /* ============================================================ TELÉFONOS ============================================================ */ @media (max-width: 767.98px) { .btnMenuLateral i { font-size: 1.5rem !important; } } /* ============================================================ FOOTER ============================================================ */ /* ============================================================ PORTAL UTP ============================================================ */ .portal-enlace a { display: inline-block; padding: 13px 20px; border: 1px solid #556a8e; border-radius: 10px; background-color: #254c73; } /* ============================================================ ACCESIBILIDAD ============================================================ */ #utp-global-header a:focus-visible, #utp-global-header button:focus-visible, .utp-global-header a:focus-visible, .utp-global-header button:focus-visible, #utp-global-footer a:focus-visible, #utp-global-footer button:focus-visible, .utp-global-footer a:focus-visible, .utp-global-footer button:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; } /* ============================================================ TRANSICIONES ============================================================ */ #utp-global-header .nav-link, #utp-global-header .btnMenuLateral, #utp-global-footer .portal-enlace a, #utp-global-footer .social-icon-blue, .utp-global-header .nav-link, .utp-global-header .btnMenuLateral, .utp-global-footer .portal-enlace a, .utp-global-footer .social-icon-blue { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } /* ============================================================ REDUCCIÓN DE MOVIMIENTO ============================================================ */ @media (prefers-reduced-motion: reduce) { #utp-global-header *, #utp-global-footer *, .utp-global-header *, .utp-global-footer * { scroll-behavior: auto; } } /* ============================================================ SUBMENÚS DEL HEADER ============================================================ */ .offcanvas-institutional-menu { margin: 0; padding: 0 1rem; } .offcanvas-institutional-list { margin: 0; padding-left: 0; list-style: none; } .offcanvas-institutional-list .nav-link { padding: 0.65rem 0; color: var(--institucional, #003D6D) !important; font-size: 12pt; font-weight: 500; } .offcanvas-institutional-list .nav-link:hover, .offcanvas-institutional-list .nav-link:focus { background-color: #f5f5f5; text-decoration: underline; } /* ============================================================ ACCESIBILIDAD MONTADA EN EL HEADER ============================================================ */ [data-hr-accessibility-slot] { min-width: 44px; min-height: 44px; } [data-hr-accessibility-slot] > #accesibilidad-widget, [data-hr-accessibility-slot] > .menu-accesibilidad, [data-hr-accessibility-slot] > .accesibilidad { display: flex; align-items: center; justify-content: center; } [data-hr-accessibility-slot] .menu-accesibilidad, [data-hr-accessibility-slot] .accesibilidad { min-width: 44px; min-height: 44px; } .footer-main__contacto-info > p:last-child { margin-bottom: 0; } /* ============================================================ MENÚ SECUNDARIO: PADDING DE LOS TEMAS Algunos temas aplican padding a todos los