/**
 * Poupex Play 4.0 — Identidade oficial (Fase 2)
 * Namespace: .pp4-* / --pp4-*
 *
 * Fase 2, etapas 1 e 2: Sidebar e Topbar.
 *
 * Este arquivo reconstrói o shell para a referência visual oficial. É
 * carregado por último, depois de `shell.css` e `sidebar.css`, e
 * substitui o desenho daquelas partes — a grade e o comportamento
 * continuam vindo de lá.
 *
 * ------------------------------------------------------------------
 * O QUE A REFERÊNCIA DEFINE, E O QUE O SISTEMA IMPÕE
 * ------------------------------------------------------------------
 * A imagem manda na FORMA: lista plana sem cabeçalhos de seção, item
 * ativo em retângulo azul sólido, selos inline, logo com marca em duas
 * linhas, topbar com busca à esquerda e um trio de ações à direita.
 *
 * Os DESTINOS continuam sendo os que existem. A referência mostra
 * "IA (PoupexAI)", "Ranking", "Conquistas" e "Loja"; nenhum tem rota
 * neste sistema. Um item de menu que leva a lugar nenhum é um produto
 * quebrado, então esses quatro não foram criados. Onde havia
 * equivalente real, o rótulo da imagem foi adotado:
 *
 *   Home        → /dashboard    (era "Vídeos diários")
 *   Play        → /jogos        (era "Jogos", com submenu)
 *   Carteira    → /financeiro   (era "Financeiro")
 *   Missões     → /tarefas      (era "Tarefas")
 *   Indicações  → /team         (era "Equipe")
 *   Mini Apps   → /minis-apps
 *
 * ------------------------------------------------------------------
 * PALETA OFICIAL
 * ------------------------------------------------------------------
 *   #0A0E17 Azul Noite · #123BF9 Azul Royal · #00E676 Verde Neon
 *   #1F2937 Cinza Escuro · #F5F7FA Branco · Inter
 */

/* ============================================================
   1 · SIDEBAR
   ============================================================ */

.pp4-shell .app-sidebar,
html[data-theme] .pp4-shell .app-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-5);
  padding: var(--pp4-space-5) var(--pp4-space-4) var(--pp4-space-4) !important;
  border-right: 1px solid rgba(245, 247, 250, 0.06) !important;
  background: #0a0e17 !important;
  background-image: none !important;
}

/* --- Marca ----------------------------------------------------------
   A referência traz o símbolo ▶ em azul dentro de um quadrado
   arredondado, e o nome em duas linhas: POUPEX / PLAY. */

.pp4-shell .app-sidebar__brand,
html[data-theme] .pp4-shell .app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  padding: 0 var(--pp4-space-2) !important;
  margin: 0 0 var(--pp4-space-2) !important;
  background: none !important;
  border: 0 !important;
  text-decoration: none;
}

.pp4-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(140deg, #123bf9 0%, #0b1f8f 100%);
  color: #ffffff;
}

.pp4-brand-mark svg { width: 20px; height: 20px; }

.pp4-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
}

.pp4-brand-text__top {
  color: #f5f7fa !important;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pp4-brand-text__bot {
  color: var(--pp4-color-blue-bright) !important;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  margin-top: 2px;
}

/* Some com a imagem de logo do banco: a referência usa a marca
   desenhada, e o arquivo configurado não carrega em vários casos. */
.pp4-shell .app-sidebar__brand img { display: none !important; }

/* --- Navegação -------------------------------------------------------
   Lista plana. Os cabeçalhos de seção (PRINCIPAL, JOGAR, MINHA REDE,
   MAIS, REDES POUPEX) não existem na referência e foram removidos da
   marcação; a regra abaixo cobre qualquer resquício. */

.pp4-shell .pp4-nav-section { display: none !important; }

.pp4-shell .app-sidebar__nav,
html[data-theme] .pp4-shell .app-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 !important;
  overflow-y: auto;
  scrollbar-width: thin;
}

.pp4-shell .app-sidebar__nav::-webkit-scrollbar { width: 4px; }
.pp4-shell .app-sidebar__nav::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(245, 247, 250, 0.12);
}

.pp4-shell .app-sidebar__link,
html[data-theme] .pp4-shell .app-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  min-height: 42px;
  padding: 0 var(--pp4-space-3) !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  background-image: none !important;
  color: #94a3b8 !important;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: none !important;
  transition: background 160ms cubic-bezier(.4,0,.2,1), color 160ms cubic-bezier(.4,0,.2,1);
}

.pp4-shell .app-sidebar__link:hover {
  background: rgba(245, 247, 250, 0.05) !important;
  color: #f5f7fa !important;
}

/* Item ativo: retângulo azul sólido, como na referência. */
.pp4-shell .app-sidebar__link--active,
html[data-theme] .pp4-shell .app-sidebar__link--active {
  background: #123bf9 !important;
  color: #ffffff !important;
  font-weight: 600;
}

.pp4-shell .app-sidebar__link--active .app-sidebar__icon,
.pp4-shell .app-sidebar__link--active svg { color: #ffffff !important; }

.pp4-shell .app-sidebar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: inherit !important;
}

.pp4-shell .app-sidebar__icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.7;
  color: inherit !important;
}

.pp4-shell .app-sidebar__link > span:not(.app-sidebar__icon):not(.pp4-nav-badge) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Selos inline ---------------------------------------------------
   "NOVO" e "BETA" na referência. */

.pp4-nav-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: var(--pp4-radius-pill);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
}

.pp4-nav-badge--novo { background: #123bf9; color: #ffffff !important; }
.pp4-nav-badge--beta { background: rgba(139, 92, 246, 0.22); color: #c4b5fd !important; }

/* --- Rodapé ---------------------------------------------------------- */

.pp4-shell .pp4-sidebar-foot,
html[data-theme] .pp4-shell .pp4-sidebar-foot {
  flex: 0 0 auto;
  padding-top: var(--pp4-space-3) !important;
  margin-top: var(--pp4-space-2) !important;
  border-top: 1px solid rgba(245, 247, 250, 0.06) !important;
  background: none !important;
}

/* ============================================================
   2 · TOPBAR
   ============================================================

   A referência tem três zonas: busca à esquerda, espaço livre no meio,
   e à direita um trio de ações mais o bloco do usuário. Não há abas de
   navegação nem botão de depósito ali — os dois duplicavam caminhos
   que já existem na sidebar e no corpo do Dashboard. */

.pp4-shell .app-topbar,
html[data-theme] .pp4-shell .app-topbar {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-4);
  height: 68px;
  padding: 0 var(--pp4-space-6) !important;
  border-bottom: 1px solid rgba(245, 247, 250, 0.06) !important;
  background: #0a0e17 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* --- Busca ----------------------------------------------------------- */

.pp4-shell .pp4-topbar-search,
html[data-theme] .pp4-shell .pp4-topbar-search {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-2);
  flex: 0 1 320px;
  min-width: 0;
  height: 40px;
  padding: 0 var(--pp4-space-4) !important;
  border: 1px solid rgba(245, 247, 250, 0.08) !important;
  border-radius: var(--pp4-radius-pill) !important;
  background: rgba(245, 247, 250, 0.04) !important;
  box-shadow: none !important;
  transition: border-color 160ms cubic-bezier(.4,0,.2,1);
}

.pp4-shell .pp4-topbar-search:focus-within { border-color: rgba(91, 140, 255, 0.5) !important; }

.pp4-shell .pp4-topbar-search svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #64748b !important;
}

.pp4-shell .pp4-topbar-search input,
html[data-theme] .pp4-shell .pp4-topbar-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #f5f7fa !important;
  font-family: inherit;
  font-size: 0.875rem;
  caret-color: #5b8cff !important;
}

.pp4-shell .pp4-topbar-search input:focus { outline: none; }
.pp4-shell .pp4-topbar-search input::placeholder { color: #64748b; }

/* Empurra o bloco da direita. */
.pp4-topbar-spacer { flex: 1 1 auto; }

/* --- Trio de ações ---------------------------------------------------- */

.pp4-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.pp4-shell .pp4-topbar-icon,
html[data-theme] .pp4-shell .pp4-topbar-icon,
.pp4-shell .app-topbar__alerts-btn,
.pp4-shell .app-topbar__balance {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border: 1px solid rgba(245, 247, 250, 0.08) !important;
  border-radius: 10px !important;
  background: rgba(245, 247, 250, 0.04) !important;
  background-image: none !important;
  color: #94a3b8 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background 160ms cubic-bezier(.4,0,.2,1), color 160ms cubic-bezier(.4,0,.2,1);
}

.pp4-shell .pp4-topbar-icon:hover,
.pp4-shell .app-topbar__alerts-btn:hover,
.pp4-shell .app-topbar__balance:hover {
  background: rgba(245, 247, 250, 0.09) !important;
  color: #f5f7fa !important;
}

.pp4-shell .pp4-topbar-icon svg,
.pp4-shell .app-topbar__alerts-btn svg,
.pp4-shell .app-topbar__balance svg {
  width: 18px;
  height: 18px;
  color: inherit !important;
  stroke: currentColor;
}

/* O saldo continua sendo um botão com JS de mostrar/ocultar. Na
   referência ele é só um ícone, então some o TEXTO do valor — mas não o
   invólucro `.app-topbar__balance-value`, que é onde os dois SVGs do
   olho vivem. Escondê-lo deixava o botão vazio. */
.pp4-shell .app-topbar__balance-amount,
.pp4-shell .app-topbar__balance-label { display: none !important; }

.pp4-shell .app-topbar__balance-value {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* O JS alterna o atributo `hidden` entre os dois ícones. */
.pp4-shell .app-topbar__balance-icon[hidden] { display: none !important; }

/* Ponto vermelho do sino, como na referência. */
.pp4-shell .app-topbar__alerts-badge,
html[data-theme] .pp4-shell .app-topbar__alerts-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0 !important;
  border: 2px solid #0a0e17 !important;
  border-radius: 50% !important;
  background: var(--pp4-color-danger) !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden;
}

.pp4-shell .app-topbar__alerts-badge.is-zero { display: none !important; }

/* --- Bloco do usuário ------------------------------------------------
   Avatar redondo, nome e patente em duas linhas, chevron. */

.pp4-shell .app-topbar__user,
html[data-theme] .pp4-shell .app-topbar__user {
  flex: 0 0 auto;
  margin-left: var(--pp4-space-2);
}

.pp4-shell .app-topbar__user-btn,
html[data-theme] .pp4-shell .app-topbar__user-btn {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  height: 44px;
  padding: 0 var(--pp4-space-3) 0 4px !important;
  border: 1px solid rgba(245, 247, 250, 0.08) !important;
  border-radius: var(--pp4-radius-pill) !important;
  background: rgba(245, 247, 250, 0.04) !important;
  background-image: none !important;
  cursor: pointer;
  list-style: none;
  box-shadow: none !important;
  transition: background 160ms cubic-bezier(.4,0,.2,1);
}

.pp4-shell .app-topbar__user-btn::-webkit-details-marker { display: none; }
.pp4-shell .app-topbar__user-btn:hover { background: rgba(245, 247, 250, 0.09) !important; }

.pp4-shell .app-topbar__avatar,
html[data-theme] .pp4-shell .app-topbar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  background: linear-gradient(140deg, #123bf9, #0b1f8f) !important;
  background-image: linear-gradient(140deg, #123bf9, #0b1f8f) !important;
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: none !important;
}

.pp4-shell .app-topbar__user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.15;
}

.pp4-shell .app-topbar__user-info strong {
  color: #f5f7fa !important;
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp4-shell .pp4-topbar-user__meta {
  color: #00e676 !important;
  font-size: 0.7rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp4-shell .app-topbar__chevron {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: #64748b !important;
}

/* ============================================================
   3 · CONTEÚDO
   ============================================================ */

.pp4-shell .app-content,
html[data-theme] .pp4-shell .app-content {
  padding: var(--pp4-space-6) !important;
  background: #0a0e17 !important;
}

/* ============================================================
   4 · RESPONSIVIDADE
   ============================================================ */

@media (max-width: 1023px) {
  .pp4-shell .app-topbar { padding: 0 var(--pp4-space-4) !important; }
  .pp4-shell .pp4-topbar-search { flex: 1 1 auto; max-width: 260px; }
}

@media (max-width: 767px) {
  .pp4-shell .app-topbar { height: 60px; gap: var(--pp4-space-2); }
  .pp4-shell .pp4-topbar-search { max-width: none; }

  /* A referência mobile mostra só busca e avatar no topo. */
  .pp4-shell .app-topbar__user-info { display: none; }
  .pp4-shell .app-topbar__chevron { display: none; }
  .pp4-shell .app-topbar__user-btn { padding: 0 !important; border: 0 !important; background: none !important; }

  .pp4-shell .app-content { padding: var(--pp4-space-4) !important; }
}

@media (max-width: 359px) {
  .pp4-shell .pp4-topbar-search { flex: 1 1 0; padding: 0 var(--pp4-space-3) !important; }
  .pp4-topbar-actions { gap: 3px; }
  .pp4-shell .pp4-topbar-icon,
  .pp4-shell .app-topbar__alerts-btn,
  .pp4-shell .app-topbar__balance { width: 34px; height: 34px; }
}

/* ============================================================
   5 · MOVIMENTO REDUZIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .pp4-shell .app-sidebar__link,
  .pp4-shell .pp4-topbar-icon,
  .pp4-shell .app-topbar__user-btn,
  .pp4-shell .pp4-topbar-search { transition: none !important; }
}

/* ============================================================
   6 · CORREÇÕES DA PRIMEIRA ITERAÇÃO
   ============================================================

   Encontradas ao comparar a captura com a referência. */

/* A marca não aparecia: `shell.css:99` também declara
   `.pp4-shell .app-sidebar__brand` (0,2,0) e vence pela ordem de
   carregamento em tudo que não repeti. O que faltava era garantir que
   o quadrado azul não fosse comprimido pelo `flex` do pai. */
.pp4-shell .app-sidebar__brand > .pp4-brand-mark {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
}

.pp4-shell .app-sidebar__brand > .pp4-brand-text { flex: 1 1 auto; }

/* --- Redes oficiais --------------------------------------------------
   A referência não tem esse bloco, mas WhatsApp e Telegram são
   destinos reais e removê-los tiraria navegação. Viram um par de
   chips compactos no fim da lista, sem o cabeçalho "Redes Poupex". */

.pp4-shell .app-sidebar__social-title { display: none !important; }

.pp4-shell .app-sidebar__social {
  display: flex;
  gap: 6px;
  margin-top: var(--pp4-space-3) !important;
  padding: var(--pp4-space-3) var(--pp4-space-1) 0 !important;
  border-top: 1px solid rgba(245, 247, 250, 0.06) !important;
  background: none !important;
}

.pp4-shell .app-sidebar__social-link,
html[data-theme] .pp4-shell .app-sidebar__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 34px;
  padding: 0 var(--pp4-space-2) !important;
  border: 1px solid rgba(245, 247, 250, 0.08) !important;
  border-radius: 9px !important;
  background: rgba(245, 247, 250, 0.04) !important;
  color: #94a3b8 !important;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms cubic-bezier(.4,0,.2,1);
}

.pp4-shell .app-sidebar__social-link:hover {
  background: rgba(245, 247, 250, 0.09) !important;
  color: #f5f7fa !important;
}

.pp4-shell .app-sidebar__social-link span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Sair -------------------------------------------------------------
   Na referência é o último item, discreto. */
.pp4-shell .app-sidebar__link--logout,
html[data-theme] .pp4-shell .app-sidebar__link--logout {
  color: #64748b !important;
}

.pp4-shell .app-sidebar__link--logout:hover {
  background: rgba(244, 63, 94, 0.1) !important;
  color: var(--pp4-color-danger) !important;
}

/* ============================================================
   7 · A MARCA — correção definitiva
   ============================================================

   O quadrado renderizava em 38×38, mas o `path` saía invisível: o
   `color` computado do SVG era `rgba(0,0,0,0)`. A origem é uma regra
   herdada de texto com gradiente recortado
   (`-webkit-background-clip: text` + `color: transparent`) que alcança
   descendentes da marca. Como `fill="currentColor"` resolve para o
   `color`, o desenho ficava transparente dentro de um quadrado azul.

   A mesma regra também centralizava o bloco; na referência ele é
   alinhado à esquerda. */

.pp4-shell .app-sidebar__brand,
html[data-theme] .pp4-shell .app-sidebar__brand {
  justify-content: flex-start !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

.pp4-shell .app-sidebar__brand .pp4-brand-mark,
.pp4-shell .app-sidebar__brand .pp4-brand-mark svg,
.pp4-shell .app-sidebar__brand .pp4-brand-mark svg path {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

.pp4-shell .app-sidebar__brand .pp4-brand-mark svg path { fill: #ffffff !important; }

.pp4-shell .app-sidebar__brand .pp4-brand-mark {
  background: linear-gradient(140deg, #123bf9 0%, #0b1f8f 100%) !important;
  background-image: linear-gradient(140deg, #123bf9 0%, #0b1f8f 100%) !important;
}

.pp4-shell .app-sidebar__brand .pp4-brand-text__top {
  -webkit-text-fill-color: #f5f7fa !important;
}

.pp4-shell .app-sidebar__brand .pp4-brand-text__bot {
  -webkit-text-fill-color: #5b8cff !important;
}

/* ============================================================
   8 · RESQUÍCIOS DA VARREDURA
   ============================================================ */

/* A regra herdada de texto com gradiente aplica um `background-image`
   dourado nos elementos da marca. O `-webkit-text-fill-color` da seção
   7 já resolvia o que se vê, mas o gradiente continuava computado e a
   varredura de cor o encontrava. */
.pp4-shell .pp4-brand-text,
.pp4-shell .pp4-brand-text__top,
.pp4-shell .pp4-brand-text__bot {
  background: none !important;
  background-image: none !important;
  border-color: transparent !important;
}

/* A 320px o botão de saldo tinha conteúdo mais largo que a caixa: os
   dois SVGs do olho ficam empilhados no mesmo espaço, e o invólucro
   não encolhia. */
.pp4-shell .app-topbar__balance,
.pp4-shell .app-topbar__balance-value { min-width: 0; overflow: hidden; }

/* ============================================================
   9 · REFINAMENTO DO SHELL — segunda passada
   ============================================================

   Diferenças encontradas ao ampliar a sidebar e comparar com a
   referência lado a lado. */

/* --- O vão morto antes de "Sair" -------------------------------------
   O `<nav>` tinha `flex: 1 1 auto`, então ocupava toda a altura livre e
   empurrava o rodapé para o fim da coluna. Sobrava um buraco de ~200px
   entre o último item e "Sair". Na referência "Sair" vem logo depois
   da lista. O nav passa a crescer só até o conteúdo. */
.pp4-shell .app-sidebar__nav,
html[data-theme] .pp4-shell .app-sidebar__nav {
  flex: 0 1 auto !important;
}

.pp4-shell .pp4-sidebar-foot,
html[data-theme] .pp4-shell .pp4-sidebar-foot {
  margin-top: 0 !important;
  padding-top: var(--pp4-space-2) !important;
}

/* A sidebar ganha o `gap` no lugar: quando sobra espaço, ele fica no
   fim da coluna e não no meio da navegação. */
.pp4-shell .app-sidebar,
html[data-theme] .pp4-shell .app-sidebar {
  gap: var(--pp4-space-3) !important;
  justify-content: flex-start;
}

/* --- Compactação -----------------------------------------------------
   A referência tem itens um pouco mais baixos e mais próximos. */
.pp4-shell .app-sidebar__link,
html[data-theme] .pp4-shell .app-sidebar__link {
  min-height: 40px;
  font-size: 0.875rem;
}

.pp4-shell .app-sidebar__nav { gap: 2px; }

/* --- Chips de redes --------------------------------------------------
   "Canal Telegram" truncava para "Canal Tel...". Empilhados em coluna
   cabem inteiros, e o bloco fica mais próximo do resto da lista. */
.pp4-shell .app-sidebar__social {
  flex-direction: column;
  gap: 4px;
  margin-top: var(--pp4-space-2) !important;
  padding-top: var(--pp4-space-2) !important;
}

.pp4-shell .app-sidebar__social-link,
html[data-theme] .pp4-shell .app-sidebar__social-link {
  justify-content: flex-start;
  gap: var(--pp4-space-3);
  min-height: 32px;
  padding: 0 var(--pp4-space-3) !important;
  font-size: 0.78rem;
}

/* O ícone das redes vem de `redes_empresa_icone()`, que devolve emoji.
   Reservar largura fixa evita que o rótulo dance entre uma rede e outra
   quando a fonte de emoji não existe. */
.pp4-shell .app-sidebar__social-link span:first-child {
  flex: 0 0 20px;
  width: 20px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1;
}

/* --- "Sair" -----------------------------------------------------------
   Separador mais discreto, item alinhado com os demais. */
.pp4-shell .pp4-sidebar-foot {
  border-top: 1px solid rgba(245, 247, 250, 0.05) !important;
}

/* --- Alinhamento do trio de ações -------------------------------------
   O botão de saldo media 38×44 e o de alertas 38×38: um `min-height`
   herdado esticava só o primeiro, e a diferença de 6px aparecia como
   desalinhamento vertical entre os dois ícones. */
.pp4-shell .app-topbar__balance,
.pp4-shell .app-topbar__alerts-btn,
.pp4-shell .pp4-topbar-icon,
html[data-theme] .pp4-shell .app-topbar__balance,
html[data-theme] .pp4-shell .app-topbar__alerts-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  flex: 0 0 38px !important;
  align-self: center;
}

/* O invólucro de alertas é um <div> que envolve o botão; sem altura
   própria ele herda a da linha e desloca o botão. */
.pp4-shell .app-topbar__alerts {
  display: inline-flex;
  align-items: center;
  height: 38px;
}

/* --- Chips de redes: composição -------------------------------------
   A referência não tem esse bloco na sidebar. Como os dois destinos são
   reais, viram ícones compactos lado a lado: ocupam a altura de um item
   só em vez de dois, e o ritmo vertical da lista fica igual ao da
   referência. Nenhum destino foi perdido. */
.pp4-shell .app-sidebar__social {
  flex-direction: row !important;
  gap: 6px;
}

.pp4-shell .app-sidebar__social-link,
html[data-theme] .pp4-shell .app-sidebar__social-link {
  justify-content: center !important;
  gap: 0 !important;
  flex: 1 1 0;
  min-height: 36px;
  padding: 0 !important;
}

/* O rótulo some; o ícone e o `title` carregam a identificação. */
.pp4-shell .app-sidebar__social-link span:last-child { display: none; }

.pp4-shell .app-sidebar__social-link span:first-child {
  flex: 0 0 auto;
  width: auto;
  font-size: 1rem;
}

/* ============================================================
   10 · TOPBAR EM 320px
   ============================================================

   Menu (44) + busca (34) + três ações e avatar (200) somavam 350px
   numa faixa de 320. O bloco de ações não encolhia porque cada ícone
   tem largura fixa.

   Abaixo de 360px sai o atalho de Comunidade — é o único dos três que
   já está na sidebar, então nenhum destino fica inacessível. Saldo e
   alertas ficam, porque não existem em outro lugar. */

@media (max-width: 359px) {
  .pp4-shell .app-topbar { gap: 6px !important; padding: 0 10px !important; }

  .pp4-shell .app-topbar .pp4-topbar-icon[href*="comunidade"] { display: none !important; }

  .pp4-shell .app-topbar__actions,
  .pp4-shell .pp4-topbar-actions { gap: 4px !important; min-width: 0; }

  .pp4-shell .app-topbar__balance,
  .pp4-shell .app-topbar__alerts-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px !important;
  }

  /* O invólucro dos alertas guarda o painel dropdown, que tem largura
     própria. Encolhê-lo junto com o botão fazia o painel estourar o
     contêiner; ele fica com a largura do botão e o painel continua
     posicionado de forma absoluta. */
  /* O invólucro acompanha o botão em vez de receber largura fixa: com
     32px cravados, a borda de 1px do botão somava 38px de conteúdo e
     sobrava estouro interno de 6px. */
  .pp4-shell .app-topbar__alerts {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    height: 32px !important;
    position: relative;
    overflow: visible;
    box-sizing: content-box;
  }

  .pp4-shell .app-topbar__avatar { width: 30px !important; height: 30px !important; }

  .pp4-shell .pp4-topbar-search { flex: 1 1 0 !important; min-width: 0 !important; }
}