/* Logos dos sistemas e o sino de notificações no canto do início. */

.acoes-topo { display: flex; align-items: center; gap: 10px; }

.icone.logo { background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.icone.logo img { width: 78%; height: 78%; object-fit: contain; display: block; }

.sino-wrap { position: relative; }
.sino-botao { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.sino-botao:hover { background: var(--surface-2); }
.sino-contagem { position: absolute; top: -4px; right: -4px; margin: 0; }

.painel-sino { position: absolute; right: 0; top: 50px; width: min(380px, 88vw); max-height: 70vh; overflow: auto; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 8px 14px 12px; display: grid; gap: 2px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.painel-sino-topo { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.painel-vazio { padding: 10px 0; }

@media (max-width: 860px) {
  .acoes-topo { width: 100%; }
  .acoes-topo .busca { flex: 1; }
}

.externo-cab { display: flex; align-items: center; gap: 12px; }
.icone.logo.pequeno { width: 44px; height: 44px; border-radius: 12px; flex: none; }