*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }

.menu{
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
  min-height: 78px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
}
.logo{
  width: 100%;
  max-width: 300px;
  height: auto;
}
.filters{
  margin: 15px;
  background: #E9ECEF;
}

/* Boton hamburguesa de filtros: solo movil.
   El ocultamiento en escritorio lo hace la utilidad d-lg-none de Bootstrap
   aplicada en el propio boton (por encapsulacion de componente, una regla
   .btn-filtros aqui perderia especificidad contra .btn.btn-outline-secondary). */

@media (max-width: 991.98px) {
  /* El menu pasa a DOS filas:
       fila 1 -> [hamburguesa] [logo] ........ [usuario]
       fila 2 -> tabs a todo el ancho */
  .menu {
    flex-wrap: wrap; align-items: center; gap: .4rem;
    padding: .4rem .6rem !important; min-height: 0;
  }
  .btn-filtros {
    display: inline-flex !important; align-items: center;
    order: 1; flex: 0 0 auto;
  }
  .menu > div:first-of-type { order: 2; flex: 1 1 auto; min-width: 0; }
  .logo { max-width: 120px; }
  .menu .bloque-usuario { order: 3; flex: 0 0 auto; margin-left: auto !important; }
  .menu .bloque-tabs {
    order: 4; flex: 0 0 100%; width: 100%; margin-left: 0 !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .menu .bloque-tabs::-webkit-scrollbar { height: 0; }
  .menu .bloque-tabs .nav-tabs { flex-wrap: nowrap; border-bottom: 0; }
  .menu .bloque-tabs .nav-link { white-space: nowrap; padding: .35rem .6rem; font-size: .9rem; }
  .menu .bloque-usuario .nav-tabs { border-bottom: 0; }
}
@media (max-width: 400px) {
  .logo { max-width: 100px; }
}

/* --------------------------------------------------------- [LOGIN/REGISTER] */
@media (max-width: 991.98px) {
  .auth-card .form-control { min-height: 42px; }
  .auth-card .card-body { padding: 1.5rem 1rem !important; }
}