/* calculadoras.css, acrescentar ao fim de estilo.css
   Cobre so o que a folha existente nao tem: campos, grade de campos, painel de
   resultado, grafico e a tabela dinamica da calculadora 9. Prefixo calc-. */

/* formulario e grade de campos */
.calc-form{font-family:var(--sans);margin:0 0 8px}
.calc-grade{display:grid;grid-template-columns:repeat(2,1fr);gap:18px var(--gut);margin:0 0 6px}
.calc-grade.calc-g3{grid-template-columns:repeat(3,1fr)}
.calc-campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.calc-campo.calc-larga{grid-column:1 / -1}
.calc-campo label,.calc-campo legend{font-size:13.5px;color:var(--tinta2);font-weight:600;line-height:1.35;padding:0}
.calc-campo fieldset{border:0;padding:0;margin:0;min-width:0}
.calc-campo fieldset legend{margin-bottom:8px}
.calc-inativo label,.calc-inativo .calc-entrada{color:var(--sub);opacity:.6}

/* campo com prefixo (R$) ou sufixo (%) */
.calc-entrada{display:flex;align-items:stretch;border:1px solid var(--linha);background:var(--fundo);min-width:0}
.calc-entrada:focus-within{border-color:var(--acao);box-shadow:0 0 0 2px var(--linha2)}
.calc-entrada input{flex:1 1 auto;min-width:0;border:0;background:transparent;font-family:var(--sans);
  font-size:16px;color:var(--tinta);padding:10px 12px;line-height:1.3;outline:none;
  font-variant-numeric:tabular-nums}
.calc-entrada input:disabled{color:var(--sub)}
.calc-entrada input[data-tipo="dinheiro"],.calc-entrada input[data-tipo="pct"],.calc-entrada input[data-tipo="inteiro"]{text-align:right}
.calc-prefixo,.calc-sufixo{display:flex;align-items:center;padding:0 12px;font-size:14px;color:var(--sub);
  background:var(--papel);white-space:nowrap;flex-shrink:0}
.calc-prefixo{border-right:1px solid var(--linha)}
.calc-sufixo{border-left:1px solid var(--linha)}
.calc-entrada select{flex:1 1 auto;min-width:0;border:0;background:transparent;font-family:var(--sans);
  font-size:16px;color:var(--tinta);padding:10px 12px;line-height:1.3;outline:none;cursor:pointer}

/* radios */
.calc-opcoes{display:flex;gap:10px 22px;flex-wrap:wrap}
.calc-opcoes label{display:flex;align-items:center;gap:8px;font-weight:400;font-size:15px;color:var(--tinta);cursor:pointer}
.calc-opcoes input{width:18px;height:18px;margin:0;accent-color:var(--marca)}

/* alternancia sim/nao */
.calc-chave{display:flex;align-items:center;gap:12px;padding:8px 0}
.calc-chave label{font-weight:600;font-size:13.5px;color:var(--tinta2);cursor:pointer}
.calc-chave input{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:13px;background:var(--linha);
  position:relative;cursor:pointer;margin:0;border:0;flex-shrink:0;transition:background .15s}
.calc-chave input:checked{background:var(--marca)}
.calc-chave input:focus-visible{outline:2px solid var(--acao);outline-offset:2px}
.calc-chave input:before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--fundo);transition:left .15s}
.calc-chave input:checked:before{left:23px}
.calc-estado{font-size:14px;color:var(--sub);min-width:2.5em}

/* painel de resultado */
.calc-resultado{margin-top:26px;border-top:1px solid var(--linha2);padding-top:22px}
.calc-neutro{font-family:var(--sans);font-size:15.5px;color:var(--sub);background:var(--papel);
  padding:16px 18px;margin:0 0 18px;line-height:1.55}
.calc-veredito{font-family:var(--sans);font-size:19px;line-height:1.5;color:var(--tinta);margin:0 0 20px}
.calc-veredito strong{color:var(--marca);font-weight:700}
.calc-resultado .conta{margin-top:0}
.calc-resultado figure{margin:28px 0 12px}
.calc-grafico svg{width:100%;height:auto;display:block;border:1px solid var(--linha);background:var(--fundo)}
.calc-grafico text{font-family:var(--sans)}

/* grafico: cores so por classe, todas das variaveis do :root */
.calc-t{fill:var(--tinta2);paint-order:stroke;stroke:var(--fundo);stroke-width:3px;stroke-linejoin:round}
.calc-t-sub{fill:var(--sub)}
.calc-t-claro{fill:var(--fundo);stroke:none}
.calc-malha{stroke:var(--linha2);stroke-width:1}
.calc-eixo{stroke:var(--tinta2);stroke-width:1}
.calc-guia{stroke:var(--sub);stroke-width:1}
.calc-divisor{stroke:var(--fundo);stroke-width:1.5}
.calc-f-fundo{fill:var(--fundo)}
.calc-f-marca{fill:var(--marca)}
.calc-f-marca-esc{fill:var(--marca-esc)}
.calc-f-acao{fill:var(--acao)}
.calc-f-sub{fill:var(--sub)}
.calc-f-amarelo{fill:var(--amarelo)}
.calc-f-verde{fill:var(--verde)}
.calc-f-vermelho{fill:var(--vermelho)}
.calc-s-marca{stroke:var(--marca);stroke-width:2.5;fill:none}
.calc-s-vermelho{stroke:var(--vermelho);stroke-width:2.5;fill:none}
.calc-s-verde{stroke:var(--verde);stroke-width:2.5;fill:none}
.calc-s-tracejada{stroke:var(--tinta2);stroke-width:1.5;stroke-dasharray:6 5;fill:none}
.calc-p-marca{fill:var(--fundo);stroke:var(--marca);stroke-width:2.5}
.calc-p-vermelho{fill:var(--fundo);stroke:var(--vermelho);stroke-width:2.5}
.calc-p-verde{fill:var(--fundo);stroke:var(--verde);stroke-width:2.5}

/* tabela dinamica da calculadora 9 */
.calc-tw{position:relative;margin:0 0 4px;min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.calc-tabela{width:100%;max-width:100%;box-sizing:border-box;border-collapse:collapse;font-family:var(--sans);font-size:14.5px;min-width:0}
.calc-tabela th,.calc-tabela td{border:1px solid var(--linha);padding:6px 8px;vertical-align:middle}
.calc-tabela thead th{background:var(--papel);font-weight:600;color:var(--tinta2);text-align:left;white-space:nowrap}
.calc-tabela tbody th{width:2.5em;text-align:center;color:var(--sub);font-weight:600;background:var(--papel)}
.calc-tabela td .calc-entrada{border:0}
.calc-tabela td .calc-entrada input{padding:8px 10px;font-size:15px}
.calc-tabela .calc-col-saldo{width:26%}
.calc-tabela .calc-col-taxa{width:18%}
.calc-tabela .calc-col-acao{width:1%;white-space:nowrap}
.calc-rotulo-cel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.calc-botoes{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 0;font-family:var(--sans)}
.calc-botao,.calc-remover{font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;border:1px solid var(--linha);
  background:var(--fundo);color:var(--marca);padding:9px 16px;line-height:1.2}
.calc-botao:hover,.calc-remover:hover{border-color:var(--acao);background:var(--papel)}
.calc-botao:focus-visible,.calc-remover:focus-visible{outline:2px solid var(--acao);outline-offset:2px}
.calc-botao:disabled,.calc-remover:disabled{color:var(--sub);cursor:default;border-color:var(--linha2);background:var(--fundo)}
.calc-remover{padding:7px 12px;color:var(--vermelho)}

/* telas estreitas: campos em uma coluna, tabela empilhada */
@media(max-width:760px){
  .calc-grade,.calc-grade.calc-g3{grid-template-columns:1fr;gap:16px}
  .calc-veredito{font-size:17.5px}
  .calc-tabela thead{display:none}
  .calc-tabela,.calc-tabela caption,.calc-tabela tbody,.calc-tabela tr,.calc-tabela td,.calc-tabela tbody th{display:block;width:auto}
  .calc-tabela tr{border:1px solid var(--linha);margin:0 0 14px;padding:10px 12px 12px;background:var(--fundo)}
  .calc-tabela td,.calc-tabela tbody th{border:0;padding:6px 0}
  .calc-tabela tbody th{text-align:left;color:var(--tinta2)}
  .calc-tabela tbody th:before{content:"linha "}
  .calc-tabela .calc-rotulo-cel{position:static;width:auto;height:auto;overflow:visible;clip:auto;
    display:block;font-size:13.5px;color:var(--tinta2);font-weight:600;margin-bottom:6px}
  .calc-tabela td .calc-entrada{border:1px solid var(--linha)}
  .calc-tabela .calc-col-acao{text-align:right}
}

/* impressao: formulario preenchido e resultado inteiro visivel */
@media print{
  .calc-botoes,.calc-remover,.calc-col-acao{display:none}
  .calc-entrada,.calc-tabela td .calc-entrada{border:1px solid var(--linha)}
  .calc-resultado,.calc-grafico,.conta{break-inside:avoid}
  .calc-neutro,.calc-veredito,.calc-grafico,.conta{display:block}
  .calc-neutro[hidden],.calc-veredito[hidden],.conta[hidden],figure[hidden]{display:none}
}