/* Menú lateral agrupado (menu.js) — mockup aprobado por John el 31/10/2026. */
/* ── Menú agrupado (lo que se agregaría a styles.css) ─────────────────────── */
.mn-nav { padding: 10px 0; flex: 1; }
.mn-item, .mn-grupo-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 18px; border: 0; background: transparent; cursor: pointer;
  color: rgba(255,255,255,.72); font: inherit; font-size: 14px; text-align: left; position: relative;
}
.mn-item:hover, .mn-grupo-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
.mn-ico { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav-text { flex: 1; }
.mn-flecha { width: 15px; height: 15px; opacity: .55; transition: transform .18s; }
.mn-grupo.abierto .mn-flecha { transform: rotate(90deg); }
.mn-sub { display: none; padding: 2px 0 6px; }
.mn-grupo.abierto .mn-sub { display: block; }
.mn-sub .mn-item { padding: 8px 18px 8px 48px; font-size: 13.5px; }
.mn-sub .mn-item .mn-ico { width: 16px; height: 16px; }
/* Página actual: barra azul + fondo; su grupo, título en blanco. */
.mn-nav .nav-item.active { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 3px 0 0 var(--marca); }
.mn-grupo.actual > .mn-grupo-btn { color: #fff; font-weight: 600; }
.mn-grupo.actual > .mn-grupo-btn .mn-ico { stroke: var(--marca); }
.mn-item.pronto { opacity: .4; cursor: default; }
.mn-item.pronto:hover { background: transparent; color: rgba(255,255,255,.72); }
.mn-pronto { font-size: 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: 0 5px; }
/* Grupo cerrado con avisos dentro: punto rojo en el título. */
.mn-punto { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; display: none; }
.mn-grupo:not(.abierto).con-aviso .mn-punto { display: block; }
.sidebar-brand .mn-ico { width: 22px; height: 22px; stroke: var(--marca); }

/* ── Celular: el mismo menú, como cajón que se abre con ☰ ─────────────────── */
.mn-hamb { display: none; }
@media (max-width: 768px) {

  .sidebar { position: fixed !important; left: 0; top: 0; z-index: 800; width: 270px !important;
    transform: translateX(-100%); transition: transform .2s; box-shadow: 8px 0 24px rgba(0,0,0,.25); }
  .sidebar .brand-name, .sidebar .nav-text, .sidebar .sidebar-version, .sidebar .nav-text { display: initial !important; }
  .sidebar .admin-info { display: flex !important; }
  body.menu-abierto .sidebar { transform: none; }
  .mn-velo { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 790; }
  body.menu-abierto .mn-velo { display: block; }
  body.menu-abierto .ca-campana { visibility: hidden; }   /* la campanita no queda encima del cajón */
  .mn-hamb { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: #fff;
    border-radius: 8px; padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer; margin-bottom: 14px; }
  .mn-hamb .mn-ico { stroke: #1a2742; }
}

/* El activo de styles.css usa border-left + padding: aquí se usa una barra interior para no mover el texto. */
.mn-nav .nav-item.active { border-left: 0; padding-left: 18px; }
.mn-nav .mn-sub .nav-item.active { padding-left: 48px; }
.mn-nav .nav-icon { display: none; }
.sidebar-footer .mn-ico { width: 18px; height: 18px; }
@media (max-width: 768px) {
  .sidebar .nav-badge { position: static; }
  .mn-nav .nav-text, .sidebar-footer .nav-text { display: initial !important; }
}
.mn-pronto-envoltorio { display:block; }   /* P13: lleva el title «espera X» del ítem en gris */