/* estilo.css — Simulador de funil (#155). Só tokens do tema; três larguras.
   Movimento: a barra anda quando a premissa muda e o gargalo pulsa; com
   prefers-reduced-motion tudo fica parado. */
.sf .ds-kpis { margin-bottom: 12px; }
.sf-corpo { transition: opacity var(--ds-dur) var(--ds-ease); }
.sf-corpo.lendo { opacity: .85; }
.sf-frase { border: 1px solid var(--line); border-left: 4px solid var(--ds-ok); background: var(--panel);
  border-radius: var(--ds-r); padding: 12px 16px; margin: 0 0 12px; }
.sf-frase.trava { border-left-color: var(--ds-err); }
.sf-veredito { font-size: var(--ds-fs-lg); font-weight: 700; margin: 0 0 4px; }
.sf-frase.trava .sf-veredito { color: var(--ink-err); }
.sf-sus { color: var(--muted); font-size: var(--ds-fs-sm); margin: 0 0 6px; }
.sf-controle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--ds-r); padding: 10px 16px; margin-bottom: 12px; }
.sf-controle label { font-weight: 700; }
.sf-controle input[type="range"] { flex: 1 1 240px; min-height: 44px; accent-color: var(--ds-accent); }
.sf-valor { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.sf-valor input { width: 110px; text-align: right; }
.sf-ir { min-height: 44px; }
.sf-grade { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; align-items: start; }
.sf-caixa { background: var(--panel); border: 1px solid var(--line); border-radius: var(--ds-r);
  padding: 14px 16px; margin-bottom: 12px; min-width: 0; }
.sf-caixa h2 { font-size: var(--ds-fs-md); margin: 0 0 4px; }

/* funil: uma linha por etapa; barra = demanda, risco vertical = capacidade */
.sf-funil { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.sf-etapa { padding: 6px 8px; border-radius: var(--ds-r-sm); border: 1px solid transparent; }
.sf-etapa.gargalo { border-color: var(--ds-err); animation: sf-pulso var(--ds-dur-slow) ease-in-out infinite; }
.sf-rot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; font-size: var(--ds-fs); }
.sf-rot span { color: var(--muted); font-variant-numeric: tabular-nums; }
.sf-trilho { position: relative; height: 18px; margin-top: 4px; background: var(--tag-bg); border-radius: var(--ds-r-sm); }
.sf-barra { position: absolute; inset: 0 auto 0 0; border-radius: var(--ds-r-sm); background: var(--ds-ok); overflow: hidden;
  transition: width var(--ds-dur-slow) var(--ds-ease), background-color var(--ds-dur) var(--ds-ease); }
.sf-etapa.aperta .sf-barra { background: var(--ds-warn); }
.sf-etapa.trava .sf-barra { background: var(--ds-err); }
.sf-etapa.neutro .sf-barra { background: var(--ds-none); }
/* o fluxo: um brilho que corre pela barra (pessoas passando pela etapa) */
.sf-barra i { position: absolute; inset: 0; width: 40%; opacity: .35;
  background: linear-gradient(90deg, transparent, var(--ink), transparent); animation: sf-fluxo 2.4s linear infinite; }
.sf-cap { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); }
.sf-porque { margin: 4px 0 0; font-size: var(--ds-fs-sm); color: var(--ink-err); }
.sf-caixa-linha { border-top: 1px dashed var(--line); border-radius: 0; padding-top: 10px; }
.sf-caixa-linha.trava .sf-rot b { color: var(--ink-err); }
@keyframes sf-fluxo { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes sf-pulso { 50% { box-shadow: 0 0 0 4px var(--glow-1); } }

/* premissas */
.sf-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.sf-campo { display: flex; flex-direction: column; gap: 2px; font-size: var(--ds-fs-sm); }
.sf-campo input { min-height: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.sf-campo small { color: var(--muted); }
.sf-campo.mexida span { color: var(--ds-accent-ink); font-weight: 700; }

/* curva */
.sf-curva { width: 100%; height: auto; display: block; margin-top: 6px; }
.sf-curva text { fill: var(--muted); font-size: 10px; }
.sf-curva .eixo { stroke: var(--line); }
.sf-curva .faixa { fill: var(--ds-accent); opacity: .14; }
.sf-curva .meio { fill: none; stroke: var(--ds-accent); stroke-width: 2.5; }
.sf-curva .real { fill: var(--muted); }
.sf-curva .hoje { stroke: var(--muted); stroke-dasharray: 3 3; }
.sf-curva .novo { fill: var(--ds-accent); stroke: var(--ink); stroke-width: 1.5; transition: cx var(--ds-dur) var(--ds-ease), cy var(--ds-dur) var(--ds-ease); }
.sf-curva .trava line { stroke: var(--ds-err); stroke-width: 2; stroke-dasharray: 5 3; }
.sf-curva .trava text { fill: var(--ink-err); font-weight: 700; }
.sf-rodape ul { margin: 4px 0 8px; padding-left: 18px; font-size: var(--ds-fs-sm); }
.sf-vazio { padding: 16px 0; }

@media (prefers-reduced-motion: reduce) {
  .sf-barra, .sf-corpo, .sf-curva .novo { transition: none; }
  .sf-barra i, .sf-etapa.gargalo { animation: none; }
}
@media (max-width: 900px) { .sf-grade { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .sf-caixa, .sf-controle { padding: 12px; } .sf-campos { grid-template-columns: 1fr 1fr; } }