/* Navegación Frac & Corbata. Se carga después de las hojas de cada superficie. */
:root { --navigation-width: 25rem; }
body.navigation-open { overflow: hidden; }
.navigation-backdrop {
  position: fixed; inset: 0; z-index: 490;
  background: rgb(0 0 0 / 58%);
}
.navigation-backdrop[hidden] { display: none; }
.umr-header [data-page].hidden, .umr-header [data-page][hidden] { display: none !important; }
.navigation-panel .hidden, .navigation-panel [hidden] { display: none !important; }
.navigation-public-group:not(:has(.nav-link:not(.hidden))) { display: none; }
/* El panel lateral conserva los nodos originales y sus permisos y eventos. */
.portal-nav.navigation-panel,
#admin-nav-menu.navigation-panel,
.umr-header #mobile-menu.navigation-panel {
  position: fixed; inset: 0 0 0 auto; z-index: 500;
  width: min(var(--navigation-width), 100%); max-width: 100%;
  height: 100dvh; max-height: 100dvh; margin: 0;
  padding: 0 1.25rem max(1.5rem, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  display: block; border: 0; border-left: 1px solid var(--color-rule-strong);
  border-radius: 0; background: var(--surface-base); color: var(--on-surface);
  box-shadow: -12px 0 48px rgb(0 0 0 / 24%);
  text-align: left; animation: navigation-enter .18s ease-out;
}
.portal-nav.navigation-panel[hidden],
#admin-nav-menu.navigation-panel:not(.is-open),
.umr-header #mobile-menu.navigation-panel:not(.is-open) { display: none; }
.umr-header #mobile-menu.navigation-panel.is-open { display: block !important; }
.navigation-heading {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: max(1.25rem, env(safe-area-inset-top)) 0 1.25rem;
  margin-bottom: .75rem; background: var(--surface-base);
  border-bottom: 1px solid var(--color-rule-strong);
}
.navigation-title { margin: 0; font: 700 1.6rem/1.2 Georgia, serif; color: var(--on-surface); }
.navigation-heading > div { min-width: 0; }
.navigation-context { margin: .4rem 0 0; color: var(--on-surface-dim); font: 400 .875rem/1.4 system-ui, sans-serif; }
.navigation-close {
  flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: .35rem;
  background: transparent; color: var(--on-surface); cursor: pointer;
}
.navigation-close:hover { background: rgb(var(--gold-rgb) / 10%); }
.navigation-panel > .portal-nav-label:not(.navigation-portal-heading) { display: none; }
.navigation-panel .portal-nav-label,
.navigation-panel .navigation-group-title,
#admin-nav-menu.navigation-panel .admin-nav-group h3 {
  margin: 1.5rem 0 .5rem; padding: 0 .8rem;
  color: var(--on-surface-dim); font: 600 .8rem/1.5 system-ui, sans-serif;
  text-transform: none; letter-spacing: 0;
}
.navigation-panel .portal-nav-item,
.umr-header #mobile-menu .nav-link,
#admin-nav-menu.navigation-panel .admin-nav-btn,
#admin-nav-menu.navigation-panel .admin-nav-portal-link {
  box-sizing: border-box; display: flex; align-items: center; gap: .8rem;
  width: 100%; min-height: 50px; margin: .2rem 0; padding: .8rem;
  border: 0; border-left: 3px solid transparent; border-radius: 0;
  color: var(--on-surface); background: transparent; opacity: 1;
  font: 400 .96rem/1.4 system-ui, sans-serif; letter-spacing: 0;
  text-transform: none; text-align: left; text-decoration: none; cursor: pointer;
}
.navigation-panel .portal-nav-item:hover,
.umr-header #mobile-menu .nav-link:hover,
#admin-nav-menu.navigation-panel .admin-nav-btn:hover,
#admin-nav-menu.navigation-panel .admin-nav-portal-link:hover { background: rgb(var(--gold-rgb) / 10%); color: var(--on-surface); }
.navigation-panel .portal-nav-item.is-active,
.umr-header #mobile-menu .nav-link[aria-current="page"],
#admin-nav-menu.navigation-panel .admin-nav-btn.active,
#admin-nav-menu.navigation-panel .admin-nav-portal-link[aria-current="page"] {
  border-left-color: var(--color-accent-red-on-surface);
  background: rgb(var(--red-rgb) / 9%); color: var(--on-surface); font-weight: 700;
}
.navigation-panel .nav-link::after { display: none; }
.navigation-panel :is(a, button, input):focus-visible,
.navigation-close:focus-visible,
.umr-header #menu-toggle:focus-visible { outline: 2px solid var(--color-accent-red-on-surface); outline-offset: 3px; }
.navigation-panel .portal-nav-item > span[aria-hidden="true"] { width: 1.25rem; text-align: center; color: var(--on-surface-dim); }
.navigation-panel .portal-nav-item > svg { flex: 0 0 20px; color: var(--on-surface-dim); }
.umr-header #mobile-menu .navigation-access { background: var(--color-accent-red); color: #fff; justify-content: center; border-radius: .4rem; margin: 1rem 0; }
.umr-header #mobile-menu .navigation-access:hover { background: var(--color-accent-red-deep); color: #fff; }
.navigation-panel .navigation-portal-heading { padding-top: 1.25rem; border-top: 1px solid var(--color-rule-strong); }
.navigation-search { display: block; margin: 0 0 1rem; color: var(--on-surface-dim); font: 500 .8rem/1.5 system-ui, sans-serif; }
.navigation-search input {
  box-sizing: border-box; display: block; width: 100%; height: 48px;
  margin-top: .45rem; padding: .7rem .1rem; border: 0; border-bottom: 1px solid var(--color-rule-strong);
  border-radius: 0; background: transparent; color: var(--on-surface); font: inherit; font-size: 1rem;
}
.navigation-search input::placeholder { color: var(--on-surface-dim); }
.navigation-empty { color: var(--on-surface-dim); padding: 1rem .8rem; font-size: .9rem; }
#admin-nav-menu.navigation-panel .admin-nav-groups { display: block; }
#admin-nav-menu.navigation-panel .admin-nav-group {
  margin-top: 1.25rem;
  padding-top: .85rem;
  border-top: 1px solid var(--color-rule-strong);
}
#admin-nav-menu.navigation-panel .admin-nav-group h3 {
  margin: .25rem 0 .75rem;
  color: var(--on-surface);
  font: 700 1.1rem/1.35 Georgia, serif;
}
.navigation-panel .navigation-group-title,
.navigation-panel .navigation-portal-heading { color: var(--on-surface); font: 700 1.1rem/1.35 Georgia, serif; }
#admin-nav-menu .navigation-filtered,
#admin-nav-menu .admin-nav-group.navigation-filtered { display: none !important; }
.portal-header { position: sticky; top: 0; z-index: 40; }
.portal-header .portal-menu-btn, .admin-menu-btn, .umr-header #menu-toggle {
  min-height: 44px; padding: .55rem .8rem; gap: .55rem;
  font: 600 .875rem/1.3 system-ui, sans-serif; letter-spacing: 0; text-transform: none; border-radius: .4rem;
}
.portal-header .portal-menu-btn, .portal-header .portal-user-btn { color: var(--on-surface); }
.portal-header .portal-brand { color: var(--on-surface); }
.portal-header .portal-user-btn, .user-dropdown-btn { width: 44px; height: 44px; }
.portal-user-menu { max-width: calc(100vw - 2rem); }
.portal-user-item { min-height: 48px; color: var(--on-surface); }
.portal-user-info span:first-child { color: var(--on-surface); }
.portal-user-item--danger { color: var(--color-accent-red-on-surface); }
.navigation-admin-brand { display: flex; flex-direction: column; text-align: left; color: var(--on-surface); }
.navigation-mobile-label { display: none; }
.navigation-admin-brand strong { font: 700 1.1rem/1.3 Georgia, serif; }
.navigation-admin-brand small { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--on-surface-dim); }
#admin-view > header { position: sticky; top: 0; z-index: 100; }
/* Evitar que el contexto de apilamiento del header deje el panel bajo el velo. */
body.navigation-open :is(.portal-header, #admin-view > header, .umr-header) { z-index: 495; }
body.navigation-open .portal-header:has(+ .portal-layout .navigation-panel:not([hidden])) { z-index: 40; }
.umr-header #menu-toggle { display: inline-flex; align-items: center; flex-shrink: 0; }
.umr-header nav[aria-label="Principal"] { display: none; }
.umr-header > div:first-child { padding-top: 1rem; padding-bottom: 1rem; gap: 1rem; }
.umr-header > div > a:first-child { min-width: 0; gap: .75rem; }
.umr-header #site-name { font-size: clamp(1rem, 3.6vw, 1.35rem); line-height: 1.2; }
.umr-header #site-tagline { letter-spacing: .1em; }
@media (max-width: 600px) {
  .navigation-title { font-size: 1.35rem; overflow-wrap: anywhere; }
  #admin-view > header > .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; }
  #admin-view .admin-logo-btn { min-width: 0; }
  #admin-view .admin-logo-btn img { width: 32px; height: 32px; flex-shrink: 0; }
  .navigation-admin-brand { min-width: 0; }
  .navigation-admin-brand strong { font-size: 1rem; }
  .navigation-desktop-label { display: none; }
  .navigation-mobile-label { display: inline; }
  .portal-header { padding: .7rem 1rem; align-items: center; gap: .5rem; }
  .portal-header-actions { gap: .5rem; }
  .portal-brand--app { min-width: 0; gap: .55rem; font-size: .95rem; }
  .portal-brand--app > span { min-width: 0; }
  .portal-header .portal-brand--app span { font-size: .95rem; }
  .navigation-admin-brand small { max-width: 35vw; }
  .portal-brand--app img { width: 34px; height: 34px; }
  .portal-brand--app small { font-size: .65rem; letter-spacing: .04em; }
  .portal-header-name { display: none; }
  .portal-header .portal-menu-btn { padding: .5rem .65rem; font-size: .8rem; }
  .umr-topbar { display: none; }
  .umr-header > div:first-child { padding-left: 1rem; padding-right: 1rem; }
  .umr-header picture, .umr-header picture img { width: 42px; height: 42px; }
  .umr-header #site-tagline { display: none; }
}
@media (min-width: 900px) {
  #admin-nav-menu.navigation-panel { --navigation-width: 43rem; }
  #admin-nav-menu.navigation-panel .admin-nav-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
  #admin-nav-menu.navigation-panel[data-nav-groups="1"] { --navigation-width: 25rem; }
  #admin-nav-menu.navigation-panel[data-nav-groups="1"] .admin-nav-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .umr-header nav[aria-label="Principal"] { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 1.1rem; row-gap: .75rem; }
  .umr-header nav[aria-label="Principal"] .nav-link { font-size: .85rem; }
  .umr-header #menu-toggle { display: none; }
  .umr-header #mobile-menu.navigation-panel.is-open { display: none !important; }
}
@keyframes navigation-enter { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .navigation-panel { animation: none !important; } }

.portal-user-menu { max-height: calc(100dvh - 6rem); overflow-y: auto; overscroll-behavior: contain; }
.portal-user-portals { padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 1px solid var(--color-rule-strong); }
.portal-user-portals-title { padding: .65rem 1rem .35rem; color: var(--on-surface-dim); font: 600 .85rem/1.4 var(--font-sans,system-ui,sans-serif); }
.portal-user-menu a.portal-user-item { display: flex; align-items: center; text-decoration: none; }