/* [FUNIL-LX-V1] Funil de Vendas gráfico (26/10/2026) — escopo #screen-funil.fl-on (classe posta pelo funil-lx.js) */
#screen-funil.fl-on {
  --fl-card: var(--bg-card, #fff); --fl-line: var(--border, #E6E8EF); --fl-tx: var(--text, #14172B); --fl-mid: var(--text-mid, #5B6178); --fl-low: #8A90A6;
  --fl-ind: #4F46E5; --fl-ind-l: #EEF0FF; --fl-soft: #F7F8FB; --fl-grid: #EEF0F4; --fl-trilho: #EEF0F6;
  --fl-fe: #0D9488; --fl-ab: #A5ABF6;
  --fl-f1: #C7CBF9; --fl-f1t: #2E2A87; --fl-f2: #7279EE; --fl-f2t: #fff; --fl-f3: #3730A3; --fl-f3t: #fff;
  --fl-e1: #A5ABF6; --fl-e2: #7279EE; --fl-e3: #4F46E5; --fl-e4: #94A3B8;
  --fl-ok: #059669; --fl-a1: #84A31B; --fl-a2: #D97706; --fl-a3: #EA580C; --fl-a4: #DC2626;
  --fl-r1: #7279EE; --fl-r2: #4F46E5; --fl-r3: #0D9488;
  --fl-alerta-bg: #FEF2F2; --fl-alerta-tx: #991B1B; --fl-ok-bg: #ECFDF5; --fl-ok-tx: #065F46;
}
html[data-tema="escuro"] #screen-funil.fl-on {
  --fl-low: #8E94AE; --fl-ind: #818CF8; --fl-ind-l: rgba(129,140,248,.14); --fl-soft: rgba(255,255,255,.04); --fl-grid: rgba(255,255,255,.06); --fl-trilho: rgba(255,255,255,.07);
  --fl-fe: #2DD4BF; --fl-ab: #6366F1;
  --fl-f1: #312E81; --fl-f1t: #C7D2FE; --fl-f2: #4F46E5; --fl-f2t: #fff; --fl-f3: #818CF8; --fl-f3t: #1E1B4B;
  --fl-e1: #6366F1; --fl-e2: #818CF8; --fl-e3: #A5B4FC; --fl-e4: #64748B;
  --fl-ok: #34D399; --fl-a1: #A3C93A; --fl-a2: #FBBF24; --fl-a3: #FB923C; --fl-a4: #F87171;
  --fl-r1: #818CF8; --fl-r2: #A5B4FC; --fl-r3: #2DD4BF;
  --fl-alerta-bg: rgba(248,113,113,.12); --fl-alerta-tx: #FCA5A5; --fl-ok-bg: rgba(52,211,153,.12); --fl-ok-tx: #6EE7B7;
}

/* cartão-título com ações à direita */
#screen-funil.fl-on .dc-hero { flex-direction:row !important; align-items:center !important; justify-content:space-between !important; flex-wrap:wrap !important; }
#screen-funil.fl-on .fl-hero-txt { min-width:0; flex:1 1 300px; }
.fl-acoes { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fl-seg { display:inline-flex; background:var(--fl-soft); border:1px solid var(--fl-line); border-radius:9px; padding:3px; gap:2px; }
#screen-funil.fl-on .fl-seg button { border:0; background:transparent; padding:5px 12px; border-radius:7px; font-family:inherit; font-weight:600; font-size:12.5px; line-height:1.2; color:var(--fl-mid); cursor:pointer; }
#screen-funil.fl-on .fl-seg button.on { background:var(--fl-card); color:var(--fl-ind); box-shadow:0 1px 2px rgba(16,24,40,.12); }
#screen-funil.fl-on .fl-btn { border:1px solid var(--fl-line); background:var(--fl-card); color:var(--fl-tx); border-radius:8px; padding:7px 12px; font-family:inherit; font-weight:500; font-size:12.5px; line-height:1.2; cursor:pointer; white-space:nowrap; }
#screen-funil.fl-on .fl-btn:hover { border-color:var(--fl-ind); color:var(--fl-ind); }

/* filtros em chips */
.fl-fil { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.fl-chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; flex:1 1 100%; } .fl-esp { display:none; }
#screen-funil.fl-on .fl-chip { border:1px solid var(--fl-line); background:var(--fl-card); color:var(--fl-tx); border-radius:999px; padding:6px 12px; font-family:inherit; font-weight:500; font-size:12.5px; line-height:1.2; cursor:pointer; height:auto; box-shadow:none; }
#screen-funil.fl-on .fl-chip:hover { border-color:var(--fl-ind); }
#screen-funil.fl-on .fl-chip.on { border-color:var(--fl-ind); color:var(--fl-ind); background:var(--fl-ind-l); font-weight:600; }
#screen-funil.fl-on .fl-sel { appearance:none; -webkit-appearance:none; padding-right:28px; max-width:220px;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A90A6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; background-size:8px; }
#screen-funil.fl-on .fl-inp { cursor:text; min-width:170px; outline:none; }
#screen-funil.fl-on .fl-inp:focus { border-color:var(--fl-ind); }
.fl-arq-w { position:relative; display:inline-block; }
#screen-funil.fl-on .fl-chk { display:inline-flex; align-items:center; gap:6px; } .fl-chk input { accent-color:var(--fl-ind); margin:0; }
.fl-ativos { display:flex; gap:8px; margin:-4px 0 12px; flex-wrap:wrap; }
#screen-funil.fl-on .fl-tag { border:0; background:var(--fl-ind-l); color:var(--fl-ind); border-radius:999px; padding:4px 10px; font-family:inherit; font-weight:600; font-size:12px; line-height:1.3; cursor:pointer; }

/* cartões e KPIs */
.fl-card { background:var(--fl-card); border:1px solid var(--fl-line); border-radius:12px; min-width:0; color:var(--fl-tx); }
.fl-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.fl-kpi { padding:14px 16px; } .fl-kpi .l { font-size:11.5px; color:var(--fl-mid); font-weight:600; }
.fl-kpi .v { font-size:24px; font-weight:700; margin:6px 0 2px; letter-spacing:-.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fl-kpi .s { font-size:11.5px; color:var(--fl-low); } .fl-kpi .s b { color:var(--fl-mid); font-weight:600; }
.fl-kpi.frio { border-left:4px solid var(--fl-a4); }
.fl-vazio { padding:40px; text-align:center; color:var(--fl-mid); }
.fl-row { display:grid; gap:14px; margin-bottom:14px; align-items:start; }
.fl-row.r21 { grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); } .fl-row.r11 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }

/* blocos recolhíveis */
#screen-funil.fl-on .fl-bh { display:flex; align-items:baseline; gap:8px; width:100%; padding:13px 16px; background:transparent; border:0; cursor:pointer; text-align:left; font:inherit; color:var(--fl-tx); }
.fl-bh .tt { font-size:13.5px; font-weight:700; white-space:nowrap; } .fl-bh .sub { color:var(--fl-low); font-size:11.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fl-chev { margin-left:auto; width:16px; height:16px; flex-shrink:0; position:relative; border-radius:5px; transition:transform .18s; align-self:center; }
.fl-chev::before { content:''; position:absolute; left:5px; top:4px; width:5px; height:5px; border-right:1.8px solid var(--fl-mid); border-bottom:1.8px solid var(--fl-mid); transform:rotate(45deg); }
.fl-bh:hover .tt { color:var(--fl-ind); } .fl-bh:hover .fl-chev { background:var(--fl-soft); }
.fl-bh:focus-visible { outline:2px solid var(--fl-ind); outline-offset:-2px; border-radius:12px; }
.fl-rec .fl-chev { transform:rotate(-90deg); } .fl-rec .fl-bc { display:none; }
.fl-bc { padding:0 16px 16px; }

/* svg comuns */
.fl-svg { display:block; width:100%; height:auto; overflow:visible; } .fl-svg text { font-family:inherit; }
.fl-svg .f1 { fill:var(--fl-f1); } .fl-svg .f2 { fill:var(--fl-f2); } .fl-svg .f3 { fill:var(--fl-f3); }
.fl-svg .fl-ponte { opacity:.35; } .fl-svg rect.f1, .fl-svg rect.f2, .fl-svg rect.f3 { cursor:default; }
.fl-svg .f1t { fill:var(--fl-f1t); } .fl-svg .f2t { fill:var(--fl-f2t); } .fl-svg .f3t { fill:var(--fl-f3t); }
.fl-et { font-size:11.5px; font-weight:600; pointer-events:none; } .fl-ev { font-size:17px; font-weight:700; pointer-events:none; }
.fl-eq { font-size:11.5px; fill:var(--fl-mid); }
.fl-conv rect { fill:var(--fl-card); stroke:var(--fl-line); } .fl-conv text { font-size:11.5px; font-weight:700; fill:var(--fl-tx); }
.fl-svg .fl-grid { stroke:var(--fl-grid); } .fl-svg .fl-ax { font-size:10.5px; fill:var(--fl-low); }
.fl-svg .fl-pct { font-size:10px; font-weight:600; fill:var(--fl-mid); }
.fl-svg rect.fe { fill:var(--fl-fe); } .fl-svg rect.ab { fill:var(--fl-ab); } .fl-svg .fl-hit { fill:transparent; }
.fl-svg .fl-hit:hover { fill:var(--fl-soft); }

/* estágios do pipeline */
.fl-est-t { margin-top:12px; font-size:12px; font-weight:600; } .fl-est-t span { color:var(--fl-low); font-weight:500; }
.fl-strip { display:flex; height:30px; border-radius:7px; overflow:hidden; gap:2px; margin-top:6px; }
#screen-funil.fl-on .fl-strip button { border:0; display:flex; align-items:center; padding:0 9px; color:#fff; font-family:inherit; font-weight:600; font-size:11px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; min-width:4px; }
#screen-funil.fl-on .fl-strip button:hover { filter:brightness(1.08); }
.fl-strip .e1, .fl-leg i.e1 { background:var(--fl-e1); } .fl-strip .e2, .fl-leg i.e2 { background:var(--fl-e2); }
.fl-strip .e3, .fl-leg i.e3 { background:var(--fl-e3); } .fl-strip .e4, .fl-leg i.e4 { background:var(--fl-e4); }
html[data-tema="escuro"] #screen-funil.fl-on .fl-strip .e3 { color:#1E1B4B; }
.fl-leg { display:flex; gap:6px 14px; font-size:11.5px; color:var(--fl-mid); margin-top:8px; flex-wrap:wrap; align-items:center; }
.fl-leg i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; } .fl-leg b { color:var(--fl-tx); }
.fl-leg i.fe { background:var(--fl-fe); } .fl-leg i.ab { background:var(--fl-ab); } .fl-leg .dir { margin-left:auto; color:var(--fl-low); }

/* barras horizontais (idade e consultor) */
.fl-hb, #screen-funil.fl-on .fl-cons { display:grid; grid-template-columns:110px minmax(0,1fr) 78px 44px; gap:10px; align-items:center; padding:6px 0; font-size:12px; width:100%; }
.fl-hb .n, .fl-cons .n { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; text-align:left; }
.fl-hb .bar, .fl-cons .bar { height:14px; display:flex; gap:2px; background:var(--fl-trilho); border-radius:4px; overflow:hidden; }
.fl-hb .bar i, .fl-cons .bar i { display:block; height:100%; border-radius:3px; }
.fl-hb .v, .fl-cons .v { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; } .fl-hb .p, .fl-cons .p { text-align:right; color:var(--fl-mid); font-variant-numeric:tabular-nums; }
#screen-funil.fl-on .fl-hb .dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; flex-shrink:0; }
#screen-funil.fl-on .fl-hb .ok { background:var(--fl-ok); } #screen-funil.fl-on .fl-hb .a1 { background:var(--fl-a1); } #screen-funil.fl-on .fl-hb .a2 { background:var(--fl-a2); }
#screen-funil.fl-on .fl-hb .a3 { background:var(--fl-a3); } #screen-funil.fl-on .fl-hb .a4 { background:var(--fl-a4); }
#screen-funil.fl-on .fl-cons { grid-template-columns:150px minmax(0,1fr) 78px 44px; border:0; background:transparent; color:var(--fl-tx); font:inherit; font-size:12px; cursor:pointer; border-radius:6px; padding:6px 4px; }
#screen-funil.fl-on .fl-cons:hover { background:var(--fl-soft); } #screen-funil.fl-on .fl-cons.on { background:var(--fl-ind-l); } #screen-funil.fl-on .fl-cons.on .n { color:var(--fl-ind); font-weight:600; }
.fl-cons .bar i.fe { background:var(--fl-fe); } .fl-cons .bar i.ab { background:var(--fl-ab); }
.fl-alerta, .fl-ok { margin-top:12px; padding:10px 12px; border-radius:9px; font-size:12px; } .fl-alerta { background:var(--fl-alerta-bg); color:var(--fl-alerta-tx); } .fl-ok { background:var(--fl-ok-bg); color:var(--fl-ok-tx); }

/* oportunidades */
.fl-op { display:grid; grid-template-columns:52px minmax(0,1fr) 84px 52px 140px; gap:10px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--fl-line); font-size:12.5px; }
.fl-op:last-of-type { border-bottom:0; }
.fl-op .id { color:var(--fl-ind); font-weight:600; font-variant-numeric:tabular-nums; }
.fl-op .t { min-width:0; } .fl-op .t b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; } .fl-op .t span { font-size:11.5px; color:var(--fl-mid); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.fl-op .v { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fl-op .dias { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; text-align:center; background:color-mix(in srgb, currentColor 12%, transparent); }
.fl-op .dias.ok { color:var(--fl-ok); } .fl-op .dias.a1 { color:var(--fl-a1); } .fl-op .dias.a2 { color:var(--fl-a2); } .fl-op .dias.a3 { color:var(--fl-a3); } .fl-op .dias.a4 { color:var(--fl-a4); }
.fl-op .ac { display:flex; gap:4px; justify-content:flex-end; }
#screen-funil.fl-on .fl-op .ac button { border:1px solid var(--fl-line); background:var(--fl-card); color:var(--fl-mid); border-radius:6px; padding:3px 7px; font-family:inherit; font-weight:500; font-size:11px; line-height:1.2; cursor:pointer; }
#screen-funil.fl-on .fl-op .ac button:hover { border-color:var(--fl-ind); color:var(--fl-ind); }
.fl-mais { text-align:center; margin-top:10px; }
.fl-lbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; } .fl-lbar .fl-inp { flex:1 1 220px; }
.fl-pgs { font-size:12px; color:var(--fl-mid); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
#screen-funil.fl-on .fl-pg { border:1px solid var(--fl-line); background:var(--fl-card); color:var(--fl-tx); border-radius:6px; width:26px; height:26px; cursor:pointer; font-family:inherit; font-weight:600; font-size:14px; line-height:1; }
#screen-funil.fl-on .fl-pg:disabled { opacity:.35; cursor:default; }
.fl-vz { color:var(--fl-mid); font-size:12px; text-align:center; padding:14px 0; }

/* cobertura */
.fl-rings { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; }
.fl-rings .c { font-size:11.5px; color:var(--fl-mid); margin-top:4px; } .fl-rings .c b { color:var(--fl-tx); }
.fl-rings text { font-size:14px; font-weight:700; fill:var(--fl-tx); font-family:inherit; }
.fl-ring-bg { stroke:var(--fl-trilho); } .fl-rings .r1 { stroke:var(--fl-r1); } .fl-rings .r2 { stroke:var(--fl-r2); } .fl-rings .r3 { stroke:var(--fl-r3); }
.fl-nota { margin-top:12px; font-size:12px; color:var(--fl-mid); line-height:1.5; }

/* tooltip (fica no body) */
.fl-tip { position:fixed; z-index:10060; display:none; pointer-events:none; background:#14172B; color:#fff; font-size:11.5px; line-height:1.5; border-radius:8px; padding:8px 10px; box-shadow:0 6px 20px rgba(0,0,0,.22); max-width:260px; }
html[data-tema="escuro"] .fl-tip { background:#F4F5F9; color:#14172B; }

/* telas menores */
@media (max-width:1180px) { .fl-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } .fl-row.r21, .fl-row.r11 { grid-template-columns:minmax(0,1fr); } }
@media (max-width:700px) {
  .fl-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .fl-kpi .v { font-size:20px; } .fl-kpi.frio { grid-column:1 / -1; }
  .fl-esp { display:none; } #screen-funil.fl-on .fl-sel, #screen-funil.fl-on .fl-inp { max-width:none; }
  .fl-hb, #screen-funil.fl-on .fl-cons { grid-template-columns:96px minmax(0,1fr) 70px 38px; gap:8px; }
  .fl-op { grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; } .fl-op .id { grid-column:1; } .fl-op .t { grid-column:1 / -1; grid-row:2; }
  .fl-op .v { grid-column:2; grid-row:1; } .fl-op .dias { grid-row:3; justify-self:start; } .fl-op .ac { grid-row:3; }
  .fl-bh .sub { display:none; }
  [data-fl-b=funil] .fl-bc, [data-fl-b=mes] .fl-bc { overflow-x:auto; } [data-fl-b=funil] .fl-svg, [data-fl-b=mes] .fl-svg { min-width:540px; }
}
