/* ==========================================================================
   Ícones — um único conjunto, desenhado para o app (traço 2px, grade 24×24,
   estilo "outline"). Ficam EMBUTIDOS aqui como SVG em data: URI e são
   aplicados por máscara CSS com a cor do texto (currentColor), então:
   - não há CDN nem fonte de ícones (CSP: img-src 'self' data:);
   - não foi preciso mexer no HTML gerado pelo JS: os ícones entram por
     ::before nos elementos que já existem (nav, Sincronizar, toasts).
   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, .nav-link::before, #btn-sync::before, .toast-ok::before, .toast-bad::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;
}
.nav-link[data-module="atividades"] { --ico: var(--ico-atividades); }
.nav-link[data-module="ponto"]      { --ico: var(--ico-ponto); }
.nav-link[data-module="empresas"]   { --ico: var(--ico-empresas); }
.nav-link[data-module="estrutura"]  { --ico: var(--ico-estrutura); }
.nav-link[data-module="previsao"]   { --ico: var(--ico-previsao); }
.nav-link[data-module="relatorios"] { --ico: var(--ico-relatorios); }
.nav-link[data-module="config"]     { --ico: var(--ico-config); }
#btn-sync { --ico: var(--ico-sync); }
#btn-sync::before { width: 16px; height: 16px; }
#btn-sync:disabled::before { animation: ico-gira 1s linear infinite; }
.toast-ok  { --ico: var(--ico-ok); }
.toast-bad { --ico: var(--ico-alerta); }
@keyframes ico-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #btn-sync:disabled::before { animation: none; } }
/* no celular estreito a navegação mostra ícone + rótulo, sem cortar o texto */
@media (max-width: 640px) { .nav-link::before { width: 20px; height: 20px; } }
@media print { .nav-link::before, #btn-sync::before { display: none; } }