/* SITE: o que veio depois do estilo.css e do telas.css.
   1) acertos do nome novo, do Reels e da tela de postar   2) o painel da administração   3) a versão de site (tela grande, 900 px ou mais).
   No celular nada muda de lugar: a parte 3 só vale em tela grande. Toda cor sai das variáveis do estilo.css. */

/* ---------- 1) nome, Reels, postar ---------- */
.logo{font-size:19px}
.logo i{flex:none}
.logo span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lado{display:none}

.vid-z{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.vid-p{position:absolute;z-index:1;top:50%;left:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .15s}
.vid-p .ic{width:34px;height:34px}
.vid.parado .vid-p{opacity:1}
.vid.parado [class*="an-"]{animation-play-state:paused}
.vids-n{position:fixed;z-index:12;top:calc(6px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px))}
.vid-v{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:rgba(255,255,255,.85)}
.vid-v .ic{width:16px;height:16px}
.vid-vazio{display:grid;place-items:center}
.vid-vazio::after{display:none}
.vid-vazio .vazio{color:rgba(255,255,255,.82)}
.coms{display:flex;flex-direction:column;max-height:44vh;overflow-y:auto}

.prev-e{align-items:center;text-align:center;width:100%;color:var(--tinta2)}
.prev-e b{color:var(--tinta)}
.prev-b{display:block;width:min(220px,80%);height:8px;border-radius:4px;background:var(--linha);overflow:hidden}
.prev-b i{display:block;height:100%;width:0;border-radius:4px;background:var(--marca);transition:width .2s}
.prev-t{position:absolute;z-index:2;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;background:rgba(10,12,18,.62);color:#fff;font-weight:700;font-size:13.5px}
.prev-t .ic{width:16px;height:16px}
.previa.reel{aspect-ratio:9/16;width:min(100%,calc(56vh * 9 / 16));align-self:center}

/* ---------- 2) painel ---------- */
.pn-d{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border-radius:14px;background:var(--ouro-fundo);color:var(--ouro);font-weight:600}
.pn-d .ic{width:18px;height:18px;flex:none}
.pn-q{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qd{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;text-align:left;padding:14px;border-radius:18px;border:1.5px solid transparent;
  background:linear-gradient(var(--cartao),var(--cartao)) padding-box,linear-gradient(135deg,var(--marca),var(--ouro)) border-box}
button.qd:active{transform:scale(.98)}
.qd-i{width:34px;height:34px;border-radius:11px;background:var(--marca-suave);color:var(--marca-t);display:grid;place-items:center;margin-bottom:6px;animation:pulsa 2.8s ease-in-out infinite}
.qd-i .ic{width:19px;height:19px}
.qd-n{font:800 30px/1 var(--titulo);letter-spacing:-.02em}
.qd-r{font-weight:700;font-size:14.5px}
.qd-s{font-size:12.5px;line-height:1.3;color:var(--tinta2);overflow-wrap:anywhere}
@keyframes pulsa{50%{transform:scale(1.08)}}
.pn-g{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.pn-g .cartao{min-width:0}

.b14{--alto:104px;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;align-items:end}
.b14-c{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.b14-v{font:700 11.5px/1 var(--texto)}
.b14-v.z{color:var(--tinta2);opacity:.6}
.b14-c i{display:block;width:100%;max-width:26px;height:max(3px,calc(var(--alto) * var(--h)));border-radius:6px 6px 2px 2px;background:var(--marca)}
.b14-d{font-size:11px;line-height:1;color:var(--tinta2)}

.hb{display:flex;flex-direction:column;gap:5px}
.hb-t{display:flex;justify-content:space-between;gap:10px;font-size:14.5px}
.hb-b{height:8px;border-radius:4px;background:var(--linha);overflow:hidden}
.hb-b i{display:block;height:100%;border-radius:4px;background:var(--marca)}

.kvs{display:flex;flex-direction:column}
.cartao.kvs{padding-block:6px}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;font-size:14.5px}
.kv+.kv{border-top:1px solid var(--linha)}
.kv span{color:var(--tinta2)}
.kv b{min-width:0;text-align:right;overflow-wrap:anywhere}

.pg-b{display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:14px;background:var(--cartao);border:1.5px solid var(--linha);color:var(--tinta2)}
.pg-b:focus-within{border-color:var(--marca)}
.pg-b .ic{flex:none}
.pg-b input{border:0;border-radius:0;background:none;padding:12px 0;color:var(--tinta)}
.pg-c{padding-block:4px}
.pg-l{width:100%;min-height:52px;padding:7px 0;align-items:center;text-align:left}
.pg-t{display:block;flex:1;min-width:0;text-align:left}
.pg-t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-t em{font-style:normal;font-weight:400;font-size:14px;color:var(--tinta2)}
.pg-t small{display:block;font-size:13.5px;color:var(--tinta2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-l .tag{flex:none}
.pg-m{flex-wrap:wrap;gap:6px}
.pg-x{color:var(--perigo)}

.fo-c{display:flex;align-items:center;gap:8px;min-height:44px}
.fo-c h3{font-size:19px}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;text-align:center}
.nums div{display:flex;flex-direction:column;gap:3px;padding:10px 4px;border-radius:14px;background:var(--cartao);border:1px solid var(--linha)}
.nums b{font:800 20px/1 var(--titulo)}
.nums span{font-size:11.5px;line-height:1.2;color:var(--tinta2)}
.av3{display:flex;flex-direction:column;gap:6px}
.av3 p{margin:0}
.av3-c{color:var(--perigo);font-weight:600}
.av3-q{color:var(--tinta2);font-size:13.5px}
.dn .mini-arte{flex:none}
.dn-l{margin:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dn-b{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 2b) calendário de meses, bolinhas de aviso, foto do perfil, cadastro ---------- */
.calm{display:flex;flex-direction:column;gap:8px}
.calm-c{display:flex;align-items:center;gap:8px}
.calm-c b{flex:1;min-width:0;text-align:center;font:700 17px/1.2 var(--titulo)}
.calm-c b::first-letter{text-transform:uppercase}
.fila.q{flex-wrap:wrap}
.fila.q>.cresce{flex:1 1 150px}
.calm-c .ib{background:var(--cartao);border:1px solid var(--linha)}
.calm-c .ib:disabled{opacity:.3}
.calm-p .ic{transform:scaleX(-1)}
.cal-d.hj{border-color:var(--marca);color:var(--marca-t)}
.cal-d.hj.sel{color:var(--sobre-marca)}
.cal-d.hj.oc,.cal-d.hj.pas{color:var(--tinta2)}
.cal-d:disabled{cursor:default}

.bol{flex:none;display:inline-block;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--perigo);color:var(--fundo);font:700 11.5px/20px var(--texto);text-align:center}
.bi{position:relative}
.bi-p{position:absolute;top:7px;left:calc(50% + 6px);width:10px;height:10px;border-radius:50%;background:var(--perigo);border:2px solid var(--cartao)}

.foto-g{display:block;width:100%;max-height:70vh;object-fit:contain;border-radius:16px;background:var(--cartao)}
.pf-f{position:relative;flex:none;border-radius:50%;padding:0;display:block}
.pf-f-c{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:var(--marca);color:var(--sobre-marca);display:grid;place-items:center;border:2px solid var(--fundo)}
.pf-f-c .ic{width:16px;height:16px}
button.mini-arte{padding:0}
.mini-arte img{width:100%;height:100%;object-fit:cover}
.nota.col{flex-direction:column;align-items:stretch}

.tres{display:grid;grid-template-columns:1fr 1.5fr 1.2fr;gap:8px}
.tres select{min-width:0;padding:12px 8px}
.diz{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px}
.diz .ic{width:16px;height:16px;flex:none}
.diz.ok{color:var(--ok)}
.diz.x{color:var(--perigo)}

/* ---------- 2c) antes e depois, compartilhar, destaques, obra da semana ---------- */
.ad{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--linha)}
.ad-l{position:relative;aspect-ratio:4/5;overflow:hidden;display:block;width:100%;padding:0;background:var(--linha)}
.ad-r{position:absolute;z-index:2;left:8px;top:8px;background:rgba(0,0,0,.55);color:#fff;font:700 11.5px/1 var(--texto);letter-spacing:.05em;text-transform:uppercase;padding:6px 8px;border-radius:8px;pointer-events:none}
.ad-e{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ad-e .previa{min-width:0}
.link-c{display:flex;gap:8px;align-items:center}
.link-c input{flex:1;min-width:0}
.dst-n{flex:none;width:26px;text-align:center;font:800 18px/1 var(--titulo);color:var(--tinta2)}
.dst-n.top{color:var(--ouro)}
.dst-p{flex:none;font-size:13px;color:var(--tinta2)}
.obra-b{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;border-radius:18px;background:var(--cartao);border:1px solid var(--linha);color:var(--tinta)}
.obra-b>.ic{flex:none;width:36px;height:36px;padding:8px;border-radius:12px;background:var(--ouro-fundo);color:var(--ouro)}
.obra-b .cresce{min-width:0}
.obra-b b,.obra-b .cresce span{display:block}
.obra-b .cresce span{color:var(--tinta2);font-size:13px;margin-top:2px}
.obra-v{flex:none;font-weight:700;color:var(--marca-t)}
.wa-qr{display:block;width:min(320px,100%);align-self:center;border-radius:12px;background:#fff;padding:8px;image-rendering:pixelated}
.wa-passos{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}

@media (prefers-reduced-motion:reduce){.qd-i{animation:none}.prev-b i,.vid-p{transition:none}}

/* ---------- 3) versão de site: tela grande ---------- */
@media (min-width:900px){
  :root{--menu:248px}
  #lado{display:flex;flex-direction:column;gap:4px;position:fixed;z-index:35;left:0;top:0;bottom:0;width:var(--menu);padding:20px 14px;background:var(--cartao);border-right:1px solid var(--linha);overflow-y:auto}
  #lado{scrollbar-width:thin}
  #lado .logo{flex:none;font-size:18px;padding:4px 8px 16px;align-items:center}
  #lado .logo span{white-space:normal;overflow:visible;line-height:1.15;text-wrap:balance}
  .lado-m{display:flex;flex-direction:column;gap:4px;flex:none}
  .lado-eu{flex:none;margin-top:auto;display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:14px;border:1px solid var(--linha);text-align:left}
  .lado-eu .lin-t{flex:1;min-width:0}
  .lado-eu .lin-t b,.lado-eu .lin-t span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lado-eu .lin-t span{color:var(--tinta2);font-size:13px}
  .li{display:flex;align-items:center;gap:12px;flex:none;width:100%;min-height:46px;padding:0 12px;border-radius:14px;font-weight:600;color:var(--tinta2);text-align:left}
  .li span{flex:1;min-width:0}
  .li.on{background:var(--marca-suave);color:var(--marca-t)}
  .li-n{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--perigo);color:var(--fundo);font:700 11.5px/20px var(--texto);text-align:center}
  #lado .bt{flex:none;margin:12px 0 16px}

  body.logado #app{margin-left:var(--menu)}
  body.logado .barra{display:none}
  body.logado .so-cel{display:none}
  body.logado .casca{max-width:560px;padding-block:8px 40px}
  body.logado .casca.larga{max-width:1080px}
  body.logado .casca{padding-left:24px;padding-right:24px}
  body.logado #toast{left:calc(50% + var(--menu) / 2);bottom:28px}

  /* a folha de baixo vira janela no meio */
  #folha{align-items:center;padding:24px}
  .fo{border-radius:22px;max-height:min(100%,760px);padding:18px 20px 20px;animation-name:surge}
  .fo-p{display:none}
  @keyframes surge{from{transform:scale(.97);opacity:0}}

  /* telas que tomam a tela toda respeitam o menu */
  body.logado .vids,body.logado .chat,body.logado .vids-t{left:var(--menu)}
  .vid{max-width:min(480px,calc(100vh * 9 / 16))}
  .vid-b{bottom:28px}
  .vid-l{bottom:40px}
  .vids-n{top:16px;right:24px}
  .chat-d{max-width:720px;border-inline:1px solid var(--linha)}

  .pn-q{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .qd{padding:18px}
  .qd-n{font-size:36px}
  .pn-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-u{grid-column:1/-1}
  .b14{--alto:130px}
}
@media (min-width:900px) and (hover:hover){
  .li:hover,.lado-eu:hover{background:var(--fundo)}
  .li.on:hover{background:var(--marca-suave)}
  button.qd:hover{box-shadow:var(--sombra)}
  .pg-l:hover .pg-t b{color:var(--marca-t)}
}

/* celular estreito: as 4 abas do início cabem numa linha só */
@media (max-width:420px){.aba{font-size:13px;padding:0 3px;white-space:nowrap}}
.cp-ver{margin:0;padding:12px 14px;border-radius:14px;background:var(--fundo);border:1px solid var(--linha);font:14px/1.45 var(--texto);white-space:pre-wrap;overflow-wrap:anywhere}
.wa-qs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.wa-qd{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;padding:14px;border-radius:18px;background:var(--cartao);border:1px solid var(--linha);color:var(--tinta);min-width:0}
.wa-qd>.ic{width:34px;height:34px;padding:7px;border-radius:11px;background:var(--marca-suave);color:var(--marca-t)}
.wa-qd b{font-size:15.5px}
.wa-qd>span:last-child{font-size:13px;color:var(--tinta2);overflow-wrap:anywhere}
.st-i{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;background:var(--cartao,#fff);border:1px solid var(--linha,#e5e5e5)}
.st-f{position:relative;height:240px;border-radius:10px;overflow:hidden;background:#000}
.st-f .arte{width:100%;height:100%;object-fit:contain;display:block}
.st-leg{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;color:#fff;font-size:15px;line-height:1.35;text-align:center;white-space:pre-wrap;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.st-x{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.5);color:#fff;border-radius:50%}
#cpPrev{aspect-ratio:16/10}

/* status só de texto: a caixa com a cor do fundo e as bolinhas de cor */
.st-t{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px}
.st-t textarea{background:transparent;border:0;color:#fff;font-size:17px;font-weight:600;text-align:center;resize:vertical;min-height:84px;outline:none;font-family:inherit}
.st-t textarea::placeholder{color:rgba(255,255,255,.75)}
.st-t .ib{color:#fff}
.st-cores{display:flex;gap:8px;flex-wrap:wrap}
.st-cor{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.55);padding:0;cursor:pointer}
.st-cor.on{border:3px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.25)}