/* frontend/core/styles/icones.css
 *
 * Classe base dos ícones SVG de `core/components/icones.js`. Qualquer portal
 * que use o helper `icone()` precisa carregar esta folha.
 *
 * Um quadrado de 1em que herda a cor do texto: o ícone acompanha o `font-size`
 * já declarado no elemento que o hospeda e a tinta de quem está ao lado dele.
 * É o que faz o mesmo desenho servir ao título do card, ao chip e ao botão sem
 * uma regra de tamanho por lugar — e o que mantém o ícone branco nos
 * cabeçalhos sobre degradê escuro, onde o texto é branco fixo.
 *
 * `vertical-align` alinha o quadrado com a base do texto; sem ele o ícone
 * flutua acima da linha, porque a caixa do <svg> desce até a baseline.
 */
.ico {
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.14em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Peças pequenas (chevrons, selos) ficam frágeis com o traço padrão; peças
   grandes (ícone de estado vazio) ficam pesadas com ele. */
.ico--fino  { stroke-width: 1.4; }
.ico--forte { stroke-width: 2.2; }

/* Em título de tela e botão de ação o texto costuma ser pequeno e em caixa
   alta, e ali `1em` sai menor que o emoji que o ícone substituiu: o glifo
   ocupava a caixa inteira, o traçado ocupa ~75% do viewBox. */
.ico--titulo { width: 1.25em; height: 1.25em; }