
/* ============================================================
   GCH v21 - Melhorias CRM/Pipeline (SOMENTE CELULAR)
   1) Mini-grafico animado no cartao "Fechado / Ganho"
   2) Movimentacao de leads entre etapas por toque (sem arrastar)
   Nada aqui afeta o desktop: tudo esta dentro de @media (max-width:640px)
   ============================================================ */
@media (max-width:640px){
  /* ---------- 1) Cartao "Fechado / Ganho" ---------- */
  #gdmForecastPanel .gdm-fc-card.gch-won21-host{position:relative}
  #gdmForecastPanel .gdm-fc-card.gch-won21-host .lbl i{display:inline-block;transform-origin:50% 80%;animation:gchWon21Trofeu 3.6s ease-in-out infinite}
  @keyframes gchWon21Trofeu{0%,84%,100%{transform:none}88%{transform:translateY(-2px) rotate(-9deg)}92%{transform:translateY(-2px) rotate(9deg)}96%{transform:translateY(-1px) rotate(0)}}
  .gch-won21{display:flex;align-items:center;gap:.75rem;margin-top:.65rem;padding-top:.65rem;border-top:1px solid rgba(163,163,163,.18)}
  .gch-won21-ring{position:relative;flex:0 0 76px;width:76px;height:76px}
  .gch-won21-ring svg{width:76px;height:76px;display:block;transform:rotate(-90deg)}
  .gch-won21-ring circle{fill:none;stroke-linecap:round}
  .gch-won21-tr{stroke:rgba(163,163,163,.20);stroke-width:8}
  .gch-won21-pg{stroke:#10B981;stroke-width:8;filter:drop-shadow(0 0 5px rgba(16,185,129,.55));transition:stroke-dashoffset 1.15s cubic-bezier(.22,.61,.36,1)}
  .gch-won21-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;color:#10B981;letter-spacing:-.02em}
  .gch-won21-bars{flex:1 1 auto;min-width:0}
  .gch-won21-plot{display:flex;align-items:flex-end;gap:5px;height:56px}
  .gch-won21-b{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
  .gch-won21-fill{width:100%;height:0;min-height:3px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#6366F1,#2563EB);transition:height .95s cubic-bezier(.22,.61,.36,1)}
  .gch-won21-b.is-won .gch-won21-fill{background:linear-gradient(180deg,#34D399,#10B981);animation:gchWon21Pulso 2.6s ease-in-out infinite}
  .gch-won21-lbls{display:flex;gap:5px;margin-top:5px}
  .gch-won21-lbls span{flex:1 1 0;min-width:0;text-align:center;font-size:11px;line-height:1;opacity:.65}
  .gch-won21-lbls span.is-won{opacity:1;filter:drop-shadow(0 0 4px rgba(16,185,129,.85))}
  @keyframes gchWon21Pulso{0%,100%{box-shadow:0 0 5px rgba(16,185,129,.30)}50%{box-shadow:0 0 15px rgba(16,185,129,.70)}}
  html:not(.dark) .gch-won21-tr{stroke:rgba(105,114,125,.22)}
  /* atraso progressivo das barras - feito em CSS para nao depender de timers */
  .gch-won21-plot .gch-won21-b:nth-child(1) .gch-won21-fill{transition-delay:.04s}
  .gch-won21-plot .gch-won21-b:nth-child(2) .gch-won21-fill{transition-delay:.10s}
  .gch-won21-plot .gch-won21-b:nth-child(3) .gch-won21-fill{transition-delay:.16s}
  .gch-won21-plot .gch-won21-b:nth-child(4) .gch-won21-fill{transition-delay:.22s}
  .gch-won21-plot .gch-won21-b:nth-child(5) .gch-won21-fill{transition-delay:.28s}
  .gch-won21-plot .gch-won21-b:nth-child(6) .gch-won21-fill{transition-delay:.34s}
  .gch-won21-plot .gch-won21-b:nth-child(7) .gch-won21-fill{transition-delay:.40s}
  .gch-won21-plot .gch-won21-b:nth-child(8) .gch-won21-fill{transition-delay:.46s}
  .gch-won21-plot .gch-won21-b:nth-child(9) .gch-won21-fill{transition-delay:.52s}
  .gch-won21-plot .gch-won21-b:nth-child(10) .gch-won21-fill{transition-delay:.58s}

  /* ---------- 2) Barra de movimentacao dentro de cada lead ---------- */
  #pipelineBoard .crm-card .gch-mv21{display:flex;align-items:stretch;gap:5px;margin-top:.45rem;padding-top:.45rem;border-top:1px solid rgba(163,163,163,.18)}
  #pipelineBoard .crm-card .gch-mv21 button{-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:9px;border:1px solid rgba(163,163,163,.30);background:rgba(163,163,163,.10);color:#a3a3a3;font-size:11.5px;line-height:1;min-height:32px;display:flex;align-items:center;justify-content:center;gap:5px;flex:0 0 38px;transition:all .3s}
  #pipelineBoard .crm-card .gch-mv21 button.gch-mv21-go{flex:1 1 auto;min-width:0;padding:0 8px;font-weight:600;color:#93C5FD;border-color:rgba(99,102,241,.45);background:linear-gradient(90deg,rgba(37,99,235,.22),rgba(99,102,241,.22))}
  #pipelineBoard .crm-card .gch-mv21 button.gch-mv21-go span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #pipelineBoard .crm-card .gch-mv21 button:disabled{opacity:.32;cursor:default}
  #pipelineBoard .crm-card .gch-mv21 button:active{transform:scale(.95)}
  html:not(.dark) #pipelineBoard .crm-card .gch-mv21 button{color:#4a4a4a;background:rgba(105,114,125,.10)}
  html:not(.dark) #pipelineBoard .crm-card .gch-mv21 button.gch-mv21-go{color:#1D4ED8}

  /* ---------- 2b) Painel inferior de escolha de etapa ---------- */
  #gchMv21Sheet{position:fixed;inset:0;z-index:990;display:none}
  #gchMv21Sheet.on{display:block}
  #gchMv21Sheet .gch-mvsheet-bd{position:absolute;inset:0;background:rgba(9,10,15,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:gchMv21Fade .25s ease}
  #gchMv21Sheet .gch-mvsheet-pn{position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:20px 20px 0 0;padding:12px 14px calc(14px + env(safe-area-inset-bottom));background:rgba(17,17,17,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -14px 44px rgba(0,0,0,.55);animation:gchMv21Sobe .32s cubic-bezier(.22,.61,.36,1)}
  #gchMv21Sheet .gch-mvsheet-gr{width:44px;height:4px;border-radius:99px;background:rgba(163,163,163,.35);margin:0 auto 10px}
  #gchMv21Sheet .gch-mvsheet-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  #gchMv21Sheet .gch-mvsheet-ttl{flex:1 1 auto;min-width:0;font-size:15px;font-weight:700;color:#F8FAFC;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #gchMv21Sheet .gch-mvsheet-x{flex:0 0 34px;height:34px;border-radius:10px;border:1px solid rgba(163,163,163,.28);background:rgba(163,163,163,.10);color:#a3a3a3;display:flex;align-items:center;justify-content:center;cursor:pointer}
  #gchMv21Sheet .gch-mvsheet-ls{display:flex;flex-direction:column;gap:8px}
  #gchMv21Sheet .gch-mvopt{-webkit-appearance:none;appearance:none;cursor:pointer;width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:12px;min-height:52px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e5e5e5;transition:all .3s}
  #gchMv21Sheet .gch-mvopt:active{transform:scale(.985)}
  #gchMv21Sheet .gch-mvopt-n{flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #gchMv21Sheet .gch-mvopt-q{flex:0 0 auto;font-size:12px;font-weight:600;color:#a3a3a3}
  #gchMv21Sheet .gch-mvopt.on{border-color:rgba(16,185,129,.55);background:rgba(16,185,129,.12);color:#34D399}
  #gchMv21Sheet .gch-mvopt.on .gch-mvopt-q{color:#34D399}
  #gchMv21Sheet .gch-mvopt.on::after{content:"\2713";font-weight:800;color:#10B981}
  html:not(.dark) #gchMv21Sheet .gch-mvsheet-pn{background:rgba(248,250,252,.98);border-top-color:rgba(17,17,17,.10)}
  html:not(.dark) #gchMv21Sheet .gch-mvsheet-ttl{color:#111111}
  html:not(.dark) #gchMv21Sheet .gch-mvopt{background:rgba(17,17,17,.04);border-color:rgba(17,17,17,.10);color:#111111}
  @keyframes gchMv21Fade{from{opacity:0}to{opacity:1}}
  @keyframes gchMv21Sobe{from{transform:translateY(100%)}to{transform:translateY(0)}}
}
