/* app.css · Social Midia da Maxfem (social.maxfem.cloud)
   Camada propria por cima dos tokens de assets/maxfem-workspace.css, o mesmo
   sistema visual do b2b.maxfem.cloud e do liveseller.maxfem.cloud.
   Mobile-first de proposito: a Julia abre isso no celular enquanto grava story,
   por isso o gerador de link vira o primeiro bloco da tela ate 839px. */

:root{
  --larg:1120px;
  --ok:#5d7f2f;    --ok-bg:#effbe5;  --ok-line:#d3e9bb;
  --at:#9e6c10;    --at-bg:#fff2c7;  --at-line:#f0dda0;
  --ruim:#b42318;  --ruim-bg:#fde8e8; --ruim-line:#f4cccc;
  --neutro:#7b7075;
}

*{margin:0;padding:0}
body{min-height:100vh;background:var(--ws-canvas)}

/* ---------------- topo ---------------- */
.topo{position:sticky;top:0;z-index:40;background:#f6f3f5f2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #ece8ea;padding-top:env(safe-area-inset-top,0px)}
.topo-in{max-width:var(--larg);margin:0 auto;padding:0 16px;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.marca-n{font-family:var(--ws-display);font-weight:700;font-size:14px;letter-spacing:.16em;color:var(--ws-ink)}
.marca-t{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ws-muted);padding-left:10px;border-left:1px solid var(--ws-line);white-space:nowrap}
.topo-dir{display:flex;align-items:center;gap:10px;min-width:0}
.quem{font-size:12px;color:var(--ws-ink-3);font-weight:500;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sair{background:none;border:0;font-size:11px;color:var(--ws-muted);cursor:pointer;text-decoration:underline;padding:4px 0}
.sair:hover{color:var(--ws-ink)}
@media(max-width:420px){.marca-t{display:none}.quem{max-width:110px}}

/* ---------------- estrutura ---------------- */
.wrap{max-width:var(--larg);margin:0 auto;padding:16px 16px 64px;display:flex;flex-direction:column;gap:14px}
#b-lnk{order:1}#b-cal{order:2}#b-vnd{order:3}
@media(min-width:840px){#b-cal{order:1}#b-lnk{order:2}#b-vnd{order:3}}

.bloco{background:var(--ws-surface);border:1px solid var(--ws-line);border-radius:var(--ws-radius);padding:16px}
@media(min-width:720px){.bloco{padding:20px}}
.bloco-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.bloco-tit h2{font-family:var(--ws-display);font-size:19px;font-weight:500;letter-spacing:-.03em;line-height:1.2}
@media(min-width:720px){.bloco-tit h2{font-size:22px}}
.bloco-sub{font-size:12px;color:var(--ws-muted);margin-top:3px;line-height:1.45}
.bloco-acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------------- selo "atualizado ha X" ---------------- */
.selo{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:5px 9px;border-radius:999px;border:1px solid var(--ws-line);background:var(--ws-surface-2);color:var(--neutro);white-space:nowrap;flex:0 0 auto}
.selo::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.selo[data-estado=verde]{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.selo[data-estado=ambar]{color:var(--at);background:var(--at-bg);border-color:var(--at-line)}
.selo[data-estado=vermelho]{color:var(--ruim);background:var(--ruim-bg);border-color:var(--ruim-line)}

/* ---------------- alertas do bloco ---------------- */
.alertas:empty{display:none}
.alertas{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.alerta{border:1px solid;border-radius:var(--ws-radius-sm);padding:11px 13px;font-size:12.5px;line-height:1.5}
.alerta b{display:block;font-size:13px;margin-bottom:2px}
.alerta.erro{background:var(--ruim-bg);border-color:var(--ruim-line);color:#7d2019}
.alerta.erro b{color:var(--ruim)}
.alerta.atencao{background:var(--at-bg);border-color:var(--at-line);color:#6d4b0b}
.alerta.atencao b{color:var(--at)}
.alerta ul{margin:6px 0 0;padding-left:16px}
.alerta li{margin-top:3px}
.alerta a{color:inherit}

/* ---------------- esqueleto ---------------- */
.skel{display:block;height:13px;border-radius:7px;background:linear-gradient(90deg,#f0edee 25%,#f8f6f7 50%,#f0edee 75%);background-size:200% 100%;animation:skel 1.4s linear infinite}
.skel+.skel{margin-top:9px}
.skel.t{height:11px;width:45%}
.skel.c{width:70%}
.skel.g{height:120px;border-radius:12px}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-card{border:1px solid var(--ws-line-soft);border-radius:var(--ws-radius-sm);padding:14px;background:#fff}

/* =========================================================
   BLOCO 0 · quanto a social vendeu   (topo da pagina)

   Herda a LEITURA do painel antigo (faturado grande, barra de meta, quebra por
   origem, barras por dia) no sistema visual deste app, nao no visual antigo.
   Duas coisas que o antigo errava e aqui nao podem voltar:
   1. no celular os KPIs empilhavam 1 por linha e o hero sozinho passava de duas
      telas, empurrando o calendario pra fora. Aqui PAGOS e TICKET MEDIO ficam
      lado a lado desde 320px, e o bloco inteiro cabe em ~1 tela e meia em 390px.
   2. a barra de periodo estourava a largura e cortava "Mes passado". Aqui ela
      quebra em duas linhas: nada fica escondido atras de scroll lateral.
   ========================================================= */

/* primeiro da pagina em qualquer largura; os outros blocos ja tem order 1..3 */
#b-soc{order:0}

/* ---- periodos (classe propria: .seg e do bloco 3 e usa data-dias) ---- */
/* Cinco botoes nao cabem numa linha de 390px. Em vez de scroll lateral (que no
   painel antigo cortava "Mes passado"), duas linhas cheias: 3 em cima, 2 embaixo. */
.soc-seg{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;background:var(--ws-surface-2);border:1px solid var(--ws-line);border-radius:10px;padding:3px;margin-bottom:14px}
.soc-seg button{grid-column:span 2;border:0;background:transparent;color:var(--ws-muted);font:inherit;font-size:12px;font-weight:600;padding:7px 8px;border-radius:7px;cursor:pointer;min-height:34px;white-space:nowrap}
.soc-seg button:nth-child(4),.soc-seg button:nth-child(5){grid-column:span 3}
.soc-seg button:hover{color:var(--ws-ink)}
.soc-seg button.on{background:var(--ws-ink);color:#fff}
@media(min-width:560px){
  .soc-seg{display:flex;flex-wrap:wrap}
  .soc-seg button{padding:7px 14px;flex:0 0 auto}
}

/* ---- hero ---- */
.soc-hero{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:14px}
@media(min-width:720px){.soc-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;align-items:stretch}}
.soc-caixa{border:1px solid var(--ws-line);border-radius:var(--ws-radius-sm);background:#fff;padding:14px;min-width:0}
.soc-caixa.forte{background:linear-gradient(180deg,var(--ws-accent-50),#fff);border-color:var(--ws-accent-200)}
.soc-rot{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#76686e}
.soc-rot .so{color:var(--ws-rose-700);letter-spacing:.06em}
.soc-val{font-family:var(--ws-display);font-weight:500;font-size:34px;letter-spacing:-1.4px;color:var(--ws-ink);line-height:1.05;margin-top:6px;display:flex;align-items:baseline;gap:5px;overflow-wrap:anywhere}
.soc-val .cifra{font-size:17px;font-weight:600;letter-spacing:-.4px;color:var(--ws-rose)}
.soc-val.vazio{font-family:var(--ws-font);font-size:15px;font-weight:500;letter-spacing:0;color:var(--ws-muted-2)}
@media(min-width:720px){.soc-val{font-size:42px;letter-spacing:-1.8px}.soc-val .cifra{font-size:20px}}
.soc-janela{font-size:11.5px;color:var(--ws-muted);margin-top:5px;line-height:1.45}

/* barra da meta: so aparece em "Este mes", igual ao painel antigo */
.soc-meta{margin-top:12px;padding-top:11px;border-top:1px solid var(--ws-line-soft)}
.soc-meta-l1{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--ws-muted)}
.soc-meta-l1 b{font-family:var(--ws-display);font-weight:600;font-size:13px;color:var(--ws-ink-2);white-space:nowrap}
.soc-barra{height:8px;border-radius:999px;background:#efe7eb;margin-top:7px;overflow:hidden}
.soc-barra i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ws-rose),var(--ws-accent));min-width:3px}
.soc-meta-l2{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:7px;font-size:11.5px;color:var(--ws-muted)}
.soc-meta-l2 b{font-family:var(--ws-display);font-size:13px;font-weight:600;color:var(--ws-rose-700)}
.soc-meta-l2 .batida{color:var(--ok);font-weight:600}

/* PAGOS e TICKET MEDIO: lado a lado desde 320px, nunca 1 por linha */
.soc-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.soc-kpi{border:1px solid var(--ws-line);border-radius:var(--ws-radius-sm);background:#fff;padding:12px 13px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.soc-kpi-v{font-family:var(--ws-display);font-size:20px;font-weight:500;letter-spacing:-.6px;color:var(--ws-ink);margin-top:6px;line-height:1.15;overflow-wrap:anywhere}
.soc-kpi-v.vazio{font-family:var(--ws-font);font-size:13px;font-weight:500;letter-spacing:0;color:var(--ws-muted-2)}
.soc-kpi-s{font-size:11px;color:var(--ws-muted);margin-top:3px;line-height:1.4}
@media(max-width:359px){.soc-kpi{padding:11px}.soc-kpi-v{font-size:17px}}
@media(min-width:720px){.soc-kpis{grid-template-rows:1fr 1fr;grid-template-columns:1fr}.soc-kpi-v{font-size:23px}}

/* ---- quebra por superficie ---- */
.soc-sup{border:1px solid var(--ws-line);border-radius:var(--ws-radius-sm);background:#fff;padding:12px 13px;margin-bottom:14px}
.soc-sup-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.soc-sup-cab b{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#76686e}
.soc-sup-cab span{font-size:10.5px;color:var(--ws-muted-2)}
.soc-lin+.soc-lin{margin-top:9px;padding-top:9px;border-top:1px solid var(--ws-line-soft)}
.soc-lin-1{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.soc-lin-n{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;font-weight:600;color:var(--ws-ink)}
.soc-lin-n i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.soc-lin-r{font-family:var(--ws-display);font-size:13.5px;font-weight:600;color:var(--ws-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
/* A barra do link da bio ocupa ~78% do recorte. Trilho cheio + barra fina de 6px
   aguenta a dominancia sem virar um bloco de cor, e a linha de 0,3% ainda aparece
   por causa do min-width. */
.soc-lin-2{display:flex;align-items:center;gap:9px;margin-top:6px}
.soc-lin-b{flex:1;min-width:0;height:6px;border-radius:999px;background:#f1ecef;overflow:hidden}
.soc-lin-b i{display:block;height:100%;border-radius:999px;min-width:3px}
.soc-lin-s{font-size:11px;color:var(--ws-muted);white-space:nowrap;flex:0 0 auto}
.soc-lin.zero .soc-lin-n{color:var(--ws-muted)}
.soc-lin-n em{font-style:normal;font-size:11px;font-weight:500;color:var(--ws-muted-2);white-space:nowrap}
.soc-lin.zero .soc-lin-r{color:var(--ws-muted-2);font-weight:500}
.soc-lin.zero .soc-lin-b{background:var(--ws-line-soft)}
.soc-sup-vazio{font-size:12.5px;color:var(--ws-muted-2)}

/* ---- grafico por dia (div puro, sem biblioteca) ---- */
.soc-graf-cx{border:1px solid var(--ws-line);border-radius:var(--ws-radius-sm);background:#fff;padding:12px 13px}
.soc-graf-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.soc-graf-cab span:first-child{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#76686e}
.soc-graf-cab span+span{font-size:10.5px;color:var(--ws-muted-2);white-space:nowrap}
.soc-graf{display:flex;align-items:flex-end;gap:2px;height:104px}
@media(min-width:720px){.soc-graf{height:150px;gap:3px}}
.soc-gdia{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%;background:none;border:0;padding:0;cursor:pointer;border-radius:4px 4px 0 0}
.soc-gcol{display:block;width:100%;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--ws-rose),var(--ws-accent));min-height:2px;opacity:.92}
.soc-gdia:hover .soc-gcol,.soc-gdia.sel .soc-gcol{opacity:1;outline:1px solid #00000014}
.soc-gdia.hoje .soc-gcol{background:linear-gradient(180deg,var(--ws-rose-800),var(--ws-rose))}
.soc-gzero{display:block;height:2px;width:100%;background:var(--ws-line);border-radius:2px}
.soc-gdia.hoje .soc-gzero{height:4px;background:var(--ws-accent-200)}
.soc-gfut{display:block;height:100%;width:100%;border-radius:3px;opacity:.45;background:repeating-linear-gradient(135deg,var(--ws-line-soft),var(--ws-line-soft) 4px,transparent 4px,transparent 8px)}
/* marco de 03/09: a etiqueta do link da bio trocou de bioi para ig/linkbio.
   Sem isso a virada se le como queda do canal. */
.soc-gdia.marco::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:0;border-left:1px dashed var(--ws-muted-2);opacity:.7;pointer-events:none}
.soc-grot{display:grid;gap:2px;margin-top:6px}
.soc-grot span{font-size:9px;color:var(--ws-muted-2);text-align:center;font-family:var(--ws-display);white-space:nowrap;overflow:hidden}
.soc-gcap{font-size:12px;color:var(--ws-ink-3);margin-top:9px;min-height:17px;line-height:1.45}
.soc-gcap b{font-family:var(--ws-display);font-weight:600;color:var(--ws-ink)}
.soc-nota{font-size:11px;color:var(--ws-muted);margin-top:7px;line-height:1.45;display:flex;gap:7px;align-items:flex-start}
.soc-nota::before{content:"";width:0;height:12px;border-left:1px dashed var(--ws-muted-2);flex:0 0 auto;margin-top:2px}

/* ---- rodape: contador do gerador de link, que comeca em zero ---- */
.soc-rod{font-size:11.5px;color:var(--ws-muted);line-height:1.5;margin-top:12px;padding-top:11px;border-top:1px solid var(--ws-line-soft)}
.soc-rod b{font-family:var(--ws-display);font-weight:600;color:var(--ws-ink-2)}

/* =========================================================
   BLOCO 1 · o que posta hoje
   ========================================================= */
#cal-destaque{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){#cal-destaque{grid-template-columns:1fr 1fr}}
@media(min-width:960px){#cal-destaque{grid-template-columns:repeat(4,1fr)}}

.dia-card{border:1px solid var(--ws-line);border-radius:var(--ws-radius-sm);background:#fff;padding:13px 14px;min-width:0;display:flex;flex-direction:column}
.dia-card.hoje{border-color:var(--ws-accent-200);background:linear-gradient(180deg,var(--ws-accent-50),#fff)}
.dia-card-topo{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.dia-rot{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ws-muted)}
.dia-card.hoje .dia-rot{color:var(--ws-rose)}
.dia-num{font-family:var(--ws-display);font-size:17px;font-weight:500;letter-spacing:-.03em;color:var(--ws-ink)}
.dia-n{font-size:10px;font-weight:600;color:#523643;background:#f3e9ee;border-radius:5px;padding:2px 7px;font-family:var(--ws-display)}
.dia-vazio{font-size:12.5px;color:var(--ws-muted-2);padding:6px 0 2px}

.post{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--ws-line-soft);padding:9px 0;cursor:pointer;min-width:0}
.post:first-of-type{border-top:0;padding-top:0}
.post:hover .post-t{color:var(--ws-rose)}
.post-l1{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:3px}
.post-t{font-size:13px;font-weight:600;color:var(--ws-ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-l2{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:11px;color:var(--ws-muted)}
.post.feito .post-t{color:var(--ws-muted);text-decoration:line-through}

.fmt{display:inline-flex;align-items:center;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 6px;border-radius:5px;background:#f1ecef;color:#5a4a52;font-family:var(--ws-display);white-space:nowrap}
.fmt[data-f=REEL]{background:#fbe4ef;color:#b51f62}
.fmt[data-f=FEED]{background:#ece6ea;color:#4a1d35}
.fmt[data-f=CARROSSEL]{background:#eaf3f0;color:#2f5a4f}
.fmt[data-f=STORY]{background:#fff2c7;color:#8a5d0c}
.fmt[data-f=UGC]{background:#fce0ee;color:#a81d5f}
.fmt[data-f=ESTATICO]{background:#eeeaec;color:#62535a}
.fmt[data-f=TIKTOK]{background:#e8e8e8;color:#242424}
.hora{font-size:10.5px;font-weight:700;font-family:var(--ws-display);color:var(--ws-ink-3)}
.ini{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:9px;font-weight:700;color:#fff;font-family:var(--ws-display);flex:0 0 auto;letter-spacing:.02em}
.perfil{font-size:11px;color:var(--ws-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-ok{width:7px;height:7px;border-radius:50%;background:#6aa33d;flex:0 0 auto}

/* grade compacta do mes */
.mcal{margin-top:18px;border-top:1px solid var(--ws-line-soft);padding-top:16px}
.mcal-topo{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.mcal-mes{font-family:var(--ws-display);font-size:15px;font-weight:500;letter-spacing:-.02em;min-width:120px}
.nav{width:32px;height:32px;border-radius:50%;border:1px solid var(--ws-line);background:#fff;color:var(--ws-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.nav:hover{background:var(--ws-accent-50);border-color:var(--ws-accent-200)}
.mcal-cont{margin-left:auto;font-size:11px;color:var(--ws-muted)}
.mcal-sem{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.mcal-sem span{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ws-muted-2);text-align:center}
.mcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mcal-c{min-height:52px;border:1px solid var(--ws-line-soft);border-radius:8px;background:#fff;padding:4px;text-align:left;font:inherit;color:inherit;min-width:0;overflow:hidden}
button.mcal-c{cursor:pointer}
.mcal-c.fora{border-color:transparent;background:transparent}
.mcal-c.tem{background:var(--ws-accent-50);border-color:var(--ws-accent-200)}
.mcal-c.hoje{outline:2px solid var(--ws-ink);outline-offset:-2px}
.mcal-c.passado{opacity:.62}
.mcal-n{font-family:var(--ws-display);font-size:11px;font-weight:600;color:var(--ws-ink);display:block;line-height:1.2}
.mcal-pontos{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.mcal-pontos i{width:6px;height:6px;border-radius:50%;display:block}
.mcal-chips{display:none}
.mcal-chip{display:block;font-size:9.5px;line-height:1.3;font-weight:600;margin-top:3px;color:var(--ws-rose-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcal-chip.feito{color:var(--ws-muted-2);text-decoration:line-through}
.mcal-mais{font-size:9px;color:var(--ws-muted);margin-top:2px;display:block}
@media(min-width:620px){
  .mcal-c{min-height:70px;padding:5px 6px}
  .mcal-pontos{display:none}
  .mcal-chips{display:block}
}

.extra{margin-top:14px;border:1px solid var(--ws-line);border-radius:var(--ws-radius-sm);background:var(--ws-surface-2)}
.extra>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ws-ink);padding:11px 13px;list-style:none;display:flex;align-items:center;gap:8px}
.extra>summary::-webkit-details-marker{display:none}
.extra>summary::after{content:"+";margin-left:auto;font-family:var(--ws-display);color:var(--ws-muted)}
.extra[open]>summary::after{content:"-"}
.extra-corpo{padding:0 13px 12px;display:flex;flex-direction:column;gap:2px}

/* =========================================================
   BLOCO 2 · o link pra colar
   ========================================================= */
.ger{display:flex;flex-direction:column;gap:12px}
.campo{display:block;min-width:0}
.campo>span{display:block;font-size:11.5px;font-weight:600;color:#76686e;margin-bottom:6px}
.campo select{width:100%;min-height:46px;border:1px solid var(--ws-line);border-radius:var(--ws-radius-xs);padding:11px 34px 11px 12px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a1d35' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center/16px 16px;color:var(--ws-ink);font-size:14px;appearance:none;-webkit-appearance:none}
.campo select:focus{outline:0;border-color:var(--ws-accent);box-shadow:var(--ws-ring)}
.campo select:disabled{background-color:var(--ws-surface-2);color:var(--ws-muted-2)}
@media(min-width:640px){.dupla{display:grid;grid-template-columns:1fr 1fr;gap:12px}}

.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;padding:10px 12px;border:1px solid var(--ws-line);border-radius:var(--ws-radius-xs);background:var(--ws-surface-2)}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.tg{position:relative;width:40px;height:23px;border-radius:999px;background:#ddd4d9;flex:0 0 auto;transition:background .16s}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(74,29,53,.25);transition:transform .16s}
.toggle input:checked+.tg{background:var(--ws-ink)}
.toggle input:checked+.tg::after{transform:translateX(17px)}
.toggle input:focus-visible+.tg{box-shadow:var(--ws-ring)}
.tg-txt{font-size:12.5px;color:var(--ws-ink-2);line-height:1.4}

.previa{display:flex;gap:12px;align-items:center;border:1px solid var(--ws-line);border-radius:var(--ws-radius-sm);padding:11px;background:#fff;min-width:0}
.previa img{width:52px;height:52px;object-fit:cover;border-radius:9px;background:var(--ws-surface-2);flex:0 0 auto}
.previa-txt{min-width:0;flex:1}
.previa-t{font-size:13px;font-weight:600;color:var(--ws-ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.previa-p{font-family:var(--ws-display);font-size:15px;font-weight:600;color:var(--ws-ink);margin-top:4px}
.previa-p s{font-family:var(--ws-font);font-size:11.5px;font-weight:400;color:var(--ws-muted-2);margin-left:6px}
.previa-selos{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.selinho{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:5px;background:#f3e9ee;color:#523643;font-family:var(--ws-display)}
.selinho.kit{background:var(--ws-accent-100);color:#a81d5f}
.selinho.alerta{background:var(--at-bg);color:var(--at)}
.selinho.morto{background:var(--ruim-bg);color:var(--ruim)}
.previa-comp{font-size:11px;color:var(--ws-muted);margin-top:5px;line-height:1.4}

.copiar{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:0;border-radius:12px;min-height:56px;padding:14px 18px;font-size:16px;font-weight:700;letter-spacing:-.01em;cursor:pointer;background:var(--ws-ink);color:#fff;transition:background .15s,transform .12s}
.copiar:active{transform:scale(.99)}
.copiar:disabled{background:#eae3e7;color:#9e969a;cursor:not-allowed;transform:none}
.copiar.feito{background:#4d7c2a}
@media(hover:hover){.copiar:hover:not(:disabled){background:var(--ws-rose-700)}}

.url-cx{display:flex;align-items:stretch;gap:0;border:1px solid var(--ws-line);border-radius:var(--ws-radius-xs);background:var(--ws-surface-2);overflow:hidden}
.url-cx code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;color:var(--ws-ink-3);padding:10px 12px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
.url-cx button{flex:0 0 auto;border:0;border-left:1px solid var(--ws-line);background:#fff;color:var(--ws-ink);font-size:11px;font-weight:600;padding:0 13px;cursor:pointer}
.url-cx button:hover{background:var(--ws-accent-50)}
.dica{font-size:11.5px;color:var(--ws-muted);line-height:1.5}
.dica code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--ws-rose-700);background:var(--ws-accent-50);padding:1px 5px;border-radius:4px}

/* =========================================================
   BLOCO 3 · quanto vendeu
   ========================================================= */
.seg{display:inline-flex;flex-wrap:wrap;gap:3px;background:var(--ws-surface-2);border:1px solid var(--ws-line);border-radius:10px;padding:3px}
.seg button{border:0;background:transparent;color:var(--ws-muted);font-size:12px;font-weight:600;padding:7px 12px;border-radius:7px;cursor:pointer;min-height:34px}
.seg button:hover{color:var(--ws-ink)}
.seg button.on{background:var(--ws-ink);color:#fff}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.stat{border:1px solid var(--ws-line);border-radius:var(--ws-radius-sm);padding:13px 14px;background:#fff;min-width:0}
.stat.ig{grid-column:1/-1;background:var(--ws-accent);border-color:var(--ws-accent)}
@media(min-width:720px){.stats{grid-template-columns:repeat(3,1fr)}.stat.ig{grid-column:auto}}
.stat .rot{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#76686e}
.stat.ig .rot{color:#5a3143}
.stat .val{font-family:var(--ws-display);font-size:23px;font-weight:500;letter-spacing:-.8px;color:var(--ws-ink);margin-top:7px;line-height:1.15;overflow-wrap:anywhere}
.stat .sub{font-size:11.5px;color:var(--ws-muted);margin-top:4px;line-height:1.5}
.stat.ig .sub{color:#5a3143}
.stat .quebra{font-size:11px;color:var(--ws-muted);margin-top:7px;padding-top:7px;border-top:1px solid var(--ws-line-soft);display:flex;align-items:center;gap:6px}
/* Em tela estreita o numero encolhe em vez de quebrar no meio: "R$ 588.574," numa
   linha e "00" na outra e a forma mais rapida de ler errado o faturamento. */
@media(max-width:479px){
  .stat{padding:12px 11px}
  .stat .val{font-size:18.5px;letter-spacing:-.5px}
  .stat.ig .val{font-size:23px}
}
.stat.ig .quebra{color:#5a3143;border-top-color:#e893bb}

.graf{display:flex;align-items:flex-end;gap:2px;height:148px;margin-top:2px}
@media(min-width:720px){.graf{height:184px;gap:3px}.grot{gap:3px}}
.gdia{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%;background:none;border:0;padding:0;cursor:pointer;border-radius:4px 4px 0 0}
.gdia:hover .gcol,.gdia.sel .gcol{opacity:1;outline:1px solid #00000014}
.gcol{display:flex;flex-direction:column-reverse;width:100%;border-radius:3px 3px 0 0;overflow:hidden;opacity:.92;min-height:2px}
.gcol i{display:block;width:100%}
.gzero{height:2px;width:100%;background:var(--ws-line);border-radius:2px}
.grot{display:grid;gap:2px;margin-top:6px}
.grot span{font-size:9px;color:var(--ws-muted-2);text-align:center;font-family:var(--ws-display);white-space:nowrap;overflow:hidden}
.gcap{font-size:12px;color:var(--ws-ink-3);margin-top:10px;min-height:18px;line-height:1.45}
.gcap b{font-family:var(--ws-display);font-weight:600;color:var(--ws-ink)}

.chaves{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px}
.chave{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ws-ink-3)}
.chave i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}

.tab-wrap{margin-top:16px;overflow-x:auto;border:1px solid var(--ws-line);border-radius:var(--ws-radius-sm)}
table.tab{width:100%;border-collapse:collapse;font-size:13px;min-width:340px}
table.tab th{background:var(--ws-surface-2);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ws-muted);font-weight:700;text-align:right;padding:9px 12px;white-space:nowrap}
table.tab th:first-child{text-align:left}
table.tab td{padding:10px 12px;border-top:1px solid var(--ws-line-soft);text-align:right;font-family:var(--ws-display);font-variant-numeric:tabular-nums;color:var(--ws-ink)}
table.tab td:first-child{text-align:left;font-family:var(--ws-font);font-weight:500}
table.tab tr.total td{background:var(--ws-surface-2);font-weight:700;border-top:1px solid var(--ws-line)}
.org{display:inline-flex;align-items:center;gap:8px;min-width:0}
.org i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.org small{display:block;font-size:10.5px;color:var(--ws-muted);font-weight:400;margin-top:1px}
/* No celular a tabela cabe inteira: rolar de lado uma tabela de 4 colunas e
   pior que quebrar a linha, e a Julia le isso com uma mao so. */
@media(max-width:479px){
  table.tab{min-width:0;font-size:12.5px}
  table.tab th,table.tab td{padding:9px 6px}
  table.tab th:first-child,table.tab td:first-child{padding-left:11px}
  /* a coluna Fatia sai no celular: pedidos e receita sao o que ela precisa ler,
     e a fatia ja esta no tamanho da barra do grafico logo acima */
  table.tab th:nth-child(4),table.tab td:nth-child(4){display:none}
  table.tab th:nth-child(3),table.tab td:nth-child(3){padding-right:11px}
  .org{gap:6px}
  .org small{font-size:10px;line-height:1.35}
}

/* =========================================================
   gaveta de detalhe do post
   ========================================================= */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:640px){.sheet{align-items:center;padding:24px}}
.sheet-fundo{position:absolute;inset:0;background:rgba(74,29,53,.38);animation:fade .18s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-cx{position:relative;background:#fff;width:100%;max-width:560px;max-height:86vh;display:flex;flex-direction:column;border-radius:20px 20px 0 0;box-shadow:var(--ws-shadow-lg);animation:sobe .2s ease-out;padding-bottom:env(safe-area-inset-bottom,0px)}
@media(min-width:640px){.sheet-cx{border-radius:18px;max-height:82vh}}
@keyframes sobe{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.sheet-topo{display:flex;align-items:flex-start;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--ws-line-soft)}
.sheet-topo h3{font-family:var(--ws-display);font-size:16px;font-weight:500;letter-spacing:-.02em;flex:1;min-width:0;line-height:1.3}
.sheet-x{width:34px;height:34px;border-radius:50%;border:1px solid var(--ws-line);background:#fff;color:var(--ws-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.sheet-x:hover{background:var(--ws-accent-50)}
.sheet-corpo{overflow-y:auto;padding:14px 16px 20px;-webkit-overflow-scrolling:touch}
.det+.det{margin-top:16px;padding-top:16px;border-top:1px solid var(--ws-line-soft)}
.det-l1{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.det-t{font-size:15px;font-weight:600;color:var(--ws-ink);line-height:1.35;margin-bottom:8px}
.det-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--ws-muted);margin-bottom:10px}
.det-meta span{display:inline-flex;align-items:center;gap:6px}
.rot-desc{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ws-muted);margin:12px 0 6px}
.desc{font-size:13.5px;line-height:1.65;color:var(--ws-ink-2);white-space:pre-wrap;word-break:break-word;background:var(--ws-surface-2);border:1px solid var(--ws-line-soft);border-radius:10px;padding:12px 13px}
.desc-vazio{font-size:12.5px;color:var(--ws-muted-2)}
.links-det{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lnk{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ws-ink);background:#fff;border:1px solid var(--ws-line);border-radius:8px;padding:8px 12px;text-decoration:none}
.lnk:hover{background:var(--ws-accent-50);border-color:var(--ws-accent-200)}

/* ---------------- toast ---------------- */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,14px);background:var(--ws-ink);color:#fff;border-radius:12px;padding:12px 18px;font-size:13px;font-weight:600;box-shadow:var(--ws-shadow-lg);z-index:80;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(min-width:640px){.toast{left:auto;right:20px;bottom:20px;transform:translate(0,14px)}.toast.on{transform:none}}

[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =========================================================
   login.html · entrada por codigo de 6 digitos
   A mesma escada de tokens do painel. Card unico, centrado,
   campo grande o bastante para o polegar.
   ========================================================= */
body.ent{display:flex;flex-direction:column;min-height:100svh;background:
  radial-gradient(1100px 520px at 50% -12%,var(--ws-accent-50),transparent 62%),var(--ws-canvas)}
.ent-wrap{flex:1;display:flex;align-items:center;justify-content:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));
  padding-top:calc(24px + env(safe-area-inset-top,0px))}
.ent-cx{width:100%;max-width:400px}
.ent-marca{text-align:center;margin-bottom:22px}
.ent-logo{display:block;height:30px;width:auto;margin:0 auto}
@media(min-width:420px){.ent-logo{height:34px}}
.ent-marca b{display:block;font-family:var(--ws-display);font-weight:700;font-size:17px;letter-spacing:.2em;color:var(--ws-ink)}
.ent-marca span{display:block;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ws-muted);margin-top:7px}
.ent-card{background:var(--ws-surface);border:1px solid var(--ws-line);border-radius:var(--ws-radius);padding:22px 20px}
@media(min-width:420px){.ent-card{padding:26px 24px}}
.ent-card h1{font-family:var(--ws-display);font-size:19px;font-weight:500;letter-spacing:-.03em;line-height:1.25}
.ent-sub{font-size:12.5px;color:var(--ws-muted);line-height:1.5;margin-top:6px}
.ent-sub b{color:var(--ws-ink-2);font-weight:600;overflow-wrap:anywhere}
.ent-form{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.ent-campo>span{display:block;font-size:11.5px;font-weight:600;color:#76686e;margin-bottom:6px}
.ent-in{width:100%;min-height:48px;border:1px solid var(--ws-line);border-radius:var(--ws-radius-xs);
  padding:12px 13px;background:#fff;color:var(--ws-ink);font-size:15px;line-height:1.3}
.ent-in::placeholder{color:#b5abb0}
.ent-in:focus{outline:0;border-color:var(--ws-accent);box-shadow:var(--ws-ring)}
.ent-in:disabled{background:var(--ws-surface-2);color:var(--ws-muted-2)}
.ent-cod{font-family:var(--ws-display);font-variant-numeric:tabular-nums;font-size:27px;font-weight:600;
  letter-spacing:.34em;text-indent:.34em;text-align:center;min-height:62px;padding:12px 8px}
.ent-btn{display:flex;align-items:center;justify-content:center;width:100%;border:0;border-radius:12px;
  min-height:52px;padding:14px 18px;font-size:15.5px;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  background:var(--ws-ink);color:#fff;transition:background .15s,transform .12s}
.ent-btn:active{transform:scale(.99)}
.ent-btn:disabled{background:#eae3e7;color:#9e969a;cursor:not-allowed;transform:none}
@media(hover:hover){.ent-btn:hover:not(:disabled){background:var(--ws-rose-700)}}
.ent-secs{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:2px}
.ent-sec{background:none;border:0;padding:6px 0;font-size:12px;font-weight:600;color:var(--ws-ink-3);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ent-sec:hover{color:var(--ws-rose-700)}
.ent-sec:disabled{color:var(--ws-muted-2);text-decoration:none;cursor:default}
.ent-msgs:empty{display:none}
.ent-msgs{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.alerta.ok{background:var(--ok-bg);border-color:var(--ok-line);color:#3f5d1c}
.alerta.ok b{color:var(--ok)}
.ent-rod{text-align:center;font-size:11px;color:var(--ws-muted-2);line-height:1.6;margin-top:18px}
.ent-rod b{display:block;color:var(--ws-muted);font-weight:600}