` e cartão branco.
Duplicar essas regras aqui é o problema que este arquivo existe para
evitar (ver a nota "NADA DE ALIAS COM O NOME DA CALCULADORA" no topo).
=================================== */
.calc-section {
background: #fff;
border-radius: 16px;
padding: 2rem;
margin: 0 0 2rem;
box-shadow: 0 6px 25px rgba(0, 0, 0, .08);
border: 1px solid rgba(0, 0, 0, .04);
}
/* ===================================
FORMULÁRIO
=================================== */
.calc-form {
display: grid;
gap: 1.1rem;
max-width: 560px;
margin: 1.5rem 0 0;
}
.calc-form .input-group {
display: flex;
flex-direction: column;
gap: .35rem;
}
.calc-form label {
font-weight: 600;
color: var(--calc-texto);
font-size: .95rem;
}
/* `date` estava fora desta lista, e por isso os dez campos de data do /mx
saíam com o desenho cru do navegador — borda fina, altura menor, fonte
diferente — ao lado de campos de texto que obedeciam ao tema. Numa mesma
coluna de formulário a diferença salta: foi o que se viu no finiquito, que
tem os dois tipos um embaixo do outro. */
.calc-form input[type="text"],
.calc-form input[type="number"],
.calc-form input[type="date"],
.calc-form select {
padding: .75rem .9rem;
border: 1px solid var(--calc-borda);
border-radius: var(--calc-raio);
background: var(--calc-fundo-campo);
font-size: 1.05rem;
color: var(--calc-texto);
width: 100%;
box-sizing: border-box;
}
/* O SELECT PRECISA DESLIGAR O DESENHO DO SISTEMA, NÃO SÓ GANHAR BORDA.
Os campos já tinham padding, borda e raio — e mesmo assim os selects saíam
com cara de formulário de 2003. O motivo é que `appearance` continuava no
padrão: o Windows desenha a caixa e a seta dele POR CIMA do que o CSS pede,
e o resultado é um campo com metade do estilo do site e metade do estilo do
sistema operacional, lado a lado com inputs de texto que obedecem.
Com `appearance: none` a seta nativa some — e aí ela precisa voltar, senão
o campo deixa de parecer um menu. Ela volta como SVG embutido em `data:`,
não como arquivo: um ícone que é parte do controle não deve depender de uma
segunda requisição para o campo ficar legível.
O `padding-right` maior reserva o espaço da seta; sem ele o texto de uma
opção longa passa por baixo dela. */
.calc-form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 2.6rem;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235a6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .9rem center;
background-size: 1rem;
cursor: pointer;
/* O Firefox pinta o texto da opção com a cor do sistema ao focar; fixar a
cor aqui evita o texto branco no fundo branco. */
color: var(--calc-texto);
}
/* O IE/Edge legado desenhava uma segunda seta ao lado da nossa. */
.calc-form select::-ms-expand {
display: none;
}
/* Campo de data: o ícone de calendário é do navegador e não se substitui, mas
dá para alinhá-lo ao campo — sem isto ele fica colado na borda, com a área
de clique menor do que o dedo alcança no celular. A altura do campo já vem
da regra acima, agora que `date` entrou nela. */
.calc-form input[type="date"] {
cursor: pointer;
/* O iOS encolhe o campo de data para o tamanho do conteúdo e ignora o
width:100%; isto devolve o comportamento dos outros campos. */
-webkit-appearance: none;
appearance: none;
min-height: 3rem;
}
.calc-form input[type="date"]::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: .55;
padding: .2rem;
margin-right: -.2rem;
}
.calc-form input[type="date"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
.calc-form input:focus,
.calc-form select:focus {
outline: 2px solid var(--calc-acento);
outline-offset: 1px;
border-color: var(--calc-acento);
}
/* A lista aberta é desenhada pelo sistema e quase não aceita estilo; o que dá
para garantir é que as opções não herdem um fundo transparente e sumam. */
.calc-form select option {
background: #fff;
color: var(--calc-texto);
}
/* Campo de dinheiro: o símbolo fica colado ao campo, e não dentro dele — o
visitante precisa poder selecionar o número sem levar o símbolo junto. */
.money-input {
display: flex;
align-items: stretch;
border: 1px solid var(--calc-borda);
border-radius: var(--calc-raio);
overflow: hidden;
background: var(--calc-fundo-campo);
}
.money-input > span {
display: flex;
align-items: center;
padding: 0 .8rem;
background: #f4f6f8;
color: var(--calc-texto-suave);
font-weight: 600;
border-right: 1px solid var(--calc-borda);
}
.money-input > input {
border: 0 !important;
border-radius: 0 !important;
flex: 1;
}
/* ===================================
EXEMPLOS CLICÁVEIS
===================================
O container começa VAZIO no HTML — `calc-base.js` (`renderEjemplos`) o
preenche em runtime, a partir do `ejemplos` que o contrato de cada
calculadora declara. Ver o comentário em shared/js/calc-base.js sobre
por que isto é motor, e não HTML escrito à mão por calculadora. */
.calc-ejemplos-label {
font-weight: 600;
color: var(--calc-texto);
margin: 0 0 .6rem;
}
/* Some antes do JS rodar (`renderEjemplos` ainda não preencheu o container) e
some de novo se a calculadora não declarar `ejemplos` — o rótulo nunca fica
sozinho, sem botão nenhum embaixo. `:has()` é suporte amplo o bastante hoje
pra valer a pena; sem ele, o pior caso é o rótulo aparecer sem botões por um
instante, não um erro. */
.calc-ejemplos-label:has(+ .calc-ejemplos:empty) {
display: none;
}
.calc-ejemplos {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin: 0 0 1.5rem;
}
.calc-ejemplos:empty {
display: none;
}
.calc-ejemplo-btn {
padding: .5rem 1rem;
border: 1px solid var(--calc-borda);
border-radius: 999px;
background: #f4f6f8;
color: var(--calc-texto);
font-size: .9rem;
font-weight: 600;
cursor: pointer;
}
.calc-ejemplo-btn:hover {
background: var(--calc-destaque-fundo);
border-color: var(--calc-acento);
}
/* ===================================
BOTÃO
=================================== */
/* `.calc-btn` e o nome canonico, e e o que as calculadoras novas usam.
Os seletores por sufixo continuam porque as 151 do /br chamam os botoes de
`