/* ════════════════════════════════════════════════════════════════════════════
   Menú SaaS plano — sidebar de 12 ítems + tabs de página + chips de canal
   Destino: Gestion_Integraciones.Server/wwwroot/css/menu-saas.css
   Referencia: "Menu SaaS opciones.dc.html" sección 2a. Solo tokens --gi-*.
   Reemplaza las reglas de árboles del sidenav (nav-agent-*, nav-chan*,
   nav-sublist*, nav-settings-*, nav-section-label, nav-chev).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Ítems planos del sidebar ─────────────────────────────────────────────── */
.gi-nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 11px;
               border-radius: 8px; font-size: 12.5px; color: var(--gi-body);
               text-decoration: none; min-width: 0; }
.gi-nav-item:hover { background: var(--gi-muted-2); color: var(--gi-fg); }
.gi-nav-item.active { background: var(--brand-subtle, rgba(224,113,78,.1));
                      color: var(--brand-dark, #C25438); font-weight: 600; }
.gi-nav-item .nav-icon { font-size: 14px; flex: none; width: 18px; text-align: center; }
.gi-nav-item .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gi-nav-badge { margin-left: auto; font-size: 10.5px; font-weight: 700;
                border-radius: 999px; padding: 1px 7px;
                background: var(--gi-muted); color: var(--gi-body); }
.gi-nav-badge.alert { background: var(--gi-danger-bg); color: var(--gi-danger-text); }

/* Grupos desplegables (Mi negocio, Cuenta): <details> nativo, sin JS. */
.gi-nav-group { display: flex; flex-direction: column; gap: 1px; }
.gi-nav-group > summary { list-style: none; cursor: pointer; user-select: none; }
.gi-nav-group > summary::-webkit-details-marker { display: none; }
.gi-nav-group > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gi-ring); }
.gi-nav-chev { margin-left: auto; font-size: 10px; color: var(--gi-faint); transition: transform .15s ease; }
.gi-nav-group[open] > summary .gi-nav-chev { transform: rotate(90deg); }
.gi-nav-group[open] > summary { color: var(--gi-fg); font-weight: 600; }
.gi-nav-sub { padding-left: 28px; }
@media (max-width: 640px) {
  .gi-nav-group > summary, .gi-nav-sub { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .gi-nav-chev { transition: none; } }

.gi-nav-divider { height: 1px; background: var(--gi-border); margin: 8px 10px;
                  opacity: .7; }

/* Colapsado: solo íconos (título nativo via title=) */
.sidenav.collapsed .gi-nav-item { justify-content: center; padding: 9px 0; }
.sidenav.collapsed .gi-nav-item .nav-label,
.sidenav.collapsed .gi-nav-badge { display: none; }

/* ── Tabs de página (Asistente, Catálogo, Mi negocio, Ajustes, Registros) ──── */
.gi-page-tabs { display: flex; gap: 2px; flex-wrap: wrap;
                border-bottom: 1px solid var(--gi-border); }
.gi-page-tab { font-size: 12.5px; font-weight: 500; color: var(--gi-muted-fg);
               padding: 8px 12px; border: none; background: none; cursor: pointer;
               font-family: inherit; border-bottom: 2px solid transparent;
               text-decoration: none; white-space: nowrap; }
.gi-page-tab:hover { color: var(--gi-fg); }
.gi-page-tab.active { font-weight: 700; color: var(--brand-dark, #C25438);
                      border-bottom-color: var(--brand, #E0714E); }
@media (max-width: 640px) {
  .gi-page-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .gi-page-tabs::-webkit-scrollbar { display: none; }
}

/* Sub-solapas (Mi negocio › Equipo, 25/9): segunda fila debajo de las solapas de la
   página, como píldoras, para que se lea como un nivel adentro de la solapa activa. */
.gi-page-tabs.gi-page-tabs-sub { border-bottom: none; gap: 6px; margin: 12px 0 4px; }
.gi-page-tabs-sub .gi-page-tab { border: 1px solid var(--gi-border); border-radius: 999px;
                                 padding: 5px 12px; }
.gi-page-tabs-sub .gi-page-tab:hover { background: var(--gi-muted); }
.gi-page-tabs-sub .gi-page-tab.active { color: var(--gi-fg-strong); background: var(--gi-muted);
                                        border-color: var(--gi-border-strong, var(--gi-border)); }
@media (max-width: 640px) {
  .gi-page-tabs-sub .gi-page-tab { padding: 9px 14px; }
}

/* Header de la página Asistente: selector + acciones */
.gi-agent-select { display: inline-flex; align-items: center; gap: 7px;
                   border: 1px solid var(--gi-border); border-radius: 9px;
                   padding: 5px 10px; font-size: 12.5px; font-weight: 600;
                   color: var(--gi-fg-strong); background: var(--gi-card);
                   cursor: pointer; font-family: inherit; }
.gi-agent-select:hover { background: var(--gi-muted-2); }

/* ── Chips de canal (página Canales) ──────────────────────────────────────── */
.gi-canal-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.gi-canal-chip { display: inline-flex; align-items: center; gap: 5px;
                 font-size: 11.5px; font-weight: 500; color: var(--gi-body);
                 border: 1px solid var(--gi-border); border-radius: 999px;
                 padding: 4px 11px; background: var(--gi-card); cursor: pointer;
                 font-family: inherit; text-decoration: none; }
.gi-canal-chip:hover { border-color: var(--gi-border-strong); }
.gi-canal-chip.on { font-weight: 700; color: var(--brand-dark, #C25438);
                    background: var(--brand-subtle, rgba(224,113,78,.1));
                    border-color: var(--brand, #E0714E); }
.gi-canal-chip .gi-nav-badge { margin-left: 2px; }