/* NuvemCond — ferramentas (calculadoras e modelos de documentos). Uma folha só para os dois lugares onde elas abrem
   (dono, 28/10/2026): o site, em /ferramentas-gratuitas (layout site, depois do site.css), e o sistema, em /calculadoras
   (layout app, depois do app.css; CalculadorasController::renderizar). As regras usam os nomes de cor do site; no sistema,
   o bloco ".app" do fim traduz para os do app.css e acerta o que lá não existe. */

:root { --juros: #e8a33d; --juros-clara: #fdf1dc; }
:root[data-theme="dark"] { --juros: #f2b45a; --juros-clara: #3a2a12; }
/* vitrine */
.ferr-chegou { display: flex; align-items: center; gap: 18px; padding: 22px 24px; margin-bottom: 56px; border-radius: var(--raio); background: var(--marca-clara);
  border: 1.5px solid color-mix(in srgb, var(--marca) 45%, transparent); box-shadow: 0 16px 40px color-mix(in srgb, var(--marca) 16%, transparent); animation: surgir .3s ease; }
.ferr-chegou div { flex: 1; min-width: 0; }
.ferr-chegou p { color: var(--suave); margin-top: 2px; }
.ferr-chegou .cartao-ic { margin: 0; background: var(--grad); color: #fff; }
.ferr-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ferr-cartao { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px 28px 26px; border-radius: var(--raio); color: var(--tinta);
  border: 1.5px solid transparent; background: linear-gradient(var(--sup), var(--sup)) padding-box, var(--grad) border-box; box-shadow: var(--sombra);
  transition: transform .2s ease, box-shadow .2s ease; }
.ferr-cartao:hover { text-decoration: none; transform: translateY(-4px); box-shadow: 0 22px 50px rgba(12, 26, 46, .14); }
.ferr-cartao.alvo { box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 30%, transparent), var(--sombra); }
.ferr-cartao .cartao-ic { width: 54px; height: 54px; margin: 0; background: var(--grad); color: #fff; }
.ferr-cartao h3 { font-size: 1.22rem; padding-right: 120px; }
.ferr-cartao p { color: var(--suave); font-size: .96rem; }
.ferr-selo { position: absolute; top: 18px; right: 18px; font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--verde-clara); color: var(--verde); }
.ferr-cartao .bt { margin-top: auto; }
.ferr-dica { display: flex; gap: 16px; align-items: flex-start; margin-top: 34px; padding: 22px 24px; border-radius: var(--raio); background: var(--juros-clara); }
.ferr-dica .cartao-ic { margin: 0; background: var(--juros); color: #fff; }
.ferr-dica p { color: var(--suave); margin-top: 4px; }
/* calculadora */
.secao.ferr { padding-top: 56px; }
.ferr-layout { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 28px; align-items: start; }
.calc { display: grid; gap: 18px; padding: 26px; border-radius: var(--raio); background: var(--sup); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.calc-alvo { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.calc-alvo legend { font-weight: 750; font-size: 1rem; margin-bottom: 10px; padding: 0; }
.calc-alvo label { position: relative; cursor: pointer; }
.calc-alvo input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.calc-alvo span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--linha);
  background: var(--fundo); font-size: .88rem; font-weight: 650; line-height: 1.25; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.calc-alvo label:hover span { border-color: color-mix(in srgb, var(--marca) 50%, var(--linha)); }
.calc-alvo input:checked + span { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(31, 111, 209, .3); }
.calc-alvo input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--marca) 70%, transparent); outline-offset: 2px; }
.calc-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.calc-campo > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--tinta); }
.calc-sera { display: none; font-style: normal; font-size: .72rem; font-weight: 700; color: var(--verde); }
.calc-campo.alvo .calc-sera { display: inline; }
.calc-campo.alvo input, .calc-campo.alvo select { background: var(--verde-clara); border-style: dashed; color: var(--suave); }
.calc-taxa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.campo-l .calc-taxa select { width: auto; padding-inline: 8px; }
.calc-mais summary { cursor: pointer; font-weight: 650; font-size: .9rem; color: var(--marca); }
.calc-mais[open] { display: grid; gap: 12px; }
.calc-check { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; cursor: pointer; }
.calc-check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--marca); }
.calc-erro { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #fde8e8; color: #9b1c1c; font-size: .93rem; font-weight: 600; }
:root[data-theme="dark"] .calc-erro { background: #3b1414; color: #ffb4b4; }
.calc-bts { display: flex; gap: 10px; }
.calc-bts .bt.primario { flex: 1; }
/* resultado */
.calc-res { display: grid; gap: 18px; }
.res-vazio { padding: 40px 32px; border-radius: var(--raio); border: 2px dashed var(--linha); text-align: center; }
.res-vazio .cartao-ic { margin: 0 auto 14px; }
.res-vazio h2 { font-size: 1.3rem; }
.res-vazio p { color: var(--suave); margin: 8px auto 18px; max-width: 460px; }
.res-exemplos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.res-exemplos a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--marca-clara); font-weight: 650; font-size: .9rem; }
.res-exemplos a:hover { text-decoration: none; background: color-mix(in srgb, var(--marca) 22%, var(--sup)); }
.res-hero { position: relative; overflow: hidden; display: grid; gap: 4px; padding: 28px 30px; border-radius: var(--raio); background: var(--grad); color: #fff;
  box-shadow: 0 18px 44px rgba(31, 111, 209, .32); animation: surgir .35s ease; }
.res-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%); }
.res-rot { font-size: .86rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.res-valor { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; text-shadow: 0 2px 8px rgba(0, 40, 90, .2); }
.res-sub { font-size: 1.02rem; opacity: .95; }
.res-quadros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.res-quadros div { padding: 14px 16px; border-radius: 14px; background: var(--sup); border: 1px solid var(--linha); }
.res-quadros dt { font-size: .78rem; font-weight: 650; color: var(--suave); }
.res-quadros dd { font-size: 1.12rem; font-weight: 750; letter-spacing: -.01em; margin-top: 2px; }
.res-quadros dd small { display: block; font-size: .78rem; font-weight: 500; color: var(--suave); letter-spacing: 0; }
.res-quadros .juros { background: var(--juros-clara); border-color: color-mix(in srgb, var(--juros) 40%, transparent); }
.res-barra { display: grid; gap: 8px; padding: 16px 18px; border-radius: 14px; background: var(--sup); border: 1px solid var(--linha); }
.res-barra-titulo { font-weight: 700; font-size: .92rem; }
.res-barra-trilho { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--juros); }
.res-barra-trilho i { display: block; height: 100%; }
.res-barra-trilho .amort { background: var(--marca); }
.res-barra-trilho .juros { flex: 1; background: var(--juros); }
.res-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .84rem; color: var(--suave); }
.res-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.res-legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.res-legenda .amort { background: var(--marca); }
.res-legenda .juros { background: var(--juros); }
.res-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.res-acoes .bt { padding: 9px 14px; }
.bt.entender { background: var(--juros); color: #2a1a00; box-shadow: 0 6px 18px color-mix(in srgb, var(--juros) 40%, transparent); }
.bt.entender:hover { box-shadow: 0 10px 24px color-mix(in srgb, var(--juros) 55%, transparent); }
.res-detalhe { display: grid; gap: 22px; margin-top: 34px; }
.res-cartao { padding: 24px 26px; border-radius: var(--raio); background: var(--sup); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.res-cartao-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: 16px; }
.res-cartao h2 { display: inline-flex; align-items: center; gap: 9px; font-size: 1.15rem; letter-spacing: -.01em; }
.res-cartao h2 .ic { color: var(--marca); }
.res-nota { color: var(--suave); font-size: .86rem; }
.res-cartao > .res-nota { margin-top: 12px; }
.res-grafico { position: relative; display: grid; gap: 6px; }
.res-grafico svg { width: 100%; height: 220px; display: block; border-bottom: 1px solid var(--linha); }
.res-grafico rect.amort { fill: var(--marca); }
.res-grafico rect.juros { fill: var(--juros); }
.res-grafico g:hover rect { opacity: .78; }
.res-graf-max { font-size: .78rem; color: var(--suave); }
.res-graf-eixo { display: flex; justify-content: space-between; font-size: .78rem; color: var(--suave); }
.compara-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compara-col { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 14px; border: 1px solid var(--linha); background: var(--fundo); }
.compara-col.atual { border-color: color-mix(in srgb, var(--marca) 50%, var(--linha)); background: var(--marca-clara); }
.compara-col strong small { font-weight: 500; color: var(--suave); }
.compara-col dl { display: grid; gap: 6px; }
.compara-col dl div { display: flex; justify-content: space-between; gap: 12px; font-size: .93rem; }
.compara-col dt { color: var(--suave); }
.compara-col dd { font-weight: 700; }
table.parcelas { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.parcelas th { text-align: right; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); padding: 8px 10px; border-bottom: 2px solid var(--linha); }
.parcelas td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.parcelas th:first-child, .parcelas td:first-child { text-align: left; }
.parcelas td small, .parcelas th small { color: var(--suave); font-weight: 400; margin-left: 4px; }
.parcelas th small { text-transform: none; letter-spacing: 0; }
.parcelas tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--sup-2) 70%, transparent); }
.parcelas td:nth-child(3) { color: color-mix(in srgb, var(--juros) 70%, var(--tinta)); }
.parcelas.totais { margin-top: 6px; }
.parcelas.totais td { font-weight: 800; border-top: 2px solid var(--marca); border-bottom: 0; background: none !important; }
details.ano { border: 1px solid var(--linha); border-radius: 12px; margin-bottom: 8px; }
details.ano summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 11px 14px; cursor: pointer; font-size: .93rem; }
details.ano summary span { color: var(--suave); font-size: .86rem; }
details.ano summary .ano-tot { margin-left: auto; }
details.ano[open] summary { border-bottom: 1px solid var(--linha); }
details.ano table { margin: 4px 0; }
.ferr-exemplos { margin-top: 80px; }
.cartao.exemplo { display: flex; flex-direction: column; color: var(--tinta); }
.cartao.exemplo:hover { text-decoration: none; }
.cartao.exemplo p { flex: 1; }
.exemplo-ir { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; font-size: .9rem; color: var(--marca); }
/* entenda o cálculo */
.secao.entenda { padding-top: 56px; }
.passo { position: relative; padding: 26px 28px 26px 84px; margin-bottom: 18px; border-radius: var(--raio); background: var(--sup); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.passo.destaque { border: 1.5px solid transparent; background: linear-gradient(var(--sup), var(--sup)) padding-box, var(--grad) border-box; }
.passo-n { position: absolute; left: 24px; top: 24px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--grad); color: #fff; font-weight: 800; }
.passo h2 { font-size: 1.2rem; letter-spacing: -.01em; margin-bottom: 8px; }
.passo p { color: var(--suave); margin-top: 10px; }
.passo p b, .passo li b { color: var(--tinta); }
.formula { margin-top: 12px; padding: 14px 18px; border-radius: 12px; background: var(--sup-2); border-left: 4px solid var(--marca); font-size: 1.02rem; line-height: 1.9; overflow-wrap: anywhere; }
.formula b { color: var(--marca-forte); }
.formula var, .formula-legenda var, .passo p var { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 600; }
.fracao { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 4px; line-height: 1.4; }
.fracao > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 4px; }
.formula-legenda { font-size: .9rem; }
.conta-linhas { display: grid; gap: 10px; margin-top: 12px; }
.conta-linhas li { padding: 12px 16px; border-radius: 12px; background: var(--sup-2); font-size: .94rem; line-height: 1.75; font-variant-numeric: tabular-nums; }
.glossario { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 10px 18px; margin-top: 8px; }
.glossario dt { font-weight: 700; }
.glossario dd { color: var(--suave); }
.entenda .lista-ok li span { color: var(--suave); }
.entenda-fim { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
@media (max-width: 1100px) {
  .ferr-layout { grid-template-columns: minmax(0, 1fr); }
  .calc { max-width: 640px; }
  .res-quadros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ferr-grade, .compara-grade { grid-template-columns: minmax(0, 1fr); }
  .ferr-chegou { flex-direction: column; align-items: flex-start; }
  .ferr-chegou .bt { width: 100%; }
  .ferr-cartao h3 { padding-right: 0; margin-top: 18px; }
  .calc { padding: 20px 18px; }
  .res-hero { padding: 22px; }
  .res-quadros div { padding: 11px 12px; }
  .res-quadros dd { font-size: 1rem; }
  .res-cartao { padding: 18px 14px; }
  .res-grafico svg { height: 160px; }
  table.parcelas { font-size: .78rem; }
  .parcelas th, .parcelas td { padding: 6px 4px; }
  .parcelas td small { display: block; margin: 0; }
  .parcelas th small { display: none; }
  details.ano summary .ano-tot { margin-left: 0; flex-basis: 100%; }
  .passo { padding: 66px 18px 20px; }
  .passo-n { left: 18px; top: 18px; width: 36px; height: 36px; }
  .glossario { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .glossario dd { margin-bottom: 8px; }
}
@media (max-width: 420px) {
  .calc-campos { grid-template-columns: minmax(0, 1fr); }
  .res-acoes .bt { flex: 1 1 auto; }
}
/* as outras ferramentas (dono, 25/10/2026: itens 1, 2, 3, 4, 6, 8 e 10 das sugestões) */
.ferr-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ferr-cartao .ferr-selo { position: static; align-self: flex-start; }
.ferr-cartao h3 { padding-right: 0; }
.ferr-grade + .ferr-grupo { margin-top: 64px; }
.calc-campos .c-2 { grid-column: 1 / -1; }
.calc-unid { display: grid; place-items: center; padding: 0 10px; border-radius: 10px; background: var(--sup-2); font-size: .85rem; font-weight: 650; color: var(--suave); white-space: nowrap; }
.calc textarea { width: 100%; font: inherit; font-variant-numeric: tabular-nums; }
.calc-aviso { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--juros-clara); color: var(--tinta); font-size: .92rem; }
.calc-aviso .ic { color: var(--juros); flex: none; margin-top: 2px; }
.calc-lista-erros { display: grid; gap: 6px; font-size: .9rem; color: #b42318; }
.calc-lista-erros li { display: flex; gap: 6px; align-items: flex-start; }
.res-hero.ok { background: linear-gradient(135deg, #0b8571, #14b89d); }
.res-hero.alerta { background: linear-gradient(135deg, #b93a0d, #e8603d); }
.parcelas td.neg { color: #c2410c; }
.mono { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: .88rem; letter-spacing: .02em; overflow-wrap: anywhere; }
.parcelas td.mono { white-space: normal; }
.dv { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.dv.ok { color: var(--verde); }
.dv.erro { color: #c2410c; }
.boleto-barras { margin-top: 14px; padding: 12px; background: #fff; border-radius: 10px; }
.boleto-barras svg { width: 100%; height: 56px; display: block; }
.compara-indices { display: grid; gap: 6px; }
.compara-indices div { display: flex; justify-content: space-between; gap: 12px; font-size: .93rem; }
.compara-indices .atual { font-weight: 700; }
.compara-indices dt small { font-weight: 500; color: var(--suave); }
.ferr-explica { display: grid; gap: 10px; max-width: 820px; margin: 0 auto 26px; color: var(--suave); }
.ferr-explica b { color: var(--tinta); }
.ferr-explica + .cabecalho { margin-top: 56px; }
.ferr-chegada-acao { justify-content: center; }
.ferr-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ferr-mini a { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--sup); border: 1px solid var(--linha); color: var(--tinta); }
.ferr-mini a:hover { text-decoration: none; border-color: color-mix(in srgb, var(--marca) 45%, var(--linha)); }
.ferr-mini .cartao-ic { width: 40px; height: 40px; margin: 0; flex: none; }
.ferr-mini a > span:last-child { display: grid; min-width: 0; }
.ferr-mini b { font-size: .92rem; line-height: 1.25; }
.ferr-mini small { color: var(--suave); font-size: .8rem; }
/* modelos de documentos */
.modelos-grupo { font-size: 1.15rem; margin: 36px 0 14px; }
.modelos-grupo:first-child { margin-top: 0; }
.ferr-layout.modelos-layout { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.modelos-campos { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.modelos-campos legend { font-weight: 750; margin-bottom: 8px; padding: 0; }
.modelos-bts { flex-wrap: wrap; }
.modelos-bts .bt.primario { flex: 1 1 100%; }
/* validador de assinaturas GOV.BR (dono, 03/11/2026) */
:root { --vg-ok: #0e8a5f; --vg-ok-clara: #def5ea; --vg-at: #a86206; --vg-at-clara: #fdf1dc; --vg-ruim: #c0312b; --vg-ruim-clara: #fde8e8; }
:root[data-theme="dark"] { --vg-ok: #4fd59a; --vg-ok-clara: #103426; --vg-at: #f2b45a; --vg-at-clara: #3a2a12; --vg-ruim: #ff9a94; --vg-ruim-clara: #3b1414; }
.vg .suave { color: var(--suave); }
.vg .mono { font-family: var(--mono); font-size: .86em; }
.vg .bt.pequeno { padding: 6px 12px; font-size: .84rem; gap: 6px; }
.vg .bt.fantasma { background: transparent; border-color: transparent; box-shadow: none; color: var(--marca); }
.vg .bt.fantasma:hover { background: var(--marca-clara); }
.vg-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vg-aviso { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; margin-bottom: 18px; border-radius: 12px; font-size: .93rem; font-weight: 600; }
.vg-aviso.ok { background: var(--vg-ok-clara); color: var(--vg-ok); }
.vg-aviso.erro { background: var(--vg-ruim-clara); color: var(--vg-ruim); }
.vg-codigo { font-size: 1.6rem !important; letter-spacing: .35em; text-align: center; font-family: var(--mono); }
.vg-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.vg-barra p { color: var(--suave); overflow-wrap: anywhere; }
.vg-barra p .ic { vertical-align: -3px; margin-right: 4px; }
.vg-barra b { color: var(--tinta); }
.vg-solta-area { position: relative; display: grid; justify-items: center; gap: 8px; padding: 28px 20px; border-radius: var(--raio); text-align: center; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--marca) 45%, var(--linha)); background: color-mix(in srgb, var(--marca-clara) 60%, var(--sup)); transition: background .15s, border-color .15s; }
.vg-solta-area:hover, .vg-solta-area.sobre { border-color: var(--marca); background: var(--marca-clara); }
.vg-solta-area input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.vg-solta-area .cartao-ic { margin: 0; background: var(--grad); color: #fff; }
.vg-solta-area small { color: var(--suave); max-width: 560px; }
.vg-solta-area .bt { pointer-events: none; margin-top: 4px; }
.vg-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.vg-cont { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--linha); background: var(--sup); color: var(--tinta);
  font: inherit; font-size: .88rem; cursor: pointer; }
.vg-cont b { font-size: 1rem; }
.vg-cont.ativo { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent); }
.vg-cont.s-valida b { color: var(--vg-ok); }
.vg-cont.s-atencao b { color: var(--vg-at); }
.vg-cont.s-ruim b { color: var(--vg-ruim); }
.vg-cont.s-andando b { color: var(--marca); }
.vg-ferr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.vg-busca { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--sup); color: var(--suave); }
.vg-busca input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--tinta); padding: 9px 0; font: inherit; outline: none; }
.vg-ferr select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linha); background: var(--sup); color: var(--tinta); font: inherit; }
.vg-ferr-bts { display: flex; flex-wrap: wrap; gap: 8px; }
.vg-tabela { width: 100%; border-collapse: collapse; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; font-size: .9rem; }
.vg-tabela > thead th { text-align: left; padding: 10px 12px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); background: var(--sup-2); }
.vg-tabela > thead th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; }
.vg-tabela > tbody > tr > td { padding: 11px 12px; vertical-align: top; border-top: 1px solid var(--linha); }
.vg-tabela td small { display: block; color: var(--suave); font-size: .8rem; margin-top: 2px; overflow-wrap: break-word; }
.vg-tabela td b { overflow-wrap: break-word; }
.vg-vazio td { text-align: center; color: var(--suave); padding: 30px 12px; }
.vg-vazio td .ic { vertical-align: -4px; }
.vg-quando { white-space: nowrap; }
.vg-quando small { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.vg-acoes { white-space: nowrap; text-align: right; }
.vg-acoes form { display: inline; }
.vg-sit { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 750; white-space: nowrap; }
.vg-sit.ok { background: var(--vg-ok-clara); color: var(--vg-ok); }
.vg-sit.atencao { background: var(--vg-at-clara); color: var(--vg-at); }
.vg-sit.ruim { background: var(--vg-ruim-clara); color: var(--vg-ruim); }
.vg-sit.neutra { background: var(--sup-2); color: var(--suave); }
.vg-sit.andando { background: var(--marca-clara); color: var(--marca); }
.vg-sit-td { min-width: 190px; }
.vg-sit-td small { max-width: 300px; }
/* linha conferindo: a faixa clara corre pela linha e o círculo gira no selo */
.vg-doc.vg-andando > tr:first-child { background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--marca) 9%, transparent) 50%, transparent 70%) 0 0 / 250% 100%;
  animation: vg-corre 1.6s linear infinite; }
.vg-giro { width: 13px; height: 13px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--marca) 30%, transparent); border-top-color: var(--marca); animation: vg-gira .8s linear infinite; }
.vg-lendo { color: var(--suave); }
.vg-barrinha { display: block; position: relative; height: 6px; margin: 6px 0 6px; border-radius: 999px; background: var(--sup-2); overflow: hidden; }
.vg-barrinha::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; border-radius: inherit; background: var(--grad); animation: vg-vai 1.2s ease-in-out infinite; }
@keyframes vg-corre { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes vg-gira { to { transform: rotate(360deg); } }
@keyframes vg-vai { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) {
  .vg-doc.vg-andando > tr:first-child { animation: none; background: color-mix(in srgb, var(--marca) 5%, transparent); }
  .vg-giro { animation-duration: 2.4s; }
  .vg-barrinha::after { animation-duration: 3s; }
}
.vg-doc.s-ruim > tr:first-child > td:first-child { box-shadow: inset 3px 0 0 var(--vg-ruim); }
.vg-doc.s-atencao > tr:first-child > td:first-child { box-shadow: inset 3px 0 0 var(--vg-at); }
.vg-doc.s-ok > tr:first-child > td:first-child { box-shadow: inset 3px 0 0 var(--vg-ok); }
.vg-det > td { background: var(--sup-2); border-top: 0; }
.vg-det-grade { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; padding: 6px 4px; }
.vg-det h3 { font-size: .86rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); margin-bottom: 8px; }
.vg-itens { display: grid; gap: 7px; padding: 0; margin: 0 0 12px; list-style: none; }
.vg-itens li { display: flex; gap: 8px; align-items: flex-start; }
.vg-itens li .ic { flex: none; margin-top: 2px; }
.vg-itens li.ok .ic { color: var(--vg-ok); }
.vg-itens li.atencao .ic, .vg-itens li.confira .ic { color: var(--vg-at); }
.vg-itens li.ruim .ic { color: var(--vg-ruim); }
.vg-itens li.info .ic { color: var(--suave); }
.vg-dl { display: grid; gap: 6px; margin: 0 0 12px; }
.vg-dl div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; }
.vg-dl dt { color: var(--suave); font-size: .8rem; }
.vg-dl dd { margin: 0; overflow-wrap: break-word; min-width: 0; }
.vg-dl dd small { display: block; color: var(--suave); }
.vg-hash { font-size: .74rem; }
.vg-limpar { margin-top: 12px; text-align: right; }
/* lista sem cadastro; o e-mail é opcional, para abrir em outro aparelho (dono, 03/11/2026) */
.vg-email { position: relative; margin-left: auto; }   /* sozinho na barra, fica à direita (a caixa abre para a esquerda) */
.vg-email > summary { list-style: none; cursor: pointer; }
.vg-email > summary::-webkit-details-marker { display: none; }
.vg-email-caixa { position: absolute; right: 0; z-index: 20; width: min(380px, calc(100vw - 32px)); margin-top: 8px; padding: 16px; border-radius: 14px;
  background: var(--sup); border: 1px solid var(--linha); box-shadow: 0 18px 40px rgba(12, 26, 46, .18); }
.vg-email-caixa form { display: grid; gap: 10px; }
.vg-email-caixa p { color: var(--suave); font-size: .88rem; }
.vg-email-caixa .vg-entrada-mais { margin-top: 10px; }
.vg-entrada-mais { display: flex; flex-wrap: wrap; gap: 6px; }
/* relatório de uma folha por documento: só na impressão (tr.vg-rel), no molde do relatório de conformidade do ITI */
.vr { color: #000; font-size: 9.5pt; line-height: 1.38; }
.vr-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 8px; border-bottom: 2px solid #000; }
.vr-topo h2 { font-size: 14pt; margin: 0; }
.vr-topo p { font-size: 8.5pt; color: #444; margin: 2px 0 0; }
.vr-resumo { margin: 10px 0 4px; padding: 8px 10px; border-radius: 6px; font-weight: 700; background: #f2f2f2; }
.vr-resumo.s-ok { background: #def5ea; color: #0b5e41; }
.vr-resumo.s-atencao { background: #fdf1dc; color: #7a4704; }
.vr-resumo.s-ruim { background: #fde8e8; color: #8f1f1a; }
.vr h3 { margin: 12px 0 5px; padding-bottom: 2px; font-size: 10.5pt; border-bottom: 1px solid #bbb; }
.vr h4 { margin: 8px 0 4px; font-size: 9pt; }
.vr-dl { display: grid; gap: 2px; margin: 0; }
.vr-dl div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; }
.vr-dl dt { color: #444; }
.vr-dl dd { margin: 0; overflow-wrap: anywhere; }
.vr-dl dd.mono { font-family: var(--mono); font-size: 8.5pt; }
.vr-ok { color: #0b5e41; font-weight: 600; }
.vr-at { color: #7a4704; font-weight: 600; }
.vr-ruim { color: #8f1f1a; font-weight: 600; }
.vr-certs { width: 100%; border-collapse: collapse; font-size: 8pt; }
.vr-certs th { text-align: left; padding: 3px 5px; background: #eee; font-weight: 700; }
.vr-certs td { padding: 3px 5px; border-top: 1px solid #ccc; vertical-align: top; overflow-wrap: anywhere; }
.vr-certs td small { display: block; color: #555; font-family: var(--mono); font-size: 7pt; }
.vr-certs th:nth-child(3), .vr-certs th:nth-child(4), .vr-certs td:nth-child(3), .vr-certs td:nth-child(4) { white-space: nowrap; width: 1%; }
.vr-cadeia { margin: 4px 0 0; font-size: 8.5pt; }
.vr-itens { gap: 2px; margin: 0; }
.vr-rodape { margin-top: 14px; padding-top: 5px; border-top: 1px solid #999; font-size: 7.5pt; color: #444; }
.vg-dica { margin-top: 30px; }
/* aviso de espera no site (no sistema é o do app.css) */
html.aguarde, html.aguarde * { cursor: wait !important; }
.aviso-aguarde { position: fixed; z-index: 2147483646; right: 16px; bottom: 16px; max-width: min(420px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px; background: var(--sup); color: var(--tinta); border: 1px solid var(--linha); box-shadow: 0 18px 40px rgba(12, 26, 46, .22); }
.aviso-aguarde b { display: block; font-size: .95rem; }
.aviso-aguarde small { color: var(--suave); }
.aviso-aguarde-giro { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--marca-clara); border-top-color: var(--marca); animation: vg-gira .8s linear infinite; }
@media (max-width: 900px) {
  .vg-det-grade { grid-template-columns: minmax(0, 1fr); }
  /* a tabela vira cartões: um documento por bloco, sem rolagem para o lado */
  .vg-tabela, .vg-tabela > tbody, .vg-tabela > tbody > tr, .vg-tabela > tbody > tr > td { display: block; width: 100%; }
  .vg-tabela > thead { display: none; }
  .vg-tabela tbody.vg-doc { border-top: 1px solid var(--linha); }
  .vg-tabela tbody.vg-doc[hidden], .vg-tabela tbody.vg-vazio[hidden], .vg-tabela tr[hidden] { display: none; }
  .vg-tabela > tbody > tr > td { border-top: 0; padding: 6px 14px; }
  .vg-tabela > tbody > tr:first-child > td:first-child { padding-top: 14px; }
  .vg-quando { display: flex !important; gap: 10px; align-items: baseline; }
  .vg-acoes { text-align: left; padding-bottom: 14px !important; }
  .vg-tabela td[data-r]:not(.vg-quando):not(.vg-sit-td)::before { content: attr(data-r); display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
  .vg-dl div { grid-template-columns: 110px minmax(0, 1fr); }
}
/* Imprimir / Salvar PDF (dono, 03/11/2026): um relatório por folha, no molde do relatório de conformidade do ITI.
   "Imprimir todos" leva os que estão na lista (com o filtro e a busca aplicados; os que ainda conferem ficam de fora);
   Imprimir e Salvar em PDF da linha levam só o dela (html.vg-um + tbody.vg-este, postos pelo ferramentas.js). */
@media print {
  body:has(.vg-tabela) .capa, body:has(.vg-tabela) .ferr-cab, body:has(.vg-tabela) .trilha { display: none !important; }
  .vg-solta, .vg-ferr, .vg-resumo, .vg-barra, .vg-limpar, .vg-dica, .vg-aviso, .vg-tabela > thead, .vg-tabela .vg-vazio, .vg-tabela tbody.vg-andando,
  .vg-tabela tbody.vg-doc[hidden], html.vg-um .vg-tabela tbody.vg-doc:not(.vg-este) { display: none !important; }
  .vg-tabela, .vg-tabela > tbody, .vg-tabela > tbody > tr, .vg-tabela > tbody > tr > td { display: block; width: auto; border: 0; background: none; padding: 0; box-shadow: none !important; }
  .vg-tabela { border: 0; border-radius: 0; overflow: visible; }
  .vg-tabela .vg-doc > tr:not(.vg-rel) { display: none !important; }
  .vg-tabela tr.vg-rel, .vg-tabela tr.vg-rel[hidden] { display: block !important; }
  .vg-tabela tbody.vg-doc { break-before: page; page: vg-folha; }
  html:has(.vg-tabela), body:has(.vg-tabela), body:has(.vg-tabela) .secao { background: #fff !important; }
  body:has(.vg-tabela) .secao { padding: 0 !important; }
  .vr .vg-sit, .vr-resumo, .vr-certs th, .vr .vg-itens .ic { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@page vg-folha { size: A4; margin: 12mm 14mm; }
@media (max-width: 1100px) {
  .ferr-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ferr-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ferr-layout.modelos-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ferr-grade, .ferr-mini { grid-template-columns: minmax(0, 1fr); }
  .parcelas th, .parcelas td { padding-inline: 5px; }
  .parcelas.atraso th:nth-child(2), .parcelas.atraso td:nth-child(2) { display: none; }   /* o valor de cada taxa já está no alto */
}
/* Assinatura da ferramenta: só no papel, no fim do que se imprime (o QR Code e o Validador levam a dela dentro da folha). */
.ferr-assinatura { display: none; }
@media print {
  .ferr-assinatura { display: block; margin: 18px 0 0; padding-top: 6px; border-top: 1px solid #ccc; font-size: 8pt; color: #555; text-align: center; break-inside: avoid; }
  body:has(.vg-tabela) .ferr-assinatura { display: none; }
  .calc, .res-acoes, .ferr-exemplos, .trilha, .nao-imprimir, .entenda-fim, .capa .abertura-acoes { display: none !important; }
  .ferr-layout { grid-template-columns: minmax(0, 1fr); }
  .res-hero, .res-barra-trilho, .res-grafico svg, .res-legenda i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .res-hero, .res-cartao, .passo { box-shadow: none; }
  .res-cartao, .passo { break-inside: avoid-page; }
  .secao.ferr, .secao.entenda { padding-top: 0; }
  .res-hero.ok, .res-hero.alerta, .boleto-barras { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ------------------------------------------------------------------ no sistema (layout app, /calculadoras; dono, 28/10/2026)
   As cores do site com os nomes do app.css (seguem o tema do sistema) e o pouco das telas do site que o app.css não tem:
   rótulo com campo (.campo-l, no jeito do .campo), ícone em quadrado, grade de cartões. Sem capas nem faixas: as seções
   ficam coladas ao cabeçalho da tela, como as outras telas da equipe. */
.app {
  --sup: var(--superficie); --sup-2: var(--superficie-2); --tinta: var(--texto); --verde: var(--destaque); --verde-clara: var(--destaque-clara);
  --grad: linear-gradient(135deg, #2f7fe6 0%, #1a9fb0 55%, #14a88c 100%);
}
.app .ferr-cab h1 em { font-style: normal; color: var(--marca); }
.app .ferr-cab p { max-width: 980px; }
.app .secao.ferr, .app .secao.entenda { padding: 0; }
.app .secao.entenda > .largura { max-width: 980px; }
.app .ferr-outras { margin-top: 36px; padding: 22px 0 0; border-top: 1px solid var(--linha); background: none; }
.app .ferr-outras .cabecalho, .app .ferr-grupo, .app .ferr-exemplos .cabecalho, .app .ferr .cabecalho { display: block; margin: 0 0 14px; }
.app .ferr-outras h2, .app .ferr-exemplos h2, .app .ferr .cabecalho h2 { font-size: 1.12rem; }
.app .ferr-grupo { margin-top: 26px; }
.app .ferr-grupo:first-child { margin-top: 0; }
.app .ferr-grupo h2 { font-size: 1.15rem; }
.app .ferr-grupo .texto { color: var(--suave); margin-top: 2px; }
.app .ferr-grade { gap: 16px; }
.app .ferr-grade + .ferr-grupo { margin-top: 30px; }
.app .ferr-cartao { padding: 22px 22px 20px; }
.app .ferr-cartao h3 { font-size: 1.05rem; }
.app .ferr-exemplos { margin-top: 40px; }
.app .sobretitulo { font-size: .76rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--marca); margin: 0 0 6px; }
.app .cartao-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--marca-clara); color: var(--marca); margin-bottom: 14px; }
.app .cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.app .cartoes.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app .cartao.exemplo { padding: 20px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.app .cartao.exemplo:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--marca) 45%, var(--linha)); box-shadow: var(--sombra-forte); }
.app .cartao.exemplo h3 { font-size: 1rem; }
.app .cartao.exemplo p { color: var(--suave); font-size: .9rem; margin-top: 6px; }
.app .lista-ok { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.app .lista-ok li { display: flex; gap: 10px; align-items: flex-start; }
.app .lista-ok .ic { color: var(--verde); margin-top: 3px; }
.app .ferr ul, .app .ferr ol, .app .entenda ul { padding: 0; list-style: none; }
.app .doc-folha ul { padding-left: 22px; list-style: disc; }
.app .campo-l { display: grid; gap: 5px; font-size: .82rem; font-weight: 650; color: var(--texto); }
.app .campo-l small { font-weight: 400; color: var(--suave); }
.app .campo-l input, .app .campo-l select, .app .campo-l textarea { width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio);
  background: var(--superficie); color: var(--texto); font-weight: 400; font-size: .95rem; transition: border-color .15s, box-shadow .15s; }
.app .campo-l textarea { resize: vertical; min-height: 96px; }
.app .campo-l input:focus, .app .campo-l select:focus, .app .campo-l textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-clara); }
.app .calc-campo.alvo input, .app .calc-campo.alvo select { background: var(--verde-clara); border-style: dashed; color: var(--suave); }
.app .calc-erro { background: var(--perigo-fundo); color: var(--perigo); }
.app .calc-alvo span { background: var(--superficie-2); }
.app .res-vazio p { margin-left: auto; margin-right: auto; }
.app .res-exemplos { padding: 0; list-style: none; }
.app .doc-folha { min-height: 0; }
@media (max-width: 1100px) { .app .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .app .cartoes, .app .cartoes.tres { grid-template-columns: minmax(0, 1fr); } }
.app .campo-l .calc-taxa select { width: auto; padding-inline: 8px; }
.app .res-quadros dd { font-size: 1.02rem; }

/* Gerador de QR Code (dono, 07/11/2026): cada campo com a largura do que cabe nele (--n = caracteres) e a folha A4 ao lado,
   com as posições vindas do qrcode.js, a mesma conta do PDF. */
.qr-faixa { margin-bottom: 18px; }
.qr-passo { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 1rem; margin: 0 0 10px; }
.qr-passo b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--grad); color: #fff; font-size: .8rem; }
.qr-tipos { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.qr-tipos label { position: relative; cursor: pointer; }
.qr-tipos input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.qr-tipos span { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 11px; border: 1.5px solid var(--linha); background: var(--sup); font-size: .86rem; font-weight: 650; line-height: 1.2; white-space: nowrap; transition: border-color .15s ease; }
.qr-tipos label:hover span { border-color: color-mix(in srgb, var(--marca) 50%, var(--linha)); }
.qr-tipos input:checked + span { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(31, 111, 209, .3); }
.qr-tipos input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--marca) 70%, transparent); outline-offset: 2px; }
.qr-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 34%); gap: 24px; align-items: start; }
.qr-form { grid-template-columns: minmax(0, 1fr); padding: 22px; }
.qr-campos { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; }
.qr-form .campo-l { position: relative; grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: start; max-width: 100%; min-width: 0; font-size: .84rem; font-weight: 600; color: var(--suave); }
.qr-form .campo-l.inteiro { flex: 1 0 100%; }
.qr-form .campo-l input, .qr-form .campo-l select, .qr-form .campo-l textarea { padding: 8px 12px; border-radius: 10px; font-size: .95rem; min-width: 0; }
.qr-form .campo-l input { width: calc(var(--n, 20) * 1ch + 26px); max-width: 100%; }
.qr-form .campo-l select { width: calc(var(--n, 12) * 1ch + 44px); max-width: 100%; }
.qr-form .campo-l textarea { display: block; width: 100%; resize: none; overflow: hidden; min-height: 62px; }
/* Código do país: 3 dígitos, com o + fixo na frente. */
.qr-form .campo-l.ddi::after { content: "+"; position: absolute; left: 10px; bottom: 9px; color: var(--suave); font-size: .95rem; font-weight: 400; pointer-events: none; }
.qr-form .campo-l.ddi input { width: calc(3ch + 32px); padding-left: 21px; padding-right: 7px; }
.qr-form .calc-check { flex: 1 0 100%; width: fit-content; flex-grow: 0; align-items: center; }
.qr-dica { padding: 9px 12px; border-radius: 10px; background: var(--marca-clara); font-size: .86rem; }
.qr-dica[hidden], .qr-form .calc-erro[hidden] { display: none; }
.qr-bts { display: flex; flex-wrap: wrap; gap: 8px; }
.qr-tam { flex: 1 0 100%; display: grid; gap: 4px; font-size: .84rem; color: var(--suave); min-width: 0; }
.qr-tam-rot { font-weight: 600; }
.qr-tam-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qr-tam-linha .bt { min-width: 34px; }
.qr-tam input[type="range"] { flex: 1 1 140px; min-width: 110px; max-width: 280px; accent-color: var(--marca); padding: 0; }
.qr-tam output { min-width: 62px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.qr-tam button[aria-pressed="true"] { border-color: var(--marca); color: var(--marca); }
.qr-res { display: grid; gap: 12px; position: sticky; top: 84px; }
.app .qr-res { top: 74px; }
.qr-res h2 { font-size: 1.05rem; letter-spacing: -.01em; }
/* A prévia nunca passa da altura da tela, para os botões ficarem à vista. */
.qr-res .qr-moldura { width: min(100%, max(240px, calc((100vh - 300px) * .707))); margin-inline: auto; }
.qr-moldura { aspect-ratio: 210 / 297; overflow: hidden; background: #fff; border-radius: 4px; border: 1px solid var(--linha); box-shadow: 0 16px 40px rgba(12, 26, 46, .16); }
.qr-escala { transform-origin: 0 0; width: 210mm; }
.qr-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.qr-acoes .bt { padding: 8px 9px; font-size: .86rem; white-space: nowrap; }
.qr-conteudo { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--sup); border: 1px solid var(--linha); }
.qr-conteudo[hidden] { display: none; }
.qr-conteudo > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .84rem; font-weight: 650; color: var(--suave); }
.qr-conteudo code { font-family: var(--mono); font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; background: none; padding: 0; color: inherit; }
/* A folha: sempre branca, em qualquer tema. */
.qr-folha { position: relative; width: 210mm; height: 296.5mm; overflow: hidden; background: #fff; color: #10203a; font-family: Arial, Helvetica, sans-serif; }
.qr-folha > * { position: absolute; }
.qr-tx { left: 15mm; width: 180mm; white-space: pre; }
.qr-codigo svg { display: block; width: 100%; height: 100%; }
.qr-caixa { border: .3mm solid #9aa8bb; }
.qr-vazio { display: grid; place-items: center; border: .6mm dashed #b7c3d3; color: #7f8da1; font-size: 15pt; text-align: center; }
/* Visualizar: a folha sobre a mesa, do maior tamanho que couber. */
.qr-ver { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #3b4556; color: #fff; }
.qr-ver[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.qr-ver::backdrop { background: #3b4556; }
html:has(.qr-ver[open]) { overflow: hidden; }
.qr-ver-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 10px 16px; background: #1b2433; }
.qr-ver-barra .qr-tam { flex: 1 1 380px; color: #c9d4e3; }
.qr-ver-barra .qr-tam-rot { display: none; }
.qr-ver-barra .qr-tam output { color: #fff; }
.qr-ver-barra .bt.contorno, .qr-ver-barra .qr-tam .bt { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .4); }
.qr-ver-bts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.qr-ver-papel { display: grid; place-items: center; min-height: 0; margin: 14px 16px; overflow: hidden; }
.qr-ver-papel .qr-moldura { width: 180px; border: 0; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
#qrImpressao { display: none; }
@page qr-folha { size: A4 portrait; margin: 0; }
@media print {
  html:has(#qrImpressao), body:has(#qrImpressao) { background: #fff !important; margin: 0; overflow: visible !important; }
  body:has(#qrImpressao) > *:not(#qrImpressao) { display: none !important; }
  #qrImpressao { display: block !important; page: qr-folha; }
  #qrImpressao * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 760px) {
  .qr-layout { grid-template-columns: minmax(0, 1fr); }
  .qr-res { position: static; }
  .qr-res .qr-moldura { width: min(100%, 420px); }
  .qr-form { padding: 16px; }
}