/* Marcador de unidade (R$ / %) na ZONA PÚBLICA — simuladores de consórcio e saúde.

   Por que este arquivo existe: o mecanismo do adorno mora no `styles.css`, que é
   do Core e é carregado pelos layouts do CRM. A zona pública tem layout próprio
   (`resources/views/public/layout.blade.php`) e NÃO carrega o styles.css — então
   os campos marcados no simulador ficavam com a classe e sem desenho nenhum.

   Descoberto em 27/07/2026 ao capturar o print do formulário para o cliente: o
   HTML saía com `class="… adorno-money …"` e o computed style devolvia
   `background-image: none`. Classe no HTML não é o mesmo que estilo aplicado —
   a verificação anterior tinha parado no HTML.

   É uma CÓPIA deliberada das regras do Core, não uma variação: se o adorno mudar
   lá, mudar aqui também. Carregar o styles.css inteiro na zona pública traria
   junto todo o CSS do CRM, que tem layout e tipografia próprios e conflitaria com
   o visual das landings.

   A explicação do desenho (por que background-image e não pseudo-elemento, por
   que não reaproveitar `.money`) está no bloco correspondente do styles.css. */

input.adorno-money.adorno-money,
input.adorno-percent.adorno-percent {
    background-repeat: no-repeat;
}

input.adorno-money.adorno-money {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12'%3E%3Ctext x='0' y='10' font-size='10' fill='%236c757d' font-family='sans-serif'%3ER$%3C/text%3E%3C/svg%3E");
    background-position: left 0.75rem center;
    padding-left: 2.4rem;
}

input.adorno-percent.adorno-percent {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ctext x='0' y='10' font-size='10' fill='%236c757d' font-family='sans-serif'%3E%25%3C/text%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

/* A zona pública alinha os campos monetários à ESQUERDA (regra própria do
   layout: `input.money { text-align: left !important }`), ao contrário do CRM,
   que alinha à direita. Com o texto começando na esquerda, o R$ precisa de mais
   folga para não encostar no valor digitado. */
input.adorno-money.adorno-money {
    padding-left: 2.6rem;
}