:root{
  --fundo:#0B0B12;
  --ouro:#F5C542;
  --vermelho:#B91C1C;
  --texto:#F5F3EC;
  --texto-dim:rgba(245,243,236,.70);
  --texto-apagado:rgba(245,243,236,.46);
  --linha-ouro:rgba(245,197,66,.18);
  --linha-suave:rgba(245,243,236,.10);
  --verde:#35C878;
  --amarelo:#FFB020;
  /* cor semantica: fonte unica de verdade por estado (bom/atencao/ruim).
     --vermelho #B91C1C fica so para fills/pontos/glow; texto "ruim" usa --val-bad,
     que sobre o fundo escuro rende ~7:1 (AA) contra os ~3:1 do vermelho de marca. */
  --val-good:var(--verde);
  --val-warn:var(--amarelo);
  --val-bad:#F87171;
  /* rotulos pequenos (<18px): .46 reprova AA; .60 sobe para ~5.5:1 */
  --texto-rotulo:rgba(245,243,236,.60);
  /* superficies e separadores de lista, antes hardcoded em ~9 variantes */
  --sup-1:rgba(255,255,255,.025);
  --sup-2:rgba(255,255,255,.05);
  --linha-fraca:rgba(245,243,236,.06);
  /* raios canonicos (a pilula 999px ja rege chips/badges) */
  --r-pill:999px;
  /* escala de espacamento ESTRUTURAL, em tres degraus:
       --esp-bloco  painel<->painel e palco (o "vao" entre blocos de uma cena/pagina)
       --esp-painel grades de paineis dentro de uma secao dos subs
       --esp-carta  grades de cards pequenos (vol-cards, cards de horas)
     Nota de sistema: as cenas legadas da TV usam um grid de 4px escalado x1.08
     (17.3, 21.6, 25.9, 34.6, 97.2...). E consistente de proposito no canvas fixo
     de 1920px — valores INTERNOS dessas cenas ficam nesse grid; so o tier
     estrutural (gaps entre blocos) passa pelos tokens abaixo. */
  --esp-bloco:22px;
  --esp-painel:20px;
  --esp-carta:16px;
  /* ease padrao das entradas (out-quint: desacelera com confianca, sem bounce) */
  --ease-sai:cubic-bezier(.22,1,.36,1);
  --fade:900ms;
  --fonte-titulo:'Archivo','Arial Narrow',Arial,sans-serif;
  --fonte-texto:'DM Sans','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* foco de teclado visivel (WCAG 2.4.7): usa o dourado de marca. So dispara em
   navegacao por teclado (:focus-visible), invisivel no mouse/touch e na TV. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ouro);outline-offset:2px;border-radius:6px}
/* utilitario numerico: alinha digitos em colunas (a TV ja usa em 19 pontos) */
.num{font-variant-numeric:tabular-nums}
.st-num,.rk-val,.st-bval,.st-hval,.vol-card b,.st-chip b,.sinal-val,.ag-hora,.atr-dias{font-variant-numeric:tabular-nums}
html,body{width:100%;height:100%;overflow:hidden}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:top left}
body{
  background:var(--fundo);
  color:var(--texto);
  font-family:var(--fonte-texto);
  cursor:none;
}

/* ---------- fundo cosmico ---------- */
#fundo{position:fixed;inset:0;z-index:0;background:radial-gradient(130% 120% at 72% 8%,#12131E 0%,var(--fundo) 58%)}
#estrelas{position:absolute;inset:0}
.estrela{position:absolute;background:var(--texto);border-radius:50%}
.estrela.pisca{animation:pisca 3.6s ease-in-out infinite}
@keyframes pisca{0%,100%{opacity:.18}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){.estrela.pisca,.spr-vp img,.confete{animation:none}}
.orbita{position:absolute;border:1px solid rgba(245,197,66,.055);border-radius:50%}
.orbita.o1{width:1836px;height:1836px;left:-756px;bottom:-1296px}
.orbita.o2{width:1404px;height:1404px;right:-810px;bottom:-918px;border-color:rgba(245,197,66,.045)}
#lua{position:absolute;top:-54px;right:-59.4px;width:183.6px;height:183.6px;filter:drop-shadow(0 0 32.4px rgba(245,197,66,.16))}
#lua svg{width:100%;height:100%;display:block}

/* ---------- palco e moldura ---------- */
#palco{position:fixed;inset:0;z-index:2;padding:54px 96px;display:flex;flex-direction:column;gap:var(--esp-bloco)}
#moldura{flex:none;height:77.8px;display:flex;align-items:center;justify-content:space-between}
.marca{display:flex;align-items:flex-end;flex:none}
#logo{height:54px;display:block}
/* sprite da pessoa colado na logo (página da pessoa) — "espiando" a marca */
.marca-sprite{display:inline-flex;align-items:flex-end;flex:none;height:60px;pointer-events:none;transform:translateY(-5%)}
.marca-sprite img{height:100%;width:auto;display:block;image-rendering:pixelated}
.marca-sprite-dir{margin-left:-8px;margin-right:-20px}   /* à esquerda da logo: colado no logo + fecha a folga externa */
.marca-sprite-esq{margin-left:-20px;margin-right:-14px}  /* à direita da logo: um tico mais longe + apara o whitespace da direita */
body.modo-sub .marca-sprite{height:48px}
.relogio{display:flex;align-items:center;gap:19.4px;flex:none;white-space:nowrap}
#m-data{font:600 33.5px/1 var(--fonte-titulo);letter-spacing:.08em;color:var(--texto-dim);white-space:nowrap}
.relogio-sep{width:1px;height:47.5px;background:var(--linha-ouro)}
.m-atual{font:600 17px/1 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-dim);margin-right:16px}
#m-hora{font:800 44px/1 var(--fonte-titulo);letter-spacing:.04em;color:var(--ouro);font-variant-numeric:tabular-nums}

/* ---------- faixa vital: sinais sempre visiveis no centro do header ---------- */
#vitais{display:flex;align-items:center;justify-content:center;gap:16px;flex:1 1 auto;min-width:0;margin:0 28px;overflow:hidden}
.vt-item{display:flex;align-items:baseline;gap:10px;white-space:nowrap;flex:none}
.vt-rot{font:600 16px/1 var(--fonte-texto);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-dim)}
.vt-val{font:800 27px/1 var(--fonte-titulo);color:var(--ouro);font-variant-numeric:tabular-nums}
.vt-val.val-warn{color:var(--amarelo)}
.vt-val.val-bad{color:var(--val-bad)}
.vt-sep{width:1px;height:26px;background:var(--linha-suave);flex:none}
.vt-qr{width:40px;height:40px;border-radius:8px;flex:none;margin-left:4px;display:block}
body.modo-mobile #vitais, body.modo-sub #vitais{display:none}

/* ---------- cena: tendencia da semana (sparklines do historico) ---------- */
/* cabecalho de cena no mesmo baseline das outras cenas, e cards que preenchem
   a altura do canvas (antes a linha flutuava no meio, ~45% da tela vazia) */
.td-cab-cena{flex:none;margin-bottom:4px}
.td-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--esp-bloco);width:100%}
.td-card{display:flex;flex-direction:column;gap:20px;padding:38px 40px 34px;min-height:0}
.td-cab{display:flex;align-items:center;justify-content:space-between;gap:14px}
.td-titulo{font:700 34px/1.1 var(--fonte-titulo);letter-spacing:.02em;text-transform:uppercase}
.td-num{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.td-val{font:800 92px/1 var(--fonte-titulo);color:var(--ouro);font-variant-numeric:tabular-nums}
.td-val.val-warn{color:var(--amarelo)}
.td-val.val-bad{color:var(--val-bad)}
.td-val.val-neutro{color:var(--texto)}
.td-delta{font:600 23px/1.2 var(--fonte-texto);color:var(--texto-dim);white-space:nowrap}
.td-delta.td-bom{color:var(--verde)}
.td-delta.td-ruim{color:var(--val-bad)}
.td-spark{width:100%;flex:1 1 auto;min-height:140px;display:block;margin-top:auto}
body.modo-mobile .td-grid{grid-template-columns:1fr;flex:none}
body.modo-mobile .td-val{font-size:54px}
body.modo-mobile .td-spark{flex:none;min-height:0;height:90px}

/* ---------- progresso da rotacao (estilo stories, so na TV) ---------- */
#tv-dots{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:10px}
.tvd{position:relative;width:12px;height:12px;border-radius:var(--r-pill);background:rgba(245,243,236,.16);overflow:hidden;flex:none}
.tvd.on{width:64px}
.tvd-fill{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--ouro);transform-origin:left;transform:scaleX(0);animation:tvdEnche linear forwards}
.tvd.on.cheio .tvd-fill{animation:none;transform:scaleX(1)}
@keyframes tvdEnche{to{transform:scaleX(1)}}
body.rotacao-pausada .tvd-fill{animation-play-state:paused}
body.modo-mobile #tv-dots, body.modo-sub #tv-dots{display:none}

/* ---------- entrada das cenas: stagger sutil dos blocos ---------- */
.cena.ativa > *{animation:cenaEntra .5s ease both}
.cena.ativa > :nth-child(2){animation-delay:90ms}
.cena.ativa > :nth-child(3){animation-delay:180ms}
.cena.ativa > :nth-child(4){animation-delay:270ms}
@keyframes cenaEntra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* ---------- vida das cenas: dados "acontecem" na entrada ----------
   Fills crescem ate o valor, aneis/gauges se desenham, sparklines se tracam.
   Keyframes so com from{}: animam ate o valor natural (inline style), entao
   nada de !important e o replay acontece a cada ativacao da cena. */
@keyframes fillCresce{from{width:0}}
@keyframes tracoDesenha{from{stroke-dashoffset:var(--arco,264)}}
@keyframes aparece{from{opacity:0}}
.cena.ativa .fx-bloco{animation:fillCresce .6s var(--ease-sai) both;animation-delay:calc(140ms + var(--i,0)*80ms)}
.cena.ativa .rk-fill{animation:fillCresce .7s var(--ease-sai) both;animation-delay:calc(120ms + var(--i,0)*70ms)}
/* corrida: todas as raias largam juntas (e uma corrida) */
.cena.ativa .rc-fill{animation:fillCresce .9s var(--ease-sai) both .2s}
.cena.ativa .rc-runner{animation:runnerVai .9s var(--ease-sai) both .2s}
@keyframes runnerVai{from{left:0}}
.cena.ativa .trilho .preenchido{animation:fillCresce .7s var(--ease-sai) both .15s}
.cena.ativa .anel-fill{animation:tracoDesenha .8s var(--ease-sai) both .15s}
.cena.ativa .td-spark polyline{animation:tracoDesenha .9s var(--ease-sai) both .1s}
.cena.ativa .td-spark polygon,.cena.ativa .td-spark circle{animation:aparece .45s ease-out both .6s}
/* urgencia ambiente: so o semaforo vermelho respira, so nas cenas da TV */
.cena .luz-vermelho{animation:luzPulsa 2.8s ease-in-out infinite}
@keyframes luzPulsa{0%,100%{box-shadow:0 0 21.6px rgba(185,28,28,.85)}50%{box-shadow:0 0 9px rgba(185,28,28,.4)}}
body.modo-mobile .cena.ativa > *{animation:none}
body.modo-mobile .cena.ativa .fx-bloco,body.modo-mobile .cena.ativa .rk-fill,body.modo-mobile .cena.ativa .rc-fill,body.modo-mobile .cena.ativa .rc-runner,body.modo-mobile .cena.ativa .trilho .preenchido,body.modo-mobile .cena.ativa .anel-fill,body.modo-mobile .cena.ativa .td-spark polyline,body.modo-mobile .cena.ativa .td-spark polygon,body.modo-mobile .cena.ativa .td-spark circle,body.modo-mobile .cena .luz-vermelho{animation:none}
@media (prefers-reduced-motion:reduce){
  .cena.ativa > *{animation:none}
  .tvd-fill{animation:none;transform:scaleX(1)}
  .cena.ativa .fx-bloco,.cena.ativa .rk-fill,.cena.ativa .rc-fill,.cena.ativa .rc-runner,.cena.ativa .trilho .preenchido,.cena.ativa .anel-fill,.cena.ativa .td-spark polyline,.cena.ativa .td-spark polygon,.cena.ativa .td-spark circle,.cena .luz-vermelho,.skel-bloco{animation:none}
}

/* ---------- cenas ---------- */
#cenas{position:relative;flex:1 1 auto;min-height:0}
.cena{position:absolute;inset:0;opacity:0;transition:opacity var(--fade) ease;z-index:1;display:flex;flex-direction:column;gap:var(--esp-bloco);min-height:0}
.cena.ativa{opacity:1;z-index:2}

.painel{
  position:relative;
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(245,197,66,.055),rgba(245,197,66,0) 46%),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 42%),
    rgba(17,17,27,.82);
  border:1px solid var(--linha-ouro);
  border-radius:21.6px;
  overflow:hidden;
}
.vazio{flex:1;display:flex;align-items:center;justify-content:center;padding:26px 0;color:var(--texto-apagado);font:500 28.1px var(--fonte-texto)}
.chip-mais{font:600 23.8px/1 var(--fonte-texto);color:var(--texto-dim);border:1px solid var(--linha-suave);border-radius:21.6px;padding:7.6px 17.3px;white-space:nowrap}
.dim{color:var(--texto-dim)}

/* aneis e gauges (svg) */
.anel,.gauge{width:100%;height:100%;display:block}
.anel{transform:rotate(-90deg)}
.anel-trilha{fill:none;stroke:rgba(245,243,236,.09);stroke-linecap:round}
.anel-fill{fill:none;stroke:var(--ouro);stroke-linecap:round}

/* avatares e fotos */
.avatar{width:50.8px;height:50.8px;border-radius:50%;border:2.4px solid rgba(245,197,66,.5);background:linear-gradient(180deg,#242434,#151521);display:inline-flex;align-items:center;justify-content:center;font:600 19.4px/1 var(--fonte-texto);letter-spacing:.05em;color:var(--texto);overflow:hidden;flex:none}
.avatar+.avatar{margin-left:-11.9px}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.extra{color:var(--ouro);font-weight:700;background:#1D1D2B}
.foto{border-radius:50%;border:3px solid rgba(245,197,66,.55);background:linear-gradient(180deg,#242434,#151521);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;color:var(--texto);flex:none}
.foto img{width:100%;height:100%;object-fit:cover;display:block}

/* pontos de semaforo */
.luz{width:20.5px;height:20.5px;border-radius:50%;flex:none}
.luz-verde{background:var(--verde);box-shadow:0 0 19.4px rgba(53,200,120,.6)}
.luz-amarelo{background:var(--amarelo);box-shadow:0 0 19.4px rgba(255,176,32,.55)}
.luz-vermelho{background:var(--vermelho);box-shadow:0 0 21.6px rgba(185,28,28,.85)}
.luz-neutra{background:var(--texto-apagado)}

/* ---------- cena 1: producao ---------- */
.grade-setores{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:var(--esp-bloco)}
.card-setor{display:flex;flex-direction:column;padding:24.8px 28.8px;min-height:0}
.cs-topo{display:flex;justify-content:space-between;align-items:center;padding-bottom:15.1px;border-bottom:1px solid var(--linha-suave)}
.cs-titulo{font:700 43.2px/1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.05em}
.cs-numeros{flex:1 1 auto;display:flex;align-items:center;justify-content:space-evenly;min-height:0}
.cs-div{width:1px;height:97.2px;background:var(--linha-suave)}
.metrica{display:flex;flex-direction:column;align-items:center;gap:5.4px}
.met-rotulo{font:600 23.8px/1 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-dim)}
.met-valor{font:700 101.5px/1 var(--fonte-titulo);font-variant-numeric:tabular-nums}
/* vermelho claro (val-bad) e crisp: legivel a 10ft (~7:1) e consistente com os
   demais numeros "ruins" da TV e do sub; o glow difuso borrava as bordas */
.met-vermelho{color:var(--val-bad)}
/* mini-tendencia de entregas do setor (entra so quando o fluxo mandar
   setores[].historico; ver renderProducao) */
.cs-spark{flex:none;height:58px;margin:2px 0 6px}
.cs-spark .td-spark{width:100%;height:100%;min-height:0;display:block;margin:0}
.cs-base{flex:none;display:flex;justify-content:space-between;align-items:center;gap:19.2px}
.avatares{display:flex;align-items:center}
.entregues{display:flex;align-items:baseline;gap:11.9px;white-space:nowrap}
.ent-rotulo{font:600 22.7px/1 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-dim)}
.ent-valor{font:700 43.2px/1 var(--fonte-titulo);color:var(--ouro)}
.faixa-total{flex:none;height:97.2px;display:flex;align-items:center;justify-content:space-between;padding:0 46.1px}
.ft-grupo{display:flex;align-items:baseline;gap:21.1px}
.ft-icone{width:58.3px;height:58.3px;color:var(--ouro);align-self:center}
.ft-icone svg{width:100%;height:100%;display:block}
.ft-rotulo{font:600 34.6px/1 var(--fonte-titulo);letter-spacing:.08em;text-transform:uppercase}
.ft-ouro{color:var(--ouro)}
.ft-valor{font:700 62.6px/1 var(--fonte-titulo);color:var(--ouro);font-variant-numeric:tabular-nums}
.ft-valor.val-warn{color:var(--amarelo)}
.ft-valor.val-bad{color:var(--val-bad)}
.ft-pend{font:600 32.4px/1 var(--fonte-texto);color:var(--texto-dim);letter-spacing:.04em;text-transform:none}
.pend{font:600 29.2px/1.1 var(--fonte-texto);color:var(--texto-dim);letter-spacing:.03em;text-transform:none}

/* ---------- cena 2: tickets e apontamento ---------- */
.cena-tickets{display:grid;grid-template-columns:46fr 54fr;gap:var(--esp-bloco)}
.painel-bloco{padding:30.2px 32.6px;display:flex;flex-direction:column;min-height:0}
.pt-topo{flex:none;display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:17.3px;border-bottom:1px solid var(--linha-suave)}
.pt-titulo{font:800 44px/1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.04em}
.pt-total{display:flex;align-items:baseline;gap:13px}
.pt-total .rot{font:600 24.8px/1 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro)}
.pt-total .val{font:700 54px/1 var(--fonte-titulo);font-variant-numeric:tabular-nums}
.fase-icone svg{width:78%;height:78%;display:block}
.pt-rodape{flex:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));border-top:1px solid var(--linha-suave);padding-top:18.4px}
.kpi{display:flex;flex-direction:column;align-items:center;gap:7.6px}
.kpi+.kpi{border-left:1px solid var(--linha-suave)}
.kpi .rot{font:700 20px/1.15 var(--fonte-texto);letter-spacing:.06em;text-transform:uppercase;color:var(--ouro)}
.kpi .val{font:700 45.4px/1 var(--fonte-titulo);font-variant-numeric:tabular-nums}
.pa-topo{flex:none;display:flex;align-items:baseline;gap:23px;padding-bottom:17.3px;border-bottom:1px solid var(--linha-suave)}
.pa-titulo{font:800 44px/1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.04em}
.pa-sub{font:600 24.8px/1 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro);margin-top:10.8px}
.pa-corpo{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;column-gap:15.4px}
.pa-col{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;min-height:0}
.anel-mini{display:flex;flex-direction:column;align-items:center;gap:9.7px}
.anel-mini .rot{font:600 24.3px/1 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-dim)}
.anel-caixa{position:relative;width:136.1px;height:136.1px}
.anel-caixa .pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 33.5px/1 var(--fonte-titulo);font-variant-numeric:tabular-nums}
.pa-centro{display:flex;align-items:center;justify-content:center;min-height:0}
.donut-caixa{position:relative;width:399.6px;height:399.6px}
.donut-caixa .centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px}
.donut-caixa .pct{font:700 105.8px/1 var(--fonte-titulo);font-variant-numeric:tabular-nums}
.donut-caixa .horas{font:600 34.6px/1 var(--fonte-titulo);letter-spacing:.1em;color:var(--texto-dim);font-variant-numeric:tabular-nums}

.funil{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:14px;padding:14px 0 6px}
.fx-linha{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;column-gap:20px;row-gap:13px;min-height:0;flex:1 1 0}
.fx-rotulo{display:flex;align-items:center;gap:17.3px;min-width:0}
.fase-icone{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--ouro);opacity:.92;grid-row:1/3}
.fase-nome{font:700 29px/1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:center;min-width:0}
.fase-sub{display:inline;font:400 21px/1 var(--fonte-texto);color:var(--texto-dim);margin-left:12px;text-transform:none;letter-spacing:0}
.fase-qtd{font:800 44px/1 var(--fonte-titulo);text-align:right;font-variant-numeric:tabular-nums;align-self:center}
.fase-qtd.ouro{color:var(--ouro)}
.fx-cell{position:relative;grid-column:2/-1;height:12px;min-height:0}
.fx-bloco{position:absolute;left:0;top:0;bottom:0;width:var(--wt,80%);border-radius:var(--r-pill);background:linear-gradient(90deg,rgba(245,197,66,.4),rgba(245,197,66,.78))}
.fx-bloco.forte{background:linear-gradient(90deg,rgba(245,197,66,.6),var(--ouro));box-shadow:0 0 17.3px rgba(245,197,66,.4)}
.fx-cell::before{content:'';position:absolute;inset:0;border-radius:var(--r-pill);background:rgba(255,255,255,.06)}

/* ---------- cena 3: cultura e agenda ---------- */
.cena-cultura{flex-direction:row;gap:var(--esp-bloco);align-items:stretch}
/* a lista de reunioes cresce e cada linha se expande, no mesmo ritmo dos rankings */
.cena-cultura .lista-reunioes{flex:1 1 auto;min-height:0}
.cena-cultura .reuniao{flex:1 1 0}
.cena-cultura .painel-bloco{flex:1 1 0;min-width:0;max-height:100%;padding:28.1px 30.7px;display:flex;flex-direction:column}
.lp-item .foto{flex:none}
.sec-cab{flex:none;display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:17.3px;border-bottom:1px solid var(--linha-suave)}
.sec-titulo{font:800 44px/1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.04em}
.lp-lista{flex:none;display:flex;flex-direction:column;justify-content:flex-start}
.lp-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:21.1px;padding:8px 0}
.lp-item + .lp-item{border-top:1px solid rgba(245,243,236,.06)}
.lp-item .foto{width:66px;height:66px;font:600 24px/1 var(--fonte-texto)}
.lp-info{display:flex;flex-direction:column;gap:6.5px;min-width:0}
.lp-nome{font:600 33px/1.05 var(--fonte-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-setor{font:400 23px/1 var(--fonte-texto);color:var(--texto-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-chip{font:700 23px/1 var(--fonte-titulo);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro);border:1px solid rgba(245,197,66,.4);background:rgba(245,197,66,.08);border-radius:var(--r-pill);padding:9px 15px;white-space:nowrap}
.bv-titulo{flex:none;font:800 25px/1 var(--fonte-titulo);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro);margin:12px 0 0;padding-top:13px;border-top:1px solid var(--linha-suave)}
.lista-reunioes{flex:none;display:flex;flex-direction:column;justify-content:flex-start;gap:17px;margin-top:20px}
.reuniao{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:25px;border:1px solid var(--linha-suave);border-radius:17.3px;background:rgba(255,255,255,.025);padding:16.2px 25px;min-height:0}
.re-quando{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding-right:23px;border-right:1px solid var(--linha-suave)}
.re-dia{font:700 17px/1 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-dim)}
.re-hora{font:700 44px/1 var(--fonte-titulo);color:var(--ouro);font-variant-numeric:tabular-nums}
.re-aviso{flex:none;font:600 26px/1.2 var(--fonte-texto);color:var(--texto-dim);padding:16px 0 2px}
.re-corpo{display:flex;flex-direction:column;gap:10.8px;min-width:0}
.re-titulo{font:600 33px/1.15 var(--fonte-texto);min-width:0}
.re-meta{display:flex;align-items:center;gap:17.3px;min-width:0}
.pino{width:27px;height:27px;color:var(--ouro);flex:none;display:flex}
.re-sala{font:400 27px/1 var(--fonte-texto);color:var(--texto-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selo{font:700 20.5px/1 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;padding:7.6px 15px;border-radius:var(--r-pill);border:1px solid;white-space:nowrap;flex:none;margin-left:auto}
.selo-presencial{color:var(--ouro);border-color:rgba(245,197,66,.45)}
.selo-online{color:#8AB4F8;border-color:rgba(138,180,248,.45)}

/* ---------- cena 4: metas e onboarding ---------- */
.cena-metas{display:grid;grid-template-rows:4.6fr 5.4fr;gap:var(--esp-bloco)}
.pm{padding:27px 32.6px;display:flex;flex-direction:column;min-height:0}
.pm-titulo{flex:none;font:800 40px/1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.05em;padding-bottom:18.4px;border-bottom:1px solid var(--linha-suave);display:flex;justify-content:space-between;align-items:center;gap:19.2px}
/* gauge<->barras: mesmo vao aqui e no pc-meta da cena comercial (72px) */
.meta-corpo{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:auto minmax(0,844.8px);align-items:center;justify-content:center;column-gap:72px}
.gauge-caixa{position:relative;width:248.4px;height:248.4px}
.gauge-centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.gauge-centro .pct{font:700 71.3px/1 var(--fonte-titulo);font-variant-numeric:tabular-nums}
.gauge-centro .mes{font:600 16px/1 var(--fonte-texto);letter-spacing:.1em;text-transform:uppercase;color:var(--ouro)}
.barras{display:flex;flex-direction:column;gap:34.6px;min-width:0}
.barra .b-topo{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11.9px}
.b-rotulo{font:600 27px/1 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-dim)}
.b-rotulo em{font:400 23.8px/1 var(--fonte-texto);font-style:normal;letter-spacing:.06em;text-transform:none;color:var(--texto-apagado);margin-left:13.4px}
.b-valor{font:700 42.1px/1 var(--fonte-titulo);font-variant-numeric:tabular-nums}
.trilho{height:18.4px;border-radius:10.8px;background:rgba(245,243,236,.08);overflow:hidden;position:relative}
.trilho .preenchido{height:100%;border-radius:10.8px;background:linear-gradient(90deg,#C9982F,var(--ouro))}
.barra-atual .preenchido{box-shadow:0 0 17.3px rgba(245,197,66,.45)}
/* ritmo do mes: onde a meta deveria estar hoje, e tom por gap contra o ritmo */
.ritmo-tick{position:absolute;top:0;bottom:0;width:3px;border-radius:2px;background:rgba(245,243,236,.85);box-shadow:0 0 8px rgba(0,0,0,.5)}
.ritmo-rot{font:400 21px/1 var(--fonte-texto);font-style:normal;letter-spacing:.04em;text-transform:none;color:var(--texto-apagado);margin-left:14px}
.b-valor.val-warn{color:var(--amarelo)}
.b-valor.val-bad{color:var(--val-bad)}
.rc-placar .val.val-warn{color:var(--amarelo)}
.rc-placar .val.val-bad{color:var(--val-bad)}
/* onboarding: a tabela e a estrela (todos os clientes, prioridade) e fica com
   toda a altura livre; as saidas viram UMA linha compacta embaixo */
.po{flex:1 1 auto;padding:24px 32.6px;display:flex;flex-direction:column;min-height:0}
.psc{flex:none;min-height:0;padding:18px 32.6px 20px;display:flex;flex-direction:column}
.sc-grid{flex:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:14px;padding-top:14px}
.sc-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;border:1px solid var(--linha-suave);border-radius:14px;background:rgba(255,255,255,.025);padding:10px 18px}
.sc-data{display:flex;flex-direction:column;align-items:center;gap:5px;padding-right:20px;border-right:1px solid var(--linha-suave)}
.sc-data b{font:800 33px/1 var(--fonte-titulo);color:var(--ouro);font-variant-numeric:tabular-nums}
.sc-data em{font-style:normal;font:600 17px/1 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-dim)}
.sc-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.sc-cli{font:600 26px/1.1 var(--fonte-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-freela{font:400 21px/1 var(--fonte-texto);color:var(--texto-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-quando{font:700 22px/1 var(--fonte-texto);color:var(--ouro);white-space:nowrap}
.tabela{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-top:4.3px}
.t-head,.t-linha{display:grid;grid-template-columns:60px minmax(0,1fr) 250px 120px 170px 56px;align-items:center;gap:19.2px}
.com-entrada .t-linha,.com-entrada .t-head{grid-template-columns:60px minmax(0,1fr) 150px 250px 120px 170px 56px}
.t-entrada{font:600 27px/1 var(--fonte-texto);color:var(--ouro);text-align:center;letter-spacing:.04em;white-space:nowrap}
.t-head{flex:none;font:600 21px/1 var(--fonte-texto);letter-spacing:.07em;text-transform:uppercase;color:rgba(245,197,66,.8);padding:10.8px 0 13px;border-bottom:1px solid var(--linha-suave);text-align:center;display:grid;grid-template-columns:60px minmax(0,1fr) 250px 120px 170px 56px;gap:14px}
.t-head .esq{text-align:left}
/* overflow:hidden permite rolagem programatica (rolagemOnboarding) sem
   barra de scroll aparecendo na TV */
.t-linhas{flex:1 1 auto;min-height:0;display:grid;grid-auto-rows:auto;align-content:start;overflow:hidden}
.t-linha{min-height:0;padding:4.3px 0}
.t-linha+.t-linha{border-top:1px solid rgba(245,243,236,.06)}
.cli-chip{width:49.7px;height:49.7px;border-radius:50%;border:1px solid var(--linha-ouro);background:rgba(245,197,66,.05);color:var(--ouro);display:flex;align-items:center;justify-content:center;font:700 25.9px/1 var(--fonte-titulo)}
.cli-nome{font:600 32px/1.1 var(--fonte-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-estagio{font:700 25px/1 var(--fonte-titulo);letter-spacing:.07em;text-transform:uppercase;color:var(--ouro);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-num{font:700 36px/1 var(--fonte-titulo);text-align:center;font-variant-numeric:tabular-nums}
.t-atras{color:var(--texto-dim)}
.t-atras.sem-verde{color:var(--val-good)}
.t-atras.sem-amarelo{color:var(--val-warn)}
.t-atras.sem-vermelho{color:var(--val-bad)}
.t-luz{display:flex;justify-content:center}


/* ---------- cena 5: meta da agencia e corrida ---------- */
.cena-comercial{gap:var(--esp-bloco)}
.cena-comercial .gauge-caixa{width:178px;height:178px}
.cena-comercial .gauge-centro .pct{font-size:38px}
.cena-comercial .barras{gap:22px}
.pc-meta{flex:none;display:grid;grid-template-columns:auto minmax(0,880px);column-gap:72px;justify-content:center;align-items:center;padding:16px 0 4px}
.cr-sub{flex:none;font:800 26px/1 var(--fonte-titulo);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro);margin-top:8px;padding-top:14px;border-top:1px solid var(--linha-suave)}
.painel-comercial{flex:1 1 auto;min-height:0;padding:22px 32px 16px;display:flex;flex-direction:column}
.cr-topo{flex:none;display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--linha-suave)}
.cr-tit{display:flex;align-items:baseline;gap:18px}
.cr-titulo{font:800 44px/1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.04em}
.cr-comp{font:700 23px/1 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro)}
.rc-lista{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly;gap:12px;padding-top:8px}
.rc-card{flex:1 1 0;min-height:0;display:grid;grid-template-columns:60px 118px minmax(0,1fr) 168px;align-items:center;gap:26px;border:1px solid var(--linha-suave);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));padding:12px 28px}
.rc-medal{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 26px/1 var(--fonte-titulo);border:2.5px solid}
.rc-medal.m1{color:var(--ouro);border-color:var(--ouro);background:rgba(245,197,66,.1);box-shadow:0 0 18px rgba(245,197,66,.35)}
.rc-medal.m2{color:#C9CDD6;border-color:#C9CDD6;background:rgba(201,205,214,.08)}
.rc-medal.m3{color:#C98F52;border-color:#C98F52;background:rgba(201,143,82,.1)}
.rc-medal.m4{color:var(--texto-dim);border-color:var(--linha-suave)}
.rc-sprite{position:relative;width:118px;height:112px;display:flex;align-items:flex-end;justify-content:center}
.spr-vp{display:block;position:relative;overflow:hidden;width:var(--s,106px);height:var(--s,106px);flex:none}
.spr-vp img{display:block;height:var(--s,106px);width:auto;animation:sprAnda .72s steps(4) infinite;image-rendering:pixelated}
.parou img{animation:none}
.rc-sprite .coroa{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:34px;height:34px;color:var(--ouro);filter:drop-shadow(0 0 10px rgba(245,197,66,.7));z-index:2}
.rc-sprite .foto{width:96px;height:96px;font:700 34px/1 var(--fonte-texto)}
@keyframes sprAnda{to{transform:translateX(-100%)}}
.rc-mid{display:flex;flex-direction:column;min-width:0;padding-right:34px}
.rc-nome{font:800 30px/1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-marcos{position:relative;height:27px}
.rc-marco{position:absolute;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px}
.rc-marco.b0{transform:none}
.rc-marco.b100{transform:translateX(-100%)}
.rc-marco .lb{font:600 17px/1 var(--fonte-texto);color:var(--texto-dim);letter-spacing:.04em}
.rc-marco .tick{width:2px;height:9px;background:rgba(245,243,236,.25)}
.rc-bar{position:relative;height:14px;border-radius:9px;background:rgba(255,255,255,.08);margin-bottom:6px}
.rc-fill{position:absolute;left:0;top:0;bottom:0;border-radius:9px;background:linear-gradient(90deg,#8f7220,var(--ouro));box-shadow:0 0 14px rgba(245,197,66,.4)}
.rc-runner{position:absolute;bottom:10px;transform:translateX(-50%);z-index:2}
.rc-runner .spr-vp{--s:58px}
.rc-trofeu{position:absolute;right:0;bottom:9px;transform:translateX(46%);width:46px;height:46px;color:rgba(245,243,236,.32);z-index:1}
.rc-trofeu svg{width:100%;height:100%}
.rc-trofeu.aceso{color:var(--ouro);filter:drop-shadow(0 0 12px rgba(245,197,66,.8))}
.rc-placar{text-align:right;display:flex;flex-direction:column;gap:5px}
.rc-placar .val{font:800 58px/1 var(--fonte-titulo);font-variant-numeric:tabular-nums}
.rc-placar .sub{font:400 22px/1 var(--fonte-texto);color:var(--texto-dim)}

/* ---------- cena 6: indicadores da carteira ---------- */
.cena-kpis{gap:var(--esp-bloco)}
.pk-grid{flex:none;height:300px;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:var(--esp-bloco)}
.pk-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:22px 16px;text-align:center}
.pk-card .rot{font:700 24px/1.15 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro)}
.pk-card .val{font:800 86px/1 var(--fonte-titulo);font-variant-numeric:tabular-nums}
.pk-card .sub{font:400 22px/1 var(--fonte-texto);color:var(--texto-dim)}
.pk-grid.cheia{flex:1 1 auto;height:auto;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:var(--esp-bloco)}
.pk-grid.cheia .pk-card{grid-column:span 2;gap:26px}
.pk-grid.cheia .pk-card:nth-child(4){grid-column:2 / span 2}
.pk-grid.cheia .pk-card .rot{font-size:30px}
.pk-grid.cheia .pk-card .val{font-size:128px}
.pk-grid.cheia .pk-card .sub{font-size:27px}
.pk-baixo{flex:1 1 auto;min-height:0;display:flex;gap:var(--esp-bloco)}
.pp{flex:1 1 0;min-width:0;min-height:0;padding:24px 32px;display:flex;flex-direction:column}
.cli-ini{width:76px;height:76px;border-radius:50%;background:rgba(245,197,66,.09);border:1px solid rgba(245,197,66,.35);color:var(--ouro);display:flex;align-items:center;justify-content:center;font:800 30px/1 var(--fonte-titulo);flex:none}
.dk-lista{flex:none;display:flex;flex-direction:column;justify-content:flex-start}
.dk-item{display:flex;align-items:baseline;justify-content:space-between;gap:22px;padding:10px 0}
.dk-item + .dk-item{border-top:1px solid rgba(245,243,236,.06)}
.dk-rotulo{font:600 27px/1.15 var(--fonte-texto);color:var(--texto-dim);min-width:0}
.dk-dir{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0}
.dk-valor{font:800 38px/1 var(--fonte-titulo);color:var(--ouro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.dk-sub{font:400 21px/1 var(--fonte-texto);color:var(--texto-dim)}
/* nos cards inferiores da carteira, as listas se espalham pela altura em vez de deixar vazio embaixo */
.pk-baixo .pp .lp-lista{flex:1 1 auto;min-height:0;justify-content:space-evenly}
.pk-baixo .pp .dk-lista{flex:1 1 auto;min-height:0;justify-content:space-evenly}

/* ---------- cena: atencao agora (gestao por excecao) ---------- */
.painel-atencao{flex:1 1 auto;min-height:0;padding:30.2px 34.6px;display:flex;flex-direction:column}
.at-topo{flex:none;display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:17.3px;border-bottom:1px solid var(--linha-suave)}
.at-titulo{font:800 51.8px/1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.05em}
.at-grid{flex:1 1 auto;min-height:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:24px;padding-top:26px}
.at-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;text-align:center;border:1px solid;border-radius:19.4px;padding:26px 22px;min-width:0;min-height:0}
.at-card.at-bad{border-color:rgba(248,113,113,.42);background:rgba(185,28,28,.08)}
.at-card.at-warn{border-color:rgba(255,176,32,.42);background:rgba(255,176,32,.07)}
.at-ic{width:62px;height:62px;display:flex;flex:none}
.at-ic svg{width:100%;height:100%;display:block}
.at-card.at-bad .at-ic,.at-card.at-bad .at-val{color:var(--val-bad)}
.at-card.at-warn .at-ic,.at-card.at-warn .at-val{color:var(--amarelo)}
.at-val{font:800 104px/1 var(--fonte-titulo);font-variant-numeric:tabular-nums}
.at-tit{font:700 29px/1.12 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.04em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.at-sub{font:400 22px/1.3 var(--fonte-texto);color:var(--texto-dim);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body.modo-mobile .at-grid{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;gap:16px}
body.modo-mobile .at-card{min-height:220px}
body.modo-mobile .at-val{font-size:70px}

/* ---------- cena 7: mural ---------- */
.painel-mural{flex:1 1 auto;min-height:0;padding:30.2px 34.6px;display:flex;flex-direction:column}
.mu-topo{flex:none;display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:17.3px;border-bottom:1px solid var(--linha-suave)}
.mu-titulo{font:700 51.8px/1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.05em}
.mu-lista{flex:1 1 auto;min-height:0;display:grid;grid-auto-rows:minmax(0,1fr);gap:19.4px;margin-top:21.6px}
.mu-item{border:1px solid var(--linha-suave);border-radius:19.4px;background:rgba(255,255,255,.025);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30.7px;padding:10.8px 34.6px;min-height:0}
.mu-icone{width:71.3px;height:71.3px;border-radius:16.2px;border:1px solid var(--linha-ouro);background:rgba(245,197,66,.06);display:flex;align-items:center;justify-content:center;color:var(--ouro);flex:none}
.mu-midia.mu-logo{width:76px;height:76px;flex:none;border-radius:16px;background:#F5F3EC;display:flex;align-items:center;justify-content:center;padding:9px;overflow:hidden}
.mu-midia.mu-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.mu-midia .mu-ic{display:none}
.mu-midia.erro img{display:none}
.mu-midia.erro{background:transparent;border:1px solid rgba(245,197,66,.28)}
.mu-midia.erro .mu-ic{display:flex;color:var(--ouro);width:100%;height:100%;align-items:center;justify-content:center;padding:9px}
.mu-icone svg{width:56%;height:56%;display:block}
.mu-item .foto{width:71.3px;height:71.3px;font:600 25.9px/1 var(--fonte-texto)}
.mu-corpo{min-width:0}
.mu-tit{font:700 35.6px/1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.05em;margin-bottom:9.7px}
.mu-frase{font:400 31.3px/1.3 var(--fonte-texto);color:rgba(245,243,236,.88);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mu-autor{font:600 27px/1 var(--fonte-texto);color:var(--ouro);margin-top:8.6px}
.mu-quando{font:500 24.8px/1 var(--fonte-texto);color:var(--texto-apagado);white-space:nowrap;align-self:flex-start;margin-top:13px}
/* avisos recentes (hoje/ontem/há até 3 dias) ganham destaque dourado */
.mu-quando.recente{color:var(--ouro);font-weight:600}

/* ---------- cena 8: celebracao ---------- */
.cena-celebracao{align-items:center;justify-content:center}
#confetes{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.confete{position:absolute;top:-43.2px;width:10.8px;height:5.4px;border-radius:1.6px;animation:cair linear infinite}
.cena-celebracao:not(.ativa) .confete{animation-play-state:paused}
@keyframes cair{0%{transform:translateY(0) rotate(0deg)}100%{transform:translateY(1209.6px) rotate(600deg)}}
#celebra-conteudo{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.cartao-celebra{position:relative;width:min(1113.6px,1274.4px);padding:64.8px 76.8px;border-radius:25.9px;text-align:center;
  border:1px solid rgba(245,197,66,.38);
  background:radial-gradient(90% 130% at 50% 0%,rgba(245,197,66,.10),rgba(245,197,66,0) 55%),rgba(15,15,24,.92);
  box-shadow:0 0 97.2px rgba(245,197,66,.10)}
.ce-midia{display:flex;align-items:center;justify-content:center;width:432px;height:237.6px;margin:0 auto 30.2px;background:#F5F3EC;border-radius:19.4px;padding:23.8px}
.ce-midia img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.ce-midia.medalhao{width:291.6px;height:291.6px;border-radius:50%;padding:0;background:rgba(245,243,236,.06);border:5.4px solid var(--ouro);box-shadow:0 0 54px rgba(245,197,66,.35),inset 0 0 32.4px rgba(0,0,0,.35);overflow:hidden}
.ce-midia.medalhao img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:50%}
.ce-midia.erro{display:none}
.ce-midia:not(.erro)~.ce-icone{display:none}
.ce-icone{display:flex;align-items:center;justify-content:center;width:97.2px;height:97.2px;margin:0 auto 25.9px;color:var(--ouro);filter:drop-shadow(0 0 25.9px rgba(245,197,66,.45))}
.ce-icone svg{width:100%;height:100%;display:block}
.ce-titulo{font:700 51.8px/1.1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.04em}
.ce-destaque{font:700 129.6px/1.05 var(--fonte-titulo);color:var(--ouro);margin:15.1px 0 13px}
.ce-sub{font:500 36.7px/1.2 var(--fonte-texto);color:var(--texto-dim)}

/* ---------- cena 5: rankings de clientes ---------- */
.grade-rankings{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--esp-bloco);min-height:0}
.rk-col{display:flex;flex-direction:column;padding:26px 30px 22px;min-height:0}
.rk-cab{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:18px}
.rk-titulo{font:700 33px/1.05 var(--fonte-titulo);letter-spacing:.02em;text-transform:uppercase}
.rk-janela{font:600 19px/1 var(--fonte-texto);color:var(--ouro);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:rgba(245,197,66,.1);border:1px solid var(--linha-ouro);border-radius:var(--r-pill);padding:7px 14px}
.rk-lista{flex:1;display:flex;flex-direction:column;gap:14px;min-height:0}
.rk-item{flex:1;display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:14px;row-gap:9px;background:rgba(255,255,255,.025);border:1px solid var(--linha-suave);border-radius:15px;padding:13px 18px 12px;min-height:0}
.rk-pos{grid-row:1/3;font:700 34px/1 var(--fonte-titulo);color:var(--texto-apagado);text-align:center}
.rk-item:first-child .rk-pos{color:var(--ouro)}
.rk-main{grid-row:1/3;min-width:0}
.rk-nome{font:600 27px/1.1 var(--fonte-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-sub{font:500 19px/1.2 var(--fonte-texto);color:var(--texto-dim);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-dir{grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.rk-val{font:700 34px/1 var(--fonte-titulo);color:var(--ouro)}
.rk-valsub{font:500 17px/1 var(--fonte-texto);color:var(--texto-dim);white-space:nowrap}
.rk-barra{grid-column:2/-1;height:7px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);overflow:hidden}
.rk-fill{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,rgba(245,197,66,.55),var(--ouro))}
/* variantes semanticas: warn (atencao) e bad (ruim), aplicadas por threshold no JS */
.rk-val.val-warn{color:var(--amarelo)}
.rk-val.val-bad{color:var(--val-bad)}
.rk-fill.fill-warn{background:linear-gradient(90deg,rgba(255,176,32,.5),var(--amarelo))}
.rk-fill.fill-bad{background:linear-gradient(90deg,rgba(185,28,28,.55),#EF4444)}

/* comparativo do apontamento junto ao donut */
.donut-coluna{display:flex;flex-direction:column;align-items:center;gap:16px}
.pa-comp{display:flex;align-items:baseline;gap:8px;font:500 19.4px/1 var(--fonte-texto);color:var(--texto-dim);white-space:nowrap}
.pa-comp .cp-seta{font-size:16px;line-height:1}
.pa-comp .cp-num{font:700 25px/1 var(--fonte-titulo)}
.pa-comp.sobe .cp-seta,.pa-comp.sobe .cp-num{color:var(--verde)}
.pa-comp.desce .cp-seta,.pa-comp.desce .cp-num{color:var(--val-bad)}
.pa-comp.neutro .cp-seta,.pa-comp.neutro .cp-num{color:var(--texto-dim)}

/* botao de pausa da rotacao: alvo clicavel para o cursor da TV */
#btn-pausa{position:fixed;right:40px;bottom:34px;z-index:80;width:64px;height:64px;border-radius:50%;border:1px solid var(--linha-suave);background:rgba(17,17,27,.72);color:var(--texto-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.45;transition:opacity .2s,border-color .2s,color .2s}
#btn-pausa:hover{opacity:1;border-color:var(--linha-ouro);color:var(--ouro)}
#btn-pausa.pausado{opacity:1;border-color:var(--linha-ouro);color:var(--ouro)}
#btn-pausa svg{width:26px;height:26px;display:block}
#btn-pausa[hidden]{display:none}
body.modo-mobile #btn-pausa{display:none}

/* ---------- modo mobile (retrato) ---------- */
#dots{display:none}
html.modo-mobile, html.modo-mobile body{width:auto;height:auto;overflow-x:hidden;overflow-y:auto}
body.modo-mobile{zoom:.5}
body.modo-mobile #stage{position:static;width:auto;height:auto;transform:none!important}
/* position:relative + z-index (nao static): sem eles o palco perde o contexto
   de empilhamento e todo conteudo fora de .painel fica ATRAS do #fundo opaco */
body.modo-mobile #palco{position:relative;z-index:2;height:auto;padding:0 18px 270px}
body.modo-mobile #moldura{position:static;height:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:20px 6px}
body.modo-mobile #moldura > *{position:static!important}
body.modo-mobile #lua{display:none}
body.modo-mobile #cenas{position:static;height:auto;inset:auto}
body.modo-mobile .cena{position:static;display:none;opacity:1;height:auto;inset:auto;flex-direction:column!important;gap:16px}
body.modo-mobile .cena.ativa{display:flex}
body.modo-mobile .cena-tickets.ativa{display:flex}
body.modo-mobile .painel, body.modo-mobile .painel-bloco, body.modo-mobile .po, body.modo-mobile .psc, body.modo-mobile .pp, body.modo-mobile .painel-comercial{flex:none!important;height:auto}
body.modo-mobile .grade-setores{grid-template-columns:1fr;grid-auto-rows:auto;gap:16px}
body.modo-mobile .faixa-total{flex-wrap:wrap;gap:14px;height:auto;padding:16px 22px}
body.modo-mobile .pa-corpo{display:flex;flex-direction:column;gap:24px;align-items:center}
body.modo-mobile .pa-col{display:flex;flex-direction:row!important;gap:22px;justify-content:center;width:100%}
body.modo-mobile .meta-corpo, body.modo-mobile .pc-meta{display:flex;flex-direction:column;gap:24px;padding:16px 0;justify-content:center;align-items:center}
body.modo-mobile .barras{width:100%}
body.modo-mobile .funil{flex:none;gap:12px}
body.modo-mobile .fx-linha{flex:none;min-height:76px;grid-template-columns:auto minmax(0,1fr) auto;column-gap:14px;row-gap:9px}
body.modo-mobile .fx-cell{height:10px}
body.modo-mobile .fase-nome{font-size:25px}
body.modo-mobile .fase-icone{width:38px;height:38px}
body.modo-mobile .rc-lista{flex:none}
body.modo-mobile .rc-card{flex:none;min-height:140px;grid-template-columns:44px 88px minmax(0,1fr) 116px;gap:14px;padding:10px 16px}
body.modo-mobile .rc-sprite{width:88px;height:88px}
body.modo-mobile .rc-sprite .spr-vp{--s:80px}
body.modo-mobile .rc-placar .val{font-size:42px}
body.modo-mobile .pk-grid, body.modo-mobile .pk-grid.cheia{height:auto;grid-template-columns:1fr 1fr;grid-auto-rows:auto}
body.modo-mobile .pk-grid.cheia .pk-card{grid-column:auto!important}
body.modo-mobile .pk-grid.cheia .pk-card .val{font-size:86px}
body.modo-mobile .pk-card{min-height:230px}
body.modo-mobile .pk-baixo{flex-direction:column}
body.modo-mobile .sc-grid{grid-template-columns:1fr;grid-auto-rows:auto}
body.modo-mobile .com-entrada .t-linha, body.modo-mobile .com-entrada .t-head{grid-template-columns:48px minmax(0,1fr) 92px 76px 100px 40px}
body.modo-mobile .com-entrada .t-linha > :nth-child(4), body.modo-mobile .com-entrada .t-head > :nth-child(4){display:none}
body.modo-mobile .tabela:not(.com-entrada) .t-linha, body.modo-mobile .tabela:not(.com-entrada) .t-head{grid-template-columns:48px minmax(0,1fr) 76px 100px 40px}
body.modo-mobile .tabela:not(.com-entrada) .t-linha > :nth-child(3), body.modo-mobile .tabela:not(.com-entrada) .t-head > :nth-child(3){display:none}
body.modo-mobile .t-head{font-size:17px}
body.modo-mobile .cli-nome{font-size:27px;white-space:normal;line-height:1.1}
body.modo-mobile .t-entrada{font-size:21px}
body.modo-mobile .t-num{font-size:30px}
body.modo-mobile .t-linhas{grid-auto-rows:auto}
body.modo-mobile .t-linha{min-height:96px}
body.modo-mobile .lista-reunioes, body.modo-mobile .lp-lista, body.modo-mobile .dk-lista, body.modo-mobile .mu-lista{flex:none}
body.modo-mobile .cena-cultura .reuniao{flex:none}
body.modo-mobile .lp-nome, body.modo-mobile .sc-cli, body.modo-mobile .dk-valor{white-space:normal;line-height:1.15;overflow:visible;text-overflow:clip}
body.modo-mobile .pk-grid .pk-card:last-child:nth-child(odd){grid-column:span 2}
body.modo-mobile .rc-marcos{display:none}
body.modo-mobile .rc-mid{padding-right:8px}
body.modo-mobile .rc-nome{margin-bottom:12px}
body.modo-mobile #celebra-conteudo{flex:none;width:100%}
body.modo-mobile .cartao-celebra{width:100%;max-width:100%}
body.modo-mobile .cena-celebracao{min-height:1500px;justify-content:center}
body.modo-mobile .rc-runner{display:none}
body.modo-mobile .fx-bloco{width:var(--wt,80%)}
body.modo-mobile .donut-caixa{width:280px;height:280px}
body.modo-mobile .donut-caixa .pct{font-size:52px}
body.modo-mobile .donut-caixa .horas{font-size:20px}
body.modo-mobile .mu-lista{gap:16px;display:flex;flex-direction:column;grid-auto-rows:auto}
body.modo-mobile .mu-item{flex:none!important;min-height:0}
body.modo-mobile .card-setor{padding:18px 24px 16px}
body.modo-mobile .cs-titulo{font-size:34px}
body.modo-mobile .met-valor{font-size:60px}
body.modo-mobile .met-rotulo{font-size:19px}
body.modo-mobile .cs-numeros{gap:10px;padding:10px 0 12px}
body.modo-mobile .card-setor .avatar, body.modo-mobile .card-setor .foto{width:46px;height:46px}
body.modo-mobile .faixa-total{flex-wrap:nowrap;justify-content:space-between;gap:10px;padding:18px 24px}
body.modo-mobile .ft-grupo{gap:10px}
body.modo-mobile .ft-rotulo{font-size:19px;letter-spacing:.05em}
body.modo-mobile .ft-valor{font-size:40px}
body.modo-mobile .ft-icone{width:36px;height:36px}
body.modo-mobile .ft-pend{font-size:26px}
body.modo-mobile .mu-item{position:relative;grid-template-columns:auto minmax(0,1fr);gap:20px;padding:18px 22px 16px;align-items:flex-start}
body.modo-mobile .mu-quando{position:absolute;top:16px;right:20px;margin:0;font-size:18px}
body.modo-mobile .mu-tit{font-size:28px;line-height:1.12;padding-right:130px;margin-bottom:10px}
body.modo-mobile .mu-frase{-webkit-line-clamp:unset;line-clamp:unset;max-height:none;overflow:visible;display:block}
body.modo-mobile .mu-midia.mu-logo{width:60px;height:60px;border-radius:13px;padding:7px}
body.modo-mobile .mu-icone{width:60px;height:60px}
body.modo-mobile .mu-item .foto{width:60px;height:60px}
body.modo-mobile #dots{display:flex;position:fixed;left:50%;transform:translateX(-50%);bottom:24px;align-items:center;gap:20px;z-index:99;background:rgba(11,11,18,.88);border:1px solid rgba(245,197,66,.3);border-radius:var(--r-pill);padding:14px 26px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,.5);white-space:nowrap}
.dots-linha{display:flex;align-items:center;gap:13px}
/* .dot e <span> na TV (decorativo) e <button> no sub (pular pro slide); o reset
   neutraliza a aparencia nativa de botao mantendo a bolinha identica */
.dot{width:15px;height:15px;border-radius:50%;background:rgba(245,243,236,.25);border:0;padding:0;appearance:none;-webkit-appearance:none;display:block}
.dot.on{background:var(--ouro);box-shadow:0 0 12px rgba(245,197,66,.9);transform:scale(1.25)}
.dots-rotulo{font:700 24px/1 var(--fonte-texto);letter-spacing:.05em;color:var(--texto);text-transform:uppercase}
.dots-rotulo::first-line{color:var(--texto)}
body.modo-mobile .grade-rankings{display:flex;flex-direction:column;gap:16px}
body.modo-mobile .rk-col{flex:none;padding:20px 22px 18px}
body.modo-mobile .rk-lista{flex:none;gap:12px}
body.modo-mobile .rk-item{flex:none}
body.modo-mobile .rk-titulo{font-size:30px}
body.modo-mobile .rk-nome{font-size:26px}
body.modo-mobile .rk-val{font-size:32px}
body.modo-mobile .pa-comp{font-size:21px}
body.modo-mobile .pa-comp .cp-num{font-size:27px}

/* ---------- modo sub-dashboard (?sub=...) ---------- */
html.modo-sub, html.modo-sub body{width:auto;height:auto;overflow-x:hidden;overflow-y:auto;cursor:auto}
body.modo-sub #stage{position:static;width:auto;height:auto;transform:none!important}
body.modo-sub #palco{position:relative;z-index:2;width:auto;height:auto;max-width:1280px;margin:0 auto;padding:0 26px 110px}
body.modo-sub #cenas,body.modo-sub #lua{display:none}
body.modo-sub #dots{display:none}
body.modo-sub #dots.ligado{display:flex;position:fixed;left:50%;transform:translateX(-50%);bottom:20px;align-items:center;gap:14px;z-index:99;background:rgba(11,11,18,.9);border:1px solid rgba(245,197,66,.3);border-radius:var(--r-pill);padding:10px 20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,.5);white-space:nowrap}
body.modo-sub #dots.ligado .dot{width:10px;height:10px}
body.modo-sub #dots.ligado .dots-rotulo{font-size:15px}
body.modo-sub #moldura{position:static;height:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:26px 6px 18px}
body.modo-sub #moldura > *{position:static!important}
/* nos subs o horario do snapshot ja aparece no #sub-atual da nav; esconder o
   "atualizado" da moldura em qualquer largura evita o rotulo duplicado no desktop */
body.modo-sub .m-atual{display:none}
#subdash{display:flex;flex-direction:column;gap:var(--esp-bloco)}
#subdash[hidden]{display:none}
#subdash a{color:inherit;text-decoration:none}
/* UMA linha só, rolando de lado quando não cabe (antes quebrava em 2 linhas e ficava
   feio). Os rótulos longos já vêm encurtados por rotuloSetor(nome, true). */
.sub-nav{display:flex;align-items:center;gap:9px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;
  font:600 16px/1 var(--fonte-texto);letter-spacing:.04em;text-transform:uppercase}
.sub-nav::-webkit-scrollbar{display:none}
.sub-nav > *{flex:none}
.sub-nav a{color:var(--texto-dim);border:1px solid var(--linha-suave);border-radius:var(--r-pill);padding:9px 16px;transition:border-color .2s,color .2s,background .2s}
.sub-nav a:hover{color:var(--texto);border-color:var(--linha-ouro)}
.sub-nav a.on{color:var(--ouro);border-color:var(--linha-ouro);background:rgba(245,197,66,.08)}
/* ritmo macro dos subs: o batimento base e --esp-bloco (22px). O titulo puxa o
   bloco seguinte (chips de resumo) pra perto de si (-8px -> 14px): titulo +
   resumo leem como UMA unidade de cabecalho, nao dois blocos soltos. */
.sub-titulo{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:-8px}
.sub-titulo h1{font:700 44px/1.05 var(--fonte-titulo);letter-spacing:.02em;text-transform:uppercase}
/* ícones pixel-art de setor (titular): fundo transparente, assentam nos cards escuros.
   Fallback silencioso via onerror no <img> (some sem gap se o PNG não existir). */
/* AVATAR redondo: rosto do titular, recortado no melhor ângulo (zoom+origem
   enquadram a cabeça, já que o sprite é comprido). bg branco casa com o fundo
   atual dos .jpg; ao trocar por PNG transparente, mudar p/ um tom escuro. */
.ic-av{display:inline-flex;flex:0 0 auto;border-radius:50%;overflow:hidden;vertical-align:middle;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.ic-av img{width:100%;height:auto;display:block;image-rendering:pixelated;transform:scale(2.4);transform-origin:center 22%;transition:opacity .45s ease}
.ic-setor-cab{width:58px;height:58px}
.ic-setor-hub{width:40px;height:40px}
@media (max-width:640px){ .ic-setor-cab{width:46px;height:46px} }
/* SPRITE inteiro (vertical): titular de corpo inteiro, pra contextos com altura */
.ic-setor-card{width:30px;height:30px}
.ic-pessoa-cab{width:64px;height:64px}
.ic-pessoa-full{height:82px;align-self:center}
/* sprite do integrante colado na foto (leem como um par: foto + versão pixel) */
.pd-cab .ic-pessoa-full{margin-left:-30px}
/* status (semáforo) vira um badge no canto do sprite, em vez de bolinha solta */
.ic-status{position:relative;display:inline-flex;flex:none}
.ic-status .ic-status-dot{position:absolute;right:0;bottom:2px;width:15px;height:15px;border-radius:50%;border:3px solid var(--fundo);box-shadow:none}
/* Tier do cliente (Base de Clientes) — badge A/B/C */
.cv-tier{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:6px;font:700 12px/1 var(--fonte-titulo);letter-spacing:.03em;margin-left:8px;vertical-align:middle;flex:none}
.cv-tier-a{background:rgba(245,197,66,.16);color:var(--ouro);border:1px solid var(--linha-ouro)}
.cv-tier-b{background:rgba(159,176,204,.14);color:#cdd8ec;border:1px solid rgba(159,176,204,.32)}
.cv-tier-c{background:rgba(255,255,255,.05);color:var(--texto-dim);border:1px solid var(--linha-suave)}
.cv-tier-cab{min-width:auto;height:26px;font-size:13.5px;padding:0 11px;margin-left:14px}
.cv-tier-cab::before{content:'Tier\00A0'}
.cv-cab h1{font-size:32px;line-height:1.06}
/* "+N" quando há mais responsáveis do que cabem na linha de conversas */
.cv-resp-mais{width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.06);border:2px solid var(--linha-suave);color:var(--texto-dim);font:700 12px/1 var(--fonte-titulo)}
/* Tensionado (Tráfego) — só os acionáveis: 'sim' (vermelho) e 'prestes' (âmbar) */
.cv-tens{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;font:700 11px/1 var(--fonte-titulo);letter-spacing:.04em;text-transform:uppercase;margin-left:6px;vertical-align:middle;flex:none}
.cv-tens-sim{background:rgba(185,28,28,.16);color:#ff9a9a;border:1px solid rgba(185,28,28,.5)}
.cv-tens-prestes{background:rgba(255,176,32,.14);color:var(--amarelo);border:1px solid rgba(255,176,32,.4)}
.cv-tens-cab{height:26px;font-size:12px;padding:0 11px;margin-left:8px}
/* filtro de Tier clicável (chips A/B/C/Sem) */
.cv-tierf{display:inline-flex;gap:5px;align-items:center}
.cv-tier-chip{min-width:36px;padding:11px 8px;border-radius:var(--r-pill);font:700 14px/1 var(--fonte-titulo);letter-spacing:.03em;border:1px solid var(--linha-suave);background:var(--sup-2);color:var(--texto-dim);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.cv-tier-chip:hover{border-color:var(--linha-ouro);color:var(--texto)}
.cv-tier-chip[aria-pressed="true"].cv-tier-a{background:rgba(245,197,66,.18);border-color:var(--linha-ouro);color:var(--ouro)}
.cv-tier-chip[aria-pressed="true"].cv-tier-b{background:rgba(159,176,204,.18);border-color:rgba(159,176,204,.55);color:#cdd8ec}
.cv-tier-chip[aria-pressed="true"].cv-tier-c{background:rgba(255,255,255,.09);border-color:var(--linha-ouro);color:var(--texto)}
.cv-tier-chip[aria-pressed="true"].cv-tier-sem{background:rgba(255,255,255,.07);border-color:rgba(159,176,204,.4);color:var(--texto)}
/* Validação (só gestão) — bloco destacado no topo do Hub */
.val-wrap{border:1px solid rgba(167,139,250,.4);border-radius:20px;background:rgba(167,139,250,.05);padding:6px 16px 14px;margin:0 0 var(--esp-painel)}
.val-cab{display:flex;align-items:center;gap:10px;padding:14px 6px 10px;color:var(--texto-dim);font-size:14px;flex-wrap:wrap}
.val-tag{font:800 13px/1 var(--fonte-titulo);letter-spacing:.1em;text-transform:uppercase;color:#d9a3ff;border:1px solid rgba(167,139,250,.5);background:rgba(167,139,250,.12);border-radius:var(--r-pill);padding:6px 12px}
.val-wrap .val-painel{margin:0 0 10px;background:rgba(255,255,255,.02)}
.val-wrap .val-painel:last-child{margin-bottom:0}
.val-lista{display:flex;flex-direction:column}
.val-linha{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--linha-suave);color:var(--texto);min-width:0}
.val-linha:last-child{border-bottom:0}
.val-linha:hover{background:rgba(245,197,66,.05)}
.val-linha .foto{width:38px;height:38px;flex:none}
.val-corpo{flex:1 1 auto;min-width:0}
.val-top{display:flex;align-items:center;gap:8px;min-width:0}
.val-nome{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto;color:var(--texto)}
.val-linha:hover .val-nome{color:var(--ouro)}
.val-setor{font:600 11px/1 var(--fonte-texto);letter-spacing:.05em;text-transform:uppercase;color:var(--texto-rotulo);flex:none}
.val-top .val-meta,.val-top .val-unpin{margin-left:auto}
.val-meta{flex:none;color:var(--texto-dim);font-size:14px;white-space:nowrap}
.val-meta b.ruim{color:var(--val-bad)}
/* avatares na MESMA linha do nome (compactos, sem quebrar) */
.val-avs{flex:none;display:inline-flex;align-items:center;margin-left:2px}
.val-avs .cv-equipe{flex-wrap:nowrap;padding-left:0}
.val-avs .cv-av{width:24px;height:24px;border-width:1.5px}
.val-avs .cv-resp-mais{width:24px;height:24px;border-width:1.5px;font-size:10.5px}
.val-sub{margin-top:6px;color:var(--texto-dim);font-size:13.5px;line-height:1.35}
.val-sub b{color:var(--texto)} .val-sub b.ruim{color:var(--val-bad)}
.val-etapa{color:var(--texto-apagado)}
.val-sub .cv-equipe{flex-wrap:wrap;padding-left:0}
.val-mais{margin-top:2px}
.val-mais > summary{list-style:none;cursor:pointer;color:#d9a3ff;font:600 13px/1 var(--fonte-texto);padding:11px 4px;display:inline-block}
.val-mais > summary::-webkit-details-marker{display:none}
.val-mais > summary::before{content:'▾ '}
.val-mais[open] > summary::before{content:'▴ '}
.val-mais > summary:hover{color:#eaddff}
/* título de seção clicável */
.sec-link{color:inherit;display:inline-flex;align-items:center;gap:8px}
.sec-link:hover{color:var(--ouro)}
.sec-seta{opacity:0;transition:opacity .15s;font-size:.85em}
.sec-link:hover .sec-seta{opacity:1}
/* linha inteira clicável */
.val-linha[data-href]{cursor:pointer}
/* motivos (chips) — mais info por linha, sem virar parágrafo */
.val-mot{display:inline-flex;align-items:center;padding:3px 9px;margin-left:6px;border-radius:var(--r-pill);
  border:1px solid var(--linha-suave);background:rgba(255,255,255,.04);color:var(--texto-dim);font:600 12px/1.3 var(--fonte-texto);white-space:nowrap}
.val-mot.ruim{border-color:rgba(185,28,28,.45);background:rgba(185,28,28,.12);color:#ff9a9a}
.val-quando{margin-left:6px;color:var(--texto-apagado);font-size:12.5px}
/* pin discreto: só aparece no hover da linha */
.val-pin-mini{flex:none;margin-left:10px;width:30px;height:30px;border-radius:50%;border:1px solid transparent;
  background:transparent;cursor:pointer;font-size:14px;opacity:0;transition:opacity .15s,background .15s;line-height:1}
.val-linha:hover .val-pin-mini,.val-pin-mini:focus{opacity:.75}
.val-pin-mini:hover{opacity:1;background:rgba(167,139,250,.2);border-color:rgba(167,139,250,.5)}
.val-pin-mini.on{opacity:1;background:rgba(167,139,250,.18);border-color:rgba(167,139,250,.45)}
/* FIXADOS — cards grandes (seção importante, não pode ser tímida) */
.val-fix-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.val-fix{position:relative;border:1px solid rgba(167,139,250,.4);border-radius:16px;background:rgba(167,139,250,.07);padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s}
.val-fix:hover{border-color:rgba(167,139,250,.75);background:rgba(167,139,250,.11)}
.val-fix-top{display:flex;align-items:center;gap:9px;min-width:0}
.val-fix-top .foto{width:34px;height:34px;flex:none}
.val-fix-nome{font:700 17px/1.2 var(--fonte-texto);color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.val-fix:hover .val-fix-nome{color:var(--ouro)}
.val-solta{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(167,139,250,.45);
  background:rgba(167,139,250,.18);cursor:pointer;font-size:14px;line-height:1;opacity:.55;transition:opacity .15s}
.val-fix:hover .val-solta{opacity:1}
.val-solta:hover{background:rgba(185,28,28,.25);border-color:rgba(185,28,28,.5)}
.val-fix-eq{margin-top:9px}
.val-fix-eq .cv-equipe{flex-wrap:wrap;padding-left:0}
.val-fix-eq .cv-av{width:26px;height:26px;border-width:1.5px}
.val-fix-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}
.val-fix-num{background:rgba(0,0,0,.28);border-radius:10px;padding:8px 6px;text-align:center}
.val-fix-num b{display:block;font:700 20px/1 var(--fonte-titulo);color:var(--texto)}
.val-fix-num span{display:block;margin-top:3px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-rotulo)}
.val-fix-num.ruim b{color:var(--val-bad)}
.val-fix-mot{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px}
.val-fix-mot .val-mot{margin-left:0}
@media (max-width:640px){ .val-fix-grid{grid-template-columns:1fr} }
.val-todos{display:inline-block;margin-top:8px;padding:9px 4px;color:#d9a3ff;font:600 13px/1 var(--fonte-texto)}
.val-todos:hover{color:#eaddff}
.val-todos.nota{color:var(--texto-apagado);font-weight:500}
@media (max-width:640px){
  .val-wrap{padding:4px 10px 10px;border-radius:16px}
  .val-linha{gap:10px;padding:12px 2px}
  /* numa tela estreita o nome PRECISA ganhar a linha inteira: senão os badges/avatares
     (flex:none) espremem ele até sumir e a métrica vaza pra fora da borda. */
  .val-top{flex-wrap:wrap;row-gap:6px}
  .val-nome{flex:1 1 100%;white-space:normal;overflow:visible;text-overflow:clip}
  .val-avs{display:none}                 /* avatares só no desktop */
  .val-top .val-meta{margin-left:0;font-size:13px;white-space:normal;display:flex;flex-wrap:wrap;gap:5px;flex:1 1 100%}
  .val-mot{margin-left:0}                /* chips quebram linha em vez de vazar pela borda */
  .val-painel .pd-ptit{font-size:15px}
  .val-fix-nums{grid-template-columns:repeat(2,1fr)}
}
/* Tier vira link (clica pra filtrar a aba Clientes) */
a.cv-tier{cursor:pointer;text-decoration:none}
a.cv-tier:hover{filter:brightness(1.2)}
.val-unpin{flex:none;margin-left:10px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--texto-apagado);cursor:pointer;font-size:13px}
.val-unpin:hover{background:rgba(185,28,28,.18);color:#ff9a9a}
/* botão Fixar (páginas de cliente/pessoa, só gestão) */
.cv-pin{cursor:pointer;border:1px solid rgba(167,139,250,.45);background:rgba(167,139,250,.1);color:#d9a3ff;border-radius:var(--r-pill);padding:8px 14px;font:600 13px/1 var(--fonte-texto);white-space:nowrap;transition:background .15s,border-color .15s}
.cv-pin:hover{background:rgba(167,139,250,.18);border-color:rgba(167,139,250,.7)}
.cv-pin[aria-pressed="true"]{background:rgba(167,139,250,.22);border-color:rgba(167,139,250,.8);color:#eaddff}
.pd-chips .cv-pin{margin-left:4px}
/* aba Clientes — tabela do roster (Base de Clientes) */
.cl-tabela{display:flex;flex-direction:column;padding:8px 0}
.cl-head,.cl-linha{display:grid;grid-template-columns:30px minmax(0,1fr) 66px 72px 76px 84px 92px;align-items:center;gap:10px;padding:12px 22px}
.cl-head{font:600 14px/1.2 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-rotulo);border-bottom:1px solid var(--linha-suave)}
.cl-linha{border-bottom:1px solid var(--linha-suave);cursor:pointer;transition:background .15s}
.cl-linha:last-of-type{border-bottom:0}
.cl-linha:hover{background:rgba(245,197,66,.05)}
.cl-nome{min-width:0;display:flex;flex-direction:column;gap:7px}
@media (max-width:640px){
  .cl-head,.cl-linha{grid-template-columns:18px minmax(0,1fr) 50px 56px;gap:8px;padding:12px 14px}
  .cl-head > :nth-child(n+5),.cl-linha > :nth-child(n+5){display:none}
  .cl-linha .st-num{font-size:19px}
}
.cv-cards-setor .cv-card-top{justify-content:flex-start}
.cv-cards-setor .cv-card-tempo{margin-left:auto}
.ic-full{display:inline-block;flex:0 0 auto;vertical-align:bottom;line-height:0}
.ic-full img{height:100%;width:auto;display:block;image-rendering:pixelated;transition:opacity .3s ease}
.sub-aviso{padding:26px;text-align:center;color:var(--texto-dim);font:500 20px/1.4 var(--fonte-texto)}
/* resumo dos rankings no sub: os estilos base sao da TV (1920px);
   aqui as colunas tem ~380px, entao a tipografia desce junto */
.sub-rk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--esp-painel)}
.sub-rk-grid .rk-col{padding:20px 22px 18px}
.sub-rk-grid .rk-cab{margin-bottom:12px;flex-wrap:wrap;row-gap:8px}
.sub-rk-grid .rk-titulo{font-size:20px}
.sub-rk-grid .rk-janela{font-size:13px;padding:5px 11px}
.sub-rk-grid .rk-lista{gap:10px}
.sub-rk-grid .rk-item{flex:none;grid-template-columns:28px minmax(0,1fr) auto;column-gap:10px;row-gap:6px;padding:11px 14px 10px;border-radius:12px}
.sub-rk-grid .rk-pos{font-size:20px}
.sub-rk-grid .rk-nome{white-space:normal;line-height:1.15;font-size:18px}
.sub-rk-grid .rk-sub{white-space:normal;line-height:1.3;font-size:13px;margin-top:2px}
.sub-rk-grid .rk-val{font-size:23px}
.sub-rk-grid .rk-valsub{font-size:12px}
.sub-rk-grid .rk-barra{height:5px}

/* sub: pagina do setor */
.st-tot{display:flex;gap:12px;flex-wrap:wrap}
.st-tot .st-chip{padding:10px 14px;gap:8px}
.st-tot .st-chip b{font-size:25px}
.st-tot .st-chip span{font-size:13px}
.st-chip{display:flex;align-items:baseline;gap:9px;background:rgba(255,255,255,.03);border:1px solid var(--linha-suave);border-radius:13px;padding:12px 18px}
.st-chip b{font:700 30px/1 var(--fonte-titulo);color:var(--texto)}
.st-chip.dour b{color:var(--ouro)}
.st-chip.alerta b{color:var(--amarelo)}
/* "atrasadas" e metrica ruim: vermelho em setor/pessoa, igual ao .met-vermelho da TV.
   .alerta/ambar fica reservado para atencao real (ex.: pendentes/perto do prazo). */
.st-chip.ruim b,.vol-card.ruim b,.st-num.ruim{color:var(--val-bad)}
.st-chip span{font:500 15px/1 var(--fonte-texto);color:var(--texto-dim);letter-spacing:.05em;text-transform:uppercase}
.st-tabela{display:flex;flex-direction:column;padding:8px 0}
.st-head,.st-linha{display:grid;grid-template-columns:64px minmax(0,1fr) 108px 108px 108px 108px 112px;align-items:center;gap:10px;padding:12px 22px}
.st-head{font:600 14px/1.2 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-rotulo);border-bottom:1px solid var(--linha-suave)}
.st-linha{border-bottom:1px solid var(--linha-suave);transition:background .15s}
.st-linha:last-of-type{border-bottom:0}
a.st-linha:hover{background:rgba(245,197,66,.05)}
.st-linha .foto{width:46px;height:46px;font:600 17px/1 var(--fonte-texto)}
.st-nome{font:600 21px/1.15 var(--fonte-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-num{font:700 24px/1 var(--fonte-titulo);text-align:right}
.st-num.alerta{color:var(--amarelo)}
.st-num.dim{color:var(--texto-apagado)}
.st-num-h{text-align:right}
.st-resto{padding:14px 22px 8px;font:500 15px/1.3 var(--fonte-texto);color:var(--texto-rotulo)}
/* "abertos com o cliente" — grid compacto 2 colunas (pessoa/setor/hub) */
.pab-wrap{padding:8px 0 12px}
.pab-wrap > .pd-ptit{padding:4px 22px 10px}
.pab-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;padding:0 22px}
.pab-item{display:grid;grid-template-columns:12px minmax(0,1fr);gap:11px;align-items:start;padding:8px 0;border-bottom:1px solid var(--linha-suave);text-decoration:none}
.pab-item:last-child{border-bottom:0}
.pab-item:hover .pab-cli{color:var(--ouro)}
.pab-item .luz{width:11px;height:11px;margin-top:4px}
.pab-corpo{min-width:0;display:flex;flex-direction:column;gap:3px}
.pab-top{display:flex;align-items:center;gap:8px;min-width:0}
.pab-top .cv-pill{flex:0 0 auto}
.pab-cli{font:600 15px/1.2 var(--fonte-texto);color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pab-serv{font-size:11px;color:var(--texto-apagado);text-transform:uppercase;letter-spacing:.04em}
.pab-dono{color:var(--texto-dim)}
.pab-dono::before{content:'\00B7';margin:0 6px;color:var(--texto-apagado)}
.pab-pend{font-size:12.5px;color:var(--texto-dim);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:900px){ .pab-grid{grid-template-columns:1fr} }

/* sub: slide da pessoa */
.pd-cab{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:20px 26px}
/* a foto pode vir embrulhada num <a> (link pro eKyte); por isso o seletor é
   descendente, não filho direto — senão o <a> quebra o dimensionamento e a
   foto volta ao tamanho natural (gigante). */
.pd-cab .foto{width:76px;height:76px;font:600 26px/1 var(--fonte-texto)}
.pd-cab > a{flex:none;display:inline-flex;line-height:0;border-radius:50%;transition:box-shadow .2s}
.pd-cab > a:hover{box-shadow:0 0 0 3px var(--linha-ouro)}
.pd-id{flex:1;min-width:220px}
.pd-nome{font:700 36px/1.04 var(--fonte-titulo);letter-spacing:.02em;text-transform:uppercase}
.pd-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:9px}
.pd-chip{font:600 14px/1 var(--fonte-texto);letter-spacing:.05em;text-transform:uppercase;color:var(--texto-dim);border:1px solid var(--linha-suave);border-radius:var(--r-pill);padding:8px 14px}
a.pd-chip-setor{transition:border-color .2s,color .2s}
a.pd-chip-setor:hover{border-color:var(--linha-ouro);color:var(--texto)}
.pd-cab .pa-comp{flex-direction:column;align-items:flex-end;gap:4px;white-space:normal;text-align:right;font-size:15px}
.pd-cab .pa-comp .cp-num{font-size:28px}
/* comparativo sem base (só "—"): recolhe para não parecer quebrado */
.pd-cab .pa-comp.neutro{opacity:.5}
.pd-cab .pa-comp.neutro .cp-num{font-size:19px}
.vol-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--esp-carta)}
.vol-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:20px 12px;text-align:center}
.vol-card b{font:700 44px/1 var(--fonte-titulo);color:var(--texto)}
.vol-card.dour b{color:var(--ouro)}
.vol-card.alerta b{color:var(--amarelo)}
.vol-card span{font:500 14px/1.25 var(--fonte-texto);color:var(--texto-dim);letter-spacing:.05em;text-transform:uppercase}
/* cards que viram link pro eKyte (quando há executorId da pessoa) */
a.vol-card{transition:border-color .2s}
a.vol-card:hover{border-color:var(--linha-ouro)}
.vol-card .vc-ext{position:absolute;top:9px;right:11px;font-size:12px;color:var(--texto-apagado);transition:color .2s}
a.vol-card:hover .vc-ext{color:var(--ouro)}
.pd-duplo{display:grid;grid-template-columns:1fr 1fr;gap:var(--esp-painel);align-items:stretch}
/* estado vazio da agenda: centraliza no painel esticado em vez de caixa com
   espaco morto embaixo (o .pd-painel ja e flex-column) */
.pd-painel > .pd-vazio{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px 0}
.pd-triplo{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--esp-painel);align-items:stretch}
.pd-triplo.um{grid-template-columns:1fr}
.pd-painel{padding:22px 26px;display:flex;flex-direction:column;gap:14px}
/* titulo de painel a 20px: tira o rotulo do degrau de 24px onde vivem os DADOS
   (st-num, sinal-val, ag-hora, atr-dias) — no squint, numero vence rotulo.
   Mesmo tamanho do .pd-secao: os dois sao "rotulo", diferem por cor/posicao. */
.pd-ptit{font:700 20px/1.1 var(--fonte-titulo);letter-spacing:.04em;text-transform:uppercase}
.sinal{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start;background:rgba(255,255,255,.025);border:1px solid var(--linha-suave);border-radius:14px;padding:14px 16px}
.sinal .ic{width:40px;height:40px;padding:8px;border-radius:11px;background:rgba(255,255,255,.05);color:var(--texto-dim)}
.sinal .ic svg{width:100%;height:100%;display:block}
.sinal-tit{font:600 17px/1.2 var(--fonte-texto);color:var(--texto-dim)}
.sinal-val{font:700 24px/1.15 var(--fonte-titulo);margin-top:4px}
.sinal-det{font:500 15px/1.4 var(--fonte-texto);color:var(--texto-dim);margin-top:6px}
.sinal.atencao{border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.09)}
.sinal.atencao .ic{background:rgba(255,176,32,.16);color:var(--amarelo)}
.sinal.atencao .sinal-val{color:var(--amarelo)}
.coe-nota{font:500 14px/1.45 var(--fonte-texto);color:var(--texto-rotulo);margin-top:auto;padding-top:6px}
.ag-lista{display:flex;flex-direction:column;gap:10px}
.ag-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;background:rgba(255,255,255,.025);border:1px solid var(--linha-suave);border-radius:13px;padding:14px 18px}
.ag-hora{font:700 22px/1.25 var(--fonte-titulo);color:var(--ouro);white-space:nowrap}
.ag-tit{font:600 18px/1.25 var(--fonte-texto)}
.ag-sub{font:500 14px/1.25 var(--fonte-texto);color:var(--texto-dim);margin-top:4px}
.ag-resp{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 17px/1 var(--fonte-texto);flex:none}
.ag-resp.sim{color:var(--verde);background:rgba(53,200,120,.13);border:1px solid rgba(53,200,120,.4)}
.ag-resp.talvez{color:var(--amarelo);background:rgba(255,176,32,.13);border:1px solid rgba(255,176,32,.4)}
.ag-resp.nao{color:var(--val-bad);background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4)}
.lista-rolagem{max-height:430px;overflow-y:auto;border-radius:14px}
/* fade no rodape: avisa que a lista rola; some (.fim, via ligaFadeRolagem)
   quando chega ao fim. sticky rola junto e cola na borda visivel. */
.lista-rolagem::after{content:'';position:sticky;bottom:0;display:block;height:46px;margin-top:-46px;background:linear-gradient(180deg,rgba(17,17,27,0),rgba(17,17,27,.94));pointer-events:none;transition:opacity .3s}
.lista-rolagem.fim::after{opacity:0}
.atr-lista{display:flex;flex-direction:column;gap:10px}
.atr-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;background:rgba(255,255,255,.025);border:1px solid var(--linha-suave);border-radius:13px;padding:12px 16px}
.atr-tit{font:600 18px/1.3 var(--fonte-texto)}
.atr-sub{font:500 14px/1.25 var(--fonte-texto);color:var(--texto-dim);margin-top:4px}
.atr-dias{font:700 24px/1 var(--fonte-titulo);color:var(--amarelo);white-space:nowrap}
.dir-grupo{padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.dir-links{display:flex;flex-wrap:wrap;gap:10px}
.dir-links a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--linha-suave);border-radius:var(--r-pill);padding:8px 16px 8px 8px;font:600 17px/1 var(--fonte-texto);transition:border-color .2s}
.dir-links a:hover{border-color:var(--linha-ouro)}
.dir-links .foto{width:32px;height:32px;font:600 12px/1 var(--fonte-texto)}
/* apresentacao dos subs: rotulo de atualizacao, slide solo de ranking,
   rankings do setor no panorama e titulos clicaveis do hub */
.sub-atual{margin-left:auto;font:600 13px/1 var(--fonte-texto);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-rotulo);white-space:nowrap;padding:9px 0}
body.modo-sub #btn-pausa{right:22px;bottom:22px;width:56px;height:56px}
.rk-solo{width:100%;max-width:940px;margin:0 auto;display:flex;flex-direction:column}
.rk-solo .rk-col{padding:26px 30px 24px}
.rk-solo .rk-lista{gap:12px}
.rk-solo .rk-item{flex:none;padding:16px 22px 14px}
.rk-solo .rk-titulo{font-size:36px}
.rk-solo .rk-nome{white-space:normal;line-height:1.15}
.st-rk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--esp-painel)}
.st-rk .rk-col{padding:20px 22px 18px}
/* titulo das colunas de ranking no mesmo tier dos demais titulos de painel do
   sub (20px) — antes herdava os 33px da TV e brigava com o h1 da pagina */
.st-rk .rk-titulo{font-size:20px}
.st-rk .rk-lista{gap:10px}
.st-rk .rk-item{flex:none;padding:11px 15px 10px}
.st-rk .rk-nome{font-size:22px;white-space:normal;line-height:1.15}
.st-rk .rk-sub{white-space:normal;line-height:1.25}
.st-rk .rk-val{font-size:28px}
.st-rk.duas{grid-template-columns:repeat(2,minmax(0,1fr))}
.st-rk .rk-col.cheia{grid-column:1/-1}
.st-rk .rk-pchip{padding:3px 8px 3px 4px;gap:5px}
.st-rk .rk-pchip .rk-pnome{display:none}
a.dir-tit-link:hover{color:var(--ouro)}
a.dir-tit-link::after{content:'\203A';margin-left:9px;color:var(--ouro);font-weight:700}

/* ---------- navegacao dos subs: voltar, setas e dots clicaveis ---------- */
.sub-voltar{display:inline-flex;align-items:center;gap:7px}
.sub-nav a.sub-voltar{color:var(--texto);border-color:var(--linha-ouro)}
/* rotulo de secao: respiro maior ANTES (22+14=36px, separa a secao nova) e
   menor DEPOIS (22-8=14px, o rotulo pertence ao conteudo que apresenta) */
.pd-secao{font:700 20px/1.1 var(--fonte-titulo);letter-spacing:.04em;text-transform:uppercase;color:var(--texto-dim);margin:14px 0 -8px}
#dots.ligado .dot{cursor:pointer;padding:4px;background-clip:content-box;box-sizing:content-box}
#sub-setas{display:none}
#sub-setas.ligado{display:block}
.sub-seta{position:fixed;top:50%;transform:translateY(-50%);z-index:40;width:52px;height:76px;border:1px solid var(--linha-suave);border-radius:14px;background:rgba(11,11,18,.72);color:var(--texto-dim);font:700 40px/1 var(--fonte-titulo);cursor:pointer;transition:color .2s,border-color .2s}
.sub-seta:hover{color:var(--ouro);border-color:var(--linha-ouro)}
.sub-seta[data-d="-1"]{left:14px}
.sub-seta[data-d="1"]{right:14px}

/* ---------- saude do setor: barras de entregas e horas por pessoa ---------- */
.st-alvo{color:var(--texto-dim);font-weight:500;font-size:.78em}
.st-graf{gap:12px}
.st-graf-tot{font:600 15px/1 var(--fonte-texto);color:var(--texto-dim);letter-spacing:.05em;text-transform:none;margin-left:12px}
.st-barras{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:end;flex:1;min-height:150px}
.st-bcol{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.st-bval{font:700 18px/1 var(--fonte-titulo);color:var(--texto);min-height:18px}
.st-btrilho{flex:1;width:100%;max-width:44px;display:flex;align-items:flex-end;background:rgba(255,255,255,.04);border-radius:8px;overflow:hidden}
.st-bfill{width:100%;background:var(--texto-apagado);border-radius:8px 8px 0 0}
.st-bfill.bom{background:var(--ouro)}
.st-bfill.ruim{background:var(--vermelho)}
.st-bfill.medio{background:var(--amarelo)}
.st-bfill.semdado{background:rgba(255,255,255,.14)}
/* legenda com amostra de cor — antes era só texto e não dava pra ligar cor↔faixa */
.st-legenda{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.st-legenda .lg{display:inline-flex;align-items:center;gap:6px}
.st-legenda .lg-c{width:11px;height:11px;border-radius:3px;display:inline-block}
.st-legenda .lg-c.bom{background:var(--ouro)} .st-legenda .lg-c.medio{background:var(--amarelo)}
.st-legenda .lg-c.ruim{background:var(--vermelho)} .st-legenda .lg-c.semdado{background:rgba(255,255,255,.14)}
.st-bfill.hora{background:var(--ouro)}
/* histórico de horas na página da pessoa: só renderiza dentro da linha
   gráfico+cards (.pd-horas-linha), então as barras preenchem o painel estreito
   — o max-width/centralização da era "painel largo" saiu junto com ela */
.pd-histhoras{gap:10px}
.pd-histhoras .st-barras{gap:16px;min-height:104px}
.pd-histhoras .st-btrilho{max-width:78px}
/* horas apontadas: gráfico estreito à esquerda + dois cards clicáveis à
   direita, ocupando o espaço que sobrava nas laterais do gráfico full-width */
.pd-horas-linha{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:var(--esp-painel);align-items:stretch}
.pd-horas-cards{display:grid;gap:var(--esp-carta)}
.pd-horas-linha .pd-horas-cards{grid-template-rows:repeat(2,1fr)}
.pd-horas-cards.soltas{grid-template-columns:repeat(2,minmax(0,1fr))}
.pd-horas-cards .vol-card{height:100%}
/* chip de ranking clicável: mesmo realce dourado dos vol-cards */
a.st-chip{text-decoration:none;transition:border-color .2s}
a.st-chip:hover{border-color:var(--linha-ouro)}
a.st-chip .rk-ext{align-self:center}
.st-brot{font:500 13px/1 var(--fonte-texto);color:var(--texto-dim);text-transform:uppercase;letter-spacing:.05em}
.st-hlista{display:flex;flex-direction:column;gap:9px}
.st-hitem{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:12px;align-items:center}
.st-hitem:hover .st-hnome{color:var(--ouro)}
.st-hnome{font:600 16px/1.2 var(--fonte-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.st-htrilho{height:11px;background:rgba(255,255,255,.05);border-radius:var(--r-pill);overflow:hidden}
.st-hfill{display:block;height:100%;background:var(--ouro);border-radius:var(--r-pill);opacity:.85}
.st-hval{font:700 17px/1 var(--fonte-titulo);white-space:nowrap}
.st-hval em{font:500 14px/1 var(--fonte-texto);color:var(--texto-dim);font-style:normal}

/* ---------- rankings: links pro eKyte e chips de pessoa ---------- */
.rk-link{transition:color .2s}
.rk-link:hover{color:var(--ouro)}
.rk-ext{font-size:.65em;color:var(--texto-dim);margin-left:6px;vertical-align:2px}
.rk-mini{font:600 13px/1 var(--fonte-texto);color:var(--texto-dim);letter-spacing:.04em;text-transform:uppercase;margin-top:4px;transition:color .2s}
.rk-mini:hover{color:var(--ouro)}
.rk-sub.com-pessoas{display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px;white-space:normal;overflow:visible}
.rk-pchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linha-suave);border-radius:var(--r-pill);padding:3px 10px 3px 4px;font:500 13px/1 var(--fonte-texto);color:var(--texto-dim);transition:border-color .2s,color .2s}
a.rk-pchip:hover{border-color:var(--linha-ouro);color:var(--texto)}
.rk-pchip .foto{width:21px;height:21px;font-size:9px;border-width:2px}
.rk-pchip b{color:var(--texto);font-weight:700}
.rk-pnome{max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-cart{display:block;font:500 13px/1.2 var(--fonte-texto);color:var(--texto-dim);letter-spacing:.02em;text-transform:none;margin-top:4px}
.atr-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.ent-no-prazo{color:var(--ouro);font-weight:600}
.atr-tag.blq{color:var(--val-bad);border-color:rgba(185,28,28,.5);background:rgba(185,28,28,.08)}
.dia-neutro{color:var(--texto-dim);font-size:19px}
.atr-tag{font:600 11px/1 var(--fonte-texto);letter-spacing:.05em;text-transform:uppercase;color:var(--texto-dim);border:1px solid var(--linha-suave);border-radius:var(--r-pill);padding:4px 9px;background:rgba(255,255,255,.03)}

/* ---------- subs: ordenacao por coluna ----------
   Botao herda a cara do cabecalho onde vive; a seta diz o estado:
   ↕ ordenavel, ↓/↑ coluna ativa. Ver ligaOrdenacao no painel.js. */
.th-ord{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;cursor:pointer;display:inline-flex;align-items:baseline;gap:5px;transition:color .15s}
.th-ord::after{content:'↕';font-size:.85em;opacity:.35;transition:opacity .15s}
.th-ord:hover{color:var(--ouro)}
.th-ord:hover::after{opacity:.8}
.th-ord.on{color:var(--ouro)}
.th-ord.on::after{opacity:1}
.th-ord.on.desc::after{content:'↓'}
.th-ord.on.asc::after{content:'↑'}
/* colunas numericas: botao alinha a direita como o numero embaixo */
.st-num-h .th-ord{width:100%;justify-content:flex-end}
/* chips de ordenacao no titulo de painel (listas) */
.pd-ptit.com-ord{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ord-grupo{margin-left:auto;display:inline-flex;align-items:baseline;gap:12px;font:600 12px/1 var(--fonte-texto);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-rotulo)}
.ord-grupo .th-ord{color:var(--texto-rotulo)}
.ord-grupo .th-ord:hover,.ord-grupo .th-ord.on{color:var(--ouro)}

/* ---------- subs: esqueleto de carregamento ---------- */
.skel-bloco{border:1px solid var(--linha-suave);border-radius:21.6px;background:var(--sup-1);animation:skelPulsa 1.1s ease-in-out infinite alternate}
.skel-nav{height:40px;width:54%;border-radius:var(--r-pill)}
.skel-tit{height:52px;width:38%;border-radius:14px}
.skel-chips{height:78px}
.skel-painel{height:220px}
.skel-painel.alto{height:340px}
@keyframes skelPulsa{from{opacity:.4}to{opacity:.95}}
/* texto so pra leitor de tela enquanto o esqueleto pulsa */
.sr-so{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- rankings: visao 360 (1 linha por cliente, metricas lado a lado) ---------- */
.c360{padding:18px 26px 12px}
.c360-head,.c360-linha{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center}
/* com o dado completo do fluxo entra horas 7d + as 2 colunas de conversa (resposta, s/ tarefa) */
.c360-head.com7d,.c360-linha.com7d{grid-template-columns:minmax(0,1.35fr) repeat(6,minmax(0,1fr))}
/* celula clicavel: mesmo convite dourado dos demais links do painel */
a.c360-cel{border-radius:9px;padding:5px 8px;margin:-5px -8px;transition:background .15s}
a.c360-cel:hover{background:rgba(245,197,66,.08)}
a.c360-cel:hover .c360-val{color:var(--ouro)}
a.c360-cel:hover .c360-val.ruim{color:var(--val-bad)}
.c360-head{font:600 13px/1.2 var(--fonte-texto);letter-spacing:.07em;text-transform:uppercase;color:var(--texto-rotulo);padding:4px 0 12px;border-bottom:1px solid var(--linha-suave)}
.c360-linha{padding:9px 0;border-bottom:1px solid var(--linha-fraca)}
.c360-linha:last-child{border-bottom:0}
.c360-nome{font:600 17px/1.25 var(--fonte-texto);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center}
.c360-luz{width:9px;height:9px;margin-right:9px;flex:none}
/* colunas de conversa (WhatsApp): valor colorido, sem barra; separador sutil do bloco eKyte */
.c360-conv{padding-left:14px;border-left:1px solid var(--linha-fraca)}
.c360-h-conv{padding-left:14px;border-left:1px solid var(--linha-fraca);color:var(--val-good)}
.c360-good{color:var(--val-good)}
.c360-warn{color:var(--val-warn)}
.c360-bad{color:var(--val-bad)}
a.c360-conv:hover .c360-val{color:var(--ouro)}
.c360-cel{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:10px}
.c360-val{font:700 20px/1 var(--fonte-titulo);text-align:right;font-variant-numeric:tabular-nums}
.c360-val.zero{color:var(--texto-apagado);font-weight:500}
.c360-val.ruim{color:var(--val-bad)}
.c360-trilho{height:7px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);overflow:hidden}
.c360-fill{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,rgba(245,197,66,.5),var(--ouro))}
.c360-fill.ruim{background:linear-gradient(90deg,rgba(185,28,28,.55),#EF4444)}

/* ---------- rankings: concentracao ---------- */
/* legenda dos chips de resumo: cola no bloco de cima (22-12=10px), le como
   nota de rodape da faixa, nao como bloco proprio flutuando entre os dois */
.rk-conc{font:500 17px/1.4 var(--fonte-texto);color:var(--texto-dim);padding:2px 4px;margin-top:-12px}
.rk-conc b{color:var(--texto)}
.rk-conc.atencao{color:var(--amarelo)}
.rk-conc.atencao b{color:var(--amarelo)}

/* ---------- hub: sinais e contexto por setor ---------- */
.hub-sinais{padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.hub-sinais-lista{display:flex;flex-wrap:wrap;gap:10px}
.hub-sinal{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linha-suave);border-radius:var(--r-pill);padding:8px 16px 8px 10px;font:500 16px/1.2 var(--fonte-texto);color:var(--amarelo);transition:border-color .2s}
.hub-sinal .foto{width:26px;height:26px;font-size:11px}
.hub-sinal b{font-weight:700}
.hub-sinal:hover{border-color:var(--linha-ouro)}
.hub-sinal.grave{color:var(--val-bad);border-color:rgba(185,28,28,.45)}
/* "Vale olhar agora" em cards com sprite inteiro */
/* preenche a linha inteira (antes sobravam 1/3 da seção vazios) */
.hs-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.hs-card{display:flex;flex-direction:column;align-items:center;width:auto;padding:12px 8px;border:1px solid var(--linha-suave);border-radius:16px;background:rgba(255,255,255,.02);text-align:center;transition:border-color .2s,background .2s}
.hs-card:hover{border-color:var(--linha-ouro);background:rgba(245,197,66,.05)}
.hs-card.grave{border-color:rgba(185,28,28,.4)}
.hs-sprite{height:74px;display:flex;align-items:flex-end;justify-content:center}
.hs-sprite .ic-full{height:74px}
.hs-sprite .ic-full img{height:74px;width:auto;image-rendering:pixelated;display:block}
.hs-sprite .foto{width:54px;height:54px}
.hs-nome{font:700 14px/1.15 var(--fonte-texto);color:var(--texto);margin-top:6px}
.hs-sub{font-size:12.5px;color:var(--amarelo);margin-top:2px}
.hs-card.grave .hs-sub{color:var(--val-bad)}
@media (max-width:640px){ .hs-cards{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px} }
.dir-tit{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dir-meta{display:inline-flex;align-items:center;gap:9px;font:500 15px/1 var(--fonte-texto);color:var(--texto-dim);letter-spacing:.03em;text-transform:none}
.dir-meta .luz{width:12px;height:12px}
/* chip de atendimento (WhatsApp) no cabeçalho do setor no hub */
.dir-wpp{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);
  background:var(--sup-1);border:1px solid var(--linha-suave);font:600 13px/1 var(--fonte-texto);margin-left:3px}
.dir-wpp::before{content:'resp';font-size:10px;letter-spacing:.05em;color:var(--texto-apagado);text-transform:uppercase}
.dir-wpp.cv-met-good{color:var(--val-good)}
.dir-wpp.cv-met-warn{color:var(--val-warn)}
.dir-wpp.cv-met-bad{color:var(--val-bad)}
.dir-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:rgba(255,176,32,.16);color:var(--amarelo);font:700 13px/1 var(--fonte-texto)}
.dir-badge.grave{background:rgba(185,28,28,.22);color:var(--val-bad)}
@media (max-width:900px){
  .sub-rk-grid{grid-template-columns:1fr}
  .st-rk{grid-template-columns:1fr}
  .st-rk.duas{grid-template-columns:1fr}
  .pd-duplo{grid-template-columns:1fr}
  .pd-horas-linha{grid-template-columns:1fr}
  .pd-horas-linha .pd-horas-cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}
  .vol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-head,.st-linha{grid-template-columns:52px minmax(0,1fr) 84px 84px 92px;gap:8px;padding:12px 14px}
  .st-head > :nth-child(5),.st-linha > :nth-child(5){display:none}
  .sub-titulo h1{font-size:34px}
  .pd-nome{font-size:32px}
  .pd-cab .pa-comp{align-items:flex-start;text-align:left}
  .pd-triplo{grid-template-columns:1fr}
  .st-hitem{grid-template-columns:104px minmax(0,1fr) auto}
  .st-barras{min-height:110px;gap:6px}
  /* visao 360 no celular: nome em cima, metricas rotuladas embaixo */
  .c360-head{display:none}
  .c360-linha{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 0}
  .c360-linha.com7d{grid-template-columns:repeat(4,minmax(0,1fr))}
  .c360-nome{grid-column:1/-1;white-space:normal}
  .c360-cel{grid-template-columns:44px minmax(0,1fr);gap:8px}
  a.c360-cel{margin:-5px -4px;padding:5px 4px}
  .c360-cel::after{grid-column:1/-1;font:600 10px/1.2 var(--fonte-texto);letter-spacing:.05em;text-transform:uppercase;color:var(--texto-rotulo);margin-top:3px}
  .c360-linha > :nth-child(2)::after{content:'horas'}
  .c360-linha > :nth-child(3)::after{content:'atrasos'}
  .c360-linha > :nth-child(4)::after{content:'entregas'}
  .c360-linha.com7d > :nth-child(2)::after{content:'hoje'}
  .c360-linha.com7d > :nth-child(3)::after{content:'7 dias'}
  .c360-linha.com7d > :nth-child(4)::after{content:'atrasos'}
  .c360-linha.com7d > :nth-child(5)::after{content:'entregas'}
  .sub-seta{width:40px;height:60px;font-size:30px;opacity:.85}
  .sub-seta[data-d="-1"]{left:6px}
  .sub-seta[data-d="1"]{right:6px}
  /* moldura dos subs: o relogio da TV (600px+) nao cabe ao lado do logo;
     o "atualizado" some daqui porque ja aparece no #sub-atual da nav */
  body.modo-sub #logo{height:42px}
  body.modo-sub .relogio{gap:10px}
  body.modo-sub #m-data{font-size:17px}
  body.modo-sub .relogio-sep{height:22px}
  body.modo-sub #m-hora{font-size:24px}
  /* pilula de dots: nunca mais larga que a tela; o nome do slide encolhe com … */
  body.modo-sub #dots.ligado{max-width:calc(100vw - 16px);gap:10px;padding:9px 14px}
  body.modo-sub #dots.ligado .dots-linha{gap:7px;flex:none}
  body.modo-sub #dots.ligado .dot{padding:3px}
  body.modo-sub #dots.ligado .dots-rotulo{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------- telefones (subs): tabela do setor vira cartao de duas linhas ----------
   Em 390px as 4 colunas numericas fixas deixavam ~18px pro nome; aqui a foto e o
   nome ocupam a primeira linha e os numeros se espalham embaixo, rotulados. */
@media (max-width:560px){
  .st-head{display:none}
  .st-linha{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;row-gap:14px;column-gap:8px;padding:16px 16px 13px}
  .st-linha > :nth-child(5){display:block}
  .st-linha .foto{grid-area:1/1;justify-self:start}
  .st-nome{grid-area:1/2/2/5;white-space:normal;line-height:1.2}
  .st-linha .st-num{grid-row:2;text-align:center;font-size:22px}
  .st-linha .st-num::after{display:block;content:'';font:600 11px/1.2 var(--fonte-texto);letter-spacing:.05em;text-transform:uppercase;color:var(--texto-rotulo);margin-top:5px}
  .st-linha > :nth-child(3)::after{content:'pendentes'}
  .st-linha > :nth-child(4)::after{content:'atrasadas'}
  .st-linha > :nth-child(5)::after{content:'entregues'}
  .st-linha > :nth-child(6)::after{content:'horas'}
  /* rankings do setor: menos moldura pro numero, mais espaco pro nome do cliente */
  .st-rk .rk-item{grid-template-columns:30px minmax(0,1fr) auto;column-gap:10px}
  .st-rk .rk-pos{font-size:24px}
  .st-rk .rk-val{font-size:24px}
  /* setas laterais: no celular ocluem a 1a letra do titulo e ficam <44px;
     swipe + dots ja navegam (o proprio JS diz que sao redundantes) -> esconde */
  .sub-seta{display:none}
  /* nav vira trilho horizontal de 1 linha: alvo de toque 44px, sem quebrar em
     4 linhas empurrando o H1 pra fora da 1a viewport. O chip ativo e centralizado
     por JS (centralizaNavAtiva). */
  .sub-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:8px;padding:2px 0 6px;scrollbar-width:none;-ms-overflow-style:none}
  .sub-nav::-webkit-scrollbar{display:none}
  .sub-nav a{flex:none;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;padding:0 15px;font-size:15px}
  .sub-nav .sub-atual{margin-left:8px}
  /* dots: pilula so com bolinhas (o rotulo trunca e alarga demais no 390px),
     alvo de toque do dot maior mantendo o ponto visual pequeno */
  body.modo-sub #dots.ligado{padding:11px 16px}
  body.modo-sub #dots.ligado .dots-rotulo{display:none}
  body.modo-sub #dots.ligado .dot{width:12px;height:12px;padding:7px}
  /* chips de KPI da faixa de rankings: rotulo longo desce em vez de encostar na borda */
  .st-chip{flex-wrap:wrap;padding-right:16px}
  .st-chip span{line-height:1.15}
}

/* ==================== conversas (?sub=conversas / cliente) ==================== */
.cv-meta{font-size:13px;color:var(--texto-rotulo);margin-left:12px;font-weight:500}
.cv-sub{font-size:11px;color:var(--texto-apagado);margin-top:2px}
.cv-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--esp-carta);margin-bottom:var(--esp-painel)}
.cv-card{background:var(--sup-1);border:1px solid var(--linha-fraca);border-radius:12px;padding:14px 16px;transition:.15s;display:block}
.cv-card:hover{border-color:var(--linha-ouro);background:var(--sup-2)}
.cv-card-nome{font-family:var(--fonte-titulo);font-size:15px;margin-bottom:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cv-card-l{display:flex;justify-content:space-between;font-size:12px;color:var(--texto-rotulo);padding:3px 0}
.cv-card-l b{color:var(--texto);font-weight:600}
.cv-card-p{font-size:11px;color:var(--texto-apagado);margin-top:7px;line-height:1.4}
.cv-card-at{font-size:11px;color:var(--val-warn);margin-top:5px;line-height:1.4}
.cv-tab-wrap{overflow-x:auto}
.cv-tab{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
.cv-tab th{font-family:var(--fonte-titulo);font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--texto-rotulo);text-align:left;padding:10px 12px;border-bottom:1px solid var(--linha-suave);white-space:nowrap}
.cv-tab td{padding:10px 12px;border-bottom:1px solid var(--linha-fraca);vertical-align:middle}
.cv-tab tbody tr{transition:.12s}
.cv-tab tbody tr:hover{background:var(--sup-2)}
.cv-tab tbody tr:last-child td{border-bottom:none}
.cv-chips{display:flex;gap:5px;flex-wrap:wrap}
.cv-pill{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:600;white-space:nowrap;line-height:1.6}
.cv-ok{background:rgba(53,200,120,.14);color:var(--val-good)}
.cv-warn{background:rgba(255,176,32,.14);color:var(--val-warn)}
.cv-bad{background:rgba(248,113,113,.14);color:var(--val-bad)}
.cv-info{background:rgba(107,168,245,.14);color:#6BA8F5}
.cv-mute{background:var(--sup-2);color:var(--texto-apagado)}
.cv-mets{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--esp-carta)}
.cv-met{text-align:center;padding:10px 6px;background:var(--sup-1);border-radius:10px}
.cv-met-v{font-family:var(--fonte-titulo);font-size:23px;display:block;line-height:1.2;font-variant-numeric:tabular-nums}
.cv-met-r{font-size:11px;color:var(--texto-rotulo);margin-top:3px;display:block}
.cv-met-ok .cv-met-v{color:var(--val-good)}
.cv-met-warn .cv-met-v{color:var(--val-warn)}
.cv-met-bad .cv-met-v{color:var(--val-bad)}
.cv-svc{border-left:3px solid var(--linha-suave);padding:11px 0 11px 16px;margin-bottom:13px}
.cv-svc:last-child{margin-bottom:0}
.cv-b-ok{border-left-color:var(--val-good)}
.cv-b-warn{border-left-color:var(--val-warn)}
.cv-b-bad{border-left-color:var(--val-bad)}
.cv-b-info{border-left-color:#6BA8F5}
.cv-b-mute{border-left-color:var(--linha-suave)}
.cv-svc-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.cv-svc-cab b{font-family:var(--fonte-titulo);font-size:15px}
.cv-svc-resp{font-size:12px;color:var(--texto-rotulo);margin-left:auto}
/* responsável/setor clicáveis: herdam a cor do contexto, sublinham no hover */
.cv-resp-lk{color:inherit;text-decoration:none;border-bottom:1px dotted var(--linha-suave)}
.cv-resp-lk:hover{color:var(--texto);border-bottom-color:currentColor}
/* Equipe do cliente (quem trabalha/apontou nele) — hub do cliente */
.eq-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.eq-linha{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--sup-1);border:1px solid var(--linha-suave);border-radius:12px;text-decoration:none;transition:border-color .15s}
.eq-linha:hover{border-color:var(--linha-ouro)}
/* integrante sem página própria (freela/apelido não resolvido): não é clicável —
   sinaliza visualmente pra ninguém tentar clicar */
/* chip do papel principal (sócio/gestor) — manda mais que o setor */
.pd-chip-papel{color:var(--ouro);border-color:var(--linha-ouro);background:rgba(245,197,66,.1);font-weight:700}
.pd-nota-gestao{margin:10px 2px 0;color:var(--texto-apagado);font-size:13px;line-height:1.4}
.st-gestao{display:inline-flex;align-items:center;margin-left:8px;padding:2px 8px;border-radius:var(--r-pill);border:1px solid var(--linha-ouro);background:rgba(245,197,66,.1);color:var(--ouro);font:700 10.5px/1.4 var(--fonte-texto);letter-spacing:.05em;text-transform:uppercase;vertical-align:middle}
.eq-semlink{opacity:.62;cursor:default}
.eq-semlink:hover{border-color:var(--linha-suave)}
.eq-linha .foto{width:40px;height:40px;font:600 15px/1 var(--fonte-texto);flex:none}
.eq-info{min-width:0;flex:1}
.eq-nome{font:600 16px/1.2 var(--fonte-texto);color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-setor{font-size:11.5px;color:var(--texto-apagado);text-transform:uppercase;letter-spacing:.04em}
.eq-horas{text-align:right;flex:none}
.eq-horas b{font:700 18px/1 var(--fonte-titulo);color:var(--ouro)}
.eq-horas span{display:block;font-size:11px;color:var(--texto-apagado);margin-top:2px}
/* resumo de fluxo dos serviços no cabeçalho */
.cv-flow{margin-left:10px;display:inline-flex;gap:10px;font:600 13px/1 var(--fonte-texto);text-transform:none;letter-spacing:0}
.cv-flow-ok{color:var(--val-good)}
.cv-flow-bad{color:var(--val-bad)}
.cv-svc p{font-size:13px;color:var(--texto-dim);line-height:1.55;margin-bottom:5px}
.cv-rot{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--texto-apagado);margin-right:6px}
.cv-evs{display:flex;flex-direction:column;gap:3px;margin-top:8px;padding-left:12px;border-left:1px dashed var(--linha-suave)}
.cv-evs span{font-size:12px;color:var(--texto-dim)}
.cv-pend{background:rgba(255,176,32,.07);border-radius:8px;padding:8px 12px;margin-top:8px;font-size:12.5px;color:var(--texto-dim)}
.cv-obs{font-size:13px;color:var(--texto-dim);margin-top:12px;line-height:1.5}
.cv-obs-at{color:var(--val-warn)}
.cv-ini .cv-sub{color:var(--texto-apagado);font-size:12px}
.cv-rot-ok{color:var(--val-good)}
.cv-rot-warn{color:var(--val-warn)}
.cv-rot-mute{color:var(--texto-apagado)}
/* metrica clicavel do hub (combinados sem tarefa -> tela consolidada) */
.cv-met-link{cursor:pointer;text-decoration:none;transition:background .15s}
.cv-met-link:hover{background:var(--fundo-suave,rgba(255,255,255,.04))}
/* tela consolidada de combinados sem tarefa */
.cv-st-cob{font-size:13px;color:var(--texto-dim);padding:12px 16px}
.cv-st-cob b{color:var(--texto)}
.cv-st-cob .cv-sub{color:var(--texto-apagado);font-size:12px;margin-left:6px}
.cv-st-item{padding:12px 0;border-bottom:1px solid var(--linha-fraca)}
.cv-st-item:last-child{border-bottom:none}
.cv-st-grave{border-left:3px solid var(--val-bad);padding-left:12px}
.cv-st-aten{border-left:3px solid var(--val-warn);padding-left:12px}
.cv-st-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cv-st-serv{font-size:12px;color:var(--texto-apagado);text-transform:uppercase;letter-spacing:.4px}
.cv-st-resp{font-size:12px;color:var(--texto-dim);margin-left:auto}
.cv-st-pend{font-size:13.5px;color:var(--texto);margin-top:5px;line-height:1.5}
.cv-st-obs{font-size:12.5px;color:var(--texto-dim);margin-top:4px;line-height:1.45;font-style:italic}
.cv-st-task{font-size:12.5px;color:var(--texto-dim);margin-top:5px}
.cv-st-task a{color:var(--texto)}
.cv-resp{margin-top:8px}
.cv-blq{padding:9px 0;border-bottom:1px solid var(--linha-fraca)}
.cv-blq:last-child{border-bottom:none}
.cv-blq a{font-weight:600;color:var(--texto)}
.cv-blq a:hover{color:var(--ouro)}
.cv-blq .cv-sub{display:block}
.cv-vazio{color:var(--texto-apagado);font-size:13px;padding:14px 0}
.cv-rodape{margin-top:22px;font-size:11.5px;color:var(--texto-apagado);text-align:center;line-height:1.7}

/* ---------- conversas: tabela na grid da casa (redesign) ---------- */
.cv-tot{margin-bottom:var(--esp-bloco)}
/* linha de cliente: o nome ocupa mais altura por causa dos chips, entao
   alinha ao topo em vez de centralizar */
.st-linha.cv-linha{align-items:center}
.cv-linha .st-nome{white-space:normal;overflow:visible;line-height:1.2}
/* chips de servico sob o nome: menores que os do corpo, sem virar ruido */
.cv-chips-min{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.cv-chips-min .cv-pill{font-size:10.5px;padding:2px 8px;opacity:.9}
/* colunas que carregam texto/pilula em vez de numero grande */
.st-num-p{font:600 15px/1.2 var(--fonte-texto);text-align:right}
@media (max-width:900px){
  .cv-chips-min{display:none}
}

/* mobile da tabela de conversas: a grid generica do .st-linha e afinada pro
   setor (rotulos "pendentes/atrasadas/entregues"). Aqui as colunas sao outras,
   entao o ajuste e escopado pela tabela. */
@media (max-width:900px){
  /* cabe 5 colunas: luz + nome + 3 numeros. Resposta e Atend. saem. */
  [data-tabela="conv-clientes"] .st-head > :nth-child(5),
  [data-tabela="conv-clientes"] .st-linha > :nth-child(5){display:block}
  [data-tabela="conv-clientes"] .st-head > :nth-child(6),
  [data-tabela="conv-clientes"] .st-linha > :nth-child(6),
  [data-tabela="conv-clientes"] .st-head > :nth-child(7),
  [data-tabela="conv-clientes"] .st-linha > :nth-child(7){display:none}
}
@media (max-width:560px){
  [data-tabela="conv-clientes"] .st-linha{grid-template-columns:repeat(3,minmax(0,1fr))}
  [data-tabela="conv-clientes"] .st-linha .luz{grid-area:1/1;justify-self:start;align-self:center}
  [data-tabela="conv-clientes"] .st-linha .st-nome{grid-area:1/1/2/4;padding-left:22px}
  [data-tabela="conv-clientes"] .st-linha > :nth-child(3)::after{content:'pendências'}
  [data-tabela="conv-clientes"] .st-linha > :nth-child(4)::after{content:'aguard. adapt'}
  [data-tabela="conv-clientes"] .st-linha > :nth-child(5)::after{content:'sem resposta'}
}

/* ---------- pagina do cliente (redesign) ---------- */
.st-chip.dim b{color:var(--texto-apagado)}
/* luz ao lado do nome do cliente, no mesmo idioma da tabela */
.cv-cab{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cv-cab .luz{width:16px;height:16px;flex:none}
/* cruzamento pendencia x tarefa do eKyte: a linha mais importante do bloco
   quando NAO existe tarefa — o combinado que nunca virou trabalho. */
.cv-cruz{margin-top:8px;font:500 14px/1.5 var(--fonte-texto);color:var(--texto-dim)}
.cv-cruz a{color:var(--ouro);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.cv-cruz a:hover{border-bottom-color:var(--ouro)}
.cv-cruz .ruim{color:var(--val-bad)}
.cv-cruz-alerta{background:rgba(185,28,28,.10);border-left:2px solid var(--val-bad);
  border-radius:0 8px 8px 0;padding:8px 12px;color:var(--texto)}
/* casou com um TICKET (não tarefa): rótulo distinto pra não confundir */
.cv-cruz-ticket .cv-rot{color:var(--info,#5aa9e6);border-color:var(--info,#5aa9e6)}
/* metricas de contexto do atendimento, em linha em vez de 6 caixas iguais */
.cv-sec{margin-top:12px;font:500 13.5px/1.6 var(--fonte-texto);color:var(--texto-apagado)}
.cv-ult{margin-top:6px}
/* redesign do card de serviço: pendência em foco, meta compacta, eventos colapsados */
.cv-svc-st{font-size:12.5px;color:var(--texto-dim);line-height:1.5;margin:6px 0 0}
.cv-svc-st2{font-size:12px;color:var(--texto-apagado);line-height:1.45;margin:6px 0 0}
.cv-pend-hi{background:rgba(255,176,32,.10);border-left:2px solid var(--val-warn);border-radius:0 8px 8px 0;padding:8px 12px;margin-top:8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cv-pend-hi .cv-rot{margin-right:0}
.cv-pend-txt{font-size:13px;color:var(--texto);line-height:1.45;flex:1;min-width:120px}
.cv-pend-quem{font-size:11.5px;color:var(--val-warn);white-space:nowrap}
.cv-svc-linha{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 18px;margin-top:7px}
.cv-svc-linha .cv-cruz{margin-top:0}
.cv-ult-in{font-size:12.5px;color:var(--texto-dim)}
.cv-evs-det{margin-top:7px}
.cv-evs-det>summary{list-style:none;cursor:pointer;font-size:11px;color:var(--texto-apagado);text-transform:uppercase;letter-spacing:.5px;padding:2px 0;user-select:none;outline:none}
.cv-evs-det>summary::-webkit-details-marker{display:none}
.cv-evs-det>summary::after{content:' \25BE';color:var(--texto-apagado)}
.cv-evs-det[open]>summary::after{content:' \25B4'}
.cv-evs-det .cv-evs{margin-top:6px}
/* badge de onboarding (violeta — distinto de ticket-azul e das cores de status) */
.cv-onb{font-size:10.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#b79bfb;background:rgba(167,139,250,.14);border:1px solid rgba(167,139,250,.38);border-radius:20px;padding:2px 9px;line-height:1.5}
.cv-onb-cab{margin-left:4px;font-size:11px;padding:3px 11px;align-self:center}
/* toggle de onboarding na barra de filtros de conversas */
.cv-onb-tgl{cursor:pointer;text-transform:none}
.cv-onb-tgl[aria-pressed="true"]{color:#b79bfb;background:rgba(167,139,250,.15);border-color:rgba(167,139,250,.48)}

/* ===================== conversas: reescrita (filtros, equipe, setores) ===================== */
/* barra de controles / filtros */
.cv-controles{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 var(--esp-painel)}
.cv-busca{flex:1 1 240px;min-width:200px;background:var(--sup-2);border:1px solid var(--linha-suave);
  border-radius:var(--r-pill);padding:11px 18px;color:var(--texto);font:500 15px/1 var(--fonte-texto)}
.cv-busca::placeholder{color:var(--texto-apagado)}
.cv-busca:focus{outline:none;border-color:var(--ouro)}
.cv-sel{background:var(--sup-2);border:1px solid var(--linha-suave);border-radius:var(--r-pill);
  padding:11px 16px;color:var(--texto);font:500 15px/1 var(--fonte-texto);cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23F5C542' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
.cv-sel:focus{outline:none;border-color:var(--ouro)}
.cv-sel option{background:#15151f;color:var(--texto)}
.cv-limpar{background:none;border:1px solid var(--linha-suave);border-radius:var(--r-pill);
  padding:10px 15px;color:var(--texto-dim);font:500 14px/1 var(--fonte-texto);cursor:pointer;transition:.15s}
.cv-limpar:hover{border-color:var(--ouro);color:var(--ouro)}
.cv-count{margin-left:auto;color:var(--texto-rotulo);font:600 14px/1 var(--fonte-texto);white-space:nowrap}

/* celula do nome: cliente + selo + avatares da equipe + chips */
.cv-nome{display:flex;flex-direction:column;gap:6px;min-width:0;padding:4px 0}
.cv-nome-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0}
.cv-cliente{font:600 19px/1.2 var(--fonte-texto);white-space:nowrap;display:flex;align-items:center;gap:9px;flex:none}
.cv-selo{font:700 11px/1 var(--fonte-texto);text-transform:uppercase;letter-spacing:.04em;
  color:var(--val-bad);background:rgba(248,113,113,.13);border:1px solid rgba(248,113,113,.32);
  border-radius:var(--r-pill);padding:4px 9px;white-space:nowrap;flex:none}
/* stack de avatares dos responsaveis, no idioma da .foto do hub */
.cv-equipe{display:flex;align-items:center;flex-wrap:wrap;padding-left:4px}
.cv-resp-av{display:inline-flex;margin-left:-6px;border-radius:50%;transition:transform .12s}
.cv-resp-av:first-child{margin-left:0}
.cv-resp-av:hover{transform:translateY(-2px);z-index:2}
.cv-av{width:30px;height:30px;border-radius:50%;border:2px solid rgba(245,197,66,.5);
  background:linear-gradient(180deg,#242434,#151521);display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;color:var(--texto);font:600 12px/1 var(--fonte-texto);box-shadow:0 0 0 2px var(--fundo);flex:none}
.cv-av img{width:100%;height:100%;object-fit:cover}
.cv-resp-sem .cv-av{border-color:var(--linha-suave);opacity:.7}

/* cards de setor com severidade — sem side-stripe: barra de distribuicao + borda tingida */
.cv-cards-setor{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--esp-carta)}
.cv-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:11px}
.cv-card-nome{font:600 16px/1 var(--fonte-titulo)}
.cv-card-tempo{font:600 13px/1 var(--fonte-texto);color:var(--texto-rotulo);font-variant-numeric:tabular-nums}
.cv-barra{display:flex;height:7px;border-radius:var(--r-pill);overflow:hidden;background:var(--sup-2);gap:2px}
.cv-barra > span{display:block}
.cv-bar-ok{background:var(--val-good)}
.cv-bar-warn{background:var(--val-warn)}
.cv-bar-bad{background:var(--val-bad)}
.cv-card-pe{display:flex;justify-content:space-between;font:500 12px/1 var(--fonte-texto);color:var(--texto-rotulo);margin-top:11px}
.cv-card-ruim{color:var(--val-bad);font-weight:600}
.cv-sev-bad{border-color:rgba(248,113,113,.34)}
.cv-sev-warn{border-color:rgba(255,176,32,.30)}
.cv-vazio-filtro{padding:34px 22px;text-align:center;color:var(--texto-apagado);font:500 15px/1.4 var(--fonte-texto)}

/* mobile: equipe encolhe, selo quebra */
@media (max-width:560px){
  .cv-controles{gap:8px}
  .cv-busca{flex:1 1 100%}
  .cv-count{margin-left:0}
  .cv-av{width:26px;height:26px}
  /* flex:none (padrão) impedia o nome de encolher: nome longo empurrava o selo
     "N sem tarefa" pra fora da linha e ele era cortado na borda do celular */
  .cv-cliente{white-space:normal;flex:1 1 auto;min-width:0}
  .cv-nome-top{gap:8px}
}

/* linha de conversas é div clicável (contém links de avatar) */
.cv-linha{cursor:pointer}
.cv-linha:hover{background:rgba(245,197,66,.05)}
.cv-cliente{color:inherit;text-decoration:none}
.cv-cliente:hover{color:var(--ouro)}

/* ===================== atendimento no setor (destaque acima das tarefas) ===================== */
.cv-setor-at{border-color:var(--linha-ouro)}
.cv-setor-at .pd-ptit{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cv-vermais{font:600 14px/1 var(--fonte-texto);color:var(--ouro);text-transform:none;letter-spacing:0;
  border:1px solid var(--linha-ouro);border-radius:var(--r-pill);padding:7px 15px;transition:.15s}
.cv-vermais:hover{background:rgba(245,197,66,.1)}
.cv-setor-mets{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--esp-carta);margin-bottom:16px}
.cv-setor-mets .cv-met{padding:14px 10px;background:var(--sup-1);border-radius:12px}
.cv-setor-mets .cv-met-v{font-size:30px}
.cv-setor-qual{display:flex;flex-direction:column;gap:8px}
.cv-qual-rot{font:600 12px/1 var(--fonte-texto);text-transform:uppercase;letter-spacing:.06em;color:var(--texto-rotulo)}
.cv-barra-lg{height:11px}

/* mini-gráfico de tendência (sparkline) no painel de atendimento do setor */
.cv-tend{margin-top:16px;border-top:1px solid var(--linha-fraca);padding-top:14px}
.cv-tend-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cv-tend-dir{font:700 13px/1 var(--fonte-texto)}
.cv-met-good.cv-tend-dir,.cv-tend-dir.cv-met-good{color:var(--val-good)}
.cv-spark{display:flex;align-items:flex-end;gap:4px;height:40px}
.cv-spark-col{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center}
.cv-spark-b{width:100%;max-width:22px;border-radius:3px 3px 0 0;min-height:4px;transition:opacity .15s}
.cv-spark-col:hover .cv-spark-b{opacity:.75}
/* tendência colapsável (details nativo): resumo mostra só "tendência · Δ%", abre o sparkline */
details.cv-tend > summary.cv-tend-top{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;margin-bottom:0}
details.cv-tend > summary::-webkit-details-marker{display:none}
details.cv-tend > summary .cv-tend-dir{margin-left:auto}
details.cv-tend > summary::after{content:'\25BE';color:var(--texto-apagado);font-size:12px;transition:transform .15s}
details.cv-tend[open] > summary::after{transform:rotate(180deg)}
details.cv-tend[open] > .cv-spark{margin-top:12px}
details.cv-tend > summary:hover .cv-qual-rot{color:var(--texto-dim)}

/* alerta cruzado (prioridade) no hub */
.cv-alertas{border-color:rgba(248,113,113,.3)}
.cv-alerta-atr{color:var(--val-bad);font-weight:600}

/* ranking de atendimento */
.rk-at-tab .st-head,.rk-at-linha{grid-template-columns:44px 64px minmax(0,1fr) 120px 108px 100px}
.rk-pos{font:700 20px/1 var(--fonte-titulo);color:var(--texto-rotulo);text-align:center}
.rk-at-linha:first-of-type .rk-pos{color:var(--ouro)}

/* setor: tabela de pessoas com coluna de atendimento (8 colunas) */
.st-tab-at .st-head,.st-tab-at .st-linha{grid-template-columns:56px minmax(0,1fr) 86px 86px 86px 80px 96px 104px}
/* qualidade + tendência lado a lado (a tendência era muito alta empilhada) */
.cv-setor-baixo{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:end;margin-top:16px}
.cv-setor-baixo .cv-tend{margin-top:0;border-top:0;padding-top:0}
.cv-setor-baixo .cv-spark{height:32px}
.cv-setor-baixo .cv-setor-qual{align-self:end}
@media (max-width:900px){
  .st-tab-at .st-head,.st-tab-at .st-linha{grid-template-columns:52px minmax(0,1fr) 72px 72px 84px 96px}
  .st-tab-at .st-head > :nth-child(5),.st-tab-at .st-linha > :nth-child(5){display:none}
  .st-tab-at .st-head > :nth-child(6),.st-tab-at .st-linha > :nth-child(6){display:none}
  .cv-setor-baixo{grid-template-columns:1fr}
}

/* coerência + agenda agregadas (setor e hub) */
.coe-agregada .cv-vazio{padding:16px 0;color:var(--texto-apagado)}
.coe-linha{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--linha-fraca);transition:.12s}
.coe-linha:last-child{border-bottom:0}
.coe-linha:hover{background:rgba(245,197,66,.04)}
.coe-linha .foto{width:42px;height:42px;font:600 16px/1 var(--fonte-texto)}
.coe-nome{font:600 15px/1.2 var(--fonte-texto)}
.coe-txt{font:500 13px/1.3 var(--fonte-texto);color:var(--val-warn);margin-top:2px}
.coe-agregada .ag-item{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--linha-fraca)}
.coe-agregada .ag-item:last-child{border-bottom:0}
.coe-agregada .ag-item:hover{background:rgba(245,197,66,.04)}
/* participantes juntos no mesmo evento (nomes clicáveis) + contador */
.ag-quem{color:var(--texto-dim);text-decoration:none;border-bottom:1px dotted var(--linha-suave)}
.ag-quem:hover{color:var(--texto)}
.ag-cont{font-size:12px;color:var(--texto-apagado);font-weight:500}
/* participantes da agenda como avatares empilhados (stack) */
.coe-agregada .ag-sub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.ag-avs{display:inline-flex;align-items:center;margin-right:9px}   /* compensa o -7px do último avatar, que encostava no local */
.ag-av-lk{display:inline-block;margin-right:-7px;transition:transform .12s}
.ag-av-lk:hover{transform:translateY(-2px);z-index:3;position:relative}
.ag-av{width:26px;height:26px;border-radius:50%;border:2px solid var(--fundo-painel,#12141a);object-fit:cover;font:600 10px/22px var(--fonte-texto);text-align:center;background:var(--fundo-chip,#242833);color:var(--texto-dim);display:inline-block;overflow:hidden;vertical-align:middle}
.ag-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.ag-av-mais{margin-left:0;color:var(--texto-apagado)}
.ag-local{color:var(--texto-apagado)}

/* ---------- COMERCIAL no hub ---------- */
.cm-time{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.cm-time-pct{font:700 40px/1 var(--fonte-titulo);color:var(--ouro);flex:none}
.cm-time-sub{color:var(--texto-dim);font-size:14px;flex:none}
.cm-trilho{flex:1 1 220px;min-width:180px;height:14px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);overflow:hidden;display:block}
.cm-trilho.grande{height:18px}
.cm-fill{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,#C9982F,var(--ouro))}
.cm-fill.ok{background:linear-gradient(90deg,var(--ouro),var(--verde))}
.cm-kpis{margin-top:4px}
.cm-meses{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.cm-mes-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font-size:14px;color:var(--texto-dim)}
.cm-mes-top b{color:var(--texto);font-size:15px}
/* corrida reaproveitada da TV, em escala de hub.
   A da TV usa flex:1/min-height:0 pra PREENCHER a altura da cena — no hub isso
   colapsa os cards a zero e eles se sobrepõem. Aqui tudo vira altura natural. */
.rc-hub{display:flex;flex-direction:column;gap:10px;flex:none;min-height:auto;padding-top:0}
.rc-hub .rc-card{flex:none;min-height:auto;grid-template-columns:44px 84px minmax(0,1fr) 116px;gap:16px;padding:12px 18px;align-items:center}
.rc-hub .rc-medal{width:36px;height:36px;font-size:17px;border-width:2px}
.rc-hub .rc-sprite{width:84px;height:84px}
.rc-hub .rc-sprite .foto{width:64px;height:64px;font-size:22px}
.rc-hub .rc-sprite .coroa{width:24px;height:24px;top:-6px}
.rc-hub .rc-mid{padding-right:26px}
.rc-hub .rc-nome{font-size:19px;margin-bottom:6px}
.rc-hub .rc-marcos{height:19px}
.rc-hub .rc-marco .lb{font-size:12px}
.rc-hub .rc-marco .tick{height:6px}
.rc-hub .rc-bar{height:11px;margin-bottom:2px}
.rc-hub .rc-runner{bottom:8px}
.rc-hub .rc-runner .spr-vp{--s:44px}
.rc-hub .rc-trofeu{width:30px;height:30px;bottom:6px}
.rc-hub .rc-placar .val{font-size:30px}
.rc-hub .rc-placar .sub{font-size:13px}
@media (max-width:640px){
  .cm-time-pct{font-size:32px}
  .rc-hub .rc-card{grid-template-columns:32px 60px minmax(0,1fr);gap:10px;padding:10px}
  .rc-hub .rc-placar{display:none}          /* o % já aparece na barra/marcos */
  .rc-hub .rc-sprite{width:60px;height:60px}
  .rc-hub .rc-mid{padding-right:8px}
}

/* aniversários de parceria — cards (a seção merecia peso, era linha fina) */
.aniv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.aniv-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--linha-suave);border-radius:14px;background:rgba(255,255,255,.025)}
.aniv-card.ouro{border-color:var(--linha-ouro);background:rgba(245,197,66,.07)}
.aniv-anos{flex:none;width:58px;height:58px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:2px solid var(--linha-suave);background:rgba(0,0,0,.25)}
.aniv-card.ouro .aniv-anos{border-color:var(--ouro);box-shadow:0 0 16px rgba(245,197,66,.25)}
.aniv-anos b{font:800 24px/1 var(--fonte-titulo);color:var(--texto)}
.aniv-card.ouro .aniv-anos b{color:var(--ouro)}
.aniv-anos span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-rotulo);margin-top:2px}
.aniv-info{min-width:0}
.aniv-cli{font:600 16px/1.25 var(--fonte-texto);color:var(--texto)}
.aniv-dia{font-size:13px;color:var(--texto-apagado);margin-top:3px}

/* ---------- clima (Lajeado/RS) no cabeçalho ---------- */
.m-clima{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--r-pill);
  border:1px solid var(--linha-suave);background:rgba(255,255,255,.04);white-space:nowrap;line-height:1}
.m-clima .cl-ico{font-size:19px;line-height:1}
.m-clima .cl-t{font:700 21px/1 var(--fonte-titulo);color:var(--texto)}
.m-clima .cl-mm{font:500 13px/1 var(--fonte-texto);color:var(--texto-apagado)}

/* ---------- barra do usuário: FIXA no cabeçalho, fora do scroll ---------- */
#moldura{position:relative;flex-wrap:wrap}
.user-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:auto;padding:6px 0 0;
  flex:0 1 auto;min-width:0;max-width:100%}
body.modo-sub #moldura{height:auto;align-items:flex-start;padding-bottom:6px}
.ub-id{display:inline-flex;align-items:center;gap:9px;min-width:0;padding:5px 12px 5px 5px;border-radius:var(--r-pill);
  border:1px solid var(--linha-suave);background:rgba(255,255,255,.04);transition:border-color .15s}
.ub-id:hover{border-color:var(--linha-ouro)}
.ub-foto{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid rgba(245,197,66,.5);flex:none}
.ub-txt{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.ub-nome{font:600 14.5px/1.15 var(--fonte-texto);color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ub-setor{font:600 10.5px/1.2 var(--fonte-texto);letter-spacing:.05em;text-transform:uppercase;color:var(--texto-rotulo)}
.ub-setor.papel{color:var(--ouro)}
.ub-metas{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.ub-m{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--r-pill);
  border:1px solid var(--linha-suave);background:rgba(255,255,255,.03);color:var(--texto-dim);
  font:500 12.5px/1.2 var(--fonte-texto);white-space:nowrap}
.ub-m b{color:var(--texto);font-weight:700}
.ub-m.ruim{border-color:rgba(185,28,28,.45);background:rgba(185,28,28,.12);color:#ff9a9a}
.ub-m.ruim b{color:#ff9a9a}
.ub-m.prio{border-color:var(--linha-ouro);background:rgba(245,197,66,.1);color:var(--ouro);max-width:230px;overflow:hidden;text-overflow:ellipsis}
.ub-m.prio:hover{background:rgba(245,197,66,.18)}
@media (max-width:900px){
  .user-bar{width:100%;margin-left:0;justify-content:flex-start}
  .ub-metas{gap:6px}
  .ub-m{font-size:11.5px;padding:4px 9px}
}
/* corrida clicável */
.rc-card[data-href]{cursor:pointer}
.rc-nome a{color:inherit}
.rc-card[data-href]:hover .rc-nome a{color:var(--ouro)}

/* ================= ESPAÇAMENTO — escala única do hub =================
   Antes: #moldura com 2 paddings conflitantes, .sub-titulo com margin NEGATIVA
   (-8px) e gaps herdados da TV. Resultado: cabeçalho/menu/1ª seção sem ritmo.
   Escala: cabeçalho 22 · nav 18 · título 20 · entre painéis 22 (--esp-bloco). */
body.modo-sub #moldura{padding:22px 4px 0;row-gap:12px;align-items:center}
body.modo-sub #subdash{gap:var(--esp-bloco)}
body.modo-sub .sub-nav{margin:18px 0 0}
body.modo-sub .sub-titulo{margin:20px 0 0;gap:14px}
body.modo-sub .sub-titulo + *{margin-top:0}
/* respiro interno consistente nos painéis e títulos de seção */
.pd-painel > .pd-ptit{margin-bottom:12px}
.val-wrap .val-painel{padding:16px 18px}
.hub-sinais{padding:18px 22px;gap:14px}
.val-cab{padding:12px 6px 6px}
@media (max-width:640px){
  body.modo-sub #moldura{padding:14px 2px 0;row-gap:10px}
  body.modo-sub .sub-nav{margin-top:12px}
  body.modo-sub .sub-titulo{margin-top:14px}
}

/* barra do usuário: identidade encostada na direita, sem sublinhado */
.user-bar{margin-left:auto;justify-content:flex-end}
.user-bar a,.ub-id,.ub-id:hover{text-decoration:none}
.ub-m.alvo{border-color:var(--linha-ouro);background:rgba(245,197,66,.1);color:var(--ouro)}
.ub-m.alvo:hover{background:rgba(245,197,66,.18)}
.ub-m.pin{border-color:rgba(167,139,250,.45);background:rgba(167,139,250,.12);color:#d9a3ff}
.ub-m.pin:hover{background:rgba(167,139,250,.2)}

/* ações da linha (fixar + dispensar) — aparecem no hover */
.val-acoes{flex:none;display:inline-flex;align-items:center;gap:4px;margin-left:8px}
.val-dispensa{width:30px;height:30px;border-radius:50%;border:1px solid transparent;background:transparent;
  color:var(--texto-apagado);cursor:pointer;font-size:15px;line-height:1;opacity:0;transition:opacity .15s,background .15s}
.val-linha:hover .val-dispensa{opacity:.75}
.val-dispensa:hover{opacity:1;background:rgba(53,200,120,.2);border-color:rgba(53,200,120,.5);color:#7ee2a8}
.val-acoes .val-pin-mini{margin-left:0}
/* bloco do colaborador (mesma linguagem, tom próprio) */
.val-eu{border-color:rgba(245,197,66,.35);background:rgba(245,197,66,.04)}
.val-eu .val-tag{color:var(--ouro);border-color:var(--linha-ouro);background:rgba(245,197,66,.12)}
/* data do compromisso futuro (quando a agenda mostra os próximos, não o dia) */
.ag-dia{display:block;font:600 11.5px/1.2 var(--fonte-texto);letter-spacing:.04em;color:var(--texto-rotulo);text-transform:uppercase;margin-bottom:2px}

/* ---------- cabeçalho: HORA · (data sobre o clima), bloco centralizado ----------
   Ordem nova: hora primeiro (é o que se lê de relance), depois data e clima
   empilhados. No hub o #vitais some, então dá pra usar grid 3 colunas e o
   relógio fica CENTRALIZADO de verdade (antes era só o meio do space-between). */
.m-quando{display:flex;flex-direction:column;align-items:flex-start;gap:6px;line-height:1}
.relogio{align-items:center}
#m-data{font-size:26px;letter-spacing:.06em}
body.modo-sub #m-hora{font-size:34px}
body.modo-sub #m-data{font-size:19px}
body.modo-sub .relogio-sep{height:38px}
body.modo-sub .m-clima{padding:4px 10px}
body.modo-sub .m-clima .cl-t{font-size:17px}
body.modo-sub .m-clima .cl-ico{font-size:16px}
body.modo-sub .m-clima .cl-mm{font-size:11.5px}
body.modo-sub #moldura{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:16px}
body.modo-sub .marca{justify-self:start}
body.modo-sub .relogio{justify-self:center}
body.modo-sub .user-bar{justify-self:end;margin-left:0;padding-top:0}
@media (max-width:900px){
  body.modo-sub #moldura{display:flex;flex-wrap:wrap;justify-content:space-between}
  body.modo-sub .relogio{justify-self:auto}
  body.modo-sub .user-bar{justify-self:auto;width:100%;justify-content:flex-start}
}
.ag-mais > summary{padding:9px 2px;color:var(--ouro)}
.ag-mais > summary:hover{color:var(--texto)}

/* hub: só HORA + clima. A data sai — quem está no computador já a tem na tela toda
   (na TV ela fica, porque o painel vive numa parede o dia inteiro). */
body.modo-sub #m-data{display:none}
body.modo-sub .m-quando{flex-direction:row;align-items:center;gap:0}
body.modo-sub .relogio{gap:14px}
/* hora proporcional ao resto do cabeçalho (34px dominava: era 2x o clima) */
body.modo-sub #m-hora{font-size:26px;letter-spacing:.02em}
body.modo-sub .relogio-sep{height:26px}
body.modo-sub .m-clima .cl-t{font-size:16px}
body.modo-sub .relogio{gap:12px}

/* ---------- cabeçalho do hub: TUDO agrupado à direita, na mesma escala ----------
   Ordem: logo … | temperatura · hora | ⚑ decisões · ⚑ atrasadas · 📌 fixados | usuário.
   Uma caixa só (altura/padding/fonte iguais) pra nada puxar mais atenção que o resto. */
body.modo-sub #moldura{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:10px}
body.modo-sub .marca{margin-right:auto}
body.modo-sub .relogio{order:2;justify-self:auto;gap:10px}
body.modo-sub .user-bar{order:3;margin-left:0;width:auto;flex:none;gap:8px}
/* temperatura ANTES da hora (inverte a ordem do HTML, sem tocar na TV) */
body.modo-sub .m-quando{order:1}
body.modo-sub .relogio-sep{order:2;height:22px}
body.modo-sub #m-hora{order:3;font-size:20px;letter-spacing:.02em}
/* mesma caixa pra clima, sinais e identidade */
body.modo-sub .m-clima,body.modo-sub .ub-m,body.modo-sub .ub-id{height:34px;box-sizing:border-box;padding:0 12px;
  display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill)}
body.modo-sub .ub-id{padding:0 12px 0 4px;gap:8px}
body.modo-sub .m-clima .cl-t{font:700 16px/1 var(--fonte-titulo)}
body.modo-sub .m-clima .cl-ico{font-size:15px}
body.modo-sub .ub-foto{width:26px;height:26px}
body.modo-sub .ub-nome{font-size:13.5px}
body.modo-sub .ub-setor{font-size:9.5px}
/* sinais: ícone + número, nada além disso */
.ub-m.sig{gap:6px;font:500 13px/1 var(--fonte-texto)}
.ub-m.sig b{font:700 15px/1 var(--fonte-titulo);font-variant-numeric:tabular-nums}
.sig-ic{font-style:normal;font-size:13px;line-height:1}
.ub-m.sig.alvo .sig-ic{color:var(--amarelo)}
.ub-m.sig.ruim .sig-ic{color:var(--val-bad)}
@media (max-width:900px){
  body.modo-sub .marca{margin-right:auto}
  body.modo-sub .relogio,body.modo-sub .user-bar{order:initial}
}
/* na fonte reduzida o letter-spacing .05em abria demais ("FUND ADOR") */
body.modo-sub .ub-setor{letter-spacing:.02em}

/* ---------- ESTOUROU A META (acima de 100%) ----------
   A barra satura em 100 e o runner para na chegada: sem marcação, quem fez 100,1%
   e quem fez 121% ficavam iguais. Aqui a pista "transborda" e o excedente vira selo. */
.rc-sobra{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;
  font:700 15px/1 var(--fonte-titulo);color:var(--verde);letter-spacing:.02em}
.rc-hub .rc-sobra{font-size:12.5px}
.rc-card.estourou .rc-fill{background:linear-gradient(90deg,var(--ouro),#6ee7a8);
  box-shadow:0 0 18px rgba(110,231,168,.5)}
.rc-card.estourou .rc-bar{border:1px solid rgba(110,231,168,.45)}
.rc-card.estourou .rc-trofeu.aceso{color:#6ee7a8;filter:drop-shadow(0 0 14px rgba(110,231,168,.85))}
.rc-card.estourou .rc-placar .val{color:var(--verde)}
/* com a fita comemorativa (coroa+troféu no próprio sprite) a coroa SVG é redundante;
   ela só volta se o arquivo "-rei" não existir (o onerror marca .sem-fita) */
.rc-sprite .coroa{display:none}
.rc-sprite.sem-fita .coroa{display:block}

/* ---------- ULTRAPASSAGEM na celebração ----------
   Quem foi superado sai deslizando pra esquerda; o novo entra pela direita, rápido,
   como quem passou por ele. Respeita prefers-reduced-motion. */
.cartao-celebra{will-change:transform,opacity}
.cartao-celebra.saindo{animation:ceSai .62s cubic-bezier(.55,0,.85,.3) forwards}
.cartao-celebra.ultrapassou{animation:ceUltrapassa .82s cubic-bezier(.16,1,.3,1) both}
@keyframes ceSai{
  0%{transform:translateX(0) scale(1);opacity:1;filter:blur(0)}
  100%{transform:translateX(-46%) scale(.9);opacity:0;filter:blur(3px)}
}
@keyframes ceUltrapassa{
  0%{transform:translateX(58%) scale(.92);opacity:0;filter:blur(4px)}
  55%{transform:translateX(-4%) scale(1.03);opacity:1;filter:blur(0)}
  100%{transform:translateX(0) scale(1);opacity:1}
}
/* rastro de velocidade atrás de quem ultrapassa */
.cartao-celebra.ultrapassou::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,rgba(245,197,66,.35),rgba(245,197,66,0) 42%);animation:ceRastro .82s ease-out both}
@keyframes ceRastro{0%{opacity:1;transform:translateX(-14%)}100%{opacity:0;transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .cartao-celebra.saindo,.cartao-celebra.ultrapassou,.cartao-celebra.ultrapassou::before{animation:none}
  .cartao-celebra.saindo{opacity:0}
}

/* ---------- SUPERADO: o slide de quem teve o recorde batido ----------
   Entra normal (o feito foi real), mas ENVELHECE na frente de quem assiste:
   perde a cor e ganha a caveirinha — aí sai deslizando pra quem passou entrar. */
.cartao-celebra.superado{animation:ceEnvelhece 1.4s ease-out 2.6s forwards}
@keyframes ceEnvelhece{
  from{filter:grayscale(0) brightness(1)}
  to{filter:grayscale(.9) brightness(.62) contrast(.95)}
}
.ce-caveira{position:absolute;top:14px;right:18px;font-size:40px;line-height:1;z-index:3;
  opacity:0;transform:scale(.4) rotate(-18deg);transform-origin:center;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.6));animation:ceCaveiraEntra .55s cubic-bezier(.2,1.5,.4,1) 3s forwards}
@keyframes ceCaveiraEntra{
  0%{opacity:0;transform:scale(.4) rotate(-18deg)}
  70%{opacity:1;transform:scale(1.18) rotate(4deg)}
  100%{opacity:.95;transform:scale(1) rotate(0)}
}
/* a saída do superado continua valendo (ceSai), só que já em cinza */
.cartao-celebra.superado.saindo{animation:ceSai .62s cubic-bezier(.55,0,.85,.3) forwards;filter:grayscale(.9) brightness(.62)}
@media (prefers-reduced-motion:reduce){
  .cartao-celebra.superado{animation:none;filter:grayscale(.9) brightness(.62)}
  .ce-caveira{animation:none;opacity:.95;transform:none}
}