/*
==================================================================================
📁 cabesp-icons.css
==================================================================================

📌 FINALIDADE:
Este arquivo centraliza a definição de todos os ícones SVG customizados utilizados no Portal 3.0.
Cada ícone é incluído via `background-image` com tamanho e posicionamento controlado via CSS.

📌 COMO FUNCIONA:
- O estilo CSS aplica o ícone como imagem de fundo (`background-image`) em um elemento inline, 
  como `<i>` ou `<span>`.
- A cor do ícone não é herdada via `currentColor`, mas sim definida diretamente no arquivo SVG.

📌 COMO ADICIONAR/EDITAR UM ÍCONE:

1. 🎨 ABRA O SVG no Notepad++ ou editor de SVG de sua escolha.
2. 🛠️ EDITE A COR no atributo `fill`. Exemplo típico gerado pelo Illustrator:

       <defs>
         <style>
           .cls-1 {
             fill: #fff;
           }
         </style>
       </defs>
       <path class="cls-1" d="M41{...}" />

   ✔️ Para trocar a cor para azul, altere `fill: #fff;` para `fill: #007bff;`.
        Se precisar encontrar uma cor, é possível utilizar o Hexadecimal Color Picker do Google em https://g.co/kgs/fBP3Zxn
   ❌ Não use `fill: currentColor`, pois esta abordagem não está sendo usada neste contexto.

3. 💾 SALVE o svg no caminho: `/wwwroot/images/icons/[nome-do-icone].svg`

4. 🧩 CRIE um seletor CSS como este abaixo, com o nome do ícone:

    .svg-icon-[nome-do-icone] {
        position: relative;
    }

        .svg-icon-[nome-do-icone]::before {
            content: '';
            display: inline-block;
            width: 0.8em;
            height: 0.8em;
            background-image: url('/images/icons/[nome-do-icone].svg');
            vertical-align: middle;
        }

5. ✅ USE na view com um elemento `<i>`:

       <i class="svg-icon-dente"></i>

🔍 OBSERVAÇÃO sobre o uso de "::before" :
    O uso do `::before` aqui permite inserir o ícone SVG como pseudo-elemento,
    evitando que o elemento pai (<i>, <span>, etc.) seja distorcido por estilos herdados
    (por exemplo, `font-size`, `line-height`, `padding`, etc.). Isso garante um tamanho
    mais previsível e um posicionamento consistente do ícone, independente do contexto.

==================================================================================
*/

/* dente.svg */
.svg-icon-dente {
    position: relative;
}

    .svg-icon-dente::before {
        content: '';
        display: inline-block;
        width: 0.8em;
        height: 0.8em;
        background-image: url('/images/icons/dente.svg');
        vertical-align: middle;
    }