/* FIDELIZOW — FERRAMENTAS (ferramentas.css). Gerado pelo build a partir de css-ferramentas/. */

/* =============================================================================
   00. BASE DAS FERRAMENTAS
   Topo, cartão da ferramenta (entradas | resultado), campos com prefixo,
   resultado escuro, ações, como usar, fórmula e exemplo.
   ========================================================================== */
.ft-topo {
  position: relative; overflow: hidden; padding-bottom: var(--s-10);
  background: radial-gradient(50rem 26rem at 70% -10%, rgba(0,174,229,.16), transparent 62%), linear-gradient(180deg, #f5fbfe, #fff);
}
.ft-topo .crumb { padding-bottom: var(--s-6); }
.ft-topo__in { position: relative; z-index: 2; }
.ft-topo__in > * { max-width: 52rem; }
.ft-topo h1 { margin-top: var(--s-3); font-size: clamp(2rem, 4.6vw, 3.2rem); }
.ft-resposta { margin-top: var(--s-5); font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); color: var(--text); max-width: 46rem; }
.ft-selos { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-5); }
.ft-selos li { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.ft-selos .ico { color: var(--success); }

.ft-app { position: relative; padding-bottom: var(--s-16); }
.ft {
  display: grid; gap: var(--s-6); padding: var(--s-5); border-radius: var(--r-2xl);
  background: #fff; border: 1px solid var(--border); box-shadow: var(--sh-xl);
}
@media (min-width: 48rem) { .ft { padding: var(--s-8); } }
@media (min-width: 64rem) { .ft { grid-template-columns: 1.05fr .95fr; gap: var(--s-10); padding: var(--s-10); } }
.ft--larga { grid-template-columns: 1fr !important; }
.ft__titulo { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-lg); margin-bottom: var(--s-5); }
.ft__entradas .campo + .campo, .ft__entradas .campo + .grupo, .ft__entradas .grupo + .campo, .ft__entradas .grupo + .grupo { margin-top: var(--s-5); }
.grupo { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 40rem) { .grupo--2 { grid-template-columns: 1fr 1fr; } .grupo--3 { grid-template-columns: repeat(3, 1fr); } }
.grupo .campo + .campo { margin-top: 0; }
.ft__saida { position: relative; }
@media (min-width: 64rem) { .ft__saida > .ft-res, .ft__saida > .ft-fixo { position: sticky; top: calc(var(--header-h) + var(--s-6)); } }
.ft__sep { height: 1px; background: var(--border); margin: var(--s-6) 0; border: 0; }
.ft__subtitulo { font-size: var(--fs-base); font-weight: 700; color: var(--text-strong); margin-bottom: var(--s-4); display: flex; align-items: center; gap: var(--s-2); }
.ft__subtitulo .ico { color: var(--brand-deep); }

/* Campo com prefixo (R$) ou sufixo (%) */
.entrada-com { position: relative; display: flex; align-items: stretch; }
.entrada-com .entrada { flex: 1; min-width: 0; }
.entrada-com__pre, .entrada-com__suf {
  display: grid; place-content: center; padding: 0 var(--s-3); min-width: 2.75rem;
  font-weight: 500; font-size: var(--fs-sm); color: var(--text-muted); background: var(--surface);
  border: 1.5px solid var(--border);
}
.entrada-com__pre { border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); }
.entrada-com__suf { border-left: 0; border-radius: 0 var(--r-md) var(--r-md) 0; }
.entrada-com__pre + .entrada { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.entrada-com .entrada:has(+ .entrada-com__suf) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.entrada { font-variant-numeric: tabular-nums; }
select.entrada { appearance: none; -webkit-appearance: none; padding-right: var(--s-10); background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; }
.entrada[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(239,68,68,.12); }
.campo__erro { font-size: var(--fs-xs); font-weight: 500; color: var(--danger-ink); }
.campo__erro:empty { display: none; }
.campo__conta { font-size: var(--fs-xs); color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.seletor--larga { display: grid; width: 100%; }

/* Resultado */
.ft-res {
  padding: var(--s-6); border-radius: var(--r-xl); background: var(--ink); color: var(--on-ink);
  background-image: radial-gradient(26rem 16rem at 100% 0%, rgba(0,174,229,.25), transparent 65%);
}
.ft-res__rot { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-mut); }
.ft-res__grande { display: block; margin-top: var(--s-2); font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; color: var(--brand); font-variant-numeric: tabular-nums; word-break: break-word; }
.ft-res__sub { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--on-ink); }
.ft-res__sub strong { color: #fff; }
.ft-linhas { display: grid; margin-top: var(--s-5); border-top: 1px solid var(--line-ink); }
.ft-linhas > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-ink); }
.ft-linhas dt { font-size: var(--fs-sm); color: var(--on-ink-mut); }
.ft-linhas dd { margin: 0; font-weight: 700; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.ft-linhas dd.is-bom { color: #34d399; } .ft-linhas dd.is-ruim { color: #f87171; } .ft-linhas dd.is-atencao { color: #fbbf24; }
.ft-res__nota { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--on-ink-mut); }
.ft-res__nota strong { color: #fff; }
.ft-res .arrow-link { color: var(--brand); }
.ft-res.is-erro .ft-res__grande { color: #f87171; }
.ft-res--claro { background: var(--surface); background-image: none; color: var(--text); border: 1px solid var(--border); }
.ft-res--claro .ft-res__rot { color: var(--text-muted); }
.ft-res--claro .ft-res__grande { color: var(--text-strong); }

/* Veredito colorido */
.veredito { display: flex; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm); background: rgba(255,255,255,.06); color: var(--on-ink); }
.veredito .ico { flex-shrink: 0; margin-top: .1rem; }
.veredito--bom .ico { color: #34d399; } .veredito--atencao .ico { color: #fbbf24; } .veredito--ruim .ico { color: #f87171; }

/* Barra empilhada: para onde vai cada real */
.pilha { display: flex; height: 1rem; margin-top: var(--s-5); border-radius: var(--r-xs); overflow: hidden; background: rgba(255,255,255,.1); }
.pilha i { display: block; height: 100%; transition: flex-basis .6s var(--ease-out); }
.pilha__leg { display: grid; gap: var(--s-2); margin-top: var(--s-4); grid-template-columns: 1fr 1fr; font-size: var(--fs-xs); }
.pilha__leg li { display: flex; align-items: center; gap: var(--s-2); color: var(--on-ink); }
.pilha__leg b { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; }
.pilha__leg span.cor { width: .7rem; height: .7rem; border-radius: .2rem; flex-shrink: 0; }
.c1 { background: #94a3b8; } .c2 { background: #f59e0b; } .c3 { background: #a78bfa; } .c4 { background: #f472b6; } .c5 { background: #34d399; } .c6 { background: var(--brand); }

/* Ações (copiar, baixar, abrir) */
.ft-acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.ft-acoes .btn { flex: 1 1 auto; }
.saida-texto {
  margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-md);
  background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.2); color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-xs); line-height: 1.6;
  word-break: break-all; white-space: pre-wrap; max-height: 12rem; overflow: auto;
}
.ft-res--claro .saida-texto { background: #fff; border-color: var(--n-300); color: var(--text-strong); }
.ft-aviso { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--text-muted); }
.ft-aviso .ico { color: var(--brand-deep); flex-shrink: 0; margin-top: .1rem; }
.ft-res .ft-aviso { color: var(--on-ink-mut); }
.ft-res .ft-aviso .ico { color: var(--brand); }
.ft-res--claro .ft-aviso { color: var(--text-muted); }
.ft-res--claro .ft-aviso .ico { color: var(--brand-deep); }

/* Área de imagem gerada (QR Code, arte) */
.tela-gerada { display: grid; place-items: center; padding: var(--s-5); border-radius: var(--r-xl); background: repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 1.25rem 1.25rem; border: 1px solid var(--border); }
.tela-gerada canvas, .tela-gerada img { max-width: 100%; height: auto; border-radius: var(--r-sm); box-shadow: var(--sh-lg); background: #fff; }
.tela-gerada--qr canvas { width: min(17rem, 100%); image-rendering: pixelated; }

/* Como usar, fórmula e exemplo */
.ft-como { display: grid; gap: var(--s-12); }
@media (min-width: 64rem) { .ft-como { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }
.ft-passos { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.ft-passos li { display: flex; align-items: flex-start; gap: var(--s-4); font-size: var(--fs-base); color: var(--text); }
.ft-passos__n { display: grid; place-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); background: var(--n-900); color: var(--brand); font-weight: 700; }
.formula { display: grid; gap: var(--s-2); margin-top: var(--s-6); }
.formula > div { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: #fff; border: 1px solid var(--border); }
@media (min-width: 40rem) { .formula > div { grid-template-columns: 13rem 1fr; gap: var(--s-4); align-items: baseline; } }
.formula dt { font-weight: 700; font-size: var(--fs-sm); color: var(--text-strong); }
.formula dd { margin: 0; font-size: var(--fs-sm); color: var(--text); font-variant-numeric: tabular-nums; line-height: var(--lh-snug); }
.exemplo { margin-top: var(--s-5); padding: var(--s-5); border-radius: var(--r-lg); background: var(--brand-soft); border: 1px solid rgba(0,174,229,.25); }
.exemplo__rot { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: var(--s-2); }
.exemplo p:last-child { font-size: var(--fs-sm); color: var(--text-strong); }

/* Atalhos de valor (ex.: 5%, 10%, 15%) — retangulares */
.atalhos { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.atalho { padding: var(--s-1) var(--s-3); border-radius: var(--r-xs); border: 1px solid var(--border); background: #fff; font-size: var(--fs-xs); font-weight: 500; color: var(--text); transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
.atalho:hover { border-color: var(--brand); color: var(--brand-deep); }
.atalho[aria-pressed="true"] { background: var(--n-900); border-color: var(--n-900); color: #fff; }

/* Impressão: só a placa gerada */
@media print {
  body.imprimindo > *:not(.area-impressao) { display: none !important; }
  .area-impressao { display: block !important; }
  .area-impressao img { width: 100%; height: auto; }
}
.area-impressao { display: none; }

/* Regras gerais vindas da revisão das calculadoras */
.ft > * { min-width: 0; }
.grupo > .campo { align-content: start; }
.atalhos + .campo { margin-top: var(--s-5); }

/* Gerador de link de WhatsApp */
.lw-qr { display: grid; gap: var(--s-5); align-items: center; margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line-ink); }
@media (min-width: 30rem) { .lw-qr { grid-template-columns: 11rem 1fr; } }
.lw-qr .tela-gerada { padding: var(--s-3); background: #fff; }
.lw-qr .tela-gerada canvas { box-shadow: none; }
.lw-qr .btn--ghost { color: var(--text-strong); }
.is-vazio .saida-texto { color: var(--on-ink-mut); font-family: var(--font); }

/* Gerador de post promocional */
.pp-formatos label { gap: .1rem; line-height: 1.25; }
.pp-formatos small { display: block; font-size: .75rem; font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Miniaturas dos modelos (desenhadas ao vivo) */
.pp-modelos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.pp-modelo {
  display: grid; gap: var(--s-2); justify-items: center; align-content: start; padding: var(--s-2) var(--s-2) var(--s-3);
  border: 2px solid var(--border); border-radius: var(--r-md); background: #fff; font: inherit; font-size: var(--fs-xs); font-weight: 500;
  color: var(--text); cursor: pointer; transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.pp-modelo:hover { border-color: var(--n-400); transform: translateY(-2px); box-shadow: var(--sh-md); }
.pp-modelo[aria-pressed="true"] { border-color: var(--n-900); box-shadow: var(--sh-md); color: var(--text-strong); }
.pp-modelo:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.pp-modelo canvas { display: block; width: 100%; height: auto; max-height: 11rem; object-fit: contain; border-radius: var(--r-xs); background: var(--n-100); }
.pp-modelo span { line-height: 1.25; text-align: center; }
.pp .campo__dica .ico { vertical-align: -.125em; margin-right: var(--s-1); color: var(--brand-deep); }

/* Desconto em % */
.pp-marca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--fs-sm); font-weight: 500; color: var(--text-strong); cursor: pointer; }
.pp-marca input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--n-900); cursor: inherit; }
.pp-marca span { font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pp-marca.is-off { color: var(--text-muted); cursor: default; }
.ft__entradas .pp-marca + .campo { margin-top: var(--s-5); }
.pp-opcional { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); }

/* Envio de foto e logotipo */
.pp-up {
  display: flex; align-items: center; gap: var(--s-3); min-height: 4.25rem; padding: var(--s-3) var(--s-4);
  border: 2px dashed var(--n-300); border-radius: var(--r-md); background: var(--n-50); cursor: pointer;
  transition: border-color var(--t), background-color var(--t);
}
.pp-up:hover, .pp-up.is-cheio { border-color: var(--brand); background: var(--brand-soft); }
.pp-up.is-cheio { border-style: solid; }
.pp-up:has(+ input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.pp-up > .ico { flex-shrink: 0; width: 1.5rem; height: 1.5rem; color: var(--brand-deep); }
.pp-up > span { display: grid; min-width: 0; }
.pp-up b { overflow: hidden; font-size: var(--fs-sm); font-weight: 500; color: var(--text-strong); text-overflow: ellipsis; white-space: nowrap; }
.pp-up small { font-size: var(--fs-xs); color: var(--text-muted); }
.pp-remove { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-1); padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-xs); font-weight: 500; color: var(--danger-ink); cursor: pointer; }
.pp-remove:hover { text-decoration: underline; }

/* Cores */
.pp-paletas { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pp-paleta {
  display: grid; grid-template-columns: 1.4fr 1fr; width: 3.25rem; height: 2.25rem; padding: 0; overflow: hidden;
  border: 2px solid var(--border); border-radius: var(--r-sm); background: #fff; cursor: pointer;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.pp-paleta i:first-child { background: var(--pp-f, var(--n-200)); }
.pp-paleta i:last-child { background: var(--pp-d, var(--n-400)); }
.pp-paleta:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.pp-paleta[aria-pressed="true"] { border-color: var(--n-900); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--n-900); }
.pp-paleta:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.ft__entradas .pp-cores { margin-top: var(--s-4); }
.pp-cor { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2); border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; }
.pp-cor input[type="color"] { width: 2.75rem; height: 2.25rem; padding: 0; border: 0; background: none; cursor: pointer; }
.pp-cor input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.pp-cor input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(13,17,23,.15); border-radius: var(--r-xs); }
.pp-cor input[type="color"]::-moz-color-swatch { border: 1px solid rgba(13,17,23,.15); border-radius: var(--r-xs); }
.pp-cor code { font-size: var(--fs-sm); color: var(--text-strong); }

/* Prévia */
.pp-saida .ft-res__rot { display: flex; justify-content: space-between; gap: var(--s-3); }
.pp-saida .ft-res__rot span { letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-tela { margin-top: var(--s-4); padding: var(--s-4); }
.pp-tela canvas { width: auto; max-width: 100%; max-height: min(58vh, 40rem); }
@media (max-width: 63.99rem) { .pp-tela canvas { max-height: 75vh; } }
.pp-legenda { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--brand); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface-2); font-size: var(--fs-sm); color: var(--text); white-space: pre-line; }
.pp-legenda:empty { display: none; }

/* No celular a prévia vem primeiro: o comerciante vê a arte antes de editar */
@media (max-width: 63.99rem) {
  .pp .ft__saida { order: -1; }
}

/* Quatro formatos: duas colunas no celular, quatro a partir do tablet */
.pp-formatos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
@media (min-width: 30rem) { .pp-formatos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Mensagens prontas para clientes */
.mc-ocasioes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.mc-oc {
  position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: 3.25rem; padding: var(--s-3);
  border: 2px solid var(--border); border-radius: var(--r-md); background: #fff; font-size: var(--fs-sm); font-weight: 500;
  line-height: 1.25; color: var(--text); cursor: pointer; transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.mc-oc input { position: absolute; opacity: 0; pointer-events: none; }
.mc-oc > .ico { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--text-muted); transition: color var(--t); }
.mc-oc:hover { border-color: var(--n-400); transform: translateY(-1px); }
.mc-oc:has(input:checked) { border-color: var(--n-900); box-shadow: var(--sh-md); color: var(--text-strong); }
.mc-oc:has(input:checked) > .ico { color: var(--brand-deep); }
.mc-oc:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (min-width: 40rem) and (max-width: 63.99rem) { .mc-ocasioes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.mc-nota { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid rgba(245,158,11,.35); border-radius: var(--r-md); background: #fffbeb; font-size: var(--fs-xs); color: #78350f; }
.mc-nota .ico { flex-shrink: 0; margin-top: .1rem; color: #b45309; }
.mc-opcional { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); }

/* Prévia da conversa (genérica, sem imitar aplicativo) */
.mc-chat { overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--n-50); }
.mc-chat__topo { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: #fff; border-bottom: 1px solid var(--border); }
.mc-chat__topo b { display: block; font-size: var(--fs-sm); color: var(--text-strong); }
.mc-chat__topo small { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.mc-chat__av { display: grid; place-content: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--r-round); background: var(--n-900); color: #fff; font-weight: 700; }
.mc-chat__corpo { display: flex; justify-content: flex-end; padding: var(--s-6) var(--s-4) var(--s-5); }
.mc-balao { position: relative; width: min(100%, 26rem); padding: var(--s-3) var(--s-4) var(--s-5); border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg); background: var(--brand-soft); border: 1px solid rgba(0,174,229,.25); box-shadow: var(--sh-sm); transition: box-shadow var(--t), border-color var(--t); }
.mc-balao:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0,174,229,.15); }
.mc-balao textarea { display: block; width: 100%; min-height: 5rem; padding: 0; overflow: hidden; border: 0; background: transparent; font: inherit; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-strong); resize: none; }
.mc-balao textarea:focus { outline: none; }
.mc-balao__hora { position: absolute; right: var(--s-3); bottom: var(--s-1); font-size: .6875rem; color: var(--text-muted); }

.mc-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mc-dica { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--text-muted); }
.mc-dica .ico { color: var(--brand-deep); }
.mc-saida .btn--wa[aria-disabled="true"] { opacity: .55; box-shadow: none; }
.mc .grupo > .campo { align-content: start; }
.mc-oc span { min-width: 0; }
/* Celular: sem ícone, para “Agradecimento” caber em duas colunas */
@media (max-width: 29.99rem) {
  .mc-oc { min-height: 2.75rem; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); font-size: .875rem; }
  .mc-oc > .ico { display: none; }
}
@media (max-width: 22rem) { .mc-ocasioes { grid-template-columns: 1fr; } }

/* ---- Calculadora de preço de venda ---------------------------------------
   .ft-ajuda: bloco recolhível com uma conta de apoio (usado também por outras
   calculadoras). */
.ft-ajuda { margin-top: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.ft-ajuda > summary { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none; font-size: var(--fs-sm); font-weight: 500; color: var(--brand-deep); border-radius: var(--r-md); transition: background-color var(--t-fast); }
.ft-ajuda > summary::-webkit-details-marker { display: none; }
.ft-ajuda > summary:hover { background: var(--surface-2); }
.ft-ajuda > summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.ft-ajuda > summary .ico:last-child { margin-left: auto; transition: transform var(--t); }
.ft-ajuda[open] > summary .ico:last-child { transform: rotate(180deg); }
.ft-ajuda__in { padding: var(--s-2) var(--s-4) var(--s-4); }
.ft-ajuda .btn[disabled] { opacity: .5; pointer-events: none; }
/* Campos lado a lado: sem esticar as linhas internas quando o vizinho tem dica mais longa */
[data-preco] .grupo > .campo { align-content: start; }
/* As colunas da .ft não podem crescer além do cartão no celular */
.ft[data-preco] > * { min-width: 0; }
@media (max-width: 30rem) { [data-preco] .pilha__leg { grid-template-columns: 1fr; } }

/* ---- Calculadora de ponto de equilíbrio ---------------------------------- */
.pe-graf { margin-top: var(--s-6); }
.pe-graf svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.pe-graf .traco { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pe-graf.is-vis .traco { animation: pe-traco 1.1s var(--ease-out) forwards; }
.pe-graf.is-vis .traco + .traco { animation-delay: .15s; }
@keyframes pe-traco { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .pe-graf .traco, .pe-graf.is-vis .traco { stroke-dashoffset: 0; animation: none; } }
.pe-leg { margin-top: var(--s-3); }
.pe-cor-lucro { background: rgba(52,211,153,.55); }
.pe-cor-prej { background: rgba(248,113,113,.6); }
/* Campos lado a lado: sem esticar as linhas internas quando o vizinho tem dica mais longa */
[data-pe] .grupo > .campo { align-content: start; }
/* As colunas da .ft não podem crescer além do cartão no celular */
.ft[data-pe] > * { min-width: 0; }

/* ---- Calculadora de taxa da maquininha ----------------------------------- */
.maq-aviso { margin-top: 0; }
.maq-linhas { margin-top: var(--s-3); }
.maq-linhas > div { position: relative; transition: background-color var(--t-fast); }
.maq-linhas dt span { color: var(--on-ink-mut); font-variant-numeric: tabular-nums; }
.maq-linhas > div.is-destaque { margin-inline: calc(var(--s-3) * -1); padding-inline: var(--s-3); border-radius: var(--r-xs); background: rgba(0,174,229,.14); }
.maq-linhas > div.is-destaque dt { color: #fff; font-weight: 500; }
.maq-linhas > div.is-destaque dd { color: var(--brand); }
/* Campos lado a lado: sem esticar as linhas internas quando o vizinho tem dica mais longa */
[data-maq] .grupo > .campo { align-content: start; }
/* As colunas da .ft não podem crescer além do cartão no celular */
.ft[data-maq] > * { min-width: 0; }

/* ---- Calculadora do valor do cliente (LTV) ------------------------------- */
.barras { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.barras li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "rot valor" "trilho trilho"; align-items: baseline; gap: var(--s-2) var(--s-3); font-size: var(--fs-sm); }
.barras__rot { grid-area: rot; color: var(--on-ink); }
.barras b { grid-area: valor; color: #fff; font-variant-numeric: tabular-nums; }
.barras__trilho { grid-area: trilho; display: block; height: .625rem; border-radius: var(--r-xs); background: rgba(255,255,255,.08); overflow: hidden; }
.barras__trilho i { display: block; height: 100%; width: 0; border-radius: var(--r-xs); background: var(--brand); transition: width .6s var(--ease-out); }
.barras li.is-base .barras__trilho i { background: #94a3b8; }
@media (prefers-reduced-motion: reduce) { .barras__trilho i { transition: none; } }
/* Campos lado a lado: sem esticar as linhas internas quando o vizinho tem dica mais longa */
[data-ltv] .grupo > .campo { align-content: start; }
[data-ltv] .atalhos + .campo { margin-top: var(--s-5); }
/* As colunas da .ft não podem crescer além do cartão no celular */
.ft[data-ltv] > * { min-width: 0; }

/* ---- Simulador de programa de fidelidade --------------------------------- */
.sf-cartela { margin-top: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); max-width: 26rem; }
.sf-cartela .selo.sf-mais { border-style: solid; color: var(--on-ink); }
/* Campos lado a lado: sem esticar as linhas internas quando o vizinho tem dica mais longa */
[data-simfid] .grupo > .campo { align-content: start; }
/* As colunas da .ft não podem crescer além do cartão no celular */
.ft[data-simfid] > * { min-width: 0; }
[data-simfid] .atalhos + .campo { margin-top: var(--s-5); }

/* Gerador de QR Code Pix
   As classes .qr-lado, .ft-res__alerta, .placa-bloco e .placa-previa também
   servem ao Gerador de QR Code (41) e à Placa de avaliação (42). */

/* QR ao lado do texto, dentro do resultado escuro */
.qr-lado { display: grid; gap: var(--s-5); align-items: center; margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line-ink); }
@media (min-width: 30rem) { .qr-lado { grid-template-columns: 11rem 1fr; } }
.qr-lado .tela-gerada { padding: var(--s-3); background: #fff; }
.qr-lado .tela-gerada canvas { box-shadow: none; }

/* Alerta dentro do resultado escuro (âmbar sobre fundo escuro) */
.ft-res__alerta { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.35); font-size: var(--fs-sm); font-weight: 500; color: #fde68a; }
.ft-res__alerta .ico { flex-shrink: 0; margin-top: .15rem; color: #fbbf24; }

/* Linha larga com a placa para imprimir, abaixo das duas colunas */
.placa-bloco { grid-column: 1 / -1; display: grid; gap: var(--s-6); padding-top: var(--s-8); border-top: 1px solid var(--border); }
@media (min-width: 48rem) { .placa-bloco { grid-template-columns: minmax(12rem, 17rem) 1fr; gap: var(--s-10); align-items: center; } }
.placa-bloco[hidden] { display: none; }
.placa-previa { padding: var(--s-4); }
.placa-previa canvas { width: min(17rem, 100%); }
.placa-info p { color: var(--text); }
.placa-info p + p { margin-top: var(--s-3); }
.placa-info .ft-acoes { max-width: 30rem; }
.placa-alerta { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: rgba(245,158,11,.1); border-left: 3px solid var(--warning); font-size: var(--fs-sm); font-weight: 500; color: var(--warning-ink); }
.placa-alerta .ico { flex-shrink: 0; margin-top: .15rem; }

/* Resultado ainda vazio */
.ft-res.is-vazio .saida-texto { color: var(--on-ink-mut); font-family: var(--font); }

/* Gerador de QR Code: link, Wi-Fi e texto (usa .placa-bloco e .placa-alerta de 40) */
.ft__entradas .campo + .qr-wifi { margin-top: var(--s-5); }
.qr-aparencia .campo { align-content: start; }
.qr-wifi { display: grid; gap: var(--s-5); }
.qr-wifi .campo + .campo { margin-top: 0; }
.qr-wifi .form__check label { color: var(--text); }

/* Botão de mostrar a senha, no lugar do sufixo */
.qr-ver { cursor: pointer; color: var(--text-muted); transition: color var(--t-fast), background-color var(--t-fast); }
.qr-ver:hover { color: var(--text-strong); background: var(--surface-2); }
.qr-ver[aria-pressed="true"] { color: var(--brand-deep); }
.qr-ver:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }

/* Cor: amostra quadrada + atalhos */
.qr-cor { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.qr-cor .atalhos { margin-top: 0; }
.qr-cor__amostra { width: 3rem; height: 3rem; padding: .2rem; border-radius: var(--r-sm); border: 1.5px solid var(--border); background: #fff; cursor: pointer; }
.qr-cor__amostra[aria-invalid="true"] { border-color: var(--danger); }

/* QR grande no resultado */
.qr-saida { padding: var(--s-4); background: #fff; }
.qr-saida canvas { box-shadow: none; }

/* [hidden] precisa vencer o display: grid de .campo e .qr-wifi */
[data-qr-painel][hidden], [data-qr-campo-senha][hidden] { display: none; }

/* Placa de avaliação no Google (usa .placa-previa e .placa-alerta de 40) */

/* Chamadas: lista vertical de opções, retangulares */
.av-opcoes { display: grid; gap: var(--s-2); }
.av-opcoes label { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1.5px solid var(--border); background: #fff; font-size: var(--fs-sm); color: var(--text); cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.av-opcoes label:hover { border-color: var(--n-400); }
.av-opcoes input { flex-shrink: 0; margin: 0; accent-color: var(--brand-deep); }
.av-opcoes label:has(input:checked) { border-color: var(--brand-deep); background: var(--brand-soft); color: var(--text-strong); font-weight: 500; }
.av-opcoes label:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 1px; }

/* Cores: amostras quadradas com nome */
.av-cores { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
@media (min-width: 40rem) { .av-cores { grid-template-columns: repeat(6, 1fr); } }
.av-cor { position: relative; display: grid; justify-items: center; gap: var(--s-1); padding: var(--s-2); border-radius: var(--r-md); border: 1.5px solid var(--border); background: #fff; cursor: pointer; font-size: var(--fs-xs); color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.av-cor input { position: absolute; opacity: 0; pointer-events: none; }
.av-cor__amostra { width: 2rem; height: 2rem; border-radius: var(--r-xs); background: var(--av-cor); }
.av-cor:has(input:checked) { border-color: var(--text-strong); box-shadow: var(--sh-sm); font-weight: 700; color: var(--text-strong); }
.av-cor:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 1px; }
.av-cor--azul { --av-cor: #056f93; } .av-cor--verde { --av-cor: #0f766e; } .av-cor--vinho { --av-cor: #9f1239; }
.av-cor--grafite { --av-cor: #1f2937; } .av-cor--laranja { --av-cor: #c2410c; } .av-cor--roxo { --av-cor: #6d28d9; }

/* Saída: prévia da placa em destaque */
.av-saida .placa-previa canvas { width: min(19rem, 100%); }
.av-saida > .ft-acoes { justify-content: center; }
.av-saida.is-vazio .saida-texto { color: var(--text-muted); font-family: var(--font); }
.av-saida [aria-disabled="true"] { opacity: .55; }
.campo__dica.is-alerta { color: var(--warning-ink); font-weight: 500; }
.ft__entradas > .placa-alerta { margin-top: var(--s-6); }

/* Mensagem é texto corrido, não código: sem quebra no meio das palavras */
.av-saida .saida-texto { font-family: var(--font); font-size: var(--fs-sm); word-break: normal; overflow-wrap: anywhere; }
/* 00-base.css pinta .ft-aviso de claro dentro de qualquer .ft-res; no fundo claro, volta ao cinza */
.ft-res--claro .ft-aviso { color: var(--text-muted); }
.ft-res--claro .ft-aviso .ico { color: var(--brand-deep); }