/* ==========================================================================
   Ícones NutriFlow  —  Phosphor Icons, peso FILL (sólido), self-hospedado.
   Sprite: /vendor/nf-icons/nf-icons.svg  (gerado por scripts/sprite-phosphor/)
   Fragmento: fragments/icon.html   Helper JS: window.__NF.icon()
   ========================================================================== */

.nf-i {
    width: 1.15em;
    height: 1.15em;
    display: inline-block;
    flex: none;
    vertical-align: -0.15em;
    margin-right: 0.4em;            /* respiro padrão antes do texto */
    color: #2A8AA0;                 /* Teal Escuro (Apoio) — cor padrão */
    fill: currentColor;
    stroke: none;
}
.nf-i > use { pointer-events: none; }

/* --- sem margem (ícone sozinho em botão/célula centralizada) --------------- */
.nf-i--only { margin: 0; }

/* --- tamanhos ------------------------------------------------------------- */
.nf-i--sm { width: 1em;    height: 1em; }
.nf-i--lg { width: 1.4em;  height: 1.4em; }
.nf-i--xl { width: 2em;    height: 2em; }
.nf-i--2x { width: 2.6em;  height: 2.6em; }

/* --- cores semânticas --------------------------------------------------------
   base/apoio  #2A8AA0   (padrão, não precisa classe)
   atenção     #F59E0B   -> avisos, alertas amarelos
   erro        #EF4444   -> excluir, remover, destrutivo
   info/roxo   #6366F1   -> informação, substituições
--------------------------------------------------------------------------- */
.nf-i--atencao      { color: #F59E0B; }
.nf-i--erro         { color: #EF4444; }
.nf-i--info,
.nf-i--roxo         { color: #6366F1; }

/* utilitárias extras */
.nf-i--branco       { color: #fff; }
.nf-i--muted        { color: #8AA0A6; }
.nf-i--herda        { color: inherit; }   /* herda a cor do texto ao redor */

/* --- em botões: alinhar com o rótulo ------------------------------------- */
button .nf-i,
.btn .nf-i,
a.btn .nf-i { vertical-align: -0.18em; }

/* Contêineres de fundo colorido (botão sólido, badge de etapa, etc.): o ícone
   herda a cor do texto (branco), senão sai teal e some no fundo.
   Botões outline/ghost e tiles de fundo claro mantêm o teal padrão. */
.btn-primary .nf-i,
.btn-danger .nf-i,
.btn-success .nf-i,
.btn-perigo .nf-i,
a.btn-primary .nf-i,
a.btn-danger .nf-i,
.step-num .nf-i,
.wa-ico .nf-i,
/* PWA / mobile */
.mbtn-primary .nf-i,
.btn-primario .nf-i,
.btn-submit .nf-i,
.mfab .nf-i,
.mchat-enviar .nf-i,
.btn-acao-resumo.btn-enviar .nf-i,
.mdel-btn .nf-i,
.mtarefas-btn-add .nf-i,
.mconsulta-iniciar .nf-i,
.mmodal-rodape .mtab-btn.active .nf-i,
.mnav a.ativo .nf-i { color: inherit; }

/* ==========================================================================
   "Azulejo" — fundo arredondado atrás do ícone.
   USAR em: cards de navegação, atalhos do dashboard, cabeçalhos de seção,
            estados vazios, tiles de destaque.
   NÃO usar em: menu lateral, botões, ícones inline antes de texto, células
            de tabela — nesses o ícone vai "pelado".
   ---------------------------------------------------------------------------
   <span class="nf-i-tile"><svg th:replace="~{fragments/icon :: ic('agenda')}"></svg></span>
   ou pelo fragmento:  ~{fragments/icon :: it('agenda')}
   ========================================================================== */
.nf-i-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border-radius: 0.7em;
    background: #EAF4F5;
    color: #2A8AA0;
    flex: none;
    vertical-align: middle;
}
.nf-i-tile > .nf-i {
    width: 1.3em;
    height: 1.3em;
    margin: 0;
    color: inherit;
}
.nf-i-tile--sm { width: 2em;   height: 2em;   border-radius: 0.55em; }
.nf-i-tile--lg { width: 3.2em; height: 3.2em; border-radius: 0.95em; }

/* variações de cor (fundo claro + ícone na cor cheia) */
.nf-i-tile--atencao { background: #FEF3E2; color: #F59E0B; }
.nf-i-tile--erro    { background: #FDECEC; color: #EF4444; }
.nf-i-tile--roxo,
.nf-i-tile--info    { background: #ECECFD; color: #6366F1; }
.nf-i-tile--solido  { background: #2A8AA0; color: #fff; }