/* ============================================================
   Aplic & Go — Trocador de sistema (visual compartilhado)
   ------------------------------------------------------------
   Serve os três painéis, que têm paletas diferentes: as cores saem de
   variáveis com FALLBACK. Quem tem as variáveis (clínico, CRM) usa as
   suas — inclusive no tema claro do clínico, que troca as variáveis.
   Quem não tem (comercial) cai no valor escuro padrão da casa.

   O gatilho continua sendo do painel: cada um estiliza o seu botão.
   Daqui pra frente só o MENU é compartilhado.
   ============================================================ */

.sis-wrap { position: relative; }

.sis-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 232px;
  padding: 6px;
  background: var(--bg2, #161b22);
  border: 1px solid var(--bd1, #30363d);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  z-index: 300;
}
.sis-wrap.aberto .sis-menu { display: block; }

/* Variante da sidebar do clínico: a coluna tem overflow-x hidden e
   cortaria qualquer coisa que vazasse — então o menu fica preso à
   largura dela em vez de flutuar pra fora. */
.sis-wrap.na-sidebar .sis-menu {
  left: 12px;
  right: 12px;
  min-width: 0;
  top: calc(100% + 4px);
}

.sis-menu-label {
  padding: 6px 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--tx3b, #7d8590);
}

.sis-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--tx2, #c9d1d9);
}
a.sis-menu-item:hover,
a.sis-menu-item:focus-visible {
  background: var(--bg3, #21262d);
  outline: none;
}
a.sis-menu-item:focus-visible { box-shadow: inset 0 0 0 1px var(--bd2, #444c56); }

.sis-menu-item .ico {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
}
/* Cada sistema com a cor que já é dele nas telas. */
.sis-menu-item .ico.clin { background: linear-gradient(135deg, #C56847, #E8945A); }
.sis-menu-item .ico.com  { background: linear-gradient(135deg, #0F6E56, #1D9E75); }
.sis-menu-item .ico.crm  { background: linear-gradient(135deg, #5B4BC4, #8B7BF0); }
/* Sistema Site (blog do www.aplicgo.com): azul-petróleo, longe do terracota (clínico), do verde
   (comercial) e do roxo (CRM) — quatro cores que não se confundem num menu de 26px. */
.sis-menu-item .ico.site { background: linear-gradient(135deg, #1F6F78, #3AA3A9); }

.sis-menu-item .txt { min-width: 0; flex: 1; }
.sis-menu-item .txt b {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--tx1, #f0f6fc);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sis-menu-item .txt small {
  display: block;
  margin-top: 1px;
  font-size: 9.5px;
  color: var(--tx3b, #7d8590);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sis-menu-item .marca { flex-shrink: 0; font-size: 13px; color: var(--tx4, #6e7681); }

.sis-menu-item.atual {
  background: rgba(var(--ac-rgb, 232, 148, 90), 0.12);
  cursor: default;
}
.sis-menu-item.atual .marca { color: var(--ac, #E8945A); }

.sis-menu-foot {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 7px 8px 3px;
  border-top: 1px solid var(--hair, rgba(255, 255, 255, 0.07));
  font-size: 9px;
  color: var(--tx3b, #7d8590);
}