/* ════════════════════════════════════════════════════════════════════════════
   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); }

.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,
.sidenav.collapsed .gi-user-card .gi-user-meta { display: none; }

/* ── Card de usuario (footer) ─────────────────────────────────────────────── */
.gi-user-wrap { border-top: 1px solid var(--gi-border); margin-top: 6px;
                padding: 10px 8px 8px; position: relative; }
.gi-user-card { display: flex; align-items: center; gap: 9px; padding: 6px 8px;
                border-radius: 9px; background: var(--gi-muted-2);
                border: 1px solid var(--gi-border); cursor: pointer;
                list-style: none; }
.gi-user-card::-webkit-details-marker { display: none; }
.gi-user-ava { width: 28px; height: 28px; border-radius: 50%;
               background: var(--gi-muted); color: var(--gi-body);
               display: inline-flex; align-items: center; justify-content: center;
               font-size: 11px; font-weight: 700; flex: none; }
.gi-user-meta { min-width: 0; }
.gi-user-name { display: block; font-size: 12px; font-weight: 700;
                color: var(--gi-fg-strong); white-space: nowrap; overflow: hidden;
                text-overflow: ellipsis; }
.gi-user-sub { display: block; font-size: 10.5px; color: var(--gi-faint); }
.gi-user-dots { margin-left: auto; color: var(--gi-faint); font-size: 12px; }

/* Popover CSS-only: <details class="gi-user-pop"><summary class="gi-user-card">… */
.gi-user-pop { position: relative; }
.gi-user-pop[open] .gi-user-menu { display: flex; }
.gi-user-menu { display: none; position: absolute; bottom: calc(100% + 6px);
                left: 8px; right: 8px; flex-direction: column; gap: 2px; z-index: 30;
                background: var(--gi-card); border: 1px solid var(--gi-border);
                border-radius: 10px; box-shadow: var(--gi-shadow-lg, 0 10px 30px rgba(15,23,42,.15));
                padding: 6px; }
.gi-user-menu .gi-nav-item { font-size: 12px; padding: 7px 9px; }
.gi-user-version { font-size: 10px; color: var(--gi-faint); text-align: center;
                   padding: 6px 0 2px; border-top: 1px dashed var(--gi-border);
                   margin-top: 4px; }

/* ── 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; }
}

/* 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; }