:root{
  --bg:#FFFFFF; --bg-subtle:#F6F8FB; --surface:#FFFFFF;
  --border:#E4E9F0; --border-strong:#CBD5E1;
  --text:#0E1320; --muted:#48566B; --faint:#5D6B80;
  /* marca Pro Pronto — derivada da logo (gradiente ciano #00FFFF → azul #0000FF) */
  --brand:#0B5BFF;        /* fill · 5.31:1 sobre branco */
  --brand-text:#0A337F;   /* texto e ícone pequeno · 11.7:1 */
  --brand-soft:#E8F0FF;   /* fundo de chip */
  --brand-edge:#0A4FE0;   /* borda de botão azul (glare) */
  --ciano:#00D4FF;        /* SÓ gradiente — 1.77:1, nunca texto */
  --grad:linear-gradient(90deg,#00D4FF 0%,#0B5BFF 100%);
  --wa:#25D366; --wa-ink:#04331C; --wa-edge:#1AA851;
  --late:#C2410C; --late-soft:#FFF1E8;
  --ok:#16A34A; --ok-text:#146C33; --cold:#8A94A6;
  --e1:0 1px 2px rgba(14,19,32,.06), 0 0 0 1px rgba(14,19,32,.04);
  --e2:0 -8px 24px rgba(14,19,32,.14);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:16px;font-weight:500;line-height:1.45;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
  overscroll-behavior-y:none;
}
h1,h2,h3,.num{font-family:'Sora',system-ui,sans-serif}
.num{font-variant-numeric:tabular-nums}
button{font:inherit;font-weight:600;border:none;background:none;color:inherit;cursor:pointer}
.wrap{padding:0 16px;max-width:520px;margin:0 auto}

/* ---------- app shell ---------- */
.topbar{padding:16px 16px 8px;max-width:520px;margin:0 auto;display:flex;align-items:center;gap:12px;min-width:0}
.topbar h1{font-size:22px;font-weight:700;margin:0;letter-spacing:-.01em;line-height:1.2}
.topbar .sub{font-size:14px;color:var(--faint);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back{width:48px;height:48px;margin-left:-12px;display:grid;place-items:center;font-size:22px;color:var(--text)}
/* ---------- cabeçalho de marca ----------
   O SVG da logo tem viewBox 1920x390 e nasce com 1920px de largura se o CSS
   não pegar a tempo — foi o que cobriu a tela inteira. Agora width/height
   estão no próprio SVG e aqui é só refinamento. */
.marca{display:flex;align-items:center;justify-content:flex-start;gap:10px;
  padding:20px 16px 0;max-width:520px;margin:0 auto}
.marca .pplogo{height:26px;width:auto;max-width:150px;display:block;fill:var(--text);
  flex-shrink:0;margin:0}
.marca body.login .pplogo .ppPlus{fill:url(#ppGrad)}
.marca span{font-family:'Sora';font-size:17px;font-weight:600;color:var(--brand-text);
  letter-spacing:-.01em;line-height:1;padding-bottom:2px}
.datehead{font-size:14px;color:var(--faint);padding:14px 16px 14px;max-width:520px;margin:0 auto}

nav.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;background:#fff;border-top:1px solid var(--border);
  box-shadow:var(--e2);padding-bottom:env(safe-area-inset-bottom);
}
nav.tabs button{flex:1;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--faint);font-size:12px;font-weight:600}
nav.tabs button .ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
nav.tabs button[aria-current="true"]{color:var(--brand-text)}

/* ---------- blocos ---------- */
.section-head{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:22px 16px 8px;max-width:520px;margin:0 auto}
.section-head.late{color:var(--late)}
.card{background:var(--surface);border-radius:16px;box-shadow:var(--e1);padding:16px;margin-bottom:12px}
.card .nome{font-size:19px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.card .head{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.passo{font-size:16px;font-weight:500;color:var(--text);margin:2px 0 4px}
.meta{font-size:14px;color:var(--muted)}
.atraso{font-size:14px;font-weight:600;color:var(--late);display:flex;align-items:center;gap:6px;margin-top:4px}

.chip-sit{font-size:12px;font-weight:700;padding:5px 10px;border-radius:8px;white-space:nowrap;flex-shrink:0}
.s-novo{background:#F1F3F7;color:#5C6577}
.s-falei{background:var(--brand-soft);color:var(--brand-text)}
.s-conversando{background:var(--brand);color:#fff}
.s-proposta{background:var(--brand-text);color:#fff}
.s-cliente{background:var(--ok);color:#fff}
.s-gelado{background:#F1F3F7;color:var(--muted)}

.acoes{display:flex;gap:10px;margin-top:14px}
.btn{min-height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:700;padding:0 14px}
.btn-wa{background:var(--wa);color:var(--wa-ink);border:1px solid var(--wa-edge);flex:1}
.btn-out{background:#fff;color:var(--text);border:1px solid var(--border-strong)}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid transparent}
.btn-brand{background:var(--brand);color:#fff;border:1px solid var(--brand-text);flex:1}
.btn:active{transform:scale(.985)}

/* ---------- placar ---------- */
.placar{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border-radius:16px;box-shadow:var(--e1);padding:14px 16px;margin-bottom:4px}
.placar .bar{height:10px;border-radius:999px;background:#EDF1F6;overflow:hidden;margin-bottom:7px}
.placar .fill{display:block;height:100%;background:var(--grad);border-radius:999px}
.placar .lbl{font-size:16px;font-weight:700}
.placar .sub{font-size:12px;color:var(--faint)}
.placar.feita{background:var(--brand-soft);box-shadow:none;border:1px solid #BDD3FF}
.placar.feita .lbl{color:var(--brand-text)}

.faixa{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--late-soft);border:1px solid #F5D5BE;border-radius:14px;padding:13px 16px;margin-bottom:12px;color:var(--late);font-weight:700;font-size:16px}
.faixa .s{font-size:14px;font-weight:500;color:#8A4B25;display:block}

/* ---------- radar ---------- */
/* 5 chips não cabem em 375px. Rolagem horizontal com snap, e o texto
   NUNCA quebra dentro do chip — quebrar fazia "Vale a pena" virar duas linhas. */
.modos{display:flex;gap:8px;padding:4px 16px 12px;max-width:520px;margin:0 auto;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximal;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.modos::-webkit-scrollbar{display:none}
.modo{min-height:46px;padding:0 15px;border-radius:999px;border:1px solid var(--border-strong);
  background:#fff;font-size:14px;font-weight:600;color:var(--muted);display:flex;align-items:center;
  gap:6px;white-space:nowrap;flex:0 0 auto;scroll-snap-align:start}
.modo[aria-pressed="true"]{background:var(--brand-soft);border-color:#A9C6FF;color:var(--brand-text)}
/* min-width:0 é o que faz o select encolher. Sem isso ele nunca fica menor
   que a opção mais longa ("Todas as categorias") e estoura a linha. */
.filtros{display:flex;gap:10px;padding:0 16px 10px;max-width:520px;margin:0 auto}
.filtros select{flex:1 1 0;min-width:0;width:100%;min-height:48px;border-radius:12px;
  border:1px solid var(--border-strong);background:#fff;padding:0 34px 0 12px;
  font:inherit;font-weight:600;font-size:14px;color:var(--text);
  text-overflow:ellipsis;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2348566B%27 stroke-width=%272%27 stroke-linecap=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:18px}
.motivos{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:12px 0;margin:12px 0}
.motivos li{font-size:16px;margin:0 0 6px;list-style:none;padding-left:18px;position:relative}
.motivos li:last-child{margin-bottom:0}
.motivos li::before{content:"";position:absolute;left:4px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--brand)}
.chance{font-size:12px;font-weight:700;color:var(--brand-text);background:var(--brand-soft);padding:5px 10px;border-radius:8px;white-space:nowrap}

/* ---------- escada ---------- */
.escada{background:#fff;border-radius:16px;box-shadow:var(--e1);overflow:hidden}
.degrau{display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;padding:16px;border-bottom:1px solid var(--border)}
.degrau:last-child{border-bottom:none}
.degrau .l1{display:flex;align-items:center;gap:10px}
.degrau .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.degrau .t{font-size:16px;font-weight:700;flex:1}
.degrau .n{font-size:19px;font-weight:700;font-family:'Sora';font-variant-numeric:tabular-nums}
.degrau .arr{color:var(--faint);font-size:19px}
.degrau .bar{height:8px;background:#EDF1F6;border-radius:999px;overflow:hidden}
.degrau .bar i{display:block;height:100%;border-radius:999px}
.degrau .note{font-size:14px;color:var(--muted)}
.degrau .note.warn{color:var(--late);font-weight:600}
.busca{width:100%;min-height:52px;border-radius:12px;border:1px solid var(--border-strong);padding:0 14px;font:inherit;font-weight:500;font-size:16px;margin-bottom:16px;background:#fff}

/* ---------- ficha ---------- */
.bloco-head{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:24px 0 8px}
.proximo{background:var(--brand-soft);border:1px solid #BDD3FF;border-radius:16px;padding:16px}
.proximo .p{font-size:19px;font-weight:600;color:var(--brand-text);margin-bottom:4px}
.frase{background:var(--bg-subtle);border-radius:16px;padding:16px;font-size:16px;line-height:1.5}
.hist{border-left:2px solid var(--border);padding-left:14px;margin-left:4px}
.hist .it{margin-bottom:16px;position:relative}
.hist .it::before{content:"";position:absolute;left:-20px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--border-strong)}
.hist .d{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.hist .t{font-size:16px;font-weight:600}
.hist .q{font-size:14px;color:var(--muted);background:var(--bg-subtle);padding:10px 12px;border-radius:12px;margin-top:6px}
.stickybar{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:30;background:#fff;border-top:1px solid var(--border);box-shadow:var(--e2);padding:10px 16px}
.stickybar .in{display:flex;gap:10px;max-width:520px;margin:0 auto}

/* ---------- sheet ---------- */
.scrim{position:fixed;inset:0;background:rgba(14,19,32,.42);z-index:60;opacity:0;pointer-events:none;transition:opacity .24s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:#fff;border-radius:24px 24px 0 0;box-shadow:var(--e2);padding:22px 16px calc(22px + env(safe-area-inset-bottom));transform:translateY(102%);transition:transform .24s cubic-bezier(.2,.8,.2,1);max-width:520px;margin:0 auto}
.sheet.on{transform:translateY(0)}
.sheet .grab{width:38px;height:4px;border-radius:999px;background:var(--border-strong);margin:-8px auto 16px}
.sheet h2{font-size:22px;font-weight:600;margin:0 0 18px;line-height:1.25}
.desfechos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.desf{min-height:88px;border-radius:14px;border:1px solid var(--border-strong);background:#fff;font-size:16px;font-weight:600;padding:10px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.25}
.desf:active{background:var(--bg-subtle)}
.desf.hot{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-text)}
.datas{display:flex;flex-wrap:wrap;gap:10px}
.data{min-height:52px;padding:0 16px;border-radius:999px;border:1px solid var(--border-strong);background:#fff;font-size:16px;font-weight:600}
.data.pre{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-text)}
.data:active{transform:scale(.97)}
.escolhido{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--brand-text);margin-bottom:18px}
.mic{width:100%;min-height:56px;border-radius:12px;border:1px dashed var(--border-strong);color:var(--muted);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px}
.passoedit{border-top:1px solid var(--border);margin-top:18px;padding-top:14px}
.passoedit .k{font-size:14px;color:var(--faint);margin-bottom:2px}
.passoedit .v{font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px}

.toast{position:fixed;left:16px;right:16px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:70;background:var(--text);color:#fff;border-radius:14px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:600;max-width:488px;margin:0 auto;transform:translateY(220%);opacity:0;visibility:hidden;transition:transform .2s,opacity .2s;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.toast.on{transform:translateY(0);opacity:1;visibility:visible}
.toast button{color:#7FC4FF;font-weight:700}

/* ---------- semana ---------- */
.big{font-family:'Sora';font-size:36px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.metrica{display:flex;align-items:center;gap:12px;margin:14px 0}
.metrica .mn{font-family:'Sora';font-size:19px;font-weight:700;width:26px;font-variant-numeric:tabular-nums}
.metrica .mb{flex:1;height:8px;background:#EDF1F6;border-radius:999px;overflow:hidden}
.metrica .mb i{display:block;height:100%;background:var(--grad);border-radius:999px}
.metrica .ml{font-size:16px;flex:1}
.metrica .mt{font-size:14px;color:var(--faint);white-space:nowrap}
.hr{height:1px;background:var(--border);margin:22px 0}
.semanas{display:flex;align-items:flex-end;gap:10px;height:96px;position:relative;margin:14px 0 6px}
.semanas .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.semanas .b{width:100%;background:var(--brand);border-radius:6px;min-height:4px}
.semanas .b.pale{background:#BDD3FF}
.semanas .cap{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.metaline{position:absolute;left:0;right:0;border-top:1px dashed var(--border-strong);font-size:12px;color:var(--faint)}
.nota{background:var(--bg-subtle);border-radius:16px;padding:16px;font-size:16px;line-height:1.5;color:var(--muted)}
.nota .assina{display:block;margin-top:10px;font-weight:700;color:var(--text);font-size:14px}

/* ---------- mapa ---------- */
.mapabox{background:var(--bg-subtle);border-radius:16px;overflow:hidden;box-shadow:var(--e1);position:relative}
.legenda{display:flex;flex-wrap:wrap;gap:14px;padding:14px 4px 0;font-size:14px;color:var(--muted)}
.legenda span{display:flex;align-items:center;gap:7px}
.legenda i{width:11px;height:11px;border-radius:50%;display:block}
.pino{transition:fill .5s, r .5s}

/* ---------- escola ---------- */
.trilha{position:relative;padding-left:8px}
.passoT{display:flex;gap:14px;align-items:flex-start;position:relative;padding-bottom:14px}
.passoT:last-child{padding-bottom:0}
.passoT .lin{position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--border)}
.passoT.ok .lin{background:var(--brand)}
.passoT .bola{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:'Sora';font-size:19px;font-weight:700;flex-shrink:0;z-index:1;border:2px solid var(--border);background:#fff;color:var(--faint)}
.passoT.ok .bola{background:var(--brand);border-color:var(--brand);color:#fff}
.passoT.now .bola{border-color:var(--brand);color:var(--brand-text);box-shadow:0 0 0 4px var(--brand-soft)}
.passoT .corpo{flex:1;background:#fff;border-radius:16px;box-shadow:var(--e1);padding:14px 16px;min-width:0}
.passoT.lock .corpo{background:var(--bg-subtle);box-shadow:none;border:1px dashed var(--border-strong)}
.passoT .tt{font-size:16px;font-weight:700;line-height:1.3}
.passoT .ss{font-size:14px;color:var(--muted);margin-top:2px}
.atalho{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border-radius:16px;box-shadow:var(--e1);padding:16px;margin-bottom:12px}
.atalho .em{width:46px;height:46px;border-radius:14px;background:var(--brand-soft);display:grid;place-items:center;font-size:22px;flex-shrink:0}
.atalho .tt{font-size:16px;font-weight:700}
.atalho .ss{font-size:14px;color:var(--muted)}
.progressoTop{background:var(--brand-soft);border:1px solid #BDD3FF;border-radius:16px;padding:14px 16px;margin-bottom:16px}
.progressoTop .bar{height:8px;background:#D3E2FF;border-radius:999px;overflow:hidden;margin-top:8px}
.progressoTop .bar i{display:block;height:100%;background:var(--grad);border-radius:999px}
.videoCard{display:flex;gap:12px;background:#fff;border-radius:14px;box-shadow:var(--e1);padding:14px;margin-bottom:10px;align-items:flex-start}
.videoCard .play{width:44px;height:44px;border-radius:12px;background:#0E1320;color:#fff;display:grid;place-items:center;flex-shrink:0;font-size:15px}
/* os tres textos eram <span> inline e colidiam na mesma linha */
.videoCard .corpoV{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.videoCard .vt{display:block;font-size:16px;font-weight:700;line-height:1.3;color:var(--text)}
.videoCard .vc{display:block;font-size:13px;color:var(--faint);font-weight:600}
.olho{display:block;background:var(--bg-subtle);border-radius:10px;padding:10px 12px;font-size:14px;
  line-height:1.45;color:var(--muted);margin-top:2px}
.olho b{color:var(--text)}
.aulaTxt{font-size:16px;line-height:1.6}
.aulaTxt p{margin:0 0 14px}
.aulaTxt b{color:var(--text)}
.tarefa{background:var(--brand-soft);border:1px solid #BDD3FF;border-radius:16px;padding:16px}
.check{width:100%;min-height:56px;border-radius:12px;display:flex;align-items:center;gap:12px;padding:0 16px;font-size:16px;font-weight:700;border:1px solid var(--brand-text);background:var(--brand-text);color:#fff;margin-top:14px;justify-content:center}
.check.done{background:#fff;color:var(--brand-text)}
.objItem{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border-radius:14px;box-shadow:var(--e1);padding:16px;margin-bottom:10px}
.objItem .q{flex:1;font-size:16px;font-weight:600;line-height:1.3}
.flash{background:#fff;border-radius:20px;box-shadow:var(--e1);padding:24px 20px;min-height:230px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.flash .eti{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.flash .fq{font-family:'Sora';font-size:22px;font-weight:600;line-height:1.3}
.flash .fr{font-size:16px;line-height:1.55;text-align:left}
.auto{display:flex;gap:8px;margin-top:14px}
.auto button{flex:1;min-height:56px;border-radius:12px;border:1px solid var(--border-strong);background:#fff;font-size:14px;font-weight:700;line-height:1.2;padding:0 6px}
.auto .g{border-color:var(--brand);color:var(--brand-text);background:var(--brand-soft)}
.balao{border-radius:16px;padding:14px 16px;margin-bottom:12px;font-size:16px;line-height:1.5;max-width:88%}
.balao.cli{background:var(--bg-subtle);border-bottom-left-radius:4px}
.balao.rute{background:var(--brand-soft);color:#0A337F;margin-left:auto;border-bottom-right-radius:4px}
.opc{width:100%;text-align:left;background:#fff;border:1px solid var(--border-strong);border-radius:14px;padding:14px 16px;font-size:16px;font-weight:600;line-height:1.35;margin-bottom:10px}
.fb{border-radius:14px;padding:14px 16px;font-size:16px;line-height:1.5;margin-bottom:12px}
.fb.bom{background:var(--brand-soft);border:1px solid #BDD3FF;color:#0A337F}
.fb.ruim{background:var(--late-soft);border:1px solid #F5D5BE;color:#8A4B25}
.hint{font-size:14px;color:var(--faint);text-align:center;padding:10px 16px 0}
.demo{position:fixed;top:0;left:0;right:0;z-index:50;background:#0E1320;color:#fff;font-size:12px;font-weight:600;padding:7px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.demo button{color:#7FC4FF;font-size:12px;font-weight:700}
body.hasdemo .topbar{padding-top:44px}
body.hasdemo .datehead{padding-top:44px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- login ---------- */
body.login{padding-bottom:0}
body.login nav.tabs{display:none}
body.login .marca{justify-content:center}
body.login .pplogo{height:30px;width:auto;display:block;fill:var(--text);margin:0 auto}
.pplogo .ppPlus{fill:url(#ppGrad)}

/* ---------- vagas da semana ---------- */
.vagas{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--surface);border-radius:16px;box-shadow:var(--e1);padding:14px 16px;margin:12px 0 16px}
.vagas b{font-size:16px;font-weight:700;display:block}
.vagas .s{font-size:13px;color:var(--faint);display:block;line-height:1.35}
.vagas .pontos{display:flex;gap:5px;flex-shrink:0}
.vagas .pontos i{width:11px;height:11px;border-radius:50%;display:block;background:var(--brand)}
.vagas .pontos i.cheia{background:var(--border-strong)}
.vagas.ultima{background:#FFF8F2;box-shadow:none;border:1px solid #F5D5BE}
.vagas.ultima b{color:var(--late)}
.vagas.ultima .pontos i{background:var(--late)}
.vagas.ultima .pontos i.cheia{background:#EBD3C2}
.vagas.lotada{background:var(--bg-subtle);box-shadow:none;border:1px solid var(--border)}
.vagas.lotada b{color:var(--muted)}
.vagas.lotada .pontos i{background:var(--border-strong)}

.vagasGrande{border-radius:18px;padding:24px 20px;text-align:center;background:var(--brand-soft);border:1px solid #BDD3FF}
.vagasGrande .pontosG{display:flex;gap:10px;justify-content:center;margin-bottom:14px}
.vagasGrande .pontosG i{width:22px;height:22px;border-radius:50%;display:block;background:var(--brand)}
.vagasGrande .pontosG i.cheia{background:#BDD3FF}
.vagasGrande .tt{font-family:'Sora';font-size:24px;font-weight:700;color:var(--brand-text)}
.vagasGrande .ss{font-size:15px;color:var(--brand-text);line-height:1.5;margin-top:8px;opacity:.85}
.vagasGrande.ultima{background:#FFF8F2;border-color:#F5D5BE}
.vagasGrande.ultima .tt,.vagasGrande.ultima .ss{color:var(--late)}
.vagasGrande.ultima .pontosG i{background:var(--late)}
.vagasGrande.ultima .pontosG i.cheia{background:#EBD3C2}
.vagasGrande.lotada{background:var(--bg-subtle);border-color:var(--border)}
.vagasGrande.lotada .tt{color:var(--text)}
.vagasGrande.lotada .ss{color:var(--muted)}
.vagasGrande.lotada .pontosG i{background:var(--border-strong)}

/* ---------- mapa real ---------- */
.mapaReal{height:min(62vh,520px);border-radius:16px;overflow:hidden;box-shadow:var(--e1);background:var(--bg-subtle)}
.leaflet-container{font-family:'Plus Jakarta Sans',sans-serif;border-radius:16px}
.leaflet-popup-content{margin:12px 14px}
.leaflet-popup-content-wrapper{border-radius:12px}
.modos .modo b{margin-left:5px;font-weight:700}

/* ---------- quadro de leads (kanban) ---------- */
.quadro{display:flex;gap:12px;overflow-x:auto;padding:4px 16px 16px;
  scroll-snap-type:x proximal;-webkit-overflow-scrolling:touch}
.quadro::-webkit-scrollbar{height:6px}
.quadro::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}
.coluna{flex:0 0 82vw;max-width:300px;scroll-snap-align:start;display:flex;flex-direction:column;min-height:0}
.colHead{display:flex;align-items:center;gap:8px;padding:8px 4px 10px;position:sticky;top:0;background:var(--bg);z-index:2}
.colHead .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.colHead .ct{font-size:15px;font-weight:700;flex:1}
.colHead .cn{font-size:15px;font-weight:700;color:var(--faint)}
.colBody{background:var(--bg-subtle);border-radius:14px;padding:10px;min-height:120px;
  display:flex;flex-direction:column;gap:10px;transition:background .12s,outline-color .12s;
  outline:2px solid transparent;outline-offset:-2px}
.colBody.alvo{background:var(--brand-soft);outline-color:var(--brand)}
.vazioCol{font-size:14px;color:var(--faint);text-align:center;padding:14px 0}

.kcard{background:#fff;border-radius:12px;box-shadow:var(--e1);padding:12px;cursor:grab;
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.kcard:active{cursor:grabbing}
.kcard.arrastando{opacity:.35}
.kcard.fantasma{position:fixed;z-index:999;pointer-events:none;opacity:.95;cursor:grabbing;
  box-shadow:0 12px 32px rgba(14,19,32,.28);transform:rotate(1.5deg)}
.kn{font-size:15px;font-weight:700;line-height:1.25;margin-bottom:3px}
.km{font-size:13px;color:var(--faint)}
.kp{font-size:14px;color:var(--muted);margin-top:7px;line-height:1.35}
.kf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
.kdata{font-size:13px;color:var(--muted)}
.katraso{font-size:13px;color:var(--late);font-weight:700}
.ksemdata{font-size:13px;color:var(--late)}
.kscore{font-size:13px;font-weight:700;color:var(--brand-text);background:var(--brand-soft);
  padding:2px 8px;border-radius:99px}

@media (min-width:900px){
  .quadro{padding:4px 24px 16px}
  .coluna{flex:1 1 0;max-width:none;min-width:190px}
}

/* ---------- quem decide ---------- */
.decisorCard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border-radius:14px;padding:14px 16px;background:#fff;box-shadow:var(--e1)}
.decisorCard b{font-size:16px;font-weight:700;display:block}
.decisorCard .s{font-size:13px;color:var(--faint);display:block;line-height:1.4}
.decisorCard .ini{width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Sora';font-size:19px;font-weight:700;flex-shrink:0}
.decisorCard.vazio{background:var(--bg-subtle);box-shadow:none;border:1px dashed var(--border-strong)}
.decisorCard.vazio b{color:var(--muted)}
textarea.busca{font-family:inherit;line-height:1.45}

/* ---------- com quem você falou (1ª pergunta do sheet) ---------- */
.comQuem{display:flex;flex-direction:column;gap:10px}
.cq{min-height:64px;border-radius:14px;border:1px solid var(--border-strong);background:#fff;
  font-size:18px;font-weight:700;text-align:left;padding:0 20px;display:flex;align-items:center}
.cq:active{background:var(--bg-subtle)}

/* ---------- rede de segurança de responsividade ----------
   Nenhum bloco pode estourar a largura da tela. Isto é trava, não estilo:
   um select que não encolhe ou um nome longo empurrava a linha inteira. */
html, body { max-width: 100%; overflow-x: hidden; }
.wrap, .topbar, .modos, .filtros, .datehead, .marca, .section-head { box-sizing: border-box; }
.card, .kcard, .atalho, .decisorCard, .vagas, .placar, .objItem { max-width: 100%; overflow-wrap: anywhere; }
select, input, textarea, button { max-width: 100%; }

/* a barra de abas é fixa em TODAS as telas — reforço explícito */
nav.tabs { position: fixed !important; left: 0; right: 0; bottom: 0; }

/* telas maiores: o conteúdo para de esticar e ganha respiro */
@media (min-width: 600px) {
  .wrap, .topbar, .modos, .filtros, .datehead, .marca, .section-head { padding-left: 24px; padding-right: 24px; }
}

/* ============================================================
   HIERARQUIA DE TEXTO — título e subtítulo
   Bug recorrente: .tt e .ss são <span>, e span é inline. Sem display:block
   eles colam na mesma linha e o card vira um bloco de texto ilegível.
   Esta regra vale para TODO par título/subtítulo do app, de uma vez.
   ============================================================ */
.atalho .tt, .atalho .ss,
.passoT .tt, .passoT .ss,
.decisorCard b, .decisorCard .s,
.vagas b, .vagas .s,
.faixa .s,
.videoCard .vt, .videoCard .vc {
  display: block;
}

/* o corpo de cada item vira coluna, com respiro entre título e subtítulo */
.atalho > span:not(.em),
.decisorCard > span:not(.ini),
.vagas > span:not(.pontos) {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}

/* TÍTULO — o que ela lê primeiro, de relance */
.atalho .tt, .passoT .tt, .decisorCard b, .vagas b {
  font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--text);
  letter-spacing: -.01em;
}

/* SUBTÍTULO — explica o título, nunca compete com ele */
.atalho .ss, .passoT .ss, .decisorCard .s, .vagas .s, .faixa .s {
  font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--faint);
}
.faixa .s { color: #8A4B25; }

.atalho { align-items: center; gap: 14px; padding: 15px 16px; }
.passoT .ss { margin-top: 0; }