/* * ceij-cabecera.css — cabecera y navegación del rediseño. * * Acompaña a headers/ceij/header.php. Reproduce la estructura del Figma: banda * azul institucional de 146px con los dos logotipos y el buscador, y debajo una * franja blanca de 65px con la navegación. * * Corrige sobre el diseño el contraste del buscador, que el Figma dejaba en * #8B8989 sobre #D0CBCB — 2,17:1, menos de la mitad del mínimo. Con #4A4A4A * sobre el mismo fondo sube a 5,52:1. * * El megamenú lo sigue pintando Helix; aquí solo se le da forma. */ /* --------------------------------------------------------------------- Banda superior --------------------------------------------------------------------- */ /* template.css fija #sp-header{height:97px}, que recortaría la banda de 146px del diseño. Es el único punto de esta hoja donde hace falta competir con un selector de ID de la plantilla, y por eso el selector lleva el id: .ceij sola (0-1-1) perdería contra #sp-header (1-0-0). */ .ceij #sp-header.ceij-cabecera { height: auto; position: relative; z-index: 20; box-shadow: none; } /* Las bandas van de borde a borde aunque .body-innerwrapper limite el ancho. El desbordamiento lateral lo contiene su propio overflow-x: hidden. */ .ceij .ceij-cabecera__banda, .ceij .ceij-navbar { width: 100vw; margin-left: calc(50% - 50vw); } .ceij .ceij-cabecera__banda { background-color: var(--ceij-c-marca); color: var(--ceij-c-texto-inverso); } .ceij .ceij-cabecera__interior { max-width: 1280px; margin-inline: auto; padding: var(--ceij-e-4) var(--ceij-e-5); min-height: 146px; display: flex; align-items: center; justify-content: space-between; gap: var(--ceij-e-5); flex-wrap: wrap; } .ceij .ceij-cabecera__logos { display: flex; align-items: center; gap: var(--ceij-e-5); text-decoration: none; flex: 0 1 auto; } .ceij .ceij-cabecera__logo { height: auto; max-height: 82px; width: auto; } /* Sobre la banda azul el indicador de foco azul no se vería. */ .ceij .ceij-cabecera__banda :focus-visible { outline-color: var(--ceij-c-texto-inverso); } /* --------------------------------------------------------------------- Buscador --------------------------------------------------------------------- */ .ceij .ceij-buscador { display: flex; align-items: stretch; background: #D0CBCB; border-radius: var(--ceij-r-pildora); overflow: hidden; flex: 0 0 auto; min-width: 200px; max-width: 320px; } /* El selector lleva el elemento y la clase porque template.css trae `input[type=search]:not(.form-control){background-color:#fff;border:1px solid; padding:.5rem .75rem;border-radius:.25rem}` — 0-2-1, que le ganaba a `.ceij .ceij-buscador__campo` (0-2-0) y pintaba el campo como una caja blanca dentro de la pildora gris. Con `.ceij .ceij-buscador input.ceij-…` subimos a 0-3-1 y el campo vuelve a ser transparente. */ .ceij .ceij-buscador input.ceij-buscador__campo { flex: 1 1 auto; width: auto; min-width: 0; min-height: var(--ceij-tactil-min); height: auto; padding: var(--ceij-e-2) var(--ceij-e-4); border: 0; border-radius: 0; background: transparent; font-family: var(--ceij-f-texto); font-size: var(--ceij-fs-400); color: #2B2B2B; /* 9,9:1 sobre #D0CBCB */ } /* El campo no mostraba foco: la plantilla le quita el outline. Se marca la píldora entera, en blanco como el resto de la cabecera. */ .ceij .ceij-buscador:has(.ceij-buscador__campo:focus-visible) { outline: var(--ceij-foco-grosor) solid #FFFFFF; outline-offset: var(--ceij-foco-sep); } /* 5,52:1 sobre #D0CBCB. El #8B8989 del Figma daba 2,17:1. */ .ceij .ceij-buscador input.ceij-buscador__campo::placeholder { color: #4A4A4A; opacity: 1; } .ceij .ceij-buscador__boton { flex: 0 0 auto; min-width: var(--ceij-tactil-min); min-height: var(--ceij-tactil-min); display: grid; place-items: center; border: 0; background: transparent; color: #2B2B2B; cursor: pointer; } .ceij .ceij-buscador__boton:hover { color: var(--ceij-c-marca); } /* --------------------------------------------------------------------- Franja de navegación --------------------------------------------------------------------- */ .ceij .ceij-navbar { background: var(--ceij-c-superficie); box-shadow: 0 2px 6px rgba(10, 37, 64, .12); } .ceij .ceij-navbar__interior { max-width: 1280px; margin-inline: auto; padding-inline: var(--ceij-e-5); min-height: 65px; display: flex; align-items: center; } /* El megamenú de Helix dentro de la franja */ .ceij .ceij-navbar .sp-megamenu-wrapper { width: 100%; justify-content: center; } .ceij .ceij-navbar .sp-megamenu-parent { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ceij-e-4); margin: 0; padding: 0; list-style: none; float: none; } /* Los elementos sin página propia —«Servicios», «Capacitaciones Nexus»— son encabezados, y Helix los pinta como , no como . Sin incluirlos aquí se quedaban con la tipografía que Helix inyecta en línea (Poppins 500) y se veían más ligeros que el resto. */ .ceij .ceij-navbar .sp-megamenu-parent > li > a, .ceij .ceij-navbar .sp-megamenu-parent > li > span { display: flex; align-items: center; gap: var(--ceij-e-2); min-height: var(--ceij-tactil-min); padding: var(--ceij-e-2) var(--ceij-e-4); border-radius: var(--ceij-r-medio); font-family: var(--ceij-f-texto); font-size: var(--ceij-fs-400); font-weight: var(--ceij-fw-negrita); line-height: 1.25; color: var(--ceij-c-titulo); /* 15,54:1 */ text-decoration: none; } .ceij .ceij-navbar .sp-megamenu-parent > li > a:hover, .ceij .ceij-navbar .sp-megamenu-parent > li > span:hover { color: var(--ceij-c-marca); background: var(--ceij-c-superficie-alt); } /* El chevrón de los desplegables hereda el peso del elemento. */ .ceij .ceij-navbar .sp-megamenu-parent > li > a > .sp-menu-badge, .ceij .ceij-navbar .sp-megamenu-parent > li > span > * { font-weight: inherit; } /* Página actual: fondo claro más color, para no señalarla solo con color (WCAG 1.4.1). El atributo lo pone js/ceij-a11y.js. #1F4E8C sobre #E8EFF8 da 7,4:1. */ .ceij .ceij-navbar .sp-megamenu-parent > li > a[aria-current="page"], .ceij .ceij-navbar .sp-megamenu-parent > li.current-item > a { background: #E8EFF8; color: #1F4E8C; border-radius: var(--ceij-r-medio); font-weight: var(--ceij-fw-negrita); } /* Botón del menú en móvil */ .ceij .ceij-navbar #offcanvas-toggler { min-width: var(--ceij-tactil-min); min-height: var(--ceij-tactil-min); display: grid; place-items: center; margin-left: auto; color: var(--ceij-c-titulo); cursor: pointer; } /* --------------------------------------------------------------------- Adaptación a pantallas menores --------------------------------------------------------------------- */ /* Por debajo de 768px template.css impone `body #sp-header, body #sp-header .logo, #offcanvas-toggler{height:60px!important}`, pensado para la cabecera antigua de una sola fila. La nuestra lleva banda de logotipos y barra de navegacion: con 60px el resto se sale de la caja y se monta encima de la pagina, en todas las internas. Es el unico !important de las hojas nuevas y esta justificado: contra un !important ajeno no sirve ganar por especificidad. */ @media (max-width: 767.98px) { body.ceij #sp-header.ceij-cabecera { height: auto !important; } } /* --------------------------------------------------------------------- Movil y tableta — la cabecera es UNA sola fila --------------------------------------------------------------------- Medido en las paginas «movil» y «tablet» del Figma, que hasta ahora no se habian usado (se venia deduciendo el movil del diseno de escritorio): movil 402px banda #003366 de 61px logotipo PJ x= 13 109x41 boton de menu x=180 41x41 (centro exacto: 201) buscador x=279 109x28 (margen derecho 14) tablet 800px banda #003366 de 61px logotipo PJ x= 53 109x41 boton de menu x=379 41x41 (centro exacto: 400) buscador x=637 109x37 (margen derecho 54) Es decir: logotipo a la izquierda, boton centrado, buscador a la derecha, sin franja blanca de navegacion — el menu entero vive en el panel lateral. Por eso la rejilla es 1fr auto 1fr: la columna del medio queda centrada en la ventana sin depender del ancho del logotipo ni del buscador. El corte va en 991.98px porque es donde Helix cambia el megamenu por el boton (.d-none .d-lg-block en el