/* Menú del portal público: la barra de arriba de todas sus páginas.

   Lo pidió INTEC el 04-11-2026 (#26061, punto 7): la columna de la gestión en
   cada página. La gestión lleva administración, así que el portal tiene su
   propio menú, el mismo en todas sus páginas (partials/menu_portal.html).

   Los colores salen de --p-blue y --p-blue2, que define cada página y que el
   tema de la institución pisa. Una página sin --p-blue2 deja la barra de un
   solo color en vez de mezclar el azul de OREX con el del tema.
*/
.cris-menu {
  background: linear-gradient(135deg, var(--p-blue, #1f497d) 0%, var(--p-blue2, var(--p-blue, #185FA5)) 100%);
  color: #fff; padding: 0 2rem; gap: .5rem 1rem;
  display: flex; align-items: center;
  min-height: 56px; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  font-family: "Segoe UI", system-ui, sans-serif;
}
.cris-menu .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1rem; color: #fff; text-decoration: none; flex-shrink: 0; }
.cris-menu .brand img { height: 32px; border-radius: 4px; }
.cris-menu .brand .brand-chip { background: #fff; border-radius: 6px; padding: 4px 8px; display: flex; align-items: center; }
.cris-menu .brand .brand-chip img { height: 30px; max-width: 200px; object-fit: contain; border-radius: 0; display: block; }
.cris-menu .brand .brand-tech { font-size: .7rem; font-weight: 400; opacity: .75; white-space: nowrap; }
.cris-menu a { color: rgba(255,255,255,.85); text-decoration: none; }
.cris-menu .menu-links { display: flex; align-items: center; gap: 2px; margin-left: auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.cris-menu .menu-links a { font-size: .85rem; padding: 5px 9px; border-radius: 6px; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.cris-menu .menu-links a:hover,
.cris-menu .menu-links a[aria-current="page"] { background: rgba(255,255,255,.15); color: #fff; }
.cris-menu a:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.cris-menu .menu-extra { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cris-menu .menu-extra .btn-admin { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: .78rem; padding: 4px 12px; border-radius: 6px; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.cris-menu .menu-extra .btn-admin:hover { background: rgba(255,255,255,.25); }
.cris-menu .cris-idiomas a { color: #fff; }

/* Sin sitio para todo en una fila, la barra pasa a dos: arriba la marca, el
   idioma y el acceso; debajo los enlaces, que se desplazan de lado si aun así
   no caben, en vez de cortarse. Los enlaces piden unos 900 px y la marca, con
   el logo de la institución y «con tecnología de», hasta unos 380: en una fila
   solo caben a partir de 1600 px. */
@media (max-width: 1599px) {
  .cris-menu { flex-wrap: wrap; padding: .45rem 1.5rem .3rem; }
  .cris-menu .menu-extra { margin-left: auto; }
  .cris-menu .menu-links { order: 3; width: 100%; margin-left: 0; padding-bottom: .15rem; }
}
@media (max-width: 600px) {
  .cris-menu { padding: .4rem 1rem .25rem; position: static; }
  .cris-menu .brand .brand-tech { display: none; }
}