/* Painel LS: TEMA CLARO (SISTEMA-LS-DESIGN-CLARO, 18/10/2026). Gerado por gerar_css_claro.py a partir de marca-painel.css (escuro) + claro-camada.css.
   Mesmos tokens e nomes de classe do escuro: trocar o tema e trocar a folha de estilo. Fundo branco, texto preto, azul-marinho nos destaques. */
/* Painel LS: sistema de design escuro (SISTEMA-LS-DESIGN, 17/10/2026)
   Tokens do DESIGN-BRIEF secao 2. Celular primeiro. Sem biblioteca. */
:root{
  /* mesmos nomes do escuro; so os valores mudam (fundo branco, texto preto, azuis claros) */
  --noite:#FFFFFF; --noite-2:#EAF2FF;
  --vidro:#FFFFFF; --vidro-forte:#F4F8FF;
  --borda:rgba(0,74,173,.16); --borda-forte:rgba(0,74,173,.42);
  --blue:#004AAD; --blue-lift:#2F6FD6; --blue-claro:#004AAD;
  --glow:rgba(0,74,173,.16);
  --paper:#0A1020; --bone:#0A1020; --dg-fraco:#3B4663; --dg-mudo:#59647F;
  --verde:#14A06A; --amarelo:#E5A400; --vermelho:#D92D20;
  --f-disp:'Jost',system-ui,sans-serif; --f-body:'Inter',system-ui,sans-serif; --f-hand:'Gochi Hand',cursive;
  --r-sm:10px; --r:16px; --r-lg:22px;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px;
  --lateral:248px; --lateral-mini:76px; --tap:44px;
  /* novos, so do tema claro */
  --ink:#0A1020; --navy:#0B1F4D; --navy-2:#13306F;
  --azul-50:#F2F7FF; --azul-100:#E3EEFF; --azul-200:#C9DDFB; --azul-300:#9DBFF3;
  --st-alteracao:#FFF3C4; --st-alteracao-b:#E5A400; --st-aprovado:#DDF5E8; --st-aprovado-b:#14A06A; --st-programado:#DCEBFF; --st-programado-b:#2F6FD6;
  --txt-vermelho:#B42318; --txt-amarelo:#7A5200; --txt-verde:#0B6B43;
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;min-height:100vh;font:400 15px/1.5 var(--f-body);color:var(--ink);background:var(--noite);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-disp);color:var(--paper);margin:0;font-weight:500;letter-spacing:-.01em}
a{color:var(--blue-claro);text-decoration:none}
:focus-visible{outline:2px solid var(--blue-claro);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--blue);color:#fff;padding:8px 12px;border-radius:8px}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nota{font-family:var(--f-hand);color:var(--blue-claro);font-size:20px;transform:rotate(-2deg);display:inline-block}
.mudo{color:var(--dg-fraco)}.pequeno{font-size:12.5px}

/* cartao de vidro */
.vidro{background:var(--vidro);border:1px solid var(--borda);border-radius:var(--r);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 40px -12px rgba(0,30,90,.7),inset 0 1px 0 rgba(0,74,173,.08);
  transition:border-color .2s,box-shadow .2s,transform .2s}
.vidro:hover{border-color:var(--borda-forte);box-shadow:0 14px 44px -10px var(--glow),inset 0 1px 0 rgba(0,74,173,.08)}
.vidro--foco{border-color:var(--borda-forte);box-shadow:0 0 36px -6px var(--glow)}
.cartao{padding:var(--e4) var(--e5)}
.cartao h2{font-size:18px;margin-bottom:var(--e3)}

/* botoes e chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 var(--e5);
  border:1px solid transparent;border-radius:999px;font:600 14px var(--f-body);cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--blue),#2F78E0);box-shadow:0 0 24px -4px var(--glow);transition:box-shadow .2s,transform .2s}
.btn:hover{box-shadow:0 0 36px 0 var(--glow);transform:translateY(-1px)}
.btn--fantasma{background:rgba(91,149,242,.1);border-color:var(--borda);box-shadow:none;color:var(--ink)}
.btn--fantasma:hover{background:rgba(91,149,242,.2);box-shadow:none}
.btn--pequeno{min-height:36px;padding:0 var(--e4);font-size:13px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:999px;font:500 12.5px var(--f-body);
  color:var(--dg-fraco);background:rgba(91,149,242,.08);border:1px solid var(--borda)}
.chip--ativo{color:#fff;background:rgba(0,74,173,.55);border-color:var(--blue-lift)}

/* semaforo com halo */
.sem{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent),0 0 14px 2px color-mix(in srgb,var(--c) 70%,transparent)}
.sem--verde{--c:var(--verde)}.sem--amarelo{--c:var(--amarelo)}.sem--vermelho{--c:var(--vermelho)}

/* foto redonda com inicial */
.foto{--t:40px;width:var(--t);height:var(--t);border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  font:600 calc(var(--t)*.4) var(--f-disp);color:#fff;background:radial-gradient(circle at 30% 25%,#5B95F2,var(--blue) 70%);
  box-shadow:0 0 0 2px rgba(143,187,255,.35),0 0 18px -2px var(--glow)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto--p{--t:28px}.foto--g{--t:56px}

/* esqueleto */
.esq{border-radius:8px;background:linear-gradient(90deg,rgba(91,149,242,.08),rgba(143,187,255,.2),rgba(91,149,242,.08));background-size:200% 100%;animation:esq 1.4s linear infinite}
@keyframes esq{to{background-position:-200% 0}}

/* shell */
.app{display:grid;grid-template-columns:var(--lateral) 1fr;min-height:100vh}
.lateral{position:sticky;top:0;height:100vh;padding:var(--e5) var(--e4);display:flex;flex-direction:column;gap:var(--e4);
  background:linear-gradient(180deg,rgba(0,74,173,.06),rgba(0,74,173,.06));border-right:1px solid var(--borda);overflow:auto}
.marca{display:flex;align-items:center;gap:10px;padding:0 var(--e2) var(--e3)}
.marca b{font:500 19px var(--f-disp);color:var(--ink);letter-spacing:.01em}.marca small{display:block;font:400 11px var(--f-body);color:var(--blue-claro);letter-spacing:.14em;text-transform:uppercase}
.logo{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font:600 18px var(--f-disp);color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-lift));box-shadow:0 0 22px var(--glow)}
.grupo{font:600 10.5px var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--dg-mudo);padding:var(--e3) var(--e3) 4px}
.nav a{display:flex;align-items:center;gap:12px;min-height:42px;padding:0 var(--e3);border-radius:12px;color:var(--dg-fraco);font-weight:500;transition:all .2s;position:relative}
.nav a:hover{color:var(--ink);background:rgba(91,149,242,.1)}
.nav a[aria-current=page]{color:#fff;background:linear-gradient(90deg,rgba(0,74,173,.55),rgba(0,74,173,.12));box-shadow:inset 2px 0 0 var(--blue-lift),0 0 24px -8px var(--glow)}
.nav .n{margin-left:auto;font:600 11px var(--f-body);background:rgba(255,92,92,.18);color:#B42318;border-radius:999px;padding:2px 8px}
.lateral .pe{margin-top:auto}
.main{padding:var(--e5) var(--e6) var(--e7);min-width:0}
.topo{display:flex;align-items:center;gap:var(--e4);margin-bottom:var(--e5)}
.busca{flex:1;display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 var(--e4);max-width:520px;border-radius:999px;color:var(--dg-fraco)}
.busca input{all:unset;flex:1;color:var(--ink);font:400 14px var(--f-body)}
.sino{position:relative;width:var(--tap);height:var(--tap);border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.sino i{position:absolute;top:4px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--vermelho);color:#fff;font:700 10.5px/18px var(--f-body);text-align:center;font-style:normal;box-shadow:0 0 12px var(--vermelho)}
.pessoa{display:flex;align-items:center;gap:10px}.pessoa small{display:block;color:var(--blue-claro);font-size:11.5px}
.topo .btn{margin-left:auto}

/* saudacao e resumo */
.saud{margin-bottom:var(--e5)}.saud h1{font-size:clamp(28px,4vw,40px);font-weight:400}.saud h1 b{font-weight:600;background:linear-gradient(90deg,#fff,var(--blue-claro));-webkit-background-clip:text;background-clip:text;color:transparent}
.saud p{margin:6px 0 0;color:var(--dg-fraco)}
.resumo{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4);margin-bottom:var(--e5)}
.kpi{padding:var(--e4) var(--e5);position:relative;overflow:hidden;min-height:132px}
.kpi::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,74,173,.55),rgba(91,149,242,.22) 55%,rgba(143,187,255,.08));opacity:.8;pointer-events:none}
.kpi>*{position:relative}
.kpi .rot{font:500 12.5px var(--f-body);color:var(--dg-fraco);display:flex;align-items:center;gap:8px;letter-spacing:.02em}
.kpi .num{font:500 46px/1.05 var(--f-disp);color:var(--ink);margin:8px 0 2px;font-variant-numeric:tabular-nums;text-shadow:none}
.kpi .var{font-size:12.5px;color:var(--dg-fraco)}
.kpi svg.mini{position:absolute;right:12px;bottom:12px;width:96px;height:36px;opacity:.9}
.kpi--alerta .num{color:#B42318;text-shadow:none}

/* linha de etapas acesa */
.etapas{padding:var(--e5);margin-bottom:var(--e5)}
.etapas header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--e5);gap:12px;flex-wrap:wrap}
.trilha{display:grid;grid-template-columns:repeat(6,1fr);position:relative;gap:var(--e2)}
.trilha::before{content:"";position:absolute;left:8%;right:8%;top:34px;height:2px;background:rgba(91,149,242,.2)}
.trilha::after{content:"";position:absolute;left:8%;right:8%;top:33px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,transparent 0,var(--blue-claro) 18%,transparent 36%) 0 0/60% 100% no-repeat;filter:blur(1px);animation:pulso 6s linear infinite}
@keyframes pulso{from{background-position:-60% 0}to{background-position:160% 0}}
.etapa{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:1}
.etapa .no{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font:500 24px var(--f-disp);color:var(--ink);
  background:var(--noite-2);border:1.5px solid var(--borda-forte);box-shadow:0 0 calc(var(--luz,.3)*38px) calc(var(--luz,.3)*4px) var(--glow);
  transition:transform .2s}
.etapa:hover .no{transform:scale(1.06)}
.etapa .no.vazio{color:var(--dg-mudo);font-size:11px;line-height:1.2;text-align:center;box-shadow:none;border-style:dashed}
.etapa--gargalo .no{border-color:var(--blue-claro);background:radial-gradient(circle,rgba(91,149,242,.55),rgba(0,74,173,.4))}
.etapa b{font:500 14px var(--f-body);color:var(--ink)}.etapa small{font-size:11.5px;color:var(--dg-fraco);max-width:130px}
.etapa .tag{font:600 10px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:#7A5200;background:rgba(245,197,66,.14);border-radius:999px;padding:2px 8px}

/* grades */
.duas{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--e4);margin-bottom:var(--e5)}
.agora{display:flex;flex-direction:column;gap:var(--e3)}
.item{display:flex;align-items:center;gap:var(--e3);padding:var(--e3) var(--e4);border-radius:14px;background:rgba(91,149,242,.06);border:1px solid transparent;transition:all .2s}
.item:hover{border-color:var(--borda);background:rgba(91,149,242,.12)}
.item .tx{flex:1;min-width:0}.item .tx b{display:block;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item .tx span{font-size:12.5px;color:var(--dg-fraco)}
.linha-tempo{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid rgba(91,149,242,.3);display:flex;flex-direction:column;gap:var(--e4)}
.linha-tempo li{position:relative}.linha-tempo li::before{content:"";position:absolute;left:-25px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--blue-lift);box-shadow:0 0 12px var(--glow)}
.linha-tempo li{min-width:0}.linha-tempo span{overflow-wrap:anywhere}.linha-tempo b{color:var(--ink);font-weight:600}.linha-tempo span{display:block;font-size:12.5px;color:var(--dg-fraco)}
.sec-titulo{display:flex;justify-content:space-between;align-items:baseline;margin:var(--e6) 0 var(--e3)}
.sec-titulo h2{font-size:22px}
.clientes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--e4)}
.cli{padding:var(--e4);display:flex;flex-direction:column;gap:var(--e3)}
.cli header{display:flex;align-items:center;gap:var(--e3)}.cli header b{flex:1;color:var(--ink);font-weight:600;line-height:1.2}
.cli .tres{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.cli .tres div{background:rgba(0,74,173,.06);border-radius:10px;padding:8px 4px}.cli .tres strong{display:block;font:500 22px var(--f-disp);color:var(--ink)}.cli .tres span{font-size:10.5px;color:var(--dg-fraco);text-transform:uppercase;letter-spacing:.06em}
.cli .tres .al strong{color:#B42318}
.cli footer{font-size:12.5px;color:var(--dg-fraco);display:flex;align-items:center;gap:6px}

/* entrada das telas */
.surge>*{opacity:0;transform:translateY(10px);animation:surge .5s ease forwards}
.surge>*:nth-child(1){animation-delay:40ms}.surge>*:nth-child(2){animation-delay:80ms}.surge>*:nth-child(3){animation-delay:120ms}
.surge>*:nth-child(4){animation-delay:160ms}.surge>*:nth-child(5){animation-delay:200ms}.surge>*:nth-child(6){animation-delay:240ms}.surge>*:nth-child(n+7){animation-delay:280ms}
@keyframes surge{to{opacity:1;transform:none}}

/* barra inferior (celular) */
.barra{display:none}

/* entrar */
.entrar{min-height:100vh;display:grid;place-items:center;padding:var(--e5);position:relative;overflow:hidden}
.entrar::before,.entrar::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.entrar::before{width:520px;height:520px;background:rgba(0,74,173,.55);top:-160px;right:-120px}
.entrar::after{width:420px;height:420px;background:rgba(91,149,242,.22);bottom:-140px;left:-100px}
.entrar main{position:relative;z-index:1;width:100%;max-width:420px;padding:var(--e6) var(--e5)}
.entrar .logo{width:52px;height:52px;font-size:26px;border-radius:16px;margin-bottom:var(--e4)}
.entrar h1{font-size:34px;font-weight:400;margin-bottom:6px}.entrar h1 b{font-weight:600}
.campo{display:block;margin-top:var(--e4)}.campo span{display:block;font:500 13px var(--f-body);color:var(--dg-fraco);margin-bottom:6px}
.campo input{width:100%;min-height:48px;padding:0 var(--e4);border-radius:14px;border:1px solid var(--borda);background:rgba(0,74,173,.06);color:var(--ink);font:400 15px var(--f-body);transition:all .2s}
.campo input:focus{outline:none;border-color:var(--blue-lift);box-shadow:0 0 0 3px rgba(91,149,242,.22),0 0 24px -4px var(--glow)}
.entrar .btn{width:100%;margin-top:var(--e5);min-height:50px;font-size:15px}
.entrar .rodape{margin-top:var(--e5);text-align:center;font-size:12.5px;color:var(--dg-mudo)}

/* responsivo: celular primeiro na pratica (empilha) */
@media (max-width:1100px){.resumo{grid-template-columns:repeat(2,1fr)}.duas{grid-template-columns:minmax(0,1fr)}.app{grid-template-columns:var(--lateral-mini) 1fr}
  .lateral{padding:var(--e4) var(--e2)}.lateral .tx,.lateral .grupo,.lateral .marca>div:not(.logo),.lateral .pe .tx{display:none}.nav a{justify-content:center;padding:0}.nav .n{display:none}}
@media (max-width:720px){
  .app{display:block;padding-bottom:84px}.lateral{display:none}
  .main{padding:var(--e4) 16px}.topo{gap:10px}.busca{display:none}.topo .btn span.t{display:none}.pessoa div{display:none}
  .resumo{grid-template-columns:1fr 1fr;gap:10px}.kpi{padding:14px;min-height:118px}.kpi .num{font-size:36px}.kpi svg.mini{display:none}
  .etapas{padding:var(--e4)}.trilha{display:flex;overflow-x:auto;gap:var(--e4);padding-bottom:8px;scroll-snap-type:x mandatory}.trilha::before,.trilha::after{display:none}
  .etapa{min-width:92px;scroll-snap-align:start}.etapa .no{width:60px;height:60px}
  .clientes{grid-template-columns:1fr}
  .barra{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:20;justify-content:space-around;padding:6px;border-radius:22px;background:rgba(0,74,173,.06);border:1px solid var(--borda-forte);backdrop-filter:blur(14px);box-shadow:0 0 30px -6px var(--glow)}
  .barra a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:56px;min-height:var(--tap);font-size:10.5px;color:var(--dg-fraco);border-radius:14px}
  .barra a[aria-current=page]{color:#fff;background:rgba(0,74,173,.5);box-shadow:0 0 18px -4px var(--glow)}
  .saud h1{font-size:28px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.surge>*{opacity:1;transform:none}}

/* ===== etapa 2: Meus clientes e Quadro (tokens novos, nada anterior alterado) ===== */
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e4);flex-wrap:wrap;margin-bottom:var(--e4)}
.cab h1{font-size:clamp(26px,3.4vw,36px);font-weight:400}.cab p{margin:4px 0 0;color:var(--dg-fraco)}
.filtros{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:center;margin-bottom:var(--e5)}
.filtros .busca{max-width:340px;min-height:40px}.filtros select{min-height:36px;border-radius:999px;border:1px solid var(--borda);background:rgba(91,149,242,.08);color:var(--ink);padding:0 14px;font:500 12.5px var(--f-body)}
.chip{cursor:pointer;transition:all .2s}.chip:hover{border-color:var(--borda-forte);color:var(--ink)}
.chip .sem{width:8px;height:8px}.chip b{font-weight:600;color:var(--ink)}
.chip--servico{cursor:default;min-height:24px;padding:0 9px;font-size:11.5px}
.grade-cli{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:var(--e4)}
.cli2{padding:var(--e5);display:flex;flex-direction:column;gap:var(--e3);position:relative;overflow:hidden}
.cli2::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);box-shadow:0 0 18px var(--c);opacity:.9}
.cli2.verde{--c:var(--verde)}.cli2.amarelo{--c:var(--amarelo)}.cli2.vermelho{--c:var(--vermelho)}
.cli2 header{display:flex;gap:var(--e3);align-items:center}.cli2 header h3{font-size:19px;font-weight:500;line-height:1.15}
.cli2 header small{display:block;color:var(--dg-fraco);font-size:12px;margin-top:2px}.cli2 header .sem{margin-left:auto}
.servicos{display:flex;flex-wrap:wrap;gap:6px}
.frentes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.frente{display:flex;align-items:center;gap:6px;background:rgba(0,74,173,.06);border-radius:10px;padding:6px 8px;min-width:0}
.frente span{font-size:10.5px;color:var(--dg-mudo);display:block;text-transform:uppercase;letter-spacing:.06em}.frente b{font:500 12.5px var(--f-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.pend{font-size:13px;line-height:1.4;color:var(--dg-fraco);background:rgba(245,197,66,.06);border-left:2px solid var(--amarelo);border-radius:0 10px 10px 0;padding:8px 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cli2 footer{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--dg-fraco);margin-top:auto}
.cli2 footer a{font-weight:600}
.vazio{display:none;text-align:center;padding:var(--e7) var(--e5);color:var(--dg-fraco)}.vazio.on{display:block}
/* quadro */
.faixa{position:relative;overflow:hidden;padding:var(--e5);margin-bottom:var(--e4);display:flex;gap:var(--e4);align-items:center;flex-wrap:wrap}
.faixa::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(0,74,173,.7),rgba(91,149,242,.25) 60%,transparent);pointer-events:none}
.faixa>*{position:relative}.faixa h1{font-size:clamp(24px,3vw,32px);font-weight:500}.faixa .meta{display:flex;gap:var(--e2);flex-wrap:wrap;margin-top:8px;align-items:center}
.faixa .acoes{margin-left:auto;display:flex;gap:var(--e2)}
.kanban{display:grid;grid-template-columns:repeat(6,minmax(232px,1fr));gap:var(--e3);overflow-x:auto;padding-bottom:var(--e3);scroll-snap-type:x proximity;align-items:start}
.col{background:rgba(0,74,173,.06);border:1px solid var(--borda);border-radius:var(--r);padding:var(--e3);display:flex;flex-direction:column;gap:var(--e2);min-height:260px;scroll-snap-align:start;transition:border-color .2s,box-shadow .2s}
.col header{display:flex;align-items:center;gap:8px;padding:4px 6px 8px}.col header h2{font:600 14px var(--f-body);color:var(--ink)}
.col header .n{margin-left:auto;font:600 12px var(--f-body);color:var(--blue-claro);background:rgba(91,149,242,.14);border-radius:999px;padding:2px 9px}
.col header i{width:8px;height:8px;border-radius:50%;background:var(--blue-lift);box-shadow:0 0 12px var(--glow)}
.col--gargalo{border-color:var(--borda-forte);box-shadow:0 0 34px -10px var(--glow)}
.col.solte{border-color:var(--blue-claro);border-style:dashed;box-shadow:0 0 34px -6px var(--glow)}
.post{padding:var(--e3);border-radius:14px;background:var(--vidro-forte);border:1px solid var(--borda);cursor:grab;display:flex;flex-direction:column;gap:8px;transition:all .2s;position:relative}
.post:hover{border-color:var(--borda-forte);box-shadow:0 8px 28px -10px var(--glow);transform:translateY(-2px)}
.post:active{cursor:grabbing}
.post .grip{position:absolute;top:8px;right:8px;color:var(--dg-mudo);opacity:0;transition:opacity .2s}.post:hover .grip{opacity:1}
.post .th{height:84px;border-radius:10px;background:linear-gradient(135deg,rgba(0,74,173,.5),rgba(91,149,242,.18));display:grid;place-items:center;color:var(--dg-fraco);font:500 12px var(--f-body);overflow:hidden}
.post .th img{width:100%;height:100%;object-fit:cover}
.post h3{font:500 14px/1.3 var(--f-body);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:18px}
.post .rodape{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dg-fraco)}
.post .rodape .dir{margin-left:auto;display:flex;gap:10px;align-items:center}.post .rodape .dir span{display:inline-flex;align-items:center;gap:3px}
.post .rodape .ico{width:14px;height:14px}
.tag-st{font:600 10.5px var(--f-body);border-radius:999px;padding:2px 8px;align-self:flex-start;color:var(--blue-claro);background:rgba(91,149,242,.14)}
.tag-st--atraso{color:#B42318;background:rgba(255,92,92,.16)}.tag-st--alt{color:#7A5200;background:rgba(245,197,66,.14)}.tag-st--ok{color:#0B6B43;background:rgba(46,204,138,.14)}
.col-vazia{border:1.5px dashed var(--borda);border-radius:14px;padding:var(--e5) var(--e3);text-align:center;color:var(--dg-fraco);font-size:12.5px;display:flex;flex-direction:column;align-items:center;gap:8px}
.col-vazia svg{width:44px;height:44px;opacity:.7}
.dica{display:flex;align-items:center;gap:10px;margin:0 0 var(--e3);color:var(--dg-fraco);font-size:12.5px}
@media (max-width:720px){
  .grade-cli{grid-template-columns:1fr}.cli2{padding:var(--e4)}.frentes{grid-template-columns:1fr 1fr 1fr}
  .kanban{grid-template-columns:repeat(6,82vw);margin:0 -16px;padding:0 16px var(--e3);scroll-snap-type:x mandatory}
  .faixa{padding:var(--e4)}.faixa .acoes{margin-left:0;width:100%}.faixa .acoes .btn{flex:1}
  .filtros .busca{max-width:none;width:100%;flex:1 1 100%}}
.cli2 header small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cli2 header>div{min-width:0}.cli2 header .sem,.faixa .sem{flex:none}
.faixa .meta .mudo{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:560px}

/* ===== etapa 3: Tarefas, Publicacoes, Aprovacoes, Atendimento ===== */
.seg{display:inline-flex;padding:3px;border-radius:999px;background:rgba(91,149,242,.08);border:1px solid var(--borda)}
.seg-b{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 14px;border-radius:999px;font:500 12.5px var(--f-body);color:var(--dg-fraco)}
.seg-b .ico{width:15px;height:15px}.seg-b--on{background:rgba(0,74,173,.7);color:#fff;box-shadow:0 0 16px -4px var(--glow)}
.lista-t,.lista-c{display:flex;flex-direction:column;gap:var(--e2)}
.linha-t,.conv{display:flex;align-items:center;gap:var(--e3);padding:var(--e3) var(--e4);color:inherit;min-width:0}
.linha-t .tx,.conv .tx{flex:1;min-width:0}.linha-t .tx b,.conv .tx b{display:block;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linha-t .tx span,.conv .tx span{font-size:12.5px;color:var(--dg-fraco);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.data{font:500 13px var(--f-body);color:var(--ink);min-width:48px;text-align:right;font-variant-numeric:tabular-nums}
.sem-resp{background:rgba(91,149,242,.12);box-shadow:none;border:1px dashed var(--borda-forte);color:var(--dg-fraco)}
.aguard{font-size:12px;color:var(--dg-fraco);min-width:120px;text-align:right}.aguard--nos{color:#7A5200;font-weight:600}
.conv .sem{flex:none}
.aviso{display:flex;gap:10px;align-items:center;padding:var(--e3) var(--e4);margin-bottom:var(--e4);font-size:13px;color:var(--dg-fraco);border-color:rgba(245,197,66,.35)}
.aviso .ico{color:var(--amarelo)}
/* calendario */
.cal{padding:var(--e5)}.cal-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--e4);gap:12px;flex-wrap:wrap}
.leg{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 4px 0 12px}.leg--azul{background:var(--blue-lift);box-shadow:0 0 8px var(--glow)}.leg--vermelho{background:var(--vermelho);box-shadow:0 0 8px var(--vermelho)}
.cal-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dsem{font:600 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--dg-mudo);padding:0 6px 4px}
.dia{min-height:104px;border-radius:12px;padding:6px;background:rgba(0,74,173,.06);border:1px solid transparent;display:flex;flex-direction:column;gap:3px;transition:border-color .2s}
.dia:hover{border-color:var(--borda-forte)}.dia--fora{opacity:.35}.dia .n{font:500 13px var(--f-disp);color:var(--ink)}
.dia--hoje{border-color:var(--blue-claro);box-shadow:0 0 22px -6px var(--glow)}.dia--hoje .n{color:var(--ink);font-weight:700}
.ev{display:flex;align-items:center;gap:5px;font-size:11px;line-height:1.2;border-radius:6px;padding:3px 5px;color:var(--ink);background:rgba(0,74,173,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev i{width:6px;height:6px;border-radius:50%;background:var(--blue-claro);flex:none}.ev--vermelho{background:rgba(255,92,92,.16)}.ev--vermelho i{background:var(--vermelho)}
.mais{font-size:11px;color:var(--blue-claro)}.agenda{display:none}
.ag-dia h3{font-size:16px;margin:var(--e4) 0 var(--e2)}.ag-dia--hoje h3{color:var(--blue-claro)}
.ag-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e2)}.ag-lista li{display:grid;grid-template-columns:14px 1fr;gap:2px 10px;font-size:12.5px;color:var(--dg-fraco)}
.ag-lista li b{color:var(--ink);font-weight:600}.ag-lista li span:last-child{grid-column:2}
/* aprovacoes */
.grade-apr{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--e4)}
.apr{padding:var(--e3);display:flex;flex-direction:column;gap:var(--e3)}
.ig{background:#F4F8FF;border-radius:14px;overflow:hidden;border:1px solid rgba(0,74,173,.08)}
.ig-top{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:12.5px}.ig-top b{font-weight:600;color:var(--ink)}
.ig-img{aspect-ratio:4/5;max-height:220px;width:100%;background:linear-gradient(135deg,rgba(0,74,173,.45),rgba(91,149,242,.12));display:grid;place-items:center;color:var(--dg-fraco);font-size:13px;overflow:hidden}
.ig-img img{width:100%;height:100%;object-fit:cover}
.ig-leg{padding:8px 10px 10px;font-size:12px;line-height:1.4;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.ig-leg b{color:var(--ink)}
.apr-info{display:flex;flex-direction:column;gap:3px;padding:0 4px 4px}.apr-info b{color:var(--ink);font-weight:600}.apr-info span{font-size:12.5px;color:var(--dg-fraco)}
.espera{display:flex;align-items:center;gap:5px;color:#7A5200!important}.espera .ico{width:14px;height:14px}
.apr-acoes{display:flex;gap:var(--e2);margin-top:var(--e2);flex-wrap:wrap}
@media (max-width:900px){.aguard{display:none}.conv .chip{display:none}}
@media (max-width:720px){.cal{padding:var(--e4)}.cal-grade{display:none}.agenda{display:block}.linha-t .chip,.linha-t .tag-st--alt{display:none}.grade-apr{grid-template-columns:1fr}.linha-t .data{min-width:40px}.filtros select{flex:1 1 45%}}

/* ===== etapa 4: Equipe, Financeiro, Acessos, Perfil, Onboarding ===== */
.sem--mudo{--c:#59647F}
.sr{position:absolute;left:-999px}
.reduz *,.reduz *::before,.reduz *::after{animation:none!important;transition:none!important}.reduz .surge>*{opacity:1;transform:none}
.grade-eq{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:var(--e4)}
.eq{padding:var(--e5);display:flex;flex-direction:column;gap:var(--e3)}
.eq header{display:flex;gap:var(--e3);align-items:center}.eq header>div{min-width:0;flex:1}.eq header h3{font-size:19px;font-weight:500}.eq header small{color:var(--dg-fraco);font-size:12.5px}
.carga-n{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.carga-n>div{background:rgba(0,74,173,.06);border-radius:10px;padding:8px 4px}.carga-n strong{display:block;font:500 24px var(--f-disp);color:var(--ink)}.carga-n span{font-size:10.5px;color:var(--dg-fraco);text-transform:uppercase;letter-spacing:.06em}
.carga-n .al strong{color:#B42318}
.barra-c{height:6px;border-radius:6px;background:rgba(91,149,242,.14);margin-top:10px;overflow:hidden}.barra-c i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--blue-lift),var(--vermelho));box-shadow:0 0 12px var(--glow)}
.eq footer{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dg-mudo);margin-top:auto}
.dono-faixa{display:flex;gap:10px;align-items:center;padding:var(--e3) var(--e4);margin-bottom:var(--e4);font-size:13px;color:var(--ink);border-color:rgba(245,197,66,.4)}.dono-faixa .ico{color:var(--amarelo)}
.kpi-brl{font-size:32px!important}
.graf{width:100%;height:auto;display:block;margin:4px 0 8px}
.mini-lista{display:flex;flex-direction:column;gap:var(--e3)}.mini-lista>div{display:flex;justify-content:space-between;align-items:baseline;padding:var(--e3);border-radius:12px;background:rgba(91,149,242,.06);gap:12px}
.mini-lista span{color:var(--dg-fraco);font-size:13px}.mini-lista b{font:500 22px var(--f-disp);color:var(--ink);font-variant-numeric:tabular-nums}.mini-lista .res{background:rgba(0,74,173,.35);border:1px solid var(--borda-forte)}
.tabela{overflow:auto;padding:var(--e2)}.tabela table{width:100%;border-collapse:collapse;min-width:620px}
.tabela th{font:600 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--dg-mudo);text-align:left;padding:10px 14px}
.tabela td{padding:10px 14px;border-top:1px solid rgba(91,149,242,.12);font-size:13.5px}.tabela tr:hover td{background:rgba(91,149,242,.07)}
.tabela .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}.cel{display:flex;gap:10px;align-items:center}.cel b{font-weight:600;color:var(--ink)}
.acc-grade{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--e4);align-items:start}
.acc{display:flex;align-items:center;gap:var(--e3);padding:var(--e3) var(--e4);flex-wrap:wrap}.acc .tx{flex:1;min-width:160px}.acc .tx b{display:block;color:var(--ink)}.acc .tx span{font-size:12.5px;color:var(--dg-fraco)}
.acc-acoes{display:flex;gap:6px;flex-wrap:wrap}.btn--perigo{color:#B42318;border-color:rgba(255,92,92,.35)}.btn--perigo:hover{background:rgba(255,92,92,.15)!important}
.sec-h{font-size:20px;margin:var(--e6) 0 var(--e3)}
.convite{position:sticky;top:var(--e5)}.sel-campo,.campo select{width:100%;min-height:48px;padding:0 var(--e4);border-radius:14px;border:1px solid var(--borda);background:rgba(0,74,173,.06);color:var(--ink);font:400 15px var(--f-body)}
.check{display:flex;gap:10px;align-items:center;margin-top:var(--e4);font-size:13.5px;color:var(--ink)}.check input{width:20px;height:20px;accent-color:var(--blue-lift)}
.link-caixa{margin-top:var(--e4);padding:10px 12px;border-radius:12px;border:1px dashed var(--borda-forte);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.link-caixa span{width:100%;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dg-mudo)}.link-caixa code{flex:1;font:500 13px var(--f-body);color:var(--blue-claro)}
.perfil-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e4);align-items:start}
.foto-ed{display:flex;gap:var(--e5);align-items:center;flex-wrap:wrap}.foto-prev{width:132px;height:132px;border-radius:50%;flex:none;display:grid;place-items:center;font:600 54px var(--f-disp);color:#fff;
  background:radial-gradient(circle at 30% 25%,#5B95F2,var(--blue) 70%) center/calc(var(--z)*100%) no-repeat;box-shadow:0 0 0 3px rgba(143,187,255,.4),0 0 34px -4px var(--glow)}
.foto-ctl{display:flex;flex-direction:column;gap:var(--e3);flex:1;min-width:200px}.foto-ctl input[type=range]{width:100%;accent-color:var(--blue-lift)}
.pref{display:flex;justify-content:space-between;align-items:center;gap:var(--e4);padding:var(--e3) 0;border-top:1px solid rgba(91,149,242,.12)}.pref b{display:block;color:var(--ink)}
.chave{position:relative;display:inline-block;width:52px;height:30px;flex:none}.chave input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;z-index:1}
.chave i{position:absolute;inset:0;border-radius:999px;background:rgba(91,149,242,.18);border:1px solid var(--borda);transition:all .2s}.chave i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s}
.chave input:checked+i{background:var(--blue);box-shadow:0 0 18px -2px var(--glow)}.chave input:checked+i::after{transform:translateX(22px)}.chave input:focus-visible+i{outline:2px solid var(--blue-claro);outline-offset:2px}
.onb-shell{min-height:100vh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;padding:20px 20px 24px;position:relative}
.onb-top{display:flex;align-items:center;gap:var(--e4);margin-bottom:var(--e6)}.onb-top .logo{flex:none}
.prog{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.prog i{height:6px;border-radius:6px;background:rgba(91,149,242,.18);transition:all .3s}
.prog i.on{background:linear-gradient(90deg,var(--blue),var(--blue-lift));box-shadow:0 0 12px var(--glow)}.prog i.atual{background:var(--blue-claro);box-shadow:0 0 18px var(--glow)}
#palco{flex:1;display:flex;flex-direction:column;justify-content:center}.q{display:flex;flex-direction:column;gap:var(--e4)}.q[hidden]{display:none}
.q h1{font-size:clamp(32px,9vw,44px);font-weight:400;line-height:1.1}.q h1 b{font-weight:600}.q h2{font-size:clamp(22px,6vw,28px);font-weight:500;line-height:1.25}
.etq{margin:0;font-size:12.5px;color:var(--blue-claro);letter-spacing:.04em}
.q textarea{width:100%;padding:16px;border-radius:16px;border:1px solid var(--borda);background:rgba(0,74,173,.06);color:var(--ink);font:400 17px/1.5 var(--f-body);resize:vertical;min-height:140px}
.q textarea:focus{outline:none;border-color:var(--blue-lift);box-shadow:0 0 0 3px rgba(91,149,242,.22),0 0 28px -6px var(--glow)}
.up{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:36px 20px;border-radius:18px;border:1.5px dashed var(--borda-forte);background:rgba(91,149,242,.06);cursor:pointer;min-height:var(--tap);transition:all .2s}
.up:hover{background:rgba(91,149,242,.14);box-shadow:0 0 30px -8px var(--glow)}.up .ico{width:32px;height:32px;color:var(--blue-claro)}.up b{color:var(--ink)}.up span{font-size:12.5px;color:var(--dg-fraco)}
.q--boas .btn,.q--fim .check-grande{align-self:flex-start}.q--boas .btn{min-height:52px;padding:0 32px;font-size:15px}
.check-grande{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(46,204,138,.35),rgba(46,204,138,.08));box-shadow:0 0 40px rgba(46,204,138,.5);color:#0B6B43}.check-grande .ico{width:34px;height:34px;stroke-width:2.4}
.onb-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);margin-top:var(--e5)}.onb-n{font-size:13px;color:var(--dg-fraco)}
@media (max-width:900px){.acc-grade{grid-template-columns:1fr}.convite{position:static}.perfil-grade{grid-template-columns:1fr}}
@media (max-width:720px){.grade-eq{grid-template-columns:1fr}.eq{padding:var(--e4)}.acc-acoes{width:100%}.acc-acoes .btn{flex:1}.kpi-brl{font-size:24px!important}.foto-ed{justify-content:center}}

/* ===== etapa 5: fotos no lugar das bolinhas, Hoje resumido com painel lateral, dossie do cliente, Atendimento em cartoes ===== */
/* espaco reservado: vidro com inicial (a foto ou logo cobre quando o arquivo existe) */
.foto{position:relative;background:linear-gradient(145deg,rgba(143,187,255,.22),rgba(91,149,242,.07));border:1px solid var(--borda-forte);color:var(--blue-claro);
  box-shadow:0 0 0 2px rgba(0,74,173,.06),0 0 16px -4px var(--glow);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.foto>b{font:inherit;font-weight:600;position:relative;z-index:0}
.foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;border-radius:50%}
.foto--gg{--t:96px}
/* cartao resumido que abre o completo */
.resumo-c{appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;display:block;width:100%;box-sizing:border-box}
button.etapa{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0}
button.etapa:focus-visible{outline:2px solid var(--blue-claro);border-radius:14px;outline-offset:4px}
.resumo-c:focus-visible{outline:2px solid var(--blue-claro);outline-offset:3px;border-radius:var(--r)}
.kpi.resumo-c::after{content:"Ver detalhe";position:absolute;right:14px;top:12px;font-size:11px;color:var(--blue-claro);opacity:0;transition:opacity .2s}
.kpi.resumo-c:hover::after,.kpi.resumo-c:focus-visible::after{opacity:1}
.kpi.resumo-c:hover{transform:translateY(-2px)}
.mini-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:var(--e3)}.mini-cards>*{min-width:0}
.rc{display:flex;align-items:center;gap:var(--e3);padding:var(--e3) var(--e4);position:relative}
.rc .tx{flex:1;min-width:0}.rc .tx b{display:block;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rc .tx span{display:block;font-size:12.5px;color:var(--dg-fraco);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc .sem{flex:none}.rc>.ico{color:var(--dg-mudo);flex:none;transition:transform .2s,color .2s}.rc:hover>.ico{transform:translateX(3px);color:var(--blue-claro)}
.mais-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;margin-top:var(--e3)}
/* painel lateral (tela cheia no celular) */
.veu{position:fixed;inset:0;background:rgba(10,16,32,.45);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.veu.on{opacity:1;pointer-events:auto}
.painel-lat{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);z-index:41;transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(180deg,rgba(15,24,44,.97),rgba(8,13,28,.98));border-left:1px solid var(--borda-forte);box-shadow:-30px 0 60px -20px var(--glow);display:flex;flex-direction:column}
.painel-lat.on{transform:none}
.painel-lat header{display:flex;align-items:center;gap:var(--e3);padding:var(--e5) var(--e5) var(--e3)}.painel-lat header h2{font-size:22px;flex:1}
.painel-lat .fecha{all:unset;cursor:pointer;width:var(--tap);height:var(--tap);border-radius:50%;display:grid;place-items:center;background:rgba(91,149,242,.12);color:var(--ink)}
.painel-lat .fecha:hover{background:rgba(91,149,242,.25)}.painel-lat .corpo{padding:0 var(--e5) var(--e5);overflow:auto;flex:1;display:flex;flex-direction:column;gap:var(--e3)}
.painel-lat .corpo p{margin:0;color:var(--dg-fraco)}
.linha{display:flex;align-items:center;gap:var(--e3);padding:var(--e3);border-radius:12px;background:rgba(91,149,242,.06)}
.linha .tx{flex:1;min-width:0}.linha .tx b{color:var(--ink);font-weight:600;display:block}.linha .tx span{font-size:12.5px;color:var(--dg-fraco)}
.linha .n{font:500 22px var(--f-disp);color:var(--ink);font-variant-numeric:tabular-nums}
.painel-lat .rod{padding:var(--e4) var(--e5);border-top:1px solid var(--borda)}.painel-lat .rod .btn{width:100%}
body.travado{overflow:hidden}
.agora-vazio{font-size:13px;color:var(--dg-fraco);padding:var(--e3)}
/* dossie */
.dos-topo{display:flex;gap:var(--e5);align-items:center;flex-wrap:wrap;padding:var(--e5);position:relative;overflow:hidden;margin-bottom:var(--e4)}
.dos-topo::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(0,74,173,.65),rgba(91,149,242,.2) 60%,transparent);pointer-events:none}
.dos-topo>*{position:relative}.dos-topo h1{font-size:clamp(26px,3.4vw,36px);font-weight:500}.dos-topo .meta{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:center;margin-top:8px}
.dos-topo .acoes{margin-left:auto;display:flex;gap:var(--e2);flex-wrap:wrap}
.voltar{display:inline-flex;align-items:center;gap:6px;color:var(--dg-fraco);font-size:13px;margin-bottom:var(--e3)}.voltar .ico{transform:rotate(180deg);width:16px;height:16px}
.dos-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e4);align-items:start}
.dos-grade .larga{grid-column:1/-1}
.bloco{padding:var(--e5)}.bloco h2{font-size:18px;margin-bottom:var(--e3);display:flex;align-items:center;gap:8px}.bloco h2 .ico{color:var(--blue-claro)}
.bloco p{margin:0 0 8px;color:var(--ink);line-height:1.55}.bloco .mudo{color:var(--dg-fraco)}
.pessoas-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e2)}.pessoas-f .pf{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:rgba(0,74,173,.06)}
.pf>div>span{display:block;font-size:10.5px;color:var(--dg-mudo);text-transform:uppercase;letter-spacing:.06em}.pf b{color:var(--ink);font-weight:500;font-size:14px}
.lista-simples{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e2)}.lista-simples li{padding:10px 12px;border-radius:12px;background:rgba(91,149,242,.06);font-size:13.5px;line-height:1.45;color:var(--ink)}
.lista-simples li .quando{display:block;font-size:12px;color:var(--blue-claro);margin-bottom:2px}
.pend-l li{border-left:2px solid var(--amarelo);border-radius:0 12px 12px 0}
/* atendimento em cartoes */
.grupo-at{margin-bottom:var(--e6)}.grupo-at>h2{font-size:20px;margin-bottom:var(--e3);display:flex;align-items:baseline;gap:10px}.grupo-at>h2 small{font:400 13px var(--f-body);color:var(--dg-fraco)}
.cartoes-at{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:var(--e3)}.cartoes-at>*{min-width:0}
.cat{padding:var(--e4);display:flex;flex-direction:column;gap:var(--e3);position:relative}
.cat header{display:flex;gap:var(--e3);align-items:center}.cat header>div{min-width:0;flex:1}.cat header b{display:block;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cat header small{font-size:12px;color:var(--dg-fraco)}
.cat .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip-vez{font:600 12px var(--f-body);border-radius:999px;padding:4px 12px;color:#fff;background:rgba(0,74,173,.6);border:1px solid var(--blue-lift);box-shadow:0 0 14px -4px var(--glow)}
.chip-vez--espera{color:var(--dg-fraco);background:rgba(91,149,242,.08);border-color:var(--borda);box-shadow:none}
.chip-vez--prazo{background:rgba(255,92,92,.1);border-color:rgba(255,92,92,.4);color:#B42318;box-shadow:none}
.cat .rodape{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--dg-fraco)}
.cat .resumo-linha{font-size:13px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.frase-calma{font-size:15px;color:var(--dg-fraco);margin:0 0 var(--e5)}.frase-calma b{color:var(--ink)}
@media (max-width:900px){.dos-grade{grid-template-columns:1fr}.pessoas-f{grid-template-columns:1fr}}
@media (max-width:720px){.painel-lat{width:100vw}.painel-lat header{padding:var(--e4)}.painel-lat .corpo{padding:0 var(--e4) var(--e4)}.mini-cards,.cartoes-at{grid-template-columns:1fr}.dos-topo{padding:var(--e4)}.dos-topo .acoes{margin-left:0;width:100%}.dos-topo .acoes .btn{flex:1}}

.mais-link{background:none;border:0;padding:0}.etapa .no{flex:none}.trilha{align-items:start}
.agora .linha{background:rgba(91,149,242,.06)}.aviso-mudo{font-size:12.5px;color:var(--dg-mudo);margin:-12px 0 var(--e5)}

@media (max-width:720px){.mini-cards,.cartoes-at{grid-template-columns:minmax(0,1fr)}}

/* ===== etapa 6: Minhas tarefas (TDAH), Publicacoes por cliente, Equipe com cartao de pessoa ===== */
.tira-dias{display:flex;gap:var(--e2);overflow-x:auto;padding-bottom:6px;margin-bottom:var(--e4)}
.dia-b{appearance:none;font:inherit;cursor:pointer;flex:1;min-width:62px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 8px;border-radius:16px;border:1px solid var(--borda);background:rgba(0,74,173,.06);color:var(--dg-fraco);transition:all .2s;position:relative}
.dia-b span{font:600 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase}.dia-b b{font:500 24px var(--f-disp);color:var(--ink)}
.dia-b i{width:6px;height:6px;border-radius:50%;background:transparent;margin-top:2px}.dia-b i.tem{background:var(--blue-claro);box-shadow:0 0 8px var(--glow)}
.dia-b:hover{border-color:var(--borda-forte)}.dia-b--on{background:linear-gradient(160deg,rgba(0,74,173,.75),rgba(91,149,242,.35));border-color:var(--blue-claro);color:#fff;box-shadow:0 0 28px -6px var(--glow)}
.tira-dias.mini{margin-bottom:0}.tira-dias.mini .dia-b{cursor:default;min-width:44px;padding:8px 2px 6px}.tira-dias.mini .dia-b b{font-size:18px}
.focos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e4);margin-bottom:var(--e6)}
.tk{padding:var(--e4);display:flex;flex-direction:column;gap:var(--e3);transition:all .35s;position:relative}
.tk header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tk .cli-et{font-size:12.5px;color:var(--dg-fraco);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk h3{font:500 16px/1.35 var(--f-body);color:var(--ink)}
.tk--foco{border-color:var(--borda-forte);box-shadow:0 0 36px -10px var(--glow);padding:var(--e5)}.tk--foco h3{font:500 19px/1.3 var(--f-disp)}
.foco-ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(0,74,173,.6);color:#fff;box-shadow:0 0 14px var(--glow)}.foco-ic .ico{width:16px;height:16px}
.chk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.chk-barra{flex:1;min-width:60px;height:5px;border-radius:5px;background:rgba(91,149,242,.16);overflow:hidden}.chk-barra i{display:block;height:100%;background:var(--verde);box-shadow:0 0 10px var(--verde)}
.chk-add{appearance:none;font:600 12px var(--f-body);color:var(--blue-claro);background:none;border:1px dashed var(--borda-forte);border-radius:999px;padding:3px 10px;cursor:pointer}
.btn-feito{appearance:none;display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);border-radius:14px;border:1px solid rgba(46,204,138,.45);background:rgba(46,204,138,.1);color:#0B6B43;font:600 15px var(--f-body);cursor:pointer;transition:all .2s}
.btn-feito:hover{background:rgba(46,204,138,.22);box-shadow:0 0 22px -6px var(--verde)}
.tk.feita{opacity:0;transform:scale(.96)}.tk--ok{opacity:.7}.tk--ok h3{text-decoration:line-through;text-decoration-color:var(--verde)}
.espera-q{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#7A5200}.espera-q .ico{width:14px;height:14px}
.kb-tdah{grid-template-columns:repeat(4,minmax(240px,1fr))}.kb-tdah .col{min-height:200px}
.mais-n{margin:6px 8px;font-size:12.5px;color:var(--blue-claro)}
.depois{margin-top:var(--e5);padding:0}.depois summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:12px;padding:var(--e4) var(--e5);min-height:var(--tap)}.depois summary::-webkit-details-marker{display:none}
.depois summary b{font:500 20px var(--f-disp);color:var(--ink)}.depois summary::after{content:"Mostrar";margin-left:auto;color:var(--blue-claro);font-size:13px;font-weight:600}.depois[open] summary::after{content:"Recolher"}
.depois-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--e3);padding:0 var(--e5) var(--e5)}.depois-g>*{min-width:0}
/* publicacoes por cliente */
.kb-pub{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(260px,280px)}
.pcol header{align-items:center}.pcol header h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.pcards{display:flex;flex-direction:column;gap:var(--e2)}
.pb{color:inherit;cursor:pointer}.pb h3{font:500 13.5px/1.3 var(--f-body);color:var(--ink);padding-right:0}.pb .rodape{flex-direction:column;align-items:flex-start;gap:6px}
.pb .th{height:70px}.pcol .tag-st--ok{align-self:flex-start}
/* equipe: cartao de pessoa */
.grade-pe{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--e4)}.grade-pe>*{min-width:0}
.pe-c{padding:var(--e5);display:flex;flex-direction:column;gap:var(--e3);position:relative}
.pe-c header{display:flex;gap:var(--e4);align-items:center}.pe-c header h3{font:500 22px var(--f-disp);color:var(--ink)}.pe-c header small{color:var(--dg-fraco);font-size:13px}
.carga-linha{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.carga-linha b{font:500 28px var(--f-disp);color:var(--ink)}.carga-linha b.al{color:#B42318;margin-left:10px}.carga-linha span{font-size:12.5px;color:var(--dg-fraco)}
.rot-m{font:600 10.5px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dg-mudo);margin-top:6px}
.stack{display:flex;align-items:center}.stack .foto{margin-left:-8px;box-shadow:0 0 0 2px var(--noite-2)}.stack .foto:first-child{margin-left:0}.mais-av{margin-left:6px;font-size:12.5px;color:var(--blue-claro)}
.lista-simples.mini li{font-size:12.5px;padding:7px 10px}
@media (max-width:900px){.focos{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.kb-tdah{grid-template-columns:repeat(4,82vw)}.kb-pub{grid-auto-columns:82vw;margin:0 -16px;padding:0 16px var(--e3)}.tira-dias{margin:0 -16px var(--e4);padding:0 16px 6px}.tk--foco{padding:var(--e4)}}

/* ===== etapa 7: Mapa geral em arvore iluminada ===== */
.mapa{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0;padding:var(--e5);position:relative;overflow:hidden}
.mapa::before{content:"";position:absolute;width:520px;height:520px;left:-160px;top:40px;background:radial-gradient(circle,rgba(0,74,173,.35),transparent 65%);pointer-events:none}
.raiz{position:relative}.raiz-no{position:sticky;top:var(--e5);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:var(--e5) var(--e3);border-radius:var(--r);
  background:rgba(0,74,173,.06);border:1px solid var(--blue-lift);box-shadow:0 0 40px -6px var(--glow);margin-right:34px}
.raiz-no::after{content:"";position:absolute;left:100%;top:50%;width:34px;height:2px;background:linear-gradient(90deg,var(--blue-lift),rgba(91,149,242,.2));box-shadow:0 0 10px var(--glow)}
.raiz-no .logo{width:52px;height:52px;font-size:26px;border-radius:16px}.raiz-no b{font:500 18px var(--f-disp);color:var(--ink)}.raiz-no>span{font-size:12.5px;color:var(--dg-fraco)}
.raiz-sem{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--ink);margin-top:6px}.raiz-sem .sem{margin-left:6px}.raiz-sem .sem:first-child{margin-left:0}
.ramos{display:flex;flex-direction:column;position:relative}
.ramo{--c:var(--blue-lift);position:relative;padding:8px 0 8px 28px}
.ramo--verde{--c:#2ECC8A}.ramo--amarelo{--c:#F5C542}.ramo--vermelho{--c:#FF5C5C}
.ramo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--c);box-shadow:0 0 12px var(--c);opacity:.75}
.ramo:first-child::before{top:50%}.ramo:last-child::before{bottom:50%}
.ramo>summary{list-style:none;cursor:pointer}.ramo>summary::-webkit-details-marker{display:none}
.ramo>summary::before{content:"";position:absolute;left:0;top:calc(8px + 32px);width:28px;height:2px;background:var(--c);box-shadow:0 0 10px var(--c);opacity:.8}
.no-cli{display:flex;align-items:center;gap:var(--e3);padding:8px 14px 8px 10px;border-radius:999px;width:min(430px,100%);background:rgba(0,74,173,.06);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  box-shadow:0 0 22px -8px var(--c);transition:all .2s;min-height:64px}
.no-cli:hover,.ramo[open]>.no-cli{border-color:var(--c);box-shadow:0 0 30px -4px var(--c)}
.no-t{flex:1;min-width:0}.no-t b{display:block;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-t span{display:block;font-size:12px;color:var(--dg-fraco);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stack-mini{display:flex}.stack-mini .foto{margin-left:-8px;box-shadow:0 0 0 2px var(--noite-2)}.stack-mini .foto:first-child{margin-left:0}
.galhos{display:flex;align-items:center;gap:0;margin:6px 0 0 430px;position:relative;margin-top:-52px;min-height:52px;pointer-events:none}
.galhos>*{pointer-events:auto}
.gal{flex:none;stroke:var(--c);stroke-width:2;fill:none;opacity:.7;filter:drop-shadow(0 0 4px var(--c))}
.folhas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.folha{height:34px;display:flex;align-items:center;padding:0 14px;border-radius:999px;font-size:13px;color:var(--ink);background:rgba(91,149,242,.1);border:1px solid var(--borda);white-space:nowrap;transition:all .2s}
.folha:hover{border-color:var(--c);box-shadow:0 0 16px -4px var(--c)}
.ir{margin-left:var(--e4);font-size:13px;font-weight:600;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}.ir .ico{width:16px;height:16px}
.ramo:not([open])>.galhos{display:none}
@media (max-width:900px){.mapa{grid-template-columns:minmax(0,1fr);padding:var(--e4)}.ramos,.ramo{min-width:0}.no-cli{box-sizing:border-box}.raiz-no{position:static;margin:0 0 var(--e4);flex-direction:row;justify-content:center;flex-wrap:wrap}.raiz-no::after{display:none}
  .ramo{padding-left:18px}.ramo>summary::before{width:18px}.galhos{margin:8px 0 0 0;flex-direction:column;align-items:flex-start;min-height:0;padding-left:8px}.gal{display:none}.folhas{flex-direction:row;flex-wrap:wrap}.ir{margin:8px 0 0}.no-cli{width:100%}}
@media (max-width:720px){.no-cli .stack-mini{display:none}.ramo>summary::before{top:calc(8px + 30px)}}


/* ===================== CAMADA DO TEMA CLARO (SISTEMA-LS-DESIGN-CLARO) =====================
   Vem depois do escuro convertido. Aqui moram: peso tipografico das referencias, cartoes em azul claro,
   blocos azul-marinho, Gochi Hand azul e os componentes novos (cabecalho de pagina, atrasados, copia do Trello). */
::selection{background:var(--azul-200);color:var(--ink)}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;color:var(--ink)}
a{color:var(--blue);text-decoration-color:var(--azul-300);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.nota{font-family:var(--f-hand);color:var(--blue);font-size:24px;transform:rotate(-2deg);display:inline-block;line-height:1}
.mudo{color:var(--dg-fraco)}

/* cartoes: azul claro, borda fina, sem vidro */
.vidro{background:var(--azul-50);border:1px solid var(--borda);backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 1px 0 #fff inset,0 10px 26px -18px rgba(0,74,173,.45)}
.vidro:hover{border-color:var(--borda-forte);box-shadow:0 1px 0 #fff inset,0 14px 30px -16px rgba(0,74,173,.5)}
.vidro--foco{border-color:var(--blue);box-shadow:0 0 0 3px var(--azul-200)}
.cartao h2{font-size:21px;font-weight:700}

/* titulos grandes e pesados; palavra-chave em azul */
.saud h1,.cab-pag h1{font:800 clamp(36px,6.4vw,60px)/1 var(--f-disp);letter-spacing:-.035em;color:var(--ink)}
.saud h1 b,.cab-pag h1 b{font-weight:800;background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--blue)}
.saud p,.cab-pag p{color:var(--dg-fraco);font-size:16px;margin-top:10px;max-width:60ch}
.sec-titulo h2,.sec-h{font:800 clamp(24px,3.4vw,32px)/1.05 var(--f-disp);letter-spacing:-.03em}
.sec-titulo h2 b,.sec-h b{color:var(--blue)}

/* lateral e navegacao */
.lateral{background:#fff;border-right:1px solid var(--borda)}
.marca b{color:var(--ink);font-weight:800}.marca small{color:var(--blue)}
.logo{background:var(--blue);box-shadow:none;color:#fff}
.grupo{color:var(--dg-mudo)}
.nav a{color:var(--dg-fraco);font-weight:600}
.nav a:hover{color:var(--ink);background:var(--azul-100)}
.nav a[aria-current=page]{color:#fff;background:var(--navy);box-shadow:none}
.nav .n{background:#FDE4E1;color:var(--txt-vermelho)}
.topo .busca{background:var(--azul-50)}
.busca input{color:var(--ink)}.busca input::placeholder{color:var(--dg-mudo)}
.sino{background:var(--azul-50);color:var(--ink)}.sino i{box-shadow:none}
.pessoa small{color:var(--blue)}
@media (max-width:720px){.barra{background:#fff;border:1px solid var(--borda-forte);box-shadow:0 10px 30px -10px rgba(0,30,90,.45)}
  .barra a{color:var(--dg-fraco)}.barra a[aria-current=page]{color:#fff;background:var(--navy)}}

/* botoes e chips */
.btn{background:var(--blue);box-shadow:none;color:#fff}
.btn:hover{background:var(--navy);box-shadow:none;transform:none}
.btn--fantasma{background:#fff;border-color:var(--borda-forte);color:var(--blue)}
.btn--fantasma:hover{background:var(--azul-100)}
.chip{color:var(--dg-fraco);background:#fff;border-color:var(--borda)}
.chip--ativo{background:var(--navy);border-color:var(--navy);color:#fff}
.sem{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.foto{background:var(--blue);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--azul-300);color:#fff}

/* resumo: numeros enormes */
.kpi{min-height:140px;background:var(--azul-100);border-color:var(--azul-200)}
.kpi::before{display:none}
.kpi .rot{color:var(--navy);font-weight:600}
.kpi .num{font:800 clamp(48px,7vw,64px)/1 var(--f-disp);letter-spacing:-.04em;color:var(--blue)}
.kpi .var{color:var(--dg-fraco)}
.kpi--alerta{background:var(--navy);border-color:var(--navy)}
.kpi--alerta .rot,.kpi--alerta .var{color:#C9DDFB}
.kpi--alerta .num{color:#fff}
.kpi svg.mini{opacity:.55}

/* linha de etapas */
.etapas{background:#fff}
.trilha::before{background:var(--azul-200)}
.trilha::after{background:linear-gradient(90deg,transparent 0,var(--blue) 18%,transparent 36%) 0 0/60% 100% no-repeat;filter:none;opacity:.55}
.etapa .no{background:var(--azul-100);color:var(--navy);border-color:var(--azul-300);box-shadow:none;font-weight:800}
.etapa .no.vazio{background:#fff;color:var(--dg-mudo)}
.etapa--gargalo .no{background:var(--navy);color:#fff;border-color:var(--navy)}
.etapa b{color:var(--ink)}
.etapa .tag{color:var(--txt-amarelo);background:var(--st-alteracao)}

/* blocos azul-marinho de destaque */
.duas>.cartao:first-child,.destaque-marinho{background:var(--navy);border-color:var(--navy);color:#fff}
.duas>.cartao:first-child h2,.destaque-marinho h2{color:#fff}
.duas>.cartao:first-child .item,.destaque-marinho .item{background:rgba(255,255,255,.09)}
.duas>.cartao:first-child .item:hover{background:rgba(255,255,255,.16);border-color:transparent}
.duas>.cartao:first-child .item .tx b,.destaque-marinho .item .tx b{color:#fff}
.duas>.cartao:first-child .item .tx span,.destaque-marinho .item .tx span{color:#C9DDFB}
.duas>.cartao:first-child .btn--fantasma{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.item{background:#fff;border:1px solid var(--borda)}
.item:hover{background:var(--azul-100)}
.item .tx b{color:var(--ink)}
.duas>div:first-child .agora .item{background:var(--navy);border-color:var(--navy)}
.duas>div:first-child .agora .item .tx b{color:#fff}.duas>div:first-child .agora .item .tx span{color:#C9DDFB}
.duas>div:first-child .agora .item .ico{color:#fff}.duas>div:first-child .agora .item:hover{background:var(--navy-2)}

.linha-tempo{border-left-color:var(--azul-300)}.linha-tempo li::before{background:var(--blue);box-shadow:none}.linha-tempo b{color:var(--ink)}

/* clientes em cartoes */
.cli header b,.rc .tx b{color:var(--ink)}
.cli .tres div{background:#fff;border:1px solid var(--borda)}.cli .tres strong{color:var(--ink);font-weight:800}
.cli .tres .al strong{color:var(--txt-vermelho)}
.cli .tres span{color:var(--dg-fraco)}

/* painel lateral (gaveta) */
.painel-lat{background:#fff;border-left:1px solid var(--borda-forte);box-shadow:-20px 0 60px -20px rgba(0,30,90,.35)}
.painel-lat header{background:#fff;border-bottom:1px solid var(--borda)}
.painel-lat .corpo img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--borda);margin:6px 0;display:block}
.painel-lat .corpo{color:var(--ink)}
.painel-lat .fecha{color:var(--ink)}

/* movimento: respeita quem pede menos */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===================== COMPONENTES NOVOS (valem para os dois temas; so tokens) ===================== */
.voltar{display:inline-flex;align-items:center;gap:6px;font-weight:600;margin-bottom:var(--e3)}.voltar .ico{transform:rotate(180deg)}

/* topo do cliente */
.cli-topo{display:grid;grid-template-columns:auto 1fr auto;gap:var(--e4);align-items:center;padding:var(--e5);margin-bottom:var(--e4)}
.cli-topo h1{font:800 clamp(30px,5vw,48px)/1 var(--f-disp);letter-spacing:-.035em;margin:0 0 8px}
.cli-topo h1 b{color:var(--blue)}
.cli-topo .meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;color:var(--dg-fraco);font-size:13.5px}
.cli-topo .acoes{display:flex;gap:8px;flex-wrap:wrap}

/* ATRASADOS em destaque */
.atrasados{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:var(--e5);padding:var(--e5) var(--e5) var(--e5) calc(var(--e5) + 8px);margin-bottom:var(--e4);border-radius:var(--r-lg);
  background:var(--navy);color:#fff;position:relative;overflow:hidden}
.atrasados::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--vermelho)}
.atrasados .grande{font:800 clamp(64px,12vw,104px)/.9 var(--f-disp);letter-spacing:-.05em;color:#fff}
.atrasados .grande small{display:block;font:700 18px/1.2 var(--f-body);letter-spacing:0;color:#FFB4AC;margin-top:8px}
.atrasados>div{min-width:0}.atrasados h2{color:#fff;font-size:22px;margin:0 0 var(--e3)}
.atrasados ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.atrasados li{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.1);border-radius:12px;padding:10px 14px;min-width:0}
.atrasados li b{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atrasados li span{font:700 12.5px var(--f-body);color:#0A1020;background:#FFB4AC;border-radius:999px;padding:2px 10px;white-space:nowrap}
.atrasados--zero{background:var(--azul-100);color:var(--ink)}.atrasados--zero::before{background:var(--verde)}
.atrasados--zero .grande,.atrasados--zero h2{color:var(--navy)}
.atrasados--zero .grande small{color:var(--txt-verde)}

/* blocos do topo (ficha, escopo, quem cuida, proximos posts, esperando) */
.cli-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e4);margin-bottom:var(--e4)}
.cli-bloco{padding:var(--e5);min-width:0}
.cli-bloco h2{display:flex;align-items:center;gap:10px;font:800 22px/1.1 var(--f-disp);letter-spacing:-.02em;margin:0 0 var(--e3)}
.cli-bloco h2 .ico{color:var(--blue)}
.cli-bloco.larga{grid-column:1/-1}
.cli-bloco ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cli-bloco li{padding-left:16px;position:relative;line-height:1.45}
.cli-bloco li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.cli-bloco li .quando{display:inline-block;font-weight:700;color:var(--blue);margin-right:6px}
.pessoas-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pessoas-4 .pf{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--borda);border-radius:14px;padding:8px 10px}
.pessoas-4 .pf{min-width:0}.pessoas-4 .pf>div{min-width:0}.pessoas-4 .pf span{display:block;font-size:12px;color:var(--dg-fraco)}.pessoas-4 .pf b{font-weight:700}
.cli-bloco .servicos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sub-nota{margin:var(--e5) 0 var(--e3);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sub-nota h2{font:800 clamp(26px,4vw,36px)/1 var(--f-disp);letter-spacing:-.035em;margin:0}.sub-nota h2 b{color:var(--blue)}

/* copia do quadro do Trello: 5 colunas lado a lado */
.trello{display:grid;grid-template-columns:repeat(5,minmax(206px,1fr));gap:var(--e3);overflow-x:auto;padding:4px 2px var(--e4);scroll-snap-type:x proximity;align-items:start}
.t-col{background:var(--azul-50);border:1px solid var(--borda);border-radius:18px;padding:var(--e3);display:flex;flex-direction:column;gap:10px;scroll-snap-align:start;min-width:0}
.t-col>header{display:flex;align-items:center;gap:8px;padding:2px 4px 6px}
.t-col>header h3{font:800 15px/1.15 var(--f-disp);letter-spacing:-.01em;margin:0;flex:1}
.t-col>header .n{font:700 12px var(--f-body);background:var(--navy);color:#fff;border-radius:999px;padding:2px 9px}
.t-col .vazio-c{font-size:13px;color:var(--dg-mudo);padding:14px 6px;text-align:center;border:1px dashed var(--azul-300);border-radius:12px}
.t-card{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;border:1px solid var(--borda);background:#fff;border-left:6px solid var(--azul-300);transition:transform .15s,box-shadow .15s}
.t-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(0,74,173,.6)}
.t-card:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.t-card .mi{height:96px;border-radius:10px;background:var(--azul-100);display:grid;place-items:center;color:var(--dg-fraco);font:600 12px var(--f-body);overflow:hidden}
.t-card .mi img{width:100%;height:100%;object-fit:cover}
.t-card h4{margin:0;font:700 14px/1.3 var(--f-body);color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.t-card .pe-c{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--dg-fraco)}
.t-card .data{font-weight:700;color:var(--ink)}
.t-card .est{font:700 11.5px var(--f-body);padding:2px 8px;border-radius:999px;background:var(--azul-100);color:var(--navy)}
.t-card .atr{font:700 11.5px var(--f-body);padding:2px 8px;border-radius:999px;background:#FDE4E1;color:var(--txt-vermelho)}
.t-card--alteracao{background:var(--st-alteracao);border-left-color:var(--st-alteracao-b)}.t-card--alteracao .est{background:#fff;color:var(--txt-amarelo)}
.t-card--aprovado{background:var(--st-aprovado);border-left-color:var(--st-aprovado-b)}.t-card--aprovado .est{background:#fff;color:var(--txt-verde)}
.t-card--programado{background:var(--st-programado);border-left-color:var(--st-programado-b)}.t-card--programado .est{background:#fff;color:var(--navy)}
.legenda-cores{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--dg-fraco);margin:0 0 var(--e3)}
.legenda-cores i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px;border:1px solid rgba(0,0,0,.15)}
.t-post .meta-p{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.t-post .leg{white-space:pre-wrap;line-height:1.55;background:var(--azul-50);border:1px solid var(--borda);border-radius:14px;padding:14px}
.t-post .imgs{display:grid;gap:8px;margin-bottom:12px}

@media (max-width:900px){
  .cli-grade{grid-template-columns:1fr}.cli-topo{grid-template-columns:auto 1fr}.cli-topo .acoes{grid-column:1/-1}
  .atrasados{grid-template-columns:1fr;gap:var(--e3)}.atrasados .grande{font-size:84px}
  .trello{grid-template-columns:repeat(5,84vw);margin:0 -16px;padding:4px 16px var(--e4);scroll-snap-type:x mandatory}
}