/* =========================================================================
   AKROS — Seção 5 · A tela de Leads   (lista + ficha, modo claro)

   PORQUE ESTA VERSÃO EXISTE
   A primeira tentativa era um painel ESCURO de 1778x659 — proporção 2,7:1.
   O modal real do produto é `max-w-5xl`, ou seja 1024px: a peça estava
   esticada 70% além da largura para a qual foi desenhada, e por isso todo
   painel de dentro ficava com metade da largura vazia. Não era gosto, era
   medida errada.

   O conserto tem duas partes:
   1. A janela ganhou TETO (1340px) e fica centrada, com respiro dos dois
      lados — a ficha volta a ter os ~1000px do produto.
   2. A ficha deixou de ser um modal por cima da tabela e virou o painel de
      DIREITA de uma lista: mestre-detalhe. Assim ela nunca estica (a coluna
      tem largura própria) e as duas metades da promessa — a linha e o
      dossiê — aparecem ao mesmo tempo.

   A pele é a clara REAL da plataforma, de `styles/akros-customize.css`
   (bloco LIGHT): #E8EBF0 de fundo, #FFFFFF de cartão, #CDD3DB de borda,
   #DC2626 de marca, e a escala de texto #54565E/#5F616A/#6B6D77/#737581.
   ⚠️ 30/09: esse vermelho é a marca ANTIGA. A marca de hoje é #0A80E2 e a
   pele da janela (chips, avatar, botão, TopBar) foi refeita sobre a tela
   real em css/plataforma.css, seção 4 — que carrega depois e vence este arquivo.

   TODO seletor nasce sob `#dossie` ou sob `.tela`: é a seção com mais nomes
   curtos do site (.et, .kp, .at, .rw) e um deles solto atropelaria outra
   folha — foi assim que um `.msg` quebrou o celular da seção 2.
   ========================================================================= */

#dossie{
  /* Neutro e QUENTE, ao contrario das outras quatro secoes. Duas razoes:
     a janela e quase branca e precisa de um chao mais fundo para virar
     objeto; e sendo a ultima secao, a virada de temperatura fecha a pagina
     em vez de repetir o azul pela quinta vez. */
  /* 🩸 A EMENDA. A secao de cima (o estudio) termina com meia elipse branca
     no canto de baixo à ESQUERDA, entao o pe dela nao e o #E2EDF4 que o
     gradiente declara — e mais claro daquele lado. Um halo aproximado deixa
     um degrau atravessando a pagina. A solucao nao e aproximar, e CONTINUAR
     a mesma elipse: as duas secoes tem 100svh, entao a de la
     (`90% 70% at 6% 106%`) e a daqui (`at 6% -6%`) sao as duas metades da
     MESMA figura, e a costura some por construcao, em qualquer janela.
     ⚠️ Se a secao vizinha mudar, este halo TEM de mudar junto. */
  background:
    radial-gradient(90% 70% at 6% -6%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#E2EDF4 0%,#D4D8D2 16%,#D9D4C9 44%,#BEC0C1 76%,#A6ABAF 100%);
  isolation:isolate;
}

/* =======================================================================
   O CHAO — pintura, nao fotografia
   Manchas grandes e desfocadas, grao por cima e vinheta em volta. Custa
   zero byte, nao chega depois do texto e nunca fica pixelado.
   ======================================================================= */
.fundo{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  /* A pintura ENTRA por dissolucao: sem a mascara ela comecava de uma vez na
     primeira linha da secao e desenhava um risco reto contra o pe da secao
     anterior. Os primeiros 15% sao a transicao. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 15%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 15%);
  /* Uma faixa horizontal larga insinua HORIZONTE. Sem ela as manchas
     redondas ficam boiando e o chao le como nevoa, nao como pintura. */
  background:linear-gradient(178deg,
    rgba(246,240,229,.55) 0%, rgba(233,228,216,.22) 26%,
    rgba(180,188,194,.20) 54%, rgba(150,157,162,.34) 100%);
}
.fundo span{position:absolute;display:block;border-radius:50%;filter:blur(110px)}
.fundo__a{
  width:min(74vw,1180px);aspect-ratio:1.35;top:-40%;left:-8%;
  background:radial-gradient(circle,rgba(247,239,225,1),rgba(247,239,225,0) 64%);
}
.fundo__b{
  width:min(62vw,980px);aspect-ratio:1.2;top:6%;right:-14%;
  background:radial-gradient(circle,rgba(171,186,199,.92),rgba(171,186,199,0) 66%);
}
.fundo__c{
  width:min(88vw,1420px);aspect-ratio:2.1;bottom:-26%;left:-6%;
  background:radial-gradient(circle,rgba(132,141,146,.82),rgba(132,141,146,0) 68%);
}
/* o unico toque de cor: um resto do azul da marca, quase apagado, para o
   chao nao virar cinza morto */
.fundo__d{
  width:min(46vw,720px);aspect-ratio:1;bottom:-8%;right:4%;
  background:radial-gradient(circle,rgba(118,152,186,.52),rgba(118,152,186,0) 68%);
}
.fundo__grao{
  border-radius:0!important;filter:none!important;
  inset:-60%;width:auto;height:auto;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fundo__vin{
  border-radius:0!important;filter:none!important;
  inset:0;width:auto;height:auto;
  background:radial-gradient(ellipse 92% 70% at 50% 44%, transparent 34%, rgba(52,56,62,.40) 100%);
}

/* A faixa sobe acima do chao. */
#dossie .faixa{position:relative;z-index:1}

#dossie .sechead{
  max-width:none;text-align:center;margin:0 auto clamp(12px,1.9vh,26px);
  display:flex;flex-direction:column;align-items:center;flex:none;
}
/* A tela e a estrela: o titulo encolhe para nao disputar com ela. */
#dossie .sechead__title{font-size:min(clamp(1.6rem,2.9vw,2.65rem),4.2vh);margin-bottom:11px;max-width:24ch}
/* 20/10, o dono: «coloque isso numa linha so: Seus clientes, de capa a capa». Do
   tablet para cima o titulo nao quebra; no celular (<761) ele quebra se precisar. */
@media (min-width:761px){#dossie .sechead__title{max-width:none;white-space:nowrap}}
#dossie .sechead__eyebrow{margin-bottom:11px}
#dossie .sechead__sub{max-width:56ch;font-size:clamp(.94rem,1vw,1.06rem)}
#dossie .faixa{flex:1;min-height:0;display:flex;flex-direction:column}
#dossie{position:relative}

/* =======================================================================
   A JANELA — com teto, centrada, com ar em volta
   ======================================================================= */
.tela{
  --app:  #E8EBF0;   /* fundo geral do app       */
  --bar:  #F0F2F5;   /* topbar e rail            */
  --card: #FFFFFF;   /* cartoes                  */
  --well: #F4F6F9;   /* fundo de apoio           */
  --pit:  #F1F3F6;   /* pocos dentro dos cartoes */
  --b1:   #CDD3DB;   /* borda de cartao          */
  --b2:   #DDE2E8;   /* separador                */
  --b3:   #E6EAEF;   /* divisoria interna        */
  --t1:   #54565E;   /* titulos     7,3:1        */
  --t2:   #5F616A;   /* corpo       6,2:1        */
  --t3:   #6B6D77;   /* rotulos     5,2:1        */
  --t4:   #737581;   /* legendas    4,6:1        */
  --t5:   #A9ABB3;   /* vazio                    */
  --rub:  #DC2626;
  --vrd:  #059669;
  --amb:  #D97706;
  --azu:  #2563EB;

  /* Sem cabecalho na secao, a tela ocupa a faixa inteira. Os dois tetos
     existem para uma coisa so': manter a FICHA perto dos 1024px do produto
     (`max-w-5xl` no LeadModal). Com 1440 de janela, 46 de rail, 33 de vao e
     a lista em ~317, sobra ~1044 para ela. Mexer num destes numeros sem
     conferir a largura da ficha e como a peca volta a esticar. */
  width:min(100%,1440px);max-height:900px;
  margin:0 auto;position:relative;flex:1;min-height:0;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--app);
  border:1px solid rgba(255,255,255,.7);
  border-radius:calc(14px * var(--r));
  /* Sombra de OBJETO POUSADO: uma difusa e larga (a que separa do chao) e
     uma curta e escura logo abaixo da borda (a que da contato). Sem a
     segunda a janela parece colada, e nao pousada. */
  box-shadow:
    0 74px 130px -40px rgba(38,42,50,.46),
    0 26px 52px -22px rgba(38,42,50,.28),
    0 3px 8px -3px rgba(38,42,50,.18),
    0 0 0 1px rgba(52,58,68,.13),
    inset 0 1px 0 rgba(255,255,255,.9);
  color:var(--t2);
  isolation:isolate;
}
.tela svg{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- barra de titulo ---- */
.tela__bar{
  flex:none;display:flex;align-items:center;gap:12px;
  padding:0 12px;height:clamp(30px,3.3vh,38px);
  background:linear-gradient(180deg,#F4F6F9 0%,#E8EBF0 100%);
  border-bottom:1px solid var(--b1);
}
.tela__crumb{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--t4);min-width:0}
.tela__crumb img{width:15px;height:14px}
.tela__crumb b{color:var(--t1);font-weight:600}
.tela__crumb i{font-style:normal;opacity:.42}
.tela__eu{margin-left:auto;display:flex;align-items:center;gap:7px}
.tela__f{
  display:flex;align-items:center;gap:6px;height:20px;padding:0 8px;
  background:var(--card);border:1px solid var(--b1);border-radius:calc(6px * var(--r));
  font-size:10.5px;color:var(--t4);white-space:nowrap;
}
.tela__f::after{content:"";width:0;height:0;border:3px solid transparent;border-top-color:currentColor;margin-top:3px;opacity:.7}
.tela__me{
  width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  font-size:9px;font-weight:700;background:#DBEAFE;color:var(--azu);border:1px solid #BFDBFE;
}

/* ---- corpo: rail · lista · ficha ---- */
.tela__corpo{flex:1;min-height:0;display:flex;gap:clamp(7px,.7vw,11px);padding:clamp(7px,.7vw,11px)}
.tela__menu{
  flex:none;width:clamp(38px,3vw,46px);align-self:stretch;
  background:var(--bar);border:1px solid var(--b2);border-radius:calc(10px * var(--r));
  padding:6px 5px;display:flex;flex-direction:column;gap:2px;overflow:hidden;
}
.tela__mi{
  position:relative;display:grid;place-items:center;
  height:clamp(22px,2.6vh,29px);color:var(--t3);
  border-radius:calc(7px * var(--r));
}
.tela__mi svg{width:14px;height:14px;stroke-width:1.6}
.tela__mi.on{background:#FEE2E2;color:var(--rub)}
.tela__mi.on::before{
  content:"";position:absolute;left:-5px;top:50%;transform:translateY(-50%);
  width:2px;height:56%;background:var(--rub);
}

/* =======================================================================
   A LISTA — o mestre
   ======================================================================= */
.lista{
  flex:none;width:clamp(226px,22%,340px);min-height:0;
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--b1);border-radius:calc(10px * var(--r));
  box-shadow:0 1px 2px rgba(15,23,42,.05);overflow:hidden;
}
.lista__topo{
  flex:none;display:flex;align-items:center;gap:8px;
  padding:clamp(7px,.9vh,11px) 10px clamp(5px,.7vh,8px);
}
.lista__topo b{font-size:13px;font-weight:650;color:var(--t1);letter-spacing:-.012em}
.lista__topo em{font-style:normal;font-size:10.5px;color:var(--t4)}
.lista__novo{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;flex:none;
  height:22px;padding:0 9px;border-radius:calc(6px * var(--r));
  background:var(--rub);color:#fff;font-size:10.5px;font-weight:600;
  box-shadow:0 2px 8px rgba(220,38,38,.28);
}
.lista__novo svg{width:11px;height:11px;stroke-width:2.2}
.lista__busca{
  flex:none;display:flex;align-items:center;gap:7px;margin:0 10px clamp(6px,.8vh,9px);
  height:clamp(23px,2.7vh,28px);padding:0 9px;
  background:var(--pit);border:1px solid var(--b2);border-radius:calc(7px * var(--r));
  font-size:11px;color:var(--t4);
}
.lista__busca svg{width:11px;height:11px;flex:none}
.lista__busca span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.lista__rolo{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  border-top:1px solid var(--b3);
  scrollbar-width:thin;scrollbar-color:#C7CDD6 transparent;
}
.lista__rolo::-webkit-scrollbar{width:6px}
.lista__rolo::-webkit-scrollbar-thumb{background:#C7CDD6}
.lista__rolo::-webkit-scrollbar-track{background:transparent}

.lista__l{
  position:relative;display:block;width:100%;text-align:left;
  padding:clamp(6px,.8vh,9px) 10px clamp(6px,.8vh,9px) 11px;
  border-bottom:1px solid var(--b3);cursor:pointer;
  transition:background .16s var(--ease);
}
.lista__l:hover,.lista__l:focus-visible,.lista__l.is-guia{background:var(--well);outline:none}
.lista__l.on{background:#FEF4F4}
.lista__l.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--rub)}

.ll1{display:flex;align-items:center;gap:8px;min-width:0}
.ll__av{
  flex:none;width:clamp(24px,2.6vh,29px);height:clamp(24px,2.6vh,29px);border-radius:50%;
  display:grid;place-items:center;font-size:9.5px;font-weight:700;border:1px solid;
}
.ll__n{flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--t1);
  letter-spacing:-.008em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista__l.on .ll__n{color:#3F4148}
.ll__sc{flex:none;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.ll2{display:flex;align-items:center;gap:6px;margin-top:4px;
  padding-left:calc(clamp(24px,2.6vh,29px) + 8px)}
.ll__sub{flex:1;min-width:0;font-size:10px;color:var(--t4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lista__pe{
  flex:none;display:flex;align-items:center;gap:6px;
  padding:clamp(5px,.7vh,8px) 10px;border-top:1px solid var(--b3);
  background:var(--well);font-size:10px;color:var(--t4);
}
.lista__pe b{color:var(--t3);font-weight:600}
.lista__pe span{margin-left:auto;display:flex;gap:3px}
.lista__pe span i{
  font-style:normal;min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px;
  border:1px solid var(--b2);border-radius:calc(4px * var(--r));font-size:9px;
}
.lista__pe span i.on{background:var(--rub);border-color:transparent;color:#fff;font-weight:700}

/* =======================================================================
   A FICHA — o detalhe. Mesma anatomia do modal do produto.
   ======================================================================= */
.dossie{
  flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--app);border:1px solid var(--b1);border-radius:calc(10px * var(--r));
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}
.dossie svg{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.dossie__topo{
  flex:none;display:flex;align-items:center;gap:8px;
  padding:7px 11px;background:var(--card);border-bottom:1px solid var(--b3);
}
.dossie__id{
  display:inline-flex;align-items:center;gap:4px;padding:3px 8px;white-space:nowrap;
  background:var(--pit);border:1px solid var(--b2);border-radius:calc(7px * var(--r));
  font-size:10.5px;color:var(--t4);font-variant-numeric:tabular-nums;
}
.dossie__tag{
  padding:3px 8px;border-radius:calc(7px * var(--r));font-size:10.5px;font-weight:600;
  background:#FEE2E2;color:var(--rub);border:1px solid #FECACA;white-space:nowrap;
}
.dossie__ir{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;
  border-radius:calc(7px * var(--r));font-size:10.5px;font-weight:600;white-space:nowrap;
  background:#FEE2E2;color:var(--rub);border:1px solid #FECACA;
}
.dossie__ir svg{width:11px;height:11px;flex:none}

.dossie__cab{flex:none;display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--card)}
.dossie__av{
  flex:none;width:clamp(34px,3.8vh,44px);height:clamp(34px,3.8vh,44px);
  border-radius:calc(12px * var(--r));display:grid;place-items:center;
  font-size:13.5px;font-weight:700;border:1px solid;
}
.dossie__quem{flex:1;min-width:0}
.dossie__nome{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.dossie__nome h3{font-size:clamp(13px,1.05vw,16px);font-weight:650;color:#3F4148;letter-spacing:-.016em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dossie__chips{display:flex;flex-wrap:wrap;gap:5px}
.dossie__chips span{
  display:inline-flex;align-items:center;gap:5px;padding:2px 7px;
  background:var(--pit);border:1px solid var(--b2);border-radius:calc(6px * var(--r));
  font-size:10.5px;color:var(--t3);white-space:nowrap;
}
.dossie__chips svg{width:10px;height:10px;flex:none;opacity:.55}
.dossie__chips .cnl{font-weight:600}
.dossie__chips .cnl::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.dossie__medidor{flex:none;display:flex;align-items:center;gap:8px}
.dossie__medidor small{
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t4);text-align:right;line-height:1.25;
}
.gauge{position:relative;width:clamp(38px,4.2vh,50px);height:clamp(38px,4.2vh,50px);flex:none}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:4;stroke-linecap:round}
.gauge b{position:absolute;inset:0;display:grid;place-items:center;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}

.dossie__abas{
  flex:none;display:flex;align-items:center;gap:2px;padding:0 12px;
  background:var(--card);border-top:1px solid var(--b3);border-bottom:1px solid var(--b1);
}
.aba{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:clamp(6px,.85vh,9px) 11px;font-size:11px;font-weight:500;
  color:var(--t4);cursor:pointer;white-space:nowrap;transition:color .2s var(--ease);
}
.aba svg{width:12px;height:12px;stroke-width:1.6}
.aba:hover{color:var(--t2)}
.aba.on{color:var(--rub);font-weight:600}
.aba.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--rub)}
.dossie__val{
  margin-left:auto;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;white-space:nowrap;
  border-radius:calc(7px * var(--r));font-size:11px;font-variant-numeric:tabular-nums;
  background:#D1FAE5;color:#047857;border:1px solid #A7F3D0;
}

.dossie__corpo{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(9px,1.2vh,13px);
  display:flex;flex-direction:column;gap:clamp(8px,1vh,11px);
  scrollbar-width:thin;scrollbar-color:#C7CDD6 transparent;
}
.dossie__corpo::-webkit-scrollbar{width:7px}
.dossie__corpo::-webkit-scrollbar-thumb{background:#C7CDD6}
.dossie__corpo::-webkit-scrollbar-track{background:transparent}

/* =======================================================================
   PECAS DO CORPO
   ======================================================================= */
.pn{
  background:var(--card);border:1px solid var(--b2);border-radius:calc(10px * var(--r));
  padding:clamp(9px,1.1vh,13px);box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.pn__t{
  display:flex;align-items:center;gap:7px;margin-bottom:9px;
  font-size:9.5px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;color:var(--t4);
}
.pn__t svg{width:12px;height:12px;flex:none}
.pn__t em{margin-left:auto;font-style:normal;letter-spacing:0;text-transform:none;font-weight:500;font-size:10px}
.pn--v .pn__t{color:#047857}
.pn--r .pn__t{color:#B91C1C}

.duplo{display:grid;grid-template-columns:1.85fr 1fr;gap:clamp(8px,1vh,11px);align-items:start}
.duplo > div{display:flex;flex-direction:column;gap:clamp(8px,1vh,11px);min-width:0}

.eta{display:flex;align-items:flex-start;gap:0}
.eta__p{
  flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:10px;color:var(--t4);text-align:center;
}
.eta__p i{width:9px;height:9px;border-radius:50%;background:#fff;
  border:2px solid #CDD3DB;position:relative;z-index:2}
.eta__p::before{content:"";position:absolute;top:3.5px;left:-50%;width:100%;height:2px;background:#DDE2E8;z-index:1}
.eta__p:first-child::before{display:none}
.eta__p.fez{color:var(--t3)}
.eta__p.fez i{background:var(--vrd);border-color:var(--vrd)}
.eta__p.fez::before{background:var(--vrd)}
.eta__p.aqui{color:#3F4148;font-weight:600}
.eta__p.aqui i{background:var(--rub);border-color:var(--rub);box-shadow:0 0 0 4px rgba(220,38,38,.14)}

.ins{display:grid;grid-template-columns:auto auto 1fr}
.ins > div{padding:0 clamp(9px,.9vw,15px);min-width:0}
.ins > div:first-child{padding-left:0}
.ins > div + div{border-left:1px solid var(--b3)}
.ins small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t4);margin-bottom:6px;white-space:nowrap}
.ins b{font-size:clamp(15px,1.4vw,20px);font-weight:700;font-variant-numeric:tabular-nums;
  line-height:1;letter-spacing:-.024em}
.ins p{font-size:11.5px;color:var(--t2);line-height:1.42}
.ins u{display:block;text-decoration:none;font-size:10px;color:var(--t4);margin-top:6px}

.rw{display:flex;align-items:center;gap:9px;padding:7px 9px;
  background:var(--pit);border:1px solid var(--b3);border-radius:calc(8px * var(--r));font-size:11px}
.rw + .rw{margin-top:5px}
.rw__ic{flex:none;width:24px;height:24px;display:grid;place-items:center;
  border-radius:calc(7px * var(--r));background:#fff;border:1px solid var(--b2);color:var(--t4)}
.rw__ic svg{width:12px;height:12px}
.rw__c{flex:1;min-width:0}
.rw__c b{display:block;font-size:11.5px;font-weight:600;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw__c small{display:block;font-size:10px;color:var(--t4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw__d{flex:none;text-align:right;font-size:10.5px;color:var(--t4);white-space:nowrap}
.rw__d b{display:block;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--t2)}

.selo{display:inline-block;padding:2px 7px;border-radius:calc(5px * var(--r));
  font-size:9.5px;font-weight:600;border:1px solid;white-space:nowrap}
.selo--ok  {background:#D1FAE5;color:#047857;border-color:#A7F3D0}
.selo--esp {background:#FEF3C7;color:#B45309;border-color:#FDE68A}
.selo--frio{background:#EEF0F3;color:var(--t4);border-color:var(--b2)}

.at{display:flex;gap:9px;padding-bottom:9px;position:relative}
.at:last-child{padding-bottom:0}
.at::before{content:"";position:absolute;left:4px;top:12px;bottom:-1px;width:1px;background:var(--b2)}
.at:last-child::before{display:none}
.at > i{flex:none;width:9px;height:9px;border-radius:50%;margin-top:3px;position:relative;z-index:2;
  background:var(--azu);box-shadow:0 0 0 3px #DBEAFE}
.at.v > i{background:var(--vrd);box-shadow:0 0 0 3px #D1FAE5}
.at.a > i{background:var(--amb);box-shadow:0 0 0 3px #FEF3C7}
.at.r > i{background:var(--rub);box-shadow:0 0 0 3px #FEE2E2}
.at__c{flex:1;min-width:0}
.at__c b{font-size:11px;font-weight:500;color:var(--t2)}
.at__c em{float:right;font-style:normal;font-size:10px;color:var(--t4);padding-left:8px}
.at__c small{display:block;font-size:10.5px;color:var(--t4);margin-top:2px}

.grp{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(146px,15vw,214px),1fr));gap:2px 16px}
.cmp{display:flex;flex-direction:column;gap:2px;padding:5px 0;border-bottom:1px solid var(--b3);min-width:0}
.cmp small{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--t4)}
.cmp b{font-size:11.5px;font-weight:500;color:var(--t2);word-break:break-word}
.cmp b.vazio{color:var(--t5);font-weight:400}

.kps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.kp{background:var(--pit);border:1px solid var(--b3);border-radius:calc(8px * var(--r));
  padding:8px 10px;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.kp__t{display:flex;align-items:center;gap:6px;min-width:0}
.kp__t i{flex:none;width:18px;height:18px;display:grid;place-items:center;
  border-radius:calc(6px * var(--r));background:currentColor}
.kp__t i svg{width:10px;height:10px;stroke:#fff;stroke-width:2.4}
.kp__t span{font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp b{font-size:clamp(14px,1.35vw,20px);font-weight:700;font-variant-numeric:tabular-nums;line-height:1;
  letter-spacing:-.02em;flex:none}

.caixa{background:#F0FDF6;border:1px solid #BBF0D5;
  border-radius:calc(10px * var(--r));padding:clamp(9px,1.1vh,13px)}
.caixa p{font-size:11.5px;line-height:1.55;color:var(--t2)}

.lst{display:flex;flex-direction:column;gap:5px}
.lst > span{display:flex;align-items:center;gap:8px;padding:5px 9px;font-size:11px;color:var(--t2);
  background:var(--pit);border:1px solid var(--b3);border-radius:calc(7px * var(--r))}
.lst > span::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.lst > span b{margin-left:auto;font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--t4)}

.dia{background:var(--pit);border:1px solid var(--b3);border-radius:calc(8px * var(--r));padding:8px 10px}
.dia + .dia{margin-top:5px}
.dia__t{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.dia__t i{width:6px;height:6px;border-radius:50%;flex:none}
.dia__t b{font-size:11px;font-weight:600;color:var(--t1)}
.dia__t u{margin-left:auto;text-decoration:none;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.dia__t u span{padding:1px 6px;border-radius:calc(5px * var(--r));font-size:9.5px;
  background:#fff;border:1px solid var(--b2);color:var(--t4)}
.dia p{font-size:11px;line-height:1.5;color:var(--t2)}

.nota{background:var(--pit);border:1px solid var(--b3);border-radius:calc(8px * var(--r));
  padding:9px 11px;font-size:11.5px;line-height:1.55;color:var(--t2)}
.obs{background:var(--pit);border:1px solid var(--b3);border-left:2px solid var(--amb);
  border-radius:calc(8px * var(--r));padding:8px 10px}
.obs + .obs{margin-top:5px}
.obs b{display:block;font-size:11.5px;font-weight:600;color:var(--t1);margin-bottom:3px}
.obs p{font-size:11px;line-height:1.5;color:var(--t2)}
.obs small{display:block;font-size:10px;color:var(--t4);margin-top:5px}
.psso{display:flex;align-items:center;gap:9px;padding:6px 9px;background:var(--pit);
  border:1px solid var(--b3);border-radius:calc(7px * var(--r));font-size:11.5px;color:var(--t2)}
.psso + .psso{margin-top:5px}
.psso > i{flex:none;width:14px;height:14px;border:1.5px solid #BFC5CE;background:#fff;
  border-radius:calc(4px * var(--r));display:grid;place-items:center}
.psso > i svg{width:9px;height:9px;stroke:#fff;stroke-width:2.8;opacity:0}
.psso.fez > i{border-color:var(--vrd);background:var(--vrd)}
.psso.fez > i svg{opacity:1}
.psso.fez span{color:var(--t4);text-decoration:line-through}
.psso em{margin-left:auto;font-style:normal;font-size:10px;color:var(--t4);white-space:nowrap}

.solta{border:1px dashed var(--b1);border-radius:calc(9px * var(--r));
  padding:clamp(10px,1.4vh,16px);text-align:center;font-size:10.5px;color:var(--t4)}
.solta b{display:block;font-size:11.5px;color:var(--t3);font-weight:600;margin-bottom:3px}

/* ---- etapa · canal · responsavel · score, na escala clara ---- */
.et{display:inline-block;padding:2px 8px;border-radius:calc(6px * var(--r));
  font-size:10.5px;font-weight:600;white-space:nowrap;border:1px solid}
.et--new        {background:#DBEAFE;color:#1D4ED8;border-color:#BFDBFE}
.et--qualified  {background:#CFFAFE;color:#0E7490;border-color:#A5F3FC}
.et--quote      {background:#FEF3C7;color:#B45309;border-color:#FDE68A}
.et--negotiation{background:#EDE9FE;color:#6D28D9;border-color:#DDD6FE}
.et--won        {background:#D1FAE5;color:#047857;border-color:#A7F3D0}
.et--lost       {background:#EEF0F3;color:#6B6D77;border-color:#DDE2E8}
.et--mini{padding:1px 6px;font-size:9.5px;font-weight:600}

.cn{display:inline-flex;align-items:center;gap:6px;font-size:11px;white-space:nowrap}
.cn::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.cn--whatsapp {color:#12A150}
.cn--instagram{color:#C1275C}
.cn--website  {color:#2563EB}
.cn--referral {color:#7C3AED}

.ag{display:inline-block;padding:2px 7px;border-radius:calc(5px * var(--r));font-size:10.5px;
  border:1px solid;white-space:nowrap}
.ag--sp1{background:#DBEAFE;color:#1D4ED8;border-color:#BFDBFE}
.ag--sp2{background:#D1FAE5;color:#047857;border-color:#A7F3D0}
.ag--rj1{background:#FEE2E2;color:#B91C1C;border-color:#FECACA}
.ag--pr1{background:#FEF3C7;color:#B45309;border-color:#FDE68A}

.sc--alto {color:var(--vrd)}
.sc--medio{color:var(--amb)}
.sc--baixo{color:var(--t4)}

/* =======================================================================
   O GUIA — apresenta a tela e some ao primeiro gesto de verdade
   ======================================================================= */
.seta{
  position:absolute;z-index:9;left:0;top:0;width:22px;height:22px;pointer-events:none;
  opacity:0;transform:translate(-60px,-60px);
  transition:opacity .4s var(--ease), transform 1.05s cubic-bezier(.55,.06,.24,1);
  filter:drop-shadow(0 4px 9px rgba(20,40,66,.34));
}
.seta.viva{opacity:1}
.seta svg{width:100%;height:100%;display:block}
.seta i{position:absolute;left:-2px;top:-2px;width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(220,38,38,.8);opacity:0}
.seta.bate i{animation:seta-bate .55s var(--ease)}
@keyframes seta-bate{
  0%{opacity:.9;transform:scale(.25)}
  70%{opacity:.32;transform:scale(1.2)}
  100%{opacity:0;transform:scale(1.5)}
}

.dica{
  position:absolute;z-index:8;left:50%;bottom:clamp(9px,1.3vh,16px);transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;white-space:nowrap;
  background:rgba(255,255,255,.95);border:1px solid var(--b1);
  border-radius:calc(99px * var(--r));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:11px;color:var(--t2);
  box-shadow:0 12px 30px -14px rgba(20,48,78,.45);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.dica i{width:6px;height:6px;border-radius:50%;background:var(--rub);
  box-shadow:0 0 0 3px rgba(220,38,38,.16);animation:blink 2.2s ease-in-out infinite}
.dica.some{opacity:0;transform:translateX(-50%) translateY(8px);pointer-events:none}

.fonte{flex:none;text-align:center;font-size:11.5px;color:rgba(48,52,58,.52);
  padding-top:clamp(8px,1.2vh,14px)}
.fonte b{color:rgba(48,52,58,.7);font-weight:600}

/* =======================================================================
   JANELAS ESTREITAS E BAIXAS
   ======================================================================= */
@media (max-height:780px){
  #dossie .sechead{margin-bottom:clamp(8px,1.2vh,18px)}
  #dossie .sechead__eyebrow{margin-bottom:10px}
  #dossie .sechead__title{margin-bottom:10px}
  #dossie .sechead__sub{max-width:84ch;font-size:clamp(.88rem,1vw,1.02rem)}
  #dossie .fonte{padding-top:clamp(6px,.9vh,10px);font-size:10.5px}
}

@media (max-width:1180px){
  #dossie .sechead__title{max-width:none}
  .duplo{grid-template-columns:1fr}
  .kps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ins{grid-template-columns:1fr 1fr}
  .ins > div:nth-child(3){grid-column:1 / -1;border-left:0;padding-left:0;
    padding-top:9px;margin-top:9px;border-top:1px solid var(--b3)}
}

/* Abaixo de 880 a lista e a ficha nao cabem lado a lado sem espremer as duas.
   A lista vira uma FITA horizontal em cima — continua sendo o mestre, e o
   dedo rola nela; a ficha fica com a largura inteira. */
@media (max-width:880px){
  #dossie{min-height:auto}
  .tela{max-height:none;min-height:min(80vh,620px)}
  .tela__corpo{flex-direction:column}
  .tela__menu{display:none}
  .lista{width:auto;flex:none}
  .lista__rolo{display:flex;overflow-x:auto;overflow-y:hidden;border-top:1px solid var(--b3)}
  .lista__l{flex:none;width:clamp(148px,44vw,196px);border-bottom:0;border-right:1px solid var(--b3)}
  .lista__l.on::before{inset:auto 0 0 0;width:auto;height:2px}
  .lista__pe{display:none}
  .dossie{flex:1}
  .dossie__cab{flex-wrap:wrap;gap:9px}
  .dossie__abas{overflow-x:auto;scrollbar-width:none}
  .dossie__abas::-webkit-scrollbar{display:none}
  .dossie__val{display:none}
  .grp{grid-template-columns:1fr}
  .kps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:560px){
  .dossie__ir b{display:none}
  .lista__topo em{display:none}
}

@media (prefers-reduced-motion:reduce){
  .seta{display:none}
}