/* ═══════════════════════════════════════════════════════════════════════
   KIT NAPOLEÃO · ícones
   Tamanho, alinhamento e cor dos ícones. O desenho vem do pacote de traço
   auto-hospedado em /kit/icones/; a troca de nome (fa-… → ph-…) é feita pelo
   /kit/js/icones.js, sem editar HTML.

   Regra do Consulado II:
     repouso  → traço, cinza
     hover    → traço grosso, marinho
     ativo    → preenchido, dourado
   ═══════════════════════════════════════════════════════════════════════ */

/* Alinhamento: ícone acompanha a linha de texto, nunca empurra a linha. */
.ph, .ph-bold, .ph-fill, i[class*="ph-"] {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: -.125em; line-height: 1; flex: none;
}

/* Escala única — quatro tamanhos, e só. */
.ph, .ph-bold, .ph-fill { font-size: 1.05em; }
.n-icone-sm { font-size: 14px !important; }
.n-icone-md { font-size: 17px !important; }
.n-icone-lg { font-size: 24px !important; }
.n-icone-xl { font-size: 34px !important; }

/* Botões e menus: espaço entre ícone e rótulo vem do gap, não de margem.
   ⚠️ `.sidebar a` NÃO entra aqui. O menu lateral é uma pilha vertical: os links
   já são `display:flex` (bloco) no layout.css, e como este arquivo carrega
   depois, um `inline-flex` aqui os tornava inline — dois e três itens por linha,
   embolados no canto. O gap deles também já vem do layout.css. */
.btn, button, .conta-menu a, .aba, .chip {
  display: inline-flex; align-items: center; gap: 8px;
}
.btn > i, button > i, .sidebar a > i, .aba > i { flex: none; }

/* ── Barra lateral ─────────────────────────────────────────────────────── */
.sidebar a > i { color: var(--sidebar-icone); transition: color var(--mov-rapido) var(--mov-curva); }
.sidebar a:hover > i { color: var(--sidebar-texto); }
.sidebar a.ativo > i, .sidebar a[aria-current="page"] > i { color: var(--sidebar-icone-ativo); }
/* item ativo tem fundo claro no tema claro: ali o ícone precisa do dourado escuro */
.sidebar a.ativo { color: var(--sidebar-ativo-texto); }
html:not([data-tema="escuro"]) .sidebar a.ativo > i { color: var(--dourado-forte); }

/* ── Ícone dentro de título de card ────────────────────────────────────── */
.card h2 > i, .secao-titulo > i { color: var(--dourado-forte); font-size: 1em; }
html[data-tema="escuro"] .card h2 > i, html[data-tema="escuro"] .secao-titulo > i { color: var(--dourado); }

/* ── Ícone de estado ──────────────────────────────────────────────────── */
.ph-check-circle, .ph-checks, .ph-check { color: var(--verde-medio); }
.ph-warning, .ph-warning-circle { color: var(--dourado-forte); }
.ph-x-circle, .ph-prohibit { color: var(--vermelho-alerta); }
html[data-tema="escuro"] .ph-warning, html[data-tema="escuro"] .ph-warning-circle { color: var(--dourado); }

/* Dentro de badge/pill o ícone herda a cor do texto — não briga com o fundo. */
.badge .ph, .badge .ph-fill, .pill .ph, .chip .ph, .n-aviso .ph { color: inherit; }

/* ── Estado vazio ─────────────────────────────────────────────────────── */
.vazio > i, .vazio .ph { font-size: 34px; color: var(--cinza-borda); margin-bottom: 10px; }

/* Ícone de carregamento — o único que gira, e só quando não há esqueleto. */
.ph-circle-notch { animation: n-gira .9s linear infinite; }
@keyframes n-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ph-circle-notch { animation: none; } }

/* Impressão: ícone decorativo sai, ícone de estado fica em preto. */
@media print {
  .sidebar a > i, .btn > i, button > i { display: none; }
  .ph, .ph-fill, .ph-bold { color: #000 !important; }
}

/* ── Olho de mostrar senha: NÃO mora mais aqui ────────────────────────────
   O estilo do `.btn-olho` foi para dentro do próprio /kit/js/mostrar-senha.js.
   Estava neste arquivo e quebrava nas páginas que carregam o script mas não
   carregam esta folha — o Arco é uma delas: o botão caía embaixo do campo,
   sem posição, sem tamanho e sem cor. É a MESMA falha que já derrubou o ícone
   duas vezes, agora pelo lado do CSS.
   Não trazer de volta para cá: quem injeta o botão injeta o estilo dele. */