/* ==========================================================================
   Ícones — o MESMO conjunto do controlemoma (bloco :root copiado sem mudança
   de controlemoma/public/css/icons.css): traço 2px, grade 24×24, "outline",
   embutidos como SVG em data: URI e pintados por máscara CSS com a cor do
   texto (currentColor). Sem CDN nem fonte de ícones (CSP: img-src 'self' data:).
   O HTML e o JS não mudaram: os ícones entram por ::before nas abas, no botão
   Sincronizar do topo e nos toasts que já existem.
   Para usar em outro lugar: <span class="ico" style="--ico: var(--ico-ok)">.
   ========================================================================== */
:root {
  --ico-atividades: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='M9 10h6M9 14h6M9 18h3'/%3E%3C/svg%3E");
  --ico-ponto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --ico-empresas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.8c2 .7 3.2 2.4 3.5 5.2'/%3E%3C/svg%3E");
  --ico-estrutura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-4 9 4-9 4z'/%3E%3Cpath d='M3 12l9 4 9-4'/%3E%3Cpath d='M3 16l9 4 9-4'/%3E%3C/svg%3E");
  --ico-previsao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4'/%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M8 16v-4M12 16V8M16 16v-6'/%3E%3C/svg%3E");
  --ico-relatorios: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
  --ico-config: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
  --ico-sync: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.3-4.9L4 8'/%3E%3Cpath d='M4 3v5h5'/%3E%3Cpath d='M4 13a8 8 0 0 0 14.3 4.9L20 16'/%3E%3Cpath d='M20 21v-5h-5'/%3E%3C/svg%3E");
  --ico-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E");
  --ico-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L2.5 20h19z'/%3E%3Cpath d='M12 10v4.5M12 17.5v.01'/%3E%3C/svg%3E");
}

.ico, .aba-btn::before, #btn-sync-topo::before, .toast.ok::before, .toast.erro::before, .toast.aviso::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
/* abas -> ícone mais próximo do conjunto (sem desenhar ícones novos) */
.aba-btn[data-aba="memoria"]       { --ico: var(--ico-atividades); }
.aba-btn[data-aba="painel"]        { --ico: var(--ico-previsao); }
.aba-btn[data-aba="calendario"]    { --ico: var(--ico-ponto); }
.aba-btn[data-aba="avisos"]        { --ico: var(--ico-alerta); }
.aba-btn[data-aba="participantes"] { --ico: var(--ico-empresas); }
.aba-btn[data-aba="status"]        { --ico: var(--ico-ok); }
.aba-btn[data-aba="relatorio"]     { --ico: var(--ico-relatorios); }
.aba-btn[data-aba="sincronizacao"] { --ico: var(--ico-sync); }
/* botão Sincronizar do topo: o texto "⟳" continua no HTML (e o aria-label),
   mas fica oculto visualmente e dá lugar ao ícone do conjunto */
#btn-sync-topo { --ico: var(--ico-sync); font-size: 0; width: 38px; height: 38px; padding: 0; }
#btn-sync-topo::before { width: 18px; height: 18px; }
#btn-sync-topo:disabled::before { animation: ico-gira 1s linear infinite; }
.toast.ok    { --ico: var(--ico-ok); }
.toast.erro  { --ico: var(--ico-alerta); }
.toast.aviso { --ico: var(--ico-alerta); }
.toast::before { margin-top: 1px; }
@keyframes ico-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #btn-sync-topo:disabled::before { animation: none; } }
@media (max-width: 720px), (pointer: coarse) { #btn-sync-topo { width: 44px; height: 44px; } }
@media print { .aba-btn::before, #btn-sync-topo::before, .toast::before { display: none; } }