/* css/header.css | Menu superior. Mantiene los colores de .header-cj (ecommerce.css) */

.header-cj .brand-texto { white-space: nowrap; }
@media (max-width: 379.98px) {
  .header-cj .navbar-brand { font-size: .95rem; margin-right: .25rem; }
  .header-cj .navbar-brand i { display: none; }
}

/* Logo de la empresa en la barra, el menu movil y el pie */
.brand-logo { height: 32px; width: auto; max-width: 140px; object-fit: contain; vertical-align: middle; }
.footer-cj .brand-logo { height: 36px; max-width: 160px; }
@media (max-width: 379.98px) { .header-cj .brand-logo { height: 26px; max-width: 90px; margin-right: .35rem !important; } }

/* Carrito */
.header-cj .btn-carrito.active { background: rgba(255, 255, 255, .15); }
.header-cj .btn-carrito { position: relative; }

/* Menu movil: filas comodas para el dedo */
@media (max-width: 991.98px) {
  .header-cj .offcanvas { --bs-offcanvas-width: min(86vw, 320px); }
  .header-cj .nav-link { display: flex; align-items: center; gap: .5rem; min-height: 46px; }
  .header-cj .menu-usuario { padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .15); }
}

/* Tarjeta de usuario (movil) */
.header-cj .usuario-tarjeta {
  display: flex; align-items: center; gap: .75rem; padding: .75rem;
  color: #fff; background: rgba(255, 255, 255, .08); border-radius: 12px;
}
.header-cj .min-w-0 { min-width: 0; }

/* Boton de usuario (escritorio): nombres largos no rompen el menu */
.header-cj .usuario-boton { display: inline-flex; align-items: center; gap: .35rem; max-width: 150px; padding: .2rem .55rem; }
.header-cj .usuario-boton .usuario-corto { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-cj .usuario-datos { max-width: 240px; padding-top: .5rem; }
.header-cj .usuario-datos .badge { font-size: .7rem; margin-top: .15rem; }

/* Mi cuenta: menu lateral */
.cuenta-menu .list-group-item { min-height: 46px; display: flex; align-items: center; }
.cuenta-menu .list-group-item.active { background: var(--cj-blue); border-color: var(--cj-blue); }
@media (max-width: 991.98px) {
  .cuenta-menu { flex-direction: row; flex-wrap: wrap; }
  .cuenta-menu .list-group-item { flex: 1 1 45%; justify-content: center; border-radius: 8px !important; border-width: 1px !important; }
}