/* Painel da Loja — sistema visual
   Cores de dados e de status seguem paleta validada para daltonismo: não trocar à mão. */
:root{
  color-scheme: light;
  --page:#f3f3ef; --surface-1:#fcfcfb; --card:#ffffff; --card-2:#f6f6f3;
  --text-primary:#0b0b0b; --text-secondary:#52514e; --muted:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --ring:rgba(11,11,11,.08);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#6250d6; --s8:#e34948;
  --s1-soft:#9ec5f4; --on-s4:#0b0b0b;
  --accent-soft:#e8f1fc; --accent-ink:#1c5cab;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --up:#006300; --down:#d03b3b;
  --brand-1:#0d366b; --brand-2:#1c5cab; --brand-3:#2a78d6;
  --sombra:0 1px 2px rgba(16,24,40,.05),0 10px 28px -18px rgba(16,24,40,.28);
  --sombra-alta:0 18px 50px -18px rgba(13,54,107,.55);
  --font: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --raio:20px;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --page:#0d0d0d; --surface-1:#1a1a19; --card:#1a1a19; --card-2:#232322;
    --text-primary:#f0efec; --text-secondary:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --axis:#383835; --ring:rgba(255,255,255,.09);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
    --s1-soft:#184f95; --on-s4:#ffffff;
    --accent-soft:#16263a; --accent-ink:#86b6ef;
    --up:#0ca30c; --down:#e66767;
    --sombra:0 1px 0 rgba(255,255,255,.03);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#0d0d0d; --surface-1:#1a1a19; --card:#1a1a19; --card-2:#232322;
  --text-primary:#f0efec; --text-secondary:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --axis:#383835; --ring:rgba(255,255,255,.09);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  --s1-soft:#184f95; --on-s4:#ffffff;
  --accent-soft:#16263a; --accent-ink:#86b6ef;
  --up:#0ca30c; --down:#e66767;
  --sombra:0 1px 0 rgba(255,255,255,.03);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--text-primary);font-family:var(--font);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;color:inherit}
button:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--s1);outline-offset:2px}
.ic-svg{display:block;flex:none}
[data-ic]{display:inline-flex}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
svg text{font-family:var(--font)}

/* resposta ao toque */
.press{transition:transform .12s ease,background-color .15s ease,box-shadow .15s ease,border-color .15s ease}
.press:active{transform:scale(.97)}

/* ===== marca ===== */
.marca-tile{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.marca-tile.azul{background:linear-gradient(145deg,var(--brand-3),var(--brand-1));box-shadow:none}
.marca-tile.grande{width:64px;height:64px;border-radius:20px;background:linear-gradient(145deg,var(--brand-3),var(--brand-1))}

/* ===== abertura ===== */
.abertura{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.abertura-barra{width:96px;height:4px;border-radius:999px;background:var(--grid);overflow:hidden}
.abertura-barra i{display:block;width:40%;height:100%;border-radius:999px;background:var(--s1);animation:corre 1s ease-in-out infinite}
@keyframes corre{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

/* ===== tela de acesso ===== */
.acesso{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--card)}
.vitrine{position:relative;overflow:hidden;color:#fff;padding:calc(20px + env(safe-area-inset-top)) 22px 56px;
  background:
    radial-gradient(420px 260px at 88% -10%,rgba(134,182,239,.55),transparent 70%),
    radial-gradient(360px 300px at -10% 110%,rgba(57,135,229,.45),transparent 70%),
    linear-gradient(155deg,var(--brand-1),var(--brand-2) 70%,var(--brand-3))}
.vitrine::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:34px 34px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
.vitrine > *{position:relative}
.vitrine-marca{display:flex;align-items:center;gap:10px;font-size:15px}
.vitrine-marca b{font-weight:650}
.vitrine-texto h2{font-size:27px;line-height:1.14;letter-spacing:-.022em;margin:20px 0 6px;font-weight:700}
.vitrine-texto p{margin:0;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.84)}
.vitrine-lista{display:none;list-style:none;padding:0;margin:24px 0 0}
.vitrine-lista li{display:flex;align-items:center;gap:10px;font-size:14.5px;padding:7px 0;color:rgba(255,255,255,.92)}
.vitrine-lista [data-ic]{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.14);align-items:center;justify-content:center;flex:none}
.vitrine-nota{font-size:10.5px;color:rgba(255,255,255,.6);position:absolute;left:22px;bottom:32px}

.mostra{position:relative;margin-top:18px;height:118px}
.mostra-card{background:rgba(255,255,255,.97);color:#0b0b0b;border-radius:16px;box-shadow:var(--sombra-alta)}
.mostra-principal{position:absolute;left:0;top:0;width:60%;padding:12px 14px 10px}
.mostra-rot{display:flex;align-items:center;gap:6px;font-size:11px;color:#52514e}
.mostra-valor{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-top:2px}
.mostra-barras{display:flex;align-items:flex-end;gap:3px;height:36px;margin-top:6px}
.mostra-barras i{flex:1;background:#9ec5f4;border-radius:3px 3px 0 0}
.mostra-barras i.forte{background:#2a78d6}
.mostra-flutua{position:absolute;display:flex;align-items:center;gap:8px;padding:9px 11px;animation:flutua 5s ease-in-out infinite}
.mostra-flutua small{display:block;font-size:10.5px;color:#52514e}
.mostra-flutua b{font-size:13.5px;font-weight:700}
.mostra-flutua.um{right:0;top:6px}
.mostra-flutua.dois{right:10px;top:64px;animation-delay:-2.2s}
.mostra-ic{width:28px;height:28px;border-radius:9px;background:#e8f1fc;color:#1c5cab;align-items:center;justify-content:center}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.ponto-vivo{width:7px;height:7px;border-radius:50%;background:#0ca30c;display:inline-block;position:relative}
.ponto-vivo::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #0ca30c;opacity:0;animation:pulso 2s ease-out infinite}
@keyframes pulso{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.3);opacity:0}}

.acesso-corpo{flex:1;display:flex;justify-content:center;background:var(--card);border-radius:24px 24px 0 0;margin-top:-26px;position:relative;
  padding:26px 22px calc(26px + env(safe-area-inset-bottom))}
.so-form .acesso-corpo{margin-top:0;border-radius:0;align-items:center}
.acesso-form{width:100%;max-width:380px}
.acesso-form h1{font-size:24px;letter-spacing:-.02em;margin:0 0 4px;font-weight:700}
.so-form .acesso-form h1{margin-top:16px}
.acesso-sub{color:var(--text-secondary);font-size:14.5px;line-height:1.4;margin:0 0 8px}
.rot{display:block;font-size:13px;font-weight:550;color:var(--text-secondary);margin:14px 0 6px}
.in{width:100%;padding:13px 14px;border-radius:13px;border:1px solid var(--axis);background:var(--card);
  color:var(--text-primary);font-size:16px;font-family:var(--font);transition:border-color .15s ease,box-shadow .15s ease}
.in::placeholder{color:var(--muted)}
.in:focus{outline:none;border-color:var(--s1);box-shadow:0 0 0 3px color-mix(in srgb,var(--s1) 22%,transparent)}
.campo-ic{position:relative;display:block}
.campo-ic > [data-ic]{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.campo-ic .in{padding-left:42px}
.campo-ic:focus-within > [data-ic]{color:var(--s1)}
.campo-ic .in[type=password],.campo-ic:has(.ver-senha) .in{padding-right:46px}
.ver-senha{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:none;
  color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:10px}
.ver-senha:hover{color:var(--text-primary)}
.caps{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-secondary);margin-top:7px}
.erro{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.35;margin-top:14px;padding:10px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--critical) 11%,transparent);color:var(--text-primary)}
.erro .ic-svg{color:var(--critical);margin-top:1px}
.acesso-rodape{display:flex;gap:9px;align-items:flex-start;margin-top:18px;font-size:12.5px;line-height:1.4;color:var(--text-secondary)}
.acesso-rodape [data-ic]{color:var(--muted);margin-top:1px}
.regras{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px;font-size:13px;color:var(--muted)}
.regras li{display:flex;align-items:center;gap:8px}
.regras [data-ic]{width:18px;height:18px;border-radius:50%;background:var(--card-2);color:transparent;align-items:center;justify-content:center;transition:all .15s}
.regras li.ok{color:var(--text-primary)}
.regras li.ok [data-ic]{background:var(--good);color:#fff}

/* ===== botões ===== */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:11px 14px;border-radius:13px;
  border:1px solid var(--ring);background:var(--card-2);color:var(--text-primary);font-size:14px;font-weight:600;cursor:pointer;
  transition:transform .12s ease,background-color .15s ease,box-shadow .15s ease}
.btn:hover{background:color-mix(in srgb,var(--card-2) 88%,var(--text-primary))}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.65;cursor:default}
.btn.grande{padding:14px;font-size:15.5px;border-radius:14px;margin-top:18px}
.btn.grande + .btn.grande{margin-top:8px}
.btn.prim{background:linear-gradient(180deg,#3987e5,#2a78d6);color:#fff;border-color:transparent;
  box-shadow:0 8px 20px -10px rgba(42,120,214,.9),inset 0 1px 0 rgba(255,255,255,.2)}
.btn.prim:hover{background:linear-gradient(180deg,#2a78d6,#256abf)}
.btn.perigo{background:var(--critical);color:#fff;border-color:transparent}
.btn.perigo:hover{background:color-mix(in srgb,var(--critical) 88%,#000)}
.btn.perigo:disabled{opacity:.45}
.lista-perda{margin:8px 0 10px;padding-left:20px;font-size:14px;line-height:1.55;color:var(--text-primary)}
.btn.mini{display:inline-flex;width:auto;margin:0;padding:8px 11px;font-size:12.5px;border-radius:10px;gap:6px}
.btn.carregando .btn-txt{opacity:.75}
.giro{width:17px;height:17px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:gira .7s linear infinite;flex:none}
@keyframes gira{to{transform:rotate(360deg)}}

/* ===== estrutura do app ===== */
#t-app{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.principal{max-width:620px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 14px 8px}
.demo{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--accent-ink);background:var(--accent-soft);
  border-radius:10px;padding:6px 10px;margin-bottom:10px}
.topo{display:flex;align-items:center;justify-content:space-between;gap:8px}
.loja-botao{display:flex;align-items:center;gap:10px;min-width:0;background:none;border:0;padding:2px;text-align:left;border-radius:14px;cursor:default}
.loja-botao.multi{cursor:pointer}
.loja-avatar{width:42px;height:42px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(145deg,var(--brand-3),var(--brand-1));font-weight:700;font-size:17px}
.loja-txt{display:block;min-width:0}
.loja-nome{display:flex;align-items:center;gap:3px;font-size:17px;font-weight:680;letter-spacing:-.012em}
.loja-nome > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loja-sub{display:block;font-size:12.5px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.loja-seta{color:var(--muted)}
.topo-btns{display:flex;gap:6px;flex:none}
.iconbtn{border:0;background:var(--card);box-shadow:0 0 0 1px var(--ring);color:var(--text-primary);border-radius:12px;
  width:40px;height:40px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.iconbtn:hover{background:var(--card-2)}
.sync{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text-secondary);background:var(--card);box-shadow:0 0 0 1px var(--ring);
  border:0;border-radius:999px;padding:6px 11px;margin:12px 0 12px;cursor:pointer;max-width:100%;text-align:left;line-height:1.25}
.sync .ic-svg{color:var(--muted)}
.sync.girando .ic-svg{animation:gira .8s linear infinite}
.dot{width:8px;height:8px;border-radius:50%;background:var(--good);display:inline-block;flex:none;position:relative}
.dot.warning{background:var(--warning)} .dot.critical{background:var(--critical)}
.dot.vivo::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--good);opacity:0;animation:pulso 2.2s ease-out infinite}

/* grade: 12 colunas; no celular quase tudo ocupa a largura toda */
.grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.grade > *{grid-column:span 12;min-width:0}
.grade > .s3{grid-column:span 6}

.view{display:none}
.view.on{display:block;animation:entra .26s ease-out}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== cartões ===== */
.card{background:var(--card);border-radius:var(--raio);box-shadow:0 0 0 1px var(--ring),var(--sombra);padding:16px}
.card-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.card h2{font-size:15px;margin:0;font-weight:650;letter-spacing:-.006em}
.hint{font-size:12.5px;color:var(--muted);margin:2px 0 0;line-height:1.35}
.insight{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:12px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);
  padding:5px 9px;border-radius:999px;white-space:nowrap}
.vazio{text-align:center;color:var(--muted);padding:26px 10px;font-size:14px;line-height:1.4}
.vazio .vazio-ic{width:52px;height:52px;border-radius:16px;margin:0 auto 10px;background:var(--card-2);color:var(--muted);display:flex;align-items:center;justify-content:center}
.vazio b{display:block;color:var(--text-primary);font-weight:650;margin-bottom:2px}

/* cartão principal */
.hero-card{position:relative;overflow:hidden;color:#fff;border-radius:24px;padding:18px 18px 16px;box-shadow:var(--sombra-alta);
  background:
    radial-gradient(300px 190px at 100% 0,rgba(134,182,239,.5),transparent 72%),
    linear-gradient(150deg,var(--brand-1),var(--brand-2) 72%,var(--brand-3))}
.hero-label{display:flex;align-items:center;gap:7px;font-size:13.5px;color:rgba(255,255,255,.86)}
.hero{font-size:44px;font-weight:720;letter-spacing:-.03em;line-height:1.06;margin:6px 0 12px}
@media (min-width:390px){.hero{font-size:48px}}
.hero-mini{position:absolute;right:14px;top:10px;width:88px;height:32px;opacity:.95}
.chips-delta{display:flex;flex-wrap:wrap;gap:6px}
.chip-delta{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;padding:5px 10px 5px 7px;border-radius:999px;background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.chip-delta b{font-weight:680}
.hero-nota{font-size:11.5px;color:rgba(255,255,255,.72);margin-top:9px}

/* indicadores */
.tile{background:var(--card);border-radius:var(--raio);box-shadow:0 0 0 1px var(--ring),var(--sombra);padding:14px;display:flex;flex-direction:column;min-width:0}
.tile-ic{width:34px;height:34px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.tile .l{font-size:12.5px;color:var(--text-secondary)}
.tile .v{font-size:23px;font-weight:700;letter-spacing:-.022em;margin-top:2px;white-space:nowrap;line-height:1.2}
.tile .d{display:flex;align-items:center;gap:3px;font-size:12px;margin-top:4px;color:var(--muted);line-height:1.25}
.tile .d.up{color:var(--up);font-weight:600} .tile .d.down{color:var(--down);font-weight:600}
.tile .d.up span,.tile .d.down span{color:var(--muted);font-weight:400}

/* situação do caixa */
.clicavel{cursor:pointer;width:100%;border:0;text-align:left;font:inherit;display:block;background:var(--card)}
.clicavel:hover{background:color-mix(in srgb,var(--card) 96%,var(--text-primary))}
.pessoa{display:flex;align-items:center;gap:11px;min-width:0}
.pessoa + .pessoa{margin-top:12px;padding-top:12px;border-top:1px solid var(--grid)}
.pessoa-av{width:40px;height:40px;border-radius:50%;flex:none;background:var(--accent-soft);color:var(--accent-ink);font-weight:680;font-size:14px;
  display:flex;align-items:center;justify-content:center}
.pessoa-av.fechado{background:var(--card-2);color:var(--muted)}
.pessoa-txt{flex:1;min-width:0;font-size:13px;color:var(--text-secondary);line-height:1.35}
.pessoa-txt b{display:block;color:var(--text-primary);font-size:14.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pessoa-valor{text-align:right;font-weight:680;font-size:15px;flex:none;letter-spacing:-.01em}
.pessoa-valor small{display:block;font-weight:400;font-size:11.5px;color:var(--muted);letter-spacing:0}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:620;padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--text-primary);white-space:nowrap}
.badge.closed{background:var(--card-2);color:var(--text-secondary)}

/* formas de pagamento */
.seg{display:flex;gap:2px;height:28px;margin:0 0 6px}
.seg div{border-radius:4px;display:flex;align-items:center;padding-left:8px;font-size:12px;font-weight:650;color:#fff;
  white-space:nowrap;min-width:3px;cursor:default;transform-origin:left;animation:abre .5s cubic-bezier(.2,.8,.2,1) both}
.seg div.dark{color:var(--on-s4)}
@keyframes abre{from{transform:scaleX(.2);opacity:0}to{transform:none;opacity:1}}
.seg.fina{height:8px;margin:12px 0 0}
.seg.fina div{padding:0;border-radius:999px}
.forma-linha{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--grid);font-size:14px}
.forma-linha:first-of-type{border-top:0}
.forma-ic{width:32px;height:32px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
.forma-ic.dark{color:var(--on-s4)}
.forma-nome{flex:1;min-width:0;font-weight:550}
.forma-pct{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.forma-valor{font-weight:680;font-variant-numeric:tabular-nums;min-width:92px;text-align:right}
.forma-total{display:flex;justify-content:space-between;padding-top:11px;border-top:2px solid var(--axis);font-weight:720;font-size:15px;font-variant-numeric:tabular-nums}

/* gráficos */
.chart{width:100%;height:auto;display:block;touch-action:pan-y}
.cresce{transform-box:fill-box;transform-origin:bottom;animation:cresce .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes cresce{from{transform:scaleY(0)}to{transform:none}}
.traca{stroke-dasharray:1;stroke-dashoffset:0;animation:traca .9s ease-out both}
@keyframes traca{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.surge{animation:surge .5s .35s ease-out both}
@keyframes surge{from{opacity:0}to{opacity:1}}
details{margin-top:10px;font-size:13px;color:var(--text-secondary)}
details summary{cursor:pointer;font-weight:600;color:var(--accent-ink);padding:4px 0}
table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:4px}
td{padding:8px 0;border-top:1px solid var(--grid)}
td.n{text-align:right;font-variant-numeric:tabular-nums;padding-left:8px}

/* ranking */
.rank{padding:9px 0}
.rank:first-child{padding-top:0}.rank:last-child{padding-bottom:0}
.rank-topo{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;align-items:baseline}
.rank-nome{display:flex;align-items:baseline;gap:7px;min-width:0;font-weight:550;overflow-wrap:anywhere}
.rank-pos{font-style:normal;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.rank-valor{font-weight:680;flex:none}
.rank-trilho{height:8px;border-radius:999px;background:var(--card-2);margin-top:6px;overflow:hidden}
.rank-barra{height:100%;border-radius:0 4px 4px 0;background:var(--s1);transform-origin:left;animation:abre .6s cubic-bezier(.2,.8,.2,1) both}
.rank-sub{font-size:11.5px;color:var(--muted);margin-top:4px}

/* destaques */
.destaque{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--grid)}
.destaque:first-of-type{border-top:0;padding-top:2px}
.destaque-ic{width:36px;height:36px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex:none}
.destaque small{display:block;font-size:12px;color:var(--text-secondary)}
.destaque b{font-size:14.5px;font-weight:680}
.destaque em{font-style:normal;color:var(--text-secondary);font-size:13px;margin-left:4px}

/* filtros */
.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -14px 12px;padding:2px 14px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{border:0;box-shadow:0 0 0 1px var(--ring);background:var(--card);color:var(--text-primary);border-radius:14px;padding:8px 13px;
  font-size:13px;font-weight:550;cursor:pointer;white-space:nowrap;flex:none;font-family:var(--font);display:inline-flex;align-items:center;gap:6px}
.chip.on{background:var(--text-primary);color:var(--page);box-shadow:none}
.chip-data{flex-direction:column;gap:0;min-width:58px;padding:7px 10px;line-height:1.2}
.chip-data small{font-size:11px;font-weight:500;opacity:.72}
.chip-data b{font-size:14px;font-weight:680}
.chip-qt{font-size:11px;font-weight:680;opacity:.75;font-variant-numeric:tabular-nums}
.segmentado{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;background:color-mix(in srgb,var(--text-primary) 7%,transparent);padding:3px;border-radius:13px;margin-bottom:12px}
.segmentado button{border:0;background:none;padding:8px 6px;border-radius:10px;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer}
.segmentado button.on{background:var(--card);color:var(--text-primary);box-shadow:0 1px 3px rgba(0,0,0,.14)}

/* turnos */
.resumo-dia{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:12px;padding:12px 4px}
.resumo-dia > div{text-align:center;border-left:1px solid var(--grid);padding:0 6px;min-width:0}
.resumo-dia > div:first-child{border-left:0}
.resumo-dia small{display:block;font-size:11.5px;color:var(--text-secondary)}
.resumo-dia b{font-size:16px;font-weight:700;letter-spacing:-.015em;white-space:nowrap}
.turno-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.turno-head .pessoa{flex:1}
.formas{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.formas > div{background:var(--card-2);border-radius:12px;padding:9px 10px;min-width:0}
.formas .l{font-size:11.5px;color:var(--text-secondary);display:flex;align-items:center;gap:6px}
.formas .l i{width:8px;height:8px;border-radius:2px;display:inline-block;flex:none}
.formas .v{font-size:14.5px;font-weight:680;margin-top:2px;font-variant-numeric:tabular-nums}
.gaveta{margin-top:12px;background:var(--accent-soft);border-radius:14px;padding:12px 14px}
.gaveta-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gaveta-topo > span{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--accent-ink)}
.gaveta-topo b{font-size:21px;font-weight:720;letter-spacing:-.02em;white-space:nowrap}
.linhas{margin-top:8px}
.linha{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;border-top:1px solid var(--grid);font-variant-numeric:tabular-nums}
.linha .sinal{color:var(--muted);display:inline-block;width:20px}
.linha.total{font-weight:720;font-size:15px;border-top:2px solid var(--axis);padding-top:9px}
.ocorrencias{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.ocorrencias li{display:flex;gap:8px;font-size:12.5px;line-height:1.35;color:var(--text-secondary)}
.ocorrencias .ic-svg{color:var(--muted);margin-top:1px}
.ocorrencias li.forte{color:var(--text-primary)}
.ocorrencias li.forte .ic-svg{color:var(--serious)}
.only-print{display:none}
.tag{display:inline-block;font-size:11px;font-weight:620;padding:2px 8px;border-radius:999px;vertical-align:1px;background:var(--card-2);color:var(--text-secondary);white-space:nowrap}
.tag.azul{background:var(--accent-soft);color:var(--accent-ink)}
.tag.ruim{background:color-mix(in srgb,var(--critical) 15%,transparent);color:var(--text-primary)}

/* alertas */
.alerta{display:flex;gap:12px;padding:13px 0;border-top:1px solid var(--grid)}
.alerta:first-of-type{border-top:0;padding-top:2px}
.alerta:last-child{padding-bottom:0}
.ic{flex:none;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--muted)}
.ic.good{background:var(--good)} .ic.warning{background:var(--warning);color:#0b0b0b}
.ic.serious{background:var(--serious);color:#0b0b0b} .ic.critical{background:var(--critical)}
.alerta-rot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;font-size:11.5px;color:var(--muted);margin-bottom:2px}
.alerta-rot b{font-weight:680;color:var(--text-secondary)}
.alerta .t{font-size:14px;font-weight:620;line-height:1.3;overflow-wrap:anywhere}
.alerta .s2{font-size:13px;color:var(--text-secondary);margin-top:3px;line-height:1.35}

/* menu de telas: barra inferior no celular */
nav{position:fixed;left:0;right:0;bottom:0;z-index:5;background:color-mix(in srgb,var(--card) 90%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 -1px 0 var(--ring);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
nav .nav-marca{display:none}
nav .nav-itens{max-width:620px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
nav button{position:relative;background:none;border:0;color:var(--muted);font-size:11px;font-weight:550;padding:6px 0 4px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:12px}
nav button .i{width:52px;height:30px;border-radius:999px;align-items:center;justify-content:center;transition:background-color .18s ease}
nav button.on{color:var(--text-primary);font-weight:680}
nav button.on .i{background:var(--accent-soft);color:var(--accent-ink)}
nav .count{position:absolute;top:2px;left:calc(50% + 8px);background:var(--critical);color:#fff;border-radius:999px;font-size:10px;font-weight:700;
  min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 0 0 2px var(--card);font-variant-numeric:tabular-nums}

/* administração */
.adm-resumo{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:12px;padding:12px 4px}
.adm-resumo > div{text-align:center;border-left:1px solid var(--grid)}
.adm-resumo > div:first-child{border-left:0}
.adm-resumo b{display:block;font-size:22px;font-weight:720;letter-spacing:-.02em}
.adm-resumo small{font-size:11.5px;color:var(--text-secondary)}
.adm-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.adm-cab .voltar{background:none;border:0;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:620;cursor:pointer;padding:6px 2px;color:var(--text-primary)}
.cli{padding:0;overflow:hidden;margin-bottom:12px}
.cli > summary{list-style:none;display:flex;align-items:center;gap:11px;padding:14px 16px;cursor:pointer;color:var(--text-primary);margin:0}
.cli > summary::-webkit-details-marker{display:none}
.cli-seta{color:var(--muted);margin-left:auto;transition:transform .18s ease;flex:none}
.cli[open] .cli-seta{transform:rotate(180deg)}
.cli-ic{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex:none}
.cli-nome{font-size:15.5px;font-weight:680;min-width:0;overflow-wrap:anywhere}
.cli-nome small{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.cli-corpo{padding:0 16px 14px;border-top:1px solid var(--grid)}
.sec-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 2px}
.sec-topo h3{font-size:12px;margin:0;color:var(--text-secondary);font-weight:650;text-transform:uppercase;letter-spacing:.04em}
.adm-linha{padding:11px 0;border-top:1px solid var(--grid);font-size:14px}
.sec-topo + .adm-linha{border-top:0}
.adm-info{display:flex;gap:11px;align-items:flex-start;min-width:0}
.adm-ic{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--card-2);color:var(--text-secondary);font-size:12.5px;font-weight:680}
.adm-txt{min-width:0;flex:1;overflow-wrap:anywhere}
.adm-txt > b{font-weight:650}
.hint0{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.3}
.hint0 .dot{width:7px;height:7px}
.adm-btns{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0 45px}
.adm-btns .btn.mini{background:var(--card-2)}
.adm-botoes-sec{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.btn.mini.perigo-leve{color:var(--critical)}
.chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.chk.bloco{display:flex;padding:11px 0;border-top:1px solid var(--grid);font-size:14.5px}
.chk input{width:19px;height:19px;accent-color:var(--s1)}
.form-sheet select.in{appearance:auto}

/* janelas e avisos */
.modal-fundo{position:fixed;inset:0;background:rgba(8,14,26,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;z-index:20;animation:surge .18s ease-out both;padding-top:40px}
.modal{background:var(--card);border-radius:24px 24px 0 0;width:100%;max-width:520px;max-height:88vh;overflow:auto;
  padding:10px 18px calc(20px + env(safe-area-inset-bottom));animation:sobe .24s cubic-bezier(.2,.8,.2,1) both}
.modal::before{content:"";display:block;width:38px;height:4px;border-radius:999px;background:var(--axis);margin:0 auto 14px}
.modal h2{font-size:18px;font-weight:700;letter-spacing:-.015em;margin:0 0 4px}
@keyframes sobe{from{transform:translateY(40px);opacity:.3}to{transform:none;opacity:1}}
.menu-usuario{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--grid)}
.menu-item{display:flex;align-items:center;gap:13px;width:100%;background:none;border:0;padding:12px 2px;font-size:15px;font-weight:550;cursor:pointer;text-align:left;border-radius:12px;color:var(--text-primary)}
.menu-item:hover{background:var(--card-2)}
.menu-item > .mi{width:36px;height:36px;border-radius:11px;background:var(--card-2);display:flex;align-items:center;justify-content:center;flex:none}
.menu-item.sel > .mi{background:var(--accent-soft);color:var(--accent-ink)}
.menu-item small{display:block;font-size:12.5px;font-weight:400;color:var(--text-secondary);margin-top:1px}
.menu-item .fim{margin-left:auto;color:var(--muted);text-align:right;flex:none;font-size:13.5px;font-weight:650}
.menu-item.sel .fim{color:var(--accent-ink)}
.segredo-box{font-family:Consolas,"Cascadia Mono",ui-monospace,monospace;font-size:16.5px;background:var(--card-2);border-radius:12px;
  padding:12px;word-break:break-all;user-select:all;-webkit-user-select:all;margin-bottom:8px}
.aviso-seg{display:flex;gap:9px;font-size:13px;line-height:1.4;color:var(--text-primary);background:color-mix(in srgb,var(--warning) 18%,transparent);
  border-radius:12px;padding:11px;margin:12px 0 0}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom));z-index:30;display:flex;gap:8px;align-items:center;
  background:var(--text-primary);color:var(--page);padding:11px 15px;border-radius:14px;font-size:14px;font-weight:550;width:max-content;max-width:92vw;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.5);animation:toast .22s ease-out both}
.toast.erro{background:var(--critical);color:#fff}
@keyframes toast{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
#tip{position:fixed;pointer-events:none;background:var(--text-primary);color:var(--page);font-size:12px;
  padding:6px 9px;border-radius:9px;opacity:0;transition:opacity .1s;white-space:nowrap;z-index:9;left:0;top:0}
#tip b{font-weight:650}
code{font-family:Consolas,ui-monospace,monospace;background:var(--card-2);padding:1px 4px;border-radius:4px}

/* carregamento */
.esq{background:linear-gradient(90deg,var(--card-2),color-mix(in srgb,var(--card-2) 70%,var(--card)),var(--card-2));background-size:200% 100%;animation:brilho 1.4s linear infinite;border-radius:var(--raio);box-shadow:none}
@keyframes brilho{to{background-position:-200% 0}}

/* ===== telas maiores ===== */
@media (min-width:600px){
  .formas{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
}
@media (min-width:900px){
  /* login dividido em duas partes */
  .acesso:not(.so-form){flex-direction:row}
  .vitrine{flex:1.15;padding:34px 48px;display:flex;flex-direction:column;justify-content:center}
  .vitrine-marca{position:absolute;top:32px;left:48px}
  .vitrine-texto{max-width:470px}
  .vitrine-texto h2{font-size:42px;margin:0 0 12px}
  .vitrine-texto p{font-size:17px}
  .vitrine-lista{display:block}
  .vitrine-nota{left:48px;bottom:26px}
  .mostra{height:176px;margin-top:30px;max-width:470px;width:100%}
  .mostra-principal{width:62%;padding:15px 18px 14px}
  .mostra-valor{font-size:28px}
  .mostra-barras{height:62px;gap:4px;margin-top:10px}
  .mostra-flutua{padding:12px 14px}
  .mostra-flutua b{font-size:15px}
  .mostra-flutua.um{top:18px}
  .mostra-flutua.dois{top:96px;right:24px}
  .acesso-corpo{flex:1;margin:0;border-radius:0;align-items:center;padding:40px}
  .acesso-form h1{font-size:30px}

  /* app com menu lateral */
  #t-app{padding:0 0 32px 244px}
  nav{top:0;right:auto;width:244px;bottom:0;padding:22px 14px;background:var(--card);box-shadow:1px 0 0 var(--ring);-webkit-backdrop-filter:none;backdrop-filter:none}
  nav .nav-marca{display:flex;align-items:center;gap:10px;padding:0 8px 22px;font-size:15px}
  nav .nav-itens{display:flex;flex-direction:column;gap:3px;max-width:none}
  nav button{flex-direction:row;font-size:14px;gap:11px;padding:8px;justify-content:flex-start}
  nav button:hover{background:var(--card-2)}
  nav button .i{width:34px;height:34px;border-radius:10px}
  nav .count{position:static;margin-left:auto;box-shadow:none}
  .principal{max-width:1160px;padding:24px 32px}
  .loja-nome{font-size:21px}
  .grade{gap:16px}

  .chips{margin-left:0;margin-right:0;padding-left:2px;padding-right:2px}
  .segmentado{max-width:340px}



  .modal-fundo{align-items:center;padding:24px}
  .modal{border-radius:24px;padding:22px}
  .modal::before{display:none}
  .toast{bottom:28px}
  .cli{margin-bottom:16px}
}

@media (min-width:1100px){
  .grade > .s3{grid-column:span 3}
  .grade > .s4{grid-column:span 4}
  .grade > .s6{grid-column:span 6}
  .grade > .s8{grid-column:span 8}
  .hero{font-size:52px}
  .hero-card{padding:24px}
  .hero-mini{width:150px;height:54px;right:24px;top:22px}
}

/* cartão de turno */
.turno-total{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:12px}
.turno-total b{font-size:24px;font-weight:720;letter-spacing:-.02em}
.turno-total span{font-size:13px;color:var(--text-secondary)}
.turno-head .pessoa + .pessoa{margin:0;padding:0;border:0}
.adm-resumo{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
.menu-usuario .pessoa-txt b{font-size:15px}
.adm-cab .btn.prim:hover{background:linear-gradient(180deg,#2a78d6,#256abf)}
.adm-cab .btn.mini{background:linear-gradient(180deg,#3987e5,#2a78d6)}
.chk.bloco:first-of-type{border-top:0}
.hero-label .ponto-vivo{background:#fff}
.hero-label .ponto-vivo::after{border-color:#fff}
.btn.grande[data-fechar]{background:transparent}
.btn.mini.destaque-btn{background:var(--accent-soft);color:var(--accent-ink)}
.segredo-box{max-height:150px;overflow:auto;font-size:13px}
.btn.prim.grande[data-fechar]{background:linear-gradient(180deg,#3987e5,#2a78d6)}
@media (max-width:899px){#btnAdmin{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.sem-anima *,.sem-anima{animation:none!important}

/* ===== impressão da folha de fechamento ===== */
@media print{
  body{background:#fff;color:#000}
  nav,.topo,.sync,.demo,#tip,.chips,.resumo-dia,#modal,#toast,.btn,.seg{display:none!important}
  #t-app{padding:0}
  .principal{max-width:none;padding:0}
  .view{display:none!important}
  .grade{display:block}
  body[data-print] .view#v-turnos{display:block!important}
  body[data-print] #v-turnos .card{display:none}
  body[data-print] #v-turnos .card.printing{display:block;box-shadow:none;border:1px solid #999;border-radius:6px}
  .gaveta,.formas > div{background:none;border:1px solid #bbb}
  .only-print{display:block}
  .cab-print{font-size:13px;margin-bottom:8px}
  .campo{display:flex;justify-content:space-between;font-size:14px;padding:12px 0 4px;border-bottom:1px solid #000;margin-top:6px}
}