/* El menú compacto se mantiene hasta que caben todos los controles. */
body > header .header-inner { min-width: 0; }
body > header .header-inner > a { flex: none; }
body > header .header-menu-container { margin-left: auto; flex: none; }
body > header .menu-toggle,
body > header .close-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
body > header .header-controls { display: none; }
body > header #slot-drawer .search-bar { width: min(100%, 26rem); }
body > header #slot-drawer .search-input { flex: 1; min-width: 0; }
body > header .menu-toggle:focus-visible,
body > header .close-menu:focus-visible,
body > header #site-menu a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 1311px) {
  body > header { padding-inline: clamp(1rem, 3vw, 2rem); }
  body > header #site-menu { display: none; }
  body > header #site-menu.active {
    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    max-height: 100dvh;
    overflow-y: auto;
    background: var(--color-azul-oscuro);
    padding: 1rem clamp(1rem, 3vw, 2rem) 1.5rem;
    box-shadow: 0 10px 24px rgb(0 0 0 / .2);
  }
  body > header #site-menu .menu-top-action { display: flex; }
  body > header #site-menu .menu-drawer-slot { display: flex; }
  body > header #site-menu .pagina { width: 100%; }
}

@media (min-width: 1312px) {
  body > header { padding-inline: clamp(1.5rem, 3vw, 3rem); }
  body > header .header-menu-container {
    margin-left: 0;
    flex: 1;
    justify-content: center;
  }
  body > header .menu-toggle,
  body > header #site-menu .menu-top-action,
  body > header #site-menu .menu-drawer-slot { display: none; }
  body > header #site-menu {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }
  body > header #site-menu .pagina { width: auto; }
  body > header .header-controls { display: flex; min-width: 0; }
  body > header #slot-right .search-bar { width: min(15rem, 18vw); }
  body > header #slot-right .search-input { width: 100%; min-width: 0; }
}
@media (min-width: 1600px) {
  body > header { padding-inline: 10rem; }
}