/* planejador de campanhas · funil de tráfego */
#tab-planejador { --pf-topo: #3987e5; --pf-meio: #d55181; --pf-fundo: #E8620A; --pf-rmk: #c98500; }
.pf-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.pf-topo-e, .pf-topo-d { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-topo-e select { min-width: 240px; max-width: 360px; }
#plSalvar.sujo { box-shadow: 0 0 0 3px var(--acb), 0 8px 24px rgba(255, 106, 0, .35); }
#plSalvar.sujo::after { content: ''; width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: #fff; }
.pf-grid { display: grid; grid-template-columns: 370px minmax(0, 1fr); gap: 18px; align-items: start; }
.pf-painel { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100dvh - 96px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.pf-bloco { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.pf-h { margin: 2px 0 -2px; color: var(--mt2); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.pf-h4 { display: flex; align-items: center; gap: 6px; margin: 4px 0 -4px; color: var(--mt); font-size: 12px; font-weight: 600; }
.pf-h4::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--pf-fundo)); }
.pf-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--mt); font-size: 12px; }
.pf-campo i.ti-info-circle { color: var(--mt2); font-size: 13px; cursor: help; }
.pf-campo input:not([type=range]), .pf-campo select { width: 100%; }
.pf-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pf-num { position: relative; display: block; }
.pf-num input { width: 100%; padding-right: 30px; font-variant-numeric: tabular-nums; }
.pf-num i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--mt2); font-size: 11px; font-style: normal; pointer-events: none; }
.pf-modelos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pf-mod { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; border: 1px solid var(--bd); border-radius: 11px; background: var(--sf); color: var(--mt); text-align: left; transition: border-color var(--ease), background var(--ease); }
.pf-mod i { color: var(--ac2); font-size: 18px; }
.pf-mod span { color: var(--tx); font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.pf-mod small { font-size: 10.5px; line-height: 1.25; }
.pf-mod.on { border-color: var(--acbd); background: var(--acb); }
.pf-verba { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--bd); border-radius: 12px; background: var(--sf); }
.pf-verba > span { color: var(--mt); font-size: 16px; }
.pf-verba input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--tx); font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; box-shadow: none !important; }
.pf-verba select { width: auto; }
.pf-range { width: 100%; accent-color: var(--ac); }
.pf-split { display: flex; gap: 2px; height: 10px; overflow: hidden; border-radius: 6px; }
.pf-split i { transition: flex .25s ease; }
.pf-sl { display: grid; grid-template-columns: 52px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: 12px; color: var(--mt); }
.pf-sl input { width: 100%; accent-color: var(--c); }
.pf-sl b { color: var(--tx); font-variant-numeric: tabular-nums; text-align: right; }
.pf-etapas { display: flex; flex-direction: column; gap: 8px; }
.pf-et { border: 1px solid var(--bd); border-radius: 14px; background: var(--surface); transition: box-shadow .3s; }
.pf-et[open] { border-color: color-mix(in srgb, var(--c) 45%, var(--bd)); }
.pf-et.pisca { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent); }
.pf-et summary { display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; list-style: none; font-size: 13px; }
.pf-et summary::-webkit-details-marker { display: none; }
.pf-et summary b { flex: 1; }
.pf-et summary > i { color: var(--mt2); transition: transform .2s; }
.pf-et[open] summary > i { transform: rotate(180deg); }
.pf-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.pf-et-pct { color: var(--mt); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pf-et-c { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.pf-nota { display: flex; gap: 6px; padding: 0 4px 10px; line-height: 1.5; }

/* resultado */
.pf-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pf-show-head { display: none; }
.pf-cen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--bd); border-radius: 14px; background: var(--sf); }
.pf-cen button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 6px; border-radius: 10px; color: var(--mt); font-size: 12px; transition: background var(--ease); }
.pf-cen button b { color: var(--tx); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pf-cen button.on { background: var(--acb); box-shadow: inset 0 0 0 1px var(--acbd); color: var(--ac2); }
.pf-funil-card { padding: 22px 22px 18px; overflow: hidden; background: radial-gradient(120% 70% at 20% 0%, rgba(57, 135, 229, .07), transparent 60%), radial-gradient(90% 60% at 80% 100%, rgba(232, 98, 10, .08), transparent 60%), var(--sf); }
.pf-funil { display: flex; flex-direction: column; gap: 10px; }
.pf-fx { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 16px; cursor: pointer; }
.pf-band { position: relative; justify-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: var(--w); min-height: 88px; padding: 10px 16% ; color: #fff; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 92%, #fff 8%), color-mix(in srgb, var(--c) 78%, #000 22%));
  clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%); transform-origin: center; filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--c) 30%, transparent)); transition: width .35s cubic-bezier(.22, 1, .36, 1); }
.pf-band-t { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .92; }
.pf-band b { font-size: 21px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pf-band small { font-size: 11px; opacity: .85; }
.pf-fx:hover .pf-band { filter: drop-shadow(0 10px 28px color-mix(in srgb, var(--c) 55%, transparent)) brightness(1.07); }
.pf-mets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-mets > div, .pf-lane > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border: 1px solid var(--bd); border-left: 3px solid var(--c); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.pf-mets span, .pf-lane span { color: var(--mt); font-size: 11px; }
.pf-mets b, .pf-lane b { font-size: 16px; font-variant-numeric: tabular-nums; }
.pf-quente { display: flex; align-items: center; gap: 12px; justify-self: center; width: min(520px, 92%); margin: -2px auto; padding: 10px 14px; border: 1px dashed color-mix(in srgb, var(--c) 60%, transparent); border-radius: 40px; background: color-mix(in srgb, var(--c) 10%, transparent); }
.pf-quente > i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #1a0f00; font-size: 18px; }
.pf-quente div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.pf-quente b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pf-quente span { font-size: 13px; }
.pf-quente small { flex-basis: 100%; color: var(--mt); font-size: 11px; }
.pf-lanes { grid-template-columns: 1fr; }
.pf-lane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pf-lane-t { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 5px; color: var(--tx) !important; font-size: 11.5px !important; font-weight: 600; }
.pf-lane.rmk > div { border-left-color: var(--pf-rmk); }
.pf-lane-t i { color: var(--c, var(--pf-fundo)); }
.pf-res { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 8px; padding: 16px; border: 1px solid var(--bd); border-radius: 14px; background: rgba(5, 6, 10, .35); }
.pf-res > div { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 120px; text-align: center; }
.pf-res span { color: var(--mt); font-size: 11.5px; }
.pf-res b { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pf-res small { color: var(--mt2); font-size: 11px; }
.pf-res > i { color: var(--mt2); font-size: 18px; }
.pf-res .dest b { color: var(--ok2); }
.pf-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pf-kpis > div { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--bd); border-radius: 13px; background: var(--surface); }
.pf-kpis span { color: var(--mt); font-size: 11.5px; }
.pf-kpis b { font-size: 21px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pf-kpis small { color: var(--mt2); font-size: 11px; }
.pf-luc.ok { border-color: var(--okbd); background: linear-gradient(150deg, var(--okb), transparent 70%), var(--sf); }
.pf-luc.ok b { color: var(--ok2); }
.pf-luc.err { border-color: var(--erbd); background: linear-gradient(150deg, var(--erb), transparent 70%), var(--sf); }
.pf-luc.err b { color: var(--er); }
.ok-t { color: var(--ok2); }
.pf-avisos { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pf-avisos p, .pf-avisos > span { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; }
.pf-avisos .warn { border: 1px solid var(--albd); background: var(--alb); color: var(--al); }
.pf-avisos .info { border: 1px solid var(--infobd); background: var(--infob); color: var(--info); }
.pf-avisos i { flex: none; margin-top: 1px; }
.pf-dupla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pf-bars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; height: 210px; margin: 6px 0 10px; }
.pf-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 0; border-radius: 8px; }
.pf-bar-v { overflow: hidden; max-width: 100%; color: var(--mt); font-size: 9.5px; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pf-bar-c { position: relative; display: flex; align-items: flex-end; flex: 1; width: 100%; border-radius: 6px; background: rgba(255, 255, 255, .025); }
.pf-bar-c i { width: 100%; border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--ok) 60%, transparent); transform-origin: bottom; }
.pf-bar.neg .pf-bar-c i { background: color-mix(in srgb, var(--er) 55%, transparent); }
.pf-bar.melhor .pf-bar-c i { background: var(--ok); box-shadow: 0 0 18px rgba(16, 185, 129, .45); }
.pf-bar.atual .pf-bar-c { box-shadow: inset 0 0 0 2px var(--ac); }
.pf-bar.atual .pf-bar-l { color: var(--ac2); font-weight: 700; }
.pf-bar-l { color: var(--mt); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.pf-bar:hover .pf-bar-c { background: rgba(255, 255, 255, .06); }
.pf-meta { display: flex; flex-direction: column; gap: 12px; }
.pf-meta-f { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 8px; }
.pf-meta-r { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--acbd); border-radius: 12px; background: var(--acb); }
.pf-meta-r span { color: var(--mt); font-size: 11.5px; }
.pf-meta-r b { color: var(--ac2); font-size: 24px; font-variant-numeric: tabular-nums; }
.pf-meta-r small { color: var(--mt); font-size: 11.5px; }
.pf-meta-r .btn { align-self: flex-start; margin-top: 6px; }
.pf-tab-cen table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pf-tab-cen th { padding: 6px 4px; border-bottom: 1px solid var(--bd); color: var(--mt2); font-size: 10.5px; font-weight: 500; text-align: right; }
.pf-tab-cen td { padding: 7px 4px; border-bottom: 1px solid rgba(255, 255, 255, .04); text-align: right; }
.pf-tab-cen td:first-child, .pf-tab-cen th:first-child { text-align: left; color: var(--mt); }
.pf-show-bar { display: none; }

/* apresentação para o cliente (e PDF) */
body.pf-show .side, body.pf-show #topbar, body.pf-show .bottom-nav, body.pf-show .fab-mestre, body.pf-show #fabMestre, body.pf-show .pf-head, body.pf-show .pf-topo, body.pf-show .pf-painel, body.pf-show .pf-meta-f, body.pf-show #plUsarMeta { display: none !important; }
body.pf-show > #app main, body.pf-show .app > main { margin-left: 0 !important; width: 100% !important; max-width: 1180px; margin: 0 auto !important; padding: 28px 24px 40px !important; }
body.pf-show .pf-grid { grid-template-columns: 1fr; }
body.pf-show .pf-show-head { display: block; text-align: center; }
body.pf-show .pf-show-head h2 { margin: 6px 0 4px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; }
body.pf-show .pf-show-bar { position: fixed; z-index: 40; top: 12px; right: 12px; display: flex; align-items: center; gap: 10px; }
body.pf-show .pf-show-bar b { display: none; }
body.pf-show .pf-fx { cursor: default; }
@media print {
  @page { size: A4; margin: 10mm; }
  body.pf-show { background: #0c0e12 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.pf-show .pf-show-bar, body.pf-show .pf-cen { display: none !important; }
  body.pf-show .app > main { padding: 0 !important; }
  body.pf-show .pf-dupla { grid-template-columns: 1fr 1fr; }
  body.pf-show .card, body.pf-show .pf-kpis > div { break-inside: avoid; }
}

@media (max-width: 1200px) { .pf-dupla { grid-template-columns: 1fr; } }
@media (max-width: 1000px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-painel { position: static; max-height: none; overflow: visible; }
  .pf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pf-fx { grid-template-columns: 1fr; gap: 8px; }
  .pf-band { min-height: 72px; }
  .pf-mets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-mets b { font-size: 14px; }
  .pf-funil-card { padding: 14px; }
  .pf-res > div { min-width: 90px; }
  .pf-res b { font-size: 19px; }
  .pf-bars { height: 170px; gap: 3px; }
  .pf-bar-v { display: none; }
  .pf-topo-e select { min-width: 0; flex: 1; }
  .pf-modelos { grid-template-columns: 1fr; }
  body.pf-show .pf-show-bar { top: auto; bottom: 16px; right: 16px; }
}
.pf-fx { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.pf-band { min-width: 200px; }
.pf-band-t { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-lane { grid-template-columns: 1fr; }
.pf-tab-cen td { white-space: nowrap; }
@media (max-width: 720px) { .pf-lanes { grid-template-columns: 1fr; } .pf-lane { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .pf-fx { grid-template-columns: 1fr; }
  .pf-band { width: min(100%, calc(var(--w) * 1)); min-width: 0; padding: 10px 14%; }
  .pf-mets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-mets > div { padding: 8px; }
  .pf-mets span { font-size: 10px; }
}
@media (max-width: 720px) { .pf-mets.pf-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-lane { grid-template-columns: 1fr; } }