/* Sistema Zup — formato novo (09/2026), carregado depois do style.css.
   Casca de rede social: barra lateral no computador, barra de baixo e barra de cima
   que some ao rolar no celular, ícones de linha fina, Início em cartões e foto em
   tela cheia. Cores com papel fixo:
   roxo  = identidade e navegação (item ativo, rótulos, ícones, contadores);
   limão = conquista e ação principal (pontos, desafio, prêmio, botão principal),
           sempre com texto roxo-escuro por cima. */

/* ---------- ícones ---------- */
.ic{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
[aria-current="page"] .ic-cheio .ic-f,[aria-pressed="true"] .ic-cheio .ic-f{fill:currentColor}
[aria-current="page"] .ic-cheio .ic-d{stroke:var(--ic-fundo,var(--surface))}
[aria-current="page"] .ic-linha{stroke-width:2.5}

/* ---------- casca ---------- */
body{padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom))}
html.sem-rolar{overflow:hidden}
.coluna{min-width:0}
.lateral{display:none}
.zmarca{font-weight:800;font-size:23px;letter-spacing:-.045em;color:var(--mark);line-height:1;display:flex;align-items:baseline}
.zmarca span{display:inline-block;width:.34em;height:.34em;border-radius:50%;background:var(--accent);color:transparent;overflow:hidden;line-height:0;margin:0 .09em 0 .08em}

/* barra de cima do celular: o estado "oculto" mora no body, que sobrevive ao redesenho */
.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(8px + env(safe-area-inset-top)) 10px 8px 16px;background:var(--paper);transition:transform .25s ease}
body.topo-oculto .topo{transform:translateY(-110%)}
.topo .acts{display:flex;gap:2px;align-items:center}
.ibtn{width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);display:grid;place-items:center;position:relative;font-weight:700}
.ibtn:hover{background:var(--sunk)}
.ibtn[aria-current="page"]{color:var(--mark)}

/* barra de baixo do celular */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;gap:2px;background:var(--surface);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line-soft)}
.nav button{flex:1;max-width:84px;min-width:0;height:48px;padding:0;border:0;border-radius:16px;background:transparent;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;font-weight:500;color:var(--ink-soft)}
.nav button[aria-current="page"]{color:var(--mark);font-weight:700;background:var(--tint);--ic-fundo:var(--tint)}
.nav-badge{position:absolute;top:3px;left:calc(50% + 5px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--roxo);color:#fff;font:700 10.5px/17px var(--fonte);text-align:center;box-shadow:0 0 0 2px var(--surface)}
.topo .nav-badge{left:auto;right:1px;top:3px;box-shadow:0 0 0 2px var(--paper)}

/* barra lateral do computador */
.lateral .zmarca{font-size:26px;padding:0 12px 16px}
.lateral button{display:flex;align-items:center;gap:14px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:12px;
  background:transparent;color:var(--ink);font-size:15px;font-weight:500;text-align:left;flex:none}
.lateral button:hover{background:var(--sunk)}
.lateral button[aria-current="page"]{font-weight:700;background:var(--tint);color:var(--mark);--ic-fundo:var(--tint)}
.lateral .atalho{min-height:38px;font-size:14px;color:var(--ink-soft);gap:12px}
.lateral .atalho .ic{color:var(--ink-faint)}
.lateral .atalho[aria-current="page"] .ic{color:var(--mark)}
.nav-sec{display:flex;flex-direction:column;padding:18px 12px 6px}
.nav-sec b{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mark)}
.nav-sec i{font-style:normal;font-size:12px;color:var(--ink-faint)}
.lateral .conta,.mais-conta{margin-left:auto;background:var(--roxo);color:#fff;border-radius:999px;font-size:12px;font-weight:700;min-width:20px;padding:1px 8px;text-align:center}
.lateral .nav-badge{position:static;margin-left:auto;box-shadow:none;font-size:12px;min-width:20px;height:20px;line-height:20px;padding:0 7px}
.lateral .espaco{flex:1;min-height:12px}
.lateral .quem{padding:10px 12px 4px;font-size:12.5px;color:var(--ink-faint)}
.lateral .sair,.mais .painel button.sair{color:var(--risk)}
.lateral .sair .ic{color:var(--risk)}

@media(min-width:900px){
  body{padding-bottom:0}
  .topo,.nav{display:none}
  .casca{display:flex}
  .lateral{display:flex;flex-direction:column;gap:1px;position:sticky;top:0;height:100vh;width:236px;flex:none;
    padding:22px 12px 16px;overflow-y:auto;scrollbar-width:thin;background:var(--paper)}
  .coluna{flex:1}
  .tela{padding:22px 24px 48px}
}

/* ---------- menu Mais: folha que sobe de baixo ---------- */
.mais{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;opacity:0;transition:opacity .25s}
.mais.aberta{opacity:1}
.mais .painel{width:100%;max-height:82vh;overflow-y:auto;background:var(--surface);border-radius:20px 20px 0 0;
  padding:8px 8px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:1px;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.mais.aberta .painel{transform:none}
.mais .puxador{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 6px;flex:none}
.mais .painel button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:12px;
  background:transparent;color:var(--ink);font-size:15px;font-weight:500;text-align:left}
.mais .painel button:hover{background:var(--sunk)}
.mais .painel button .ic{color:var(--ink-faint)}
.mais-sec{display:flex;flex-direction:column;gap:1px;margin-bottom:4px}
.mais-tit{display:flex;flex-direction:column;padding:14px 12px 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mark)}
.mais-tit i{font-style:normal;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-faint)}
@media(prefers-reduced-motion:reduce){.mais,.mais .painel,.topo{transition:none}}

/* ---------- chat: uma conta de altura só ---------- */
.ch{height:calc(100dvh - var(--topo-h) - var(--barra) - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
@media(min-width:900px){
  .tela-chat{padding:16px 24px}
  .ch,.ch-larga{height:calc(100dvh - 32px);max-width:1100px;margin:0 auto;border-radius:var(--r);overflow:hidden}
  .ch-col{width:clamp(240px,34%,340px)}
}

/* ---------- herói roxo (primeiro bloco de quase toda tela) ---------- */
.gt-ola button:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.9)}

/* ---------- Início em cartões ---------- */
.tela-inicio{max-width:none}
.mz-inicio{display:flex;flex-direction:column;gap:12px;max-width:590px;width:100%;margin:0 auto}
.mz-inicio.largo{flex-direction:row;gap:28px;max-width:none;justify-content:center;align-items:flex-start}
.mz-feed{width:100%;max-width:590px;min-width:0;display:flex;flex-direction:column;gap:12px}
.mz-apoio{width:310px;flex:none;display:flex;flex-direction:column;gap:12px;position:sticky;top:22px;
  max-height:calc(100vh - 44px);overflow-y:auto;scrollbar-width:none}
.mz-apoio::-webkit-scrollbar{display:none}
.mz-inicio .bloco{padding:16px;gap:12px;scroll-margin-top:72px}
.mz-inicio .bloco h2{font-size:18px}
.mz-inicio .gt-ola h2{font-size:24px}
.mz-inicio .lead{font-size:14px}

/* saudação: faixa do desafio em limão */
.mz-hero .mz-hero-desafio{align-self:stretch;justify-content:space-between;background:var(--accent);color:var(--accent-ink);
  border:0;border-radius:12px;padding:11px 13px;font-weight:600}
.mz-hero .mz-hero-desafio b{color:var(--accent-ink);font-weight:800}

/* as 10 leis: carrossel que encaixa uma por vez */
.mz-inicio .mz-leis{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 6px;
  scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain}
.mz-inicio .mz-leis::-webkit-scrollbar{display:none}
.mz-inicio .mz-lei{flex:0 0 min(78%,250px);scroll-snap-align:start;border:0;min-height:150px;padding:14px}
.mz-inicio .mz-lei i{width:26px;height:26px;font-size:12px}
.mz-inicio .mz-lei b{font-size:16px}
.mz-inicio .mz-lei span{font-size:13.5px}
.mz-leis-nav{display:flex;align-items:center;justify-content:space-between}
.mz-leis-pts{display:flex;gap:4px}
.mz-leis-pts i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:width .2s,background .2s}
.mz-leis-pts i.on{background:var(--mark);width:16px;border-radius:3px}
.mz-leis-nav .acoes{gap:2px}

/* Para hoje: ícone à esquerda, sem caixa em volta de cada item */
.mz-item .mz-ico-item{width:40px;height:40px;border-radius:12px;background:var(--tint);color:var(--mark);display:grid;place-items:center;flex:none}
.mz-item.urgente .mz-ico-item{background:var(--risk-bg);color:var(--risk)}
.mz-item>.mz-ico-item+div{flex:1 1 200px;display:flex;flex-direction:column;gap:2px;min-width:0}
.mz-item>i.mz-seta{color:var(--ink-faint);font-size:0;flex:none}
.mz-inicio .mz-lista{gap:2px;margin:0 -6px}
.mz-inicio .mz-item{background:transparent;border:0;padding:10px 6px;border-radius:12px}
.mz-inicio button.mz-item:hover{background:var(--sunk);border:0}
.mz-inicio .mz-item.urgente{background:transparent}
.mz-estrelas button{color:var(--ink-faint);padding:0 1px}
.mz-estrelas button[aria-pressed="true"]{color:var(--mark)}
.mz-inicio .mz-atalho{border:0;background:var(--sunk);margin-top:4px}
.mz-inicio .mz-atalho b{color:var(--mark)}
.mz-atalho i.mz-seta{color:var(--mark);font-size:0}

/* Pergunta de hoje: cartão limpo, nota de pontos em limão claro */
.mz-inicio .mz-ideia{background:var(--surface);border:0}
.mz-inicio .mz-ideia.bloqueado{background:var(--risk-bg)}
.mz-inicio .mz-vale{background:var(--accent-soft);color:var(--accent-soft-ink)}
.mz-inicio .mz-vale b{color:var(--accent-soft-ink)}
.mz-inicio .mz-ideia textarea{border:0;background:var(--sunk)}

/* Agora: quem está online, em fila que rola de lado */
.mz-inicio .mz-bolas{flex-wrap:nowrap;overflow-x:auto;margin:-4px -16px 0;padding:4px 16px 6px;scrollbar-width:none}
.mz-inicio .mz-bolas::-webkit-scrollbar{display:none}
.mz-inicio .mz-bola{flex:none;width:58px}
.mz-inicio .mz-bola .ch-av{flex:0 0 52px;width:52px;height:52px;font-size:15px}

/* números em quadradinhos: Minhas OS e Ponto em dia */
.mz-inicio .cartoes{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mz-inicio #mzPonto .cartoes{grid-template-columns:repeat(2,minmax(0,1fr))}
.mz-inicio .cartoes>div{padding:12px;font-size:12px;border-radius:12px;gap:2px}
.mz-inicio .cartoes .grande{font-size:22px}
.cartoes>div.risco{background:var(--risk-bg)}
.cartoes>div.risco .grande{color:var(--risk)}
.cartoes>div.conquista{background:var(--accent-soft);color:var(--accent-soft-ink)}
.cartoes>div.conquista .grande,.cartoes>div.conquista .lbl{color:var(--accent-soft-ink)}

/* barras: roxo, e limão com contorno quando a meta foi batida */
.mz-inicio .mz-barra{height:6px}
.mz-inicio .mz-obj b{font-weight:600}

/* Nossa Zup: um cartão para publicar e um cartão por publicação */
.mz-compor .mz-campo{width:100%;text-align:left;border:0;border-radius:999px;background:var(--sunk);color:var(--ink-faint);font-weight:400;font-size:14.5px;padding:11px 16px}
.mz-compor .acoes{gap:2px}
.mz-compor .acoes button.mini{border:0;background:transparent;color:var(--ink-soft);font-weight:500;font-size:13.5px;padding:8px 10px;display:inline-flex;align-items:center;gap:7px}
.mz-compor .acoes button.mini:hover{background:var(--sunk);color:var(--ink)}
.mz-compor .acoes button.mini .ic{color:var(--mark)}
.mz-inicio .mz-post{border:0;padding:0;gap:0;overflow:hidden;border-radius:var(--r)}
.mz-inicio .mz-post.fixado{box-shadow:inset 0 3px 0 var(--mark)}
.mz-inicio .mz-post.tipo-comunicado{background:var(--surface)}
.mz-inicio .mz-post-cab{padding:14px 16px 10px;align-items:center}
.mz-post-corpo{padding:0 16px 12px;display:flex;flex-direction:column;gap:10px}
.mz-post-corpo:empty{display:none}
.mz-ico{color:var(--mark);background:var(--tint);border-radius:50%}
.mz-ico.roxo{background:var(--roxo);color:#fff}
.mz-ico.limao{background:var(--accent);color:var(--accent-ink)}
.mz-inicio .mz-post .chip.acc{font-size:12.5px;font-weight:700}
.mz-inicio .mz-post .od-fotoslado{gap:2px}
.mz-inicio .mz-post .od-fotoslado>div{min-width:0}
.mz-inicio .mz-post .od-foto{height:auto;aspect-ratio:3/4;border-radius:0}
.mz-inicio .mz-post .od-fotoslado span{left:10px;bottom:10px}
.mz-inicio .mz-reacoes{padding:10px 16px 12px}
.mz-reacao .ic{display:inline-block;vertical-align:-3px}
.mz-reacao.mz-coment{margin-left:auto;color:var(--ink-soft)}
.mz-inicio .mz-comentarios{background:none;border-radius:0;padding:0 16px 16px;gap:8px}
.mz-inicio .mz-comentarios>p{background:var(--sunk);border-radius:14px;padding:8px 12px;align-self:flex-start;max-width:100%}
.mz-inicio .mz-erro{padding:0 4px}

/* benefícios */
.mz-inicio .mz-benef span{color:var(--mark);font-weight:600}

/* ---------- foto em tela cheia ---------- */
img.od-foto,.ch-msg a>img,img.es-cert,a.pt-mini>img,img[data-visor]{cursor:zoom-in}
body.travado{position:fixed;left:0;right:0;overflow:hidden}
.visor{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;touch-action:none;color:#fff}
.vs-fundo{position:absolute;inset:0;background:rgba(0,0,0,.97);opacity:0;transition:opacity .28s ease}
.visor.aberto .vs-fundo{opacity:1}
.vs-topo{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px 18px;opacity:0;transition:opacity .2s ease .1s}
.visor.aberto .vs-topo,.visor.aberto .vs-base{opacity:1}
.vs-conta{font-size:13.5px;font-weight:600;opacity:.85}
.vs-bt{width:42px;height:42px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center}
/* pan-x: o deslizar de lado fica com o navegador e o arrasto para baixo fica com o visor */
.vs-trilho{position:relative;z-index:1;flex:1;min-height:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;touch-action:pan-x;
  scrollbar-width:none;overscroll-behavior:contain;transition:transform .25s ease}
.vs-trilho::-webkit-scrollbar{display:none}
.vs-slide{flex:0 0 100%;scroll-snap-align:center;display:grid;place-items:center;overflow:hidden;padding:8px 0}
.vs-slide img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .32s cubic-bezier(.2,.8,.2,1);
  user-select:none;-webkit-user-drag:none;cursor:zoom-in}
.vs-slide img.zoom{cursor:zoom-out}
.vs-erro{max-width:32ch;text-align:center;font-size:15px;opacity:.85;padding:0 20px}
.vs-seta{position:absolute;top:50%;z-index:3;width:42px;height:42px;margin-top:-21px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:#111;display:none;place-items:center}
@media(hover:hover) and (min-width:700px){.vs-seta{display:grid}}
.vs-seta.esq{left:18px}
.vs-seta.dir{right:18px}
.vs-seta:disabled{display:none}
.vs-base{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:10px 16px calc(16px + env(safe-area-inset-bottom));opacity:0;transition:opacity .2s ease .1s}
.vs-pontos{display:flex;gap:5px}
.vs-pontos i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35)}
.vs-pontos i.on{background:#fff}
.vs-legenda{font-size:14px;max-width:60ch;text-align:center;opacity:.85}
.visor button:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:none}
@media(prefers-reduced-motion:reduce){.vs-fundo,.vs-trilho,.vs-slide img,.vs-topo,.vs-base{transition:none}}

/* ---------- puxar para atualizar e aviso de versão nova ---------- */
/* O do navegador fica desligado para não disputar com o do sistema. */
html{overscroll-behavior-y:contain}
.puxar{position:fixed;top:calc(env(safe-area-inset-top) + 8px);left:50%;z-index:60;display:flex;align-items:center;gap:8px;
  padding:6px 14px 6px 6px;border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:0 6px 20px -8px rgba(0,0,0,.35);
  font-size:13px;font-weight:600;transform:translate(-50%,-60px);opacity:0;pointer-events:none;transition:opacity .15s}
.puxar.vis{opacity:1}
.puxar-bola{width:32px;height:32px;border-radius:50%;background:var(--tint);color:var(--mark);display:grid;place-items:center}
.puxar-bola .ic{transform:rotate(90deg);transition:transform .2s}
.puxar.pronto .puxar-bola{background:var(--accent);color:var(--accent-ink)}
.puxar.pronto .puxar-bola .ic{transform:rotate(-90deg)}
.puxar.carregando .puxar-bola .ic{animation:puxar-gira .8s linear infinite}
@keyframes puxar-gira{to{transform:rotate(270deg)}}
@media(prefers-reduced-motion:reduce){.puxar-bola .ic,.puxar.carregando .puxar-bola .ic{transition:none;animation:none}}
.versao-nova{position:fixed;left:12px;right:12px;bottom:calc(var(--barra) + env(safe-area-inset-bottom) + 12px);z-index:55;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 16px;border-radius:14px;
  background:var(--roxo);color:#fff;font-size:14px;font-weight:600;box-shadow:0 10px 30px -10px rgba(0,0,0,.45)}
.versao-nova button{flex:none;border:0;border-radius:10px;padding:9px 14px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:13.5px}
@media(min-width:900px){.versao-nova{left:auto;right:24px;bottom:24px;max-width:420px}}

/* ---------- impressão ---------- */
@media print{.topo,.nav,.lateral,.mais,.visor,.puxar,.versao-nova,.acoes,.gt-ola{display:none!important}body{background:#fff;padding:0}.casca{display:block}}