/* Telas do app VIP — mesmas cores/fontes da landing Max Diversoes */
:root{
  --ink:#0A0A0F;
  --ink-2:#141419;
  --paper:#F8F8F5;
  --paper-2:#EEEDE7;
  --electric:#1E5EFF;
  --electric-dark:#0044CC;
  --alert:#E63946;
  --ok:#1F9D55;
  --mute:#6B6B6B;
  --mute-light:rgba(248,248,245,.7);
  --line:rgba(10,10,15,.1);
  --line-dark:rgba(248,248,245,.18);
  --display:"Sora",ui-sans-serif,system-ui,sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--ink);
  color:var(--paper);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{
  max-width:480px;margin:0 auto;padding:2.2rem 1.4rem 4rem;
}
.wrap.wide{max-width:820px}

/* topo com logo/nome */
.appbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:2.2rem;
}
.brand{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:1.15rem;text-decoration:none;
}
.brand span{color:var(--electric)}
.appbar .link{
  font-family:var(--display);font-weight:600;font-size:.85rem;
  color:var(--mute-light);text-decoration:none;
}
.appbar .link:hover{color:var(--paper)}

h1{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
   font-size:clamp(1.8rem,6vw,2.4rem);line-height:1.05;margin-bottom:.5rem}
h1 em{color:var(--electric);font-style:normal}
.sub{color:var(--mute-light);font-size:1rem;margin-bottom:2rem}

.eyebrow{
  font-family:var(--display);font-weight:600;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--electric);
  margin-bottom:.9rem;
}

/* cartao */
.card{
  background:var(--paper);color:var(--ink);
  border-radius:20px;padding:1.8rem;
}
.card + .card{margin-top:1.1rem}

/* formularios */
.field{margin-bottom:1.1rem}
label{
  display:block;font-family:var(--display);font-weight:600;
  font-size:.82rem;margin-bottom:.4rem;color:var(--ink);
}
input{
  width:100%;font-family:var(--body);font-size:1rem;
  padding:.85rem 1rem;border-radius:12px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
}
input:focus{outline:none;border-color:var(--electric)}

/* botoes */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;font-family:var(--display);font-weight:700;font-size:.98rem;
  padding:.95rem 1.2rem;border-radius:12px;border:none;cursor:pointer;
  text-decoration:none;transition:transform .05s,opacity .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--electric);color:#fff}
.btn-primary:hover{background:var(--electric-dark)}
/* botao escuro que fica sobre o fundo preto da pagina: precisa de contraste */
.btn-dark{background:var(--ink-2);color:var(--paper);border:1.5px solid var(--line-dark)}
.btn-dark:hover{background:#1d1d24}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
/* contorno claro pra usar sobre fundo escuro */
.btn-outline{background:transparent;color:var(--paper);border:1.5px solid var(--line-dark)}
.btn-outline:hover{background:rgba(248,248,245,.08)}
.btn-danger{background:transparent;color:var(--alert);border:1.5px solid rgba(230,57,70,.4)}
/* "Ja pagou": verde (mesma cor do selo de pago) — visivel sobre o card escuro */
.btn-paid{background:var(--ok);color:#fff;border:none}
.btn-paid:hover{background:#18894A}
.btn-sm{width:auto;padding:.55rem .9rem;font-size:.82rem;border-radius:10px}

.foot-link{margin-top:1.5rem;text-align:center;font-size:.9rem;color:var(--mute-light)}
.foot-link a{color:var(--paper);font-weight:600;text-decoration:underline}

/* mensagens */
.msg{margin-top:1rem;font-size:.9rem;font-weight:600;display:none}
.msg.show{display:block}
.msg.err{color:#ff8f97}
.msg.ok{color:#7fe0a6}

/* carteirinha */
.hello{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em}
.hello-sub{color:var(--mute-light);font-size:.92rem;margin-top:.15rem}

.ben{position:relative}
.ben-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.ben-name{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.01em}
.ben-cpf{color:var(--mute);font-size:.82rem;margin-top:.15rem;font-variant-numeric:tabular-nums}
.badge{
  font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.4rem .7rem;border-radius:999px;white-space:nowrap;
}
.badge.on{background:rgba(31,157,85,.14);color:var(--ok)}
.badge.off{background:rgba(107,107,107,.16);color:var(--mute)}

.qrbox{
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  margin:1.4rem 0 .4rem;
}
.qrbox canvas,.qrbox img{width:190px;height:190px;border-radius:14px;background:#fff}
.qr-hint{font-size:.78rem;color:var(--mute)}
.qr-code{font-family:var(--display);font-size:.72rem;color:var(--mute);
  letter-spacing:.05em;word-break:break-all;text-align:center}

.usage{
  margin-top:1rem;padding:.75rem 1rem;border-radius:12px;font-size:.88rem;
  font-family:var(--display);font-weight:600;
}
.usage.free{background:rgba(31,157,85,.1);color:var(--ok)}
.usage.used{background:rgba(230,57,70,.09);color:var(--alert)}
.usage.pending{background:rgba(30,94,255,.09);color:var(--electric)}

/* aviso no topo do painel (modo teste / pagamento nao configurado) */
.notice{
  padding:.7rem 1rem;border-radius:12px;font-size:.85rem;font-weight:600;
  font-family:var(--display);margin-bottom:1.1rem;
}
.notice.test{background:rgba(30,94,255,.1);color:var(--electric)}
.notice.warn{background:rgba(230,57,70,.1);color:var(--alert)}

/* formulario de confirmacao de CPF antes de pagar */
.sub-form{margin-top:1rem}
.fineprint{font-size:.8rem;color:var(--mute);margin:.2rem 0 .6rem}

.ben-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}

/* ===== PLANO DA FAMILIA (painel do cliente) =====
   Uma cobranca so cobrindo varias criancas. Ver "UMA ASSINATURA PRA FAMILIA
   INTEIRA" no CLAUDE.md — nasceu do cartao recusado a partir da 2a filha. */
.pick-vip{display:flex;align-items:center;gap:.55rem;margin-top:1.2rem;cursor:pointer;
  padding:.7rem .85rem;border-radius:12px;border:1.5px solid var(--line-dark);
  background:rgba(255,255,255,.04);font-size:.9rem}
.pick-vip input{width:20px;height:20px;accent-color:var(--electric);flex:0 0 auto;cursor:pointer}
.pick-vip:hover{border-color:var(--electric)}
/* a barra fica GRUDADA no topo: com 3 filhas a lista passa da tela, e o botao
   de pagar nao pode depender de ele rolar ate achar */
#planoBar{position:sticky;top:.4rem;z-index:5;margin-bottom:1rem}
.plano-card{background:var(--ink-2);border:1.5px solid var(--electric);border-radius:16px;
  padding:.9rem 1rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  box-shadow:0 6px 24px rgba(0,0,0,.35)}
.plano-txt{flex:1 1 auto;min-width:0;font-size:.92rem;color:var(--paper)}
.plano-total{display:block;font-family:var(--display);font-weight:800;font-size:1.25rem;
  color:var(--electric);margin-top:.15rem}
.plano-card .sub-form{flex:1 1 100%;margin-top:.2rem}

.divider{height:1px;background:var(--line);margin:1.3rem 0}

.empty{color:var(--mute-light);text-align:center;padding:1.5rem 0}

/* admin / resultado do scan */
.scan-shell{max-width:520px}
#reader{border-radius:16px;overflow:hidden;background:#000;margin-bottom:1rem}
#reader video{width:100%;display:block}
.result{
  border-radius:20px;padding:2.2rem 1.6rem;text-align:center;margin-top:1.2rem;
  display:none;
}
.result.show{display:block}
.result.liberado{background:var(--ok);color:#fff}
.result.negado{background:var(--alert);color:#fff}
.result.confirm{background:var(--electric);color:#fff}
.result .big{font-family:var(--display);font-weight:800;font-size:2.4rem;letter-spacing:-.02em}
.result .who{font-family:var(--display);font-weight:700;font-size:1.15rem;margin-top:.6rem}
.result .why{font-size:1rem;margin-top:.4rem;opacity:.92}
.mono-input{font-variant-numeric:tabular-nums}

/* logo grande no topo do painel admin */
.appbar-admin{margin-bottom:1.3rem}
.admin-logo{height:3rem;width:auto;display:block}

/* sub-abas do admin: seletor segmentado, os 4 cabem sem rolagem */
.tabs{
  display:flex;gap:6px;margin:1.2rem 0 .5rem;
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:14px;padding:5px;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:.6rem .1rem;border-radius:10px;cursor:pointer;background:transparent;border:none;
  color:var(--mute-light);font-family:var(--display);font-weight:700;font-size:.64rem;
}
.tab svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.tab.active{background:var(--electric);color:#fff}
.swipe-hint{
  text-align:center;color:var(--mute-light);opacity:.5;font-size:.72rem;
  font-family:var(--display);font-weight:600;margin:0 0 1.4rem;letter-spacing:.02em;
}
@media (min-width:700px){ .swipe-hint{display:none} }  /* no desktop nao tem swipe */

/* 6 sub-abas: no celular ficam menores; rola de lado so se realmente nao couber */
.tabs-6{gap:3px;padding:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs-6::-webkit-scrollbar{display:none}
.tabs-6 .tab{flex:1 0 auto;min-width:52px;padding:.5rem .15rem;font-size:.58rem;gap:2px}
.tabs-6 .tab svg{width:17px;height:17px}
@media (min-width:520px){ .tabs-6 .tab{font-size:.64rem;min-width:0} .tabs-6 .tab svg{width:19px;height:19px} }

/* No celular o admin ganha tela: o titulo grande sai (a logo ja diz onde voce esta) */
@media (max-width:699px){
  .wrap-admin{padding:1.1rem 1.1rem .6rem}
  .appbar-admin{margin-bottom:.5rem}
  .admin-logo{height:2rem}
  /* o titulo grande e a dica de deslizar saem: a logo e as abas ja dizem tudo,
     e o formulario do Painel precisa caber inteiro sem rolar */
  #scanView > .eyebrow, #scanView > h1, .swipe-hint{display:none}
  .tabs{margin:.2rem 0 .5rem}
  /* cidade: pilulas menores pra sobrar tela pro formulario */
  .city-switch{margin-bottom:.5rem;gap:.45rem}
  .city-switch-label{font-size:.62rem;letter-spacing:.1em}
  .seg-city .seg-btn{font-size:.78rem;padding:.4rem .8rem}
  /* TAGS: agora sao 7 cores + "Sem tag" = 8 pilulas. Numa linha so elas ficavam
     esmagadas e o texto cortava ("Roxo" virava "Rox"), entao aqui e uma GRADE de
     4 colunas: 2 fileiras iguais, largura previsivel, nada cortado. */
  #attTag{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}
  #attTag .tag-btn{min-width:0;justify-content:center;padding:.3rem .2rem;font-size:.66rem}
  #attTag .tag-btn .tag-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* cartoes de cliente na aba Senhas */
.acc-card{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:16px;
  padding:1.1rem 1.2rem;margin-top:.9rem}
.acc-name{font-family:var(--display);font-weight:800;font-size:1.05rem}
.acc-info{color:var(--mute-light);font-size:.82rem;margin:.15rem 0 .8rem;
  font-variant-numeric:tabular-nums}
.reset-form .new-pw{width:100%}
.reset-msg{margin-top:.7rem;font-size:.9rem;font-weight:600}
.reset-msg.err{color:#ff8f97}
.reset-msg.ok{color:#7fe0a6}

/* ============ CRONOMETRO + CAIXA ============ */
:root{ --orange:#FF7A1A; }

/* seletor em "pilulas" (brinquedo / modo / filtro do caixa) */
.seg{display:flex;gap:.5rem;flex-wrap:wrap}
.seg-btn{
  flex:1 1 auto;min-width:fit-content;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:.9rem;
  padding:.7rem 1rem;border-radius:12px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);transition:.12s;
}
.seg-btn.active{background:var(--electric);color:#fff;border-color:var(--electric)}
.seg-btn.seg-disabled{opacity:.4;cursor:not-allowed}
/* 4 BRINQUEDOS: 2x2 no celular, 4 em fileira no tablet/PC.
   Em fileira no celular cada botao ficaria com ~85px e "Hoverboard" nao cabe
   sem cortar; em 2x2 o alvo do dedo fica grande e os nomes cabem inteiros. */
/* ⚠️ A LISTA DE BRINQUEDOS NAO TEM MAIS TAMANHO FIXO — o dono cria e apaga na
   aba Mais. Eram 4 fixos (2x2 no celular, 4 em fileira no PC); agora pode ter
   3 ou 9, entao a grade se vira sozinha. No celular ficam sempre 2 por linha
   (em fileira, "Hoverboard" nao cabe sem cortar) e no PC entra quanto couber. */
.seg-toy{display:grid;grid-template-columns:1fr 1fr}
.seg-toy .seg-btn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:700px){ .seg-toy{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))} }
.seg-filter .seg-btn{background:var(--ink-2);color:var(--mute-light);border-color:var(--line-dark)}
.seg-filter .seg-btn.active{background:var(--electric);color:#fff;border-color:var(--electric)}
/* Voltas: seletor discreto (bem menor/mais apagado que os botoes de brinquedo) */
.seg-mini{gap:.35rem}
.seg-mini .seg-btn{
  flex:0 0 auto;font-size:.74rem;font-weight:700;
  padding:.3rem .62rem;border-radius:8px;border-color:var(--line);
  background:#fff;color:var(--mute);
}
.seg-mini .seg-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.seg-mini .seg-btn.seg-disabled{opacity:.4;cursor:not-allowed}

/* Seletor de cidade no topo do admin (manda no Cronometro) */
.city-switch{display:flex;align-items:center;gap:.6rem;margin:0 0 1.2rem;flex-wrap:wrap}
.city-switch-label{font-family:var(--display);font-weight:700;font-size:.72rem;
  color:var(--mute-light);text-transform:uppercase;letter-spacing:.12em}
.seg-city{flex:0 1 auto}
.seg-city .seg-btn{flex:0 0 auto;background:var(--ink-2);color:var(--mute-light);
  border-color:var(--line-dark);font-size:.9rem;padding:.55rem 1.15rem}
.seg-city .seg-btn.active{background:var(--orange);color:#fff;border-color:var(--orange)}

/* cartao de atendimento ativo */
.att-card{
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:18px;
  padding:1.2rem 1.3rem;margin-top:.9rem;
  display:flex;flex-direction:column;   /* p/ igualar altura no grid (botões no fim) */
}
.att-card.paused{opacity:.8;border-style:dashed}
.att-card.pending{border-color:var(--orange)}
.att-card.vip{border:2px solid var(--orange);box-shadow:0 0 0 3px rgba(255,122,26,.12)}
/* Fases de fim de tempo (tempo fechado / VIP): cor no cronometro + destaque no cartao.
   Amarelo = ultimo minuto do incluso (aviso). Vermelho = estourou (ja conta extra). */
.att-card.att-yellow .att-timer{color:#F5B301}
.att-card.att-red    .att-timer{color:var(--alert)}
.att-card.att-yellow{border-color:#F5B301;box-shadow:0 0 0 3px rgba(245,179,1,.16)}
.att-card.att-red{border-color:var(--alert);box-shadow:0 0 0 3px rgba(230,57,70,.20)}
/* Piscada LENTA e suave (fade de opacidade), so enquanto rodando. Pausado fica fixo. */
@keyframes phaseBlink { 0%,100%{opacity:1} 50%{opacity:.35} }
.att-card.att-blink .att-timer{animation:phaseBlink 1.8s ease-in-out infinite}

/* botao liga/desliga (VIP) estilo laranja */
.vip-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.toggle{
  flex:0 0 auto;width:54px;height:30px;border-radius:999px;border:none;cursor:pointer;
  background:#cfcdc6;position:relative;transition:background .15s;padding:0;
}
.toggle::after{
  content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.toggle.on{background:var(--orange)}
.toggle.on::after{transform:translateX(24px)}
.toggle:disabled{opacity:.4;cursor:not-allowed}

/* etiqueta VIP */
.vip-tag{
  display:inline-block;background:var(--orange);color:#fff;font-family:var(--display);
  font-weight:800;font-size:.62rem;letter-spacing:.06em;padding:.18rem .45rem;
  border-radius:999px;vertical-align:middle;margin-left:.35rem;
}
/* Cartao em blocos empilhados, SEM nada posicionado por cima de nada:
   [nome + toggle] / [brinquedo · modo · minutos] / [selos] / [tempo -- valor] / [botoes] */
.att-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.att-name{font-family:var(--display);font-weight:800;font-size:1.15rem;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* linha do brinquedo: nome encolhe com "...", os MINUTOS nunca somem nem quebram */
.att-toy{color:var(--mute-light);font-size:.8rem;font-weight:600;margin-top:.1rem;
  display:flex;align-items:baseline;gap:.4rem;min-width:0}
.att-toyname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* os minutos inclusos (ou o excedente) moram AQUI em cima, ao lado do brinquedo */
.att-min{flex:0 0 auto;white-space:nowrap;color:var(--paper);font-weight:800}
.att-min.over{color:var(--alert)}
.att-card.att-yellow .att-min.over{color:#F5B301}
/* tempo e valor na MESMA linha (economiza altura em qualquer layout) */
.att-mid{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-top:.35rem}
.att-timer{
  font-family:var(--display);font-weight:800;letter-spacing:.01em;
  font-size:2.2rem;line-height:1.1;font-variant-numeric:tabular-nums;
}
.att-amount{
  color:var(--orange);font-family:var(--display);font-weight:800;
  font-size:1.4rem;font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* faixa dos selos (pre-pago / pausa automatica): sempre em linha propria */
.att-flags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem}
/* o cartao inteiro e clicavel (abre os detalhes) — sem botao "exibir mais" */
.att-card{cursor:pointer;-webkit-tap-highlight-color:transparent}
.att-card:active{transform:scale(.995)}
.att-card .btn,.att-card .toggle{cursor:pointer}
/* "Cliente ja pagou": selo verde no cartao + destaque leve na borda */
.att-card.prepaid{border-color:#1F9D55;box-shadow:0 0 0 2px rgba(31,157,85,.14)}
.att-paid{
  display:inline-block;max-width:100%;background:rgba(31,157,85,.14);color:#1F9D55;
  font-family:var(--display);font-weight:700;font-size:.78rem;line-height:1.3;
  padding:.3rem .6rem;border-radius:14px;
  word-break:break-word;
}
/* PAGOU SO UMA PARTE do combinado: acontece quando o dono edita o cronometro
   depois do "ja pagou" (1 volta paga R$20, virou 2 voltas = R$40). Verde ali
   mentiria — o selo e a borda viram vermelhos e o selo diz o que falta. */
.att-card.prepaid.prepaid-parcial{border-color:var(--alert);box-shadow:0 0 0 2px rgba(230,57,70,.16)}
.att-paid.parcial{background:rgba(230,57,70,.16);color:#FF8A93}
/* campo "Cliente deu quanto?" (dinheiro) */
.cash-box{margin-top:.2rem}
.cash-input{
  width:100%;box-sizing:border-box;padding:.85rem 1rem;font-size:1.15rem;
  font-family:var(--display);font-weight:700;border:1.5px solid var(--line);
  border-radius:12px;background:#fff;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cash-input:focus{outline:none;border-color:var(--electric)}
/* "a pagar em dinheiro: R$ 40,00" — o troco sai DESSA parte, nao do total */
.cash-due{display:inline-block;font-family:var(--display);font-weight:700;font-size:.72rem;
  text-transform:none;letter-spacing:0;color:var(--electric)}
.cash-due:empty{display:none}
/* aviso rapido (toast) */
.toast{
  position:fixed;left:50%;bottom:5.5rem;transform:translate(-50%,12px);
  background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:12px;
  font-weight:600;font-size:.9rem;box-shadow:0 6px 24px rgba(0,0,0,.28);
  opacity:0;transition:opacity .25s,transform .25s;z-index:60;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.att-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;align-items:stretch}
.att-actions .btn{flex:1 1 auto;min-width:84px}
/* Cancelar = botão pequeno (só o ✕) no canto, pra não clicar sem querer */
.att-actions .att-cancel-x{flex:0 0 auto;min-width:0;width:46px;padding:.55rem 0;font-size:1.05rem;line-height:1}
/* "Já pagou?" com toggle, na linha do NOME (nao gasta uma linha so pra ele) */
.att-paidwrap{display:inline-flex;align-items:center;gap:.45rem;flex:0 0 auto}
.att-paidq{font-family:var(--display);font-weight:700;font-size:.78rem;color:var(--mute-light)}
.att-paidtoggle{width:42px;height:24px}
.att-paidtoggle::after{width:18px;height:18px;top:3px;left:3px}
.att-paidtoggle.on{background:var(--ok)}
.att-paidtoggle.on::after{transform:translateX(18px)}
/* PAGOU SO UMA PARTE: o toggle fica DESLIGADO (nao esta quitado) mas VERMELHO —
   nao e o cinza de "nunca pagou nada". Toca-lo cobra so a diferenca. */
.att-paidtoggle.parcial{background:var(--alert)}
/* troco negativo (recebeu menos que o devido) */
.cash-neg{color:var(--alert)}
/* aviso "já está pago" no modal de finalizar (verde, sem seleção de forma) */
.paid-flag{
  background:rgba(31,157,85,.12);color:#157A43;
  font-family:var(--display);font-weight:700;font-size:1rem;
  padding:.9rem 1rem;border-radius:12px;text-align:center;line-height:1.35;
}

/* caixa */
.caixa-total{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:16px;
  padding:1.1rem 1.3rem;margin-bottom:1.1rem;
}
.caixa-total span{font-family:var(--display);font-weight:600;color:var(--mute-light);font-size:.9rem}
.caixa-total strong{font-family:var(--display);font-weight:800;font-size:1.8rem;color:var(--orange);
  font-variant-numeric:tabular-nums}
.caixa-item{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:.9rem 0;border-bottom:1px solid var(--line-dark);
}
.caixa-item.vip{background:rgba(255,122,26,.07);border-radius:12px;padding:.9rem .8rem;margin:.2rem 0}
.caixa-main{min-width:0}
.caixa-name{font-family:var(--display);font-weight:700;font-size:1rem}
.caixa-info{color:var(--mute-light);font-size:.8rem;margin-top:.1rem}
.caixa-extrato{color:var(--mute-light);font-size:.76rem;margin-top:.3rem;line-height:1.35;opacity:.85}
.caixa-val{font-family:var(--display);font-weight:800;font-size:1.15rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* modal de pagamento */
/* z-index acima da barra de navegacao (9000), senao ela cobre os botoes do modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9500;
  display:flex;align-items:center;justify-content:center;padding:1.2rem;
}
.modal{
  background:var(--paper);color:var(--ink);border-radius:22px;
  padding:1.8rem;width:100%;max-width:420px;
}
.modal-title{font-family:var(--display);font-weight:800;font-size:1.3rem;margin-bottom:1.1rem}
/* cabecalho do modal de detalhes: nome + lapis de editar */
.more-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.more-head .modal-title{flex:1 1 auto;min-width:0;margin-bottom:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{flex:0 0 auto;width:38px;height:38px;border-radius:11px;cursor:pointer;
  border:1.5px solid var(--line);background:transparent;color:var(--ink);
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.icon-btn:hover{border-color:var(--electric);color:var(--electric)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
/* modal de editar: os rotulos ficam colados no controle de baixo */
.modal-chg .pay-label{margin:.9rem 0 .35rem}
/* nome e VIP no topo do modal de editar */
.modal-chg #chgName{width:100%;padding:.6rem .75rem;border-radius:11px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:1rem}
.modal-chg .chg-vip{margin-top:.7rem}
.modal-chg .pay-label:first-of-type{margin-top:.2rem}
.pay-summary{background:var(--paper-2);border-radius:14px;padding:1.1rem 1.2rem;margin-bottom:1.2rem}
.pay-row{display:flex;justify-content:space-between;font-size:.95rem;margin-bottom:.4rem}
.pay-row span{color:var(--mute)}
.pay-total{font-family:var(--display);font-weight:800;font-size:2rem;color:var(--electric);
  margin-top:.6rem;text-align:center;font-variant-numeric:tabular-nums}
.pay-label{font-family:var(--display);font-weight:600;font-size:.85rem;margin-bottom:.7rem}
.pay-methods{display:flex;gap:.6rem;flex-wrap:wrap}
.pay-methods .btn{flex:1 1 30%}

/* ============ RESPONSIVO (desktop / telas grandes) ============ */
/* Base mobile-first acima; aqui a gente aproveita telas maiores. */
@media (min-width: 700px){
  /* coluna um pouco mais folgada nos formularios (login/cadastro) */
  .wrap{max-width:520px;padding:3rem 1.6rem 4rem}
  /* painel do cliente e painel admin usam mais largura no desktop */
  .wrap-panel{max-width:880px}
  .wrap-admin{max-width:780px}
  /* o leitor de QR e o resultado nao precisam esticar */
  #reader,.result{max-width:520px;margin-left:auto;margin-right:auto}
  /* botoes de pagamento maiores e lado a lado */
  .pay-methods .btn{font-size:1.05rem;padding:1rem}
}

@media (min-width: 1000px){
  /* beneficiarios do painel em 2 colunas */
  #list{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem;align-items:start}
  #list .card + .card{margin-top:0}
}
.or{ text-align:center;color:var(--mute-light);font-size:.8rem;margin:1.1rem 0;
  font-family:var(--display);font-weight:600;letter-spacing:.1em}

/* ============ CAIXA & GESTÃO ============ */
/* Cartões de resumo (KPIs) */
/* Saldo do filtro (estilo app de banco): um valor grande que responde a tudo */
.bank-balance{
  background:linear-gradient(135deg,rgba(255,122,26,.16),rgba(20,20,25,.35));
  border:1px solid rgba(255,122,26,.4);border-radius:20px;
  padding:1.3rem 1.4rem;margin-bottom:1.5rem;
}
.bank-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.bank-label{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute-light)}
.bank-value{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1.05;
  letter-spacing:-.02em;color:var(--paper);margin:.5rem 0 .2rem;font-variant-numeric:tabular-nums}
.bank-dates{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--paper);margin-bottom:.15rem}
.bank-desc{color:var(--orange);font-weight:700;font-size:.9rem}
.bank-meta{color:var(--mute-light);font-size:.8rem;margin-top:.2rem;font-variant-numeric:tabular-nums}
/* botão olho (ocultar/mostrar valores) — ícone SVG de linha, estilo navbar */
.eye-btn{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;flex:0 0 auto;
  background:var(--ink-2);border:1.5px solid var(--line-dark);border-radius:999px;
  padding:.42rem .8rem;color:var(--paper);font-family:var(--display);font-weight:700;font-size:.8rem}
.eye-btn:hover{border-color:var(--orange)}
.eye-btn .eye-ic{display:inline-flex}
.eye-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;display:block}

/* Filtros em pílulas */
.filters{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.3rem}
.filter-row{display:flex;flex-direction:column;gap:.5rem}
.filter-label{font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute-light)}
.pill-row{gap:.45rem}
.pill-row .seg-btn{flex:0 1 auto;border-radius:999px;padding:.5rem .95rem;font-size:.82rem}
.seg-filter.pill-row .seg-btn.active{background:var(--orange);color:#fff;border-color:var(--orange)}
/* filtro de GRUPO: a pílula da cor leva a bolinha da tag (a cor É a etiqueta) */
.pill-row .seg-btn .tag-dot{display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--tag,#bbb);border:1px solid rgba(0,0,0,.3);margin-right:.35rem;vertical-align:-1px}
/* Seletor de datas nativo (abre o date picker do celular), campos grandes p/ dedão */
.date-picker{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem}
.date-field{display:flex;flex-direction:column;gap:.28rem;flex:1 1 42%;min-width:130px}
.date-lbl{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-light)}
.date-field input[type=date]{
  width:100%;padding:.8rem .85rem;font-size:1rem;border-radius:12px;min-height:48px;
  background:var(--ink-2);color:var(--paper);border:1.5px solid var(--line-dark);color-scheme:dark;
}
.date-field input[type=date]:focus{outline:none;border-color:var(--orange)}

/* Barra de recibos: no celular título em cima e botões embaixo (sem sobrepor);
   no desktop fica lado a lado. Mobile-first. */
.periodo-bar{
  display:flex;flex-direction:column;align-items:stretch;gap:.8rem;
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:14px;
  padding:.85rem 1.1rem;margin-bottom:1.4rem;
}
.periodo-info{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.periodo-name{font-family:var(--display);font-weight:800;font-size:1rem}
.periodo-vals{color:var(--mute-light);font-size:.8rem;font-variant-numeric:tabular-nums}
.periodo-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.periodo-actions .btn{flex:1 1 auto;white-space:nowrap}   /* PDF/Compartilhar dividem a linha no celular */
#btnCsv{flex:0 0 auto}   /* CSV é secundário: fica compacto, não estica */
@media(min-width:700px){
  .periodo-bar{flex-direction:row;justify-content:space-between;align-items:center;gap:1rem}
  .periodo-actions{flex:0 0 auto;justify-content:flex-end}
  .periodo-actions .btn{flex:0 0 auto}
}
/* Ocultar valores: borra os gráficos por CSS (sem tocar no código deles) */
.charts-grid.blurred{filter:blur(11px);pointer-events:none;user-select:none}

/* Gráficos */
/* ⚠️ minmax(0,1fr) e min-width:0 sao OBRIGATORIOS aqui. Com o 1fr normal a
   coluna nao encolhe abaixo do conteudo, e o canvas do Chart.js (que tem
   largura propria em pixel) faz a grade inteira ficar mais larga que a tela —
   no iPad isso obrigava a rolar pra direita pra ver os graficos. */
.charts-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-bottom:1.6rem}
.chart-card{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:16px;
  padding:1.1rem 1.2rem;min-width:0;overflow:hidden}
.chart-box canvas{max-width:100%!important}
.chart-title{font-family:var(--display);font-weight:700;font-size:.92rem;margin-bottom:.8rem;color:var(--paper)}
.chart-box{position:relative;height:220px}

/* Agenda (lista por horário) */
/* ⚠️ flex-wrap aqui e obrigatorio: com 3 filhos (titulo + Selecionar + Limpar
   caixa) em 375px o titulo era esmagado a 117px e quebrava em duas linhas. */
.agenda-head{display:flex;justify-content:space-between;align-items:center;
  gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.agenda-head .chart-title{margin-bottom:0;flex:1 1 auto;min-width:0}
.agenda-head .btn{flex:0 0 auto}
/* ⚠️ BOTAO DISCRETO PRA FUNDO ESCURO. O .btn-ghost e feito pros modais CLAROS
   (texto var(--ink), quase preto) — usado aqui no Caixa ele fica preto no preto
   e o botao vira um buraco invisivel. Foi bug real, pego em teste. */
.btn-dim{background:transparent;border:1.5px solid var(--line-dark);color:var(--mute-light);
  font-family:var(--display);font-weight:700}
.btn-dim:hover{border-color:var(--orange);color:var(--paper)}
.btn-dim.btn-primary{background:var(--electric);border-color:var(--electric);color:#fff}
.agenda-item{display:flex;align-items:center;gap:.9rem;padding:.75rem .2rem;border-bottom:1px solid var(--line-dark)}
.agenda-item:last-child{border-bottom:none}
.agenda-item.vip{background:rgba(255,122,26,.08);border-radius:12px;padding:.75rem .7rem;
  border-bottom:1px solid transparent;margin:.15rem 0}
.agenda-time{font-family:var(--display);font-weight:800;font-size:.92rem;color:var(--mute-light);
  font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:3rem}
.agenda-item.vip .agenda-time{color:var(--orange)}
.agenda-body{flex:1 1 auto;min-width:0}
.agenda-name{font-family:var(--display);font-weight:700;font-size:.98rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agenda-sub{color:var(--mute-light);font-size:.78rem;margin-top:.1rem}
.agenda-extra{color:var(--alert);font-size:.74rem;font-weight:600;margin-top:.15rem}
.agenda-val{font-family:var(--display);font-weight:800;font-size:1.05rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.agenda-item.vip .agenda-val{color:var(--orange)}
.agenda-note{color:var(--mute-light);font-size:.8rem;margin-top:.9rem;opacity:.85;line-height:1.4}

/* ===== FAMILIA JUNTA NA AGENDA (mesma ideia do bloco de tag do Cronometro) =====
   Quem e do mesmo grupo fica ENCOSTADO, dentro de uma caixa com a faixa lateral
   na cor da tag — bate com o que ele ve na aba Home, entao a cor quer dizer a
   mesma coisa nos dois lugares. */
.agn-fam{border:1.5px solid var(--tag,#888);border-left-width:5px;border-radius:14px;
  overflow:hidden;margin:.5rem 0;background:rgba(255,255,255,.02)}
.agn-fam-head{display:flex;align-items:center;gap:.45rem;padding:.5rem .75rem;
  background:rgba(255,255,255,.05);border-bottom:1px solid var(--line-dark)}
.agn-fam-head .tag-dot{width:11px;height:11px;border-radius:50%;background:var(--tag,#888);
  flex:0 0 auto;border:1px solid rgba(10,10,15,.22)}
.agn-fam-name{font-family:var(--display);font-weight:800;font-size:.86rem;color:var(--paper)}
.agn-fam-count{font-family:var(--display);font-weight:600;font-size:.72rem;color:var(--mute-light)}
.agn-fam-total{margin-left:auto;font-family:var(--display);font-weight:800;font-size:.95rem;
  font-variant-numeric:tabular-nums;color:var(--paper);white-space:nowrap}
.agn-fam-body{padding:0 .75rem}
/* dentro da familia as linhas ficam colodas (sem o respiro de linha solta) */
.agn-fam-body .agenda-item{padding:.55rem 0}
.agn-fam-body .agenda-item:last-child{border-bottom:none}
/* bolinha da cor na linha SOLTA de quem tinha tag mas ficou sozinho: sem isso
   "Em grupo" mostraria uma linha sem nenhuma marca de familia */
.agenda-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--tag,#888);
  margin-right:.35rem;vertical-align:1px;border:1px solid rgba(10,10,15,.25)}

/* ===== MODO SELECAO (recibo de uma familia so) ===== */
.sel-bar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:12px;
  padding:.6rem .85rem;margin-bottom:.6rem}
.sel-info{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.sel-count{font-family:var(--display);font-weight:800;font-size:.92rem;color:var(--paper);
  font-variant-numeric:tabular-nums}
.sel-hint{color:var(--mute-light);font-size:.72rem}
.sel-acts{display:flex;gap:.4rem;flex:0 0 auto}
/* a linha/cabecalho inteiro e o alvo do toque — checkbox de 20px no celular e
   pequeno demais pra dedo com o cliente esperando */
.agenda-item.selectable,.agn-fam.selectable .agn-fam-head{cursor:pointer;-webkit-tap-highlight-color:transparent}
.agenda-item.selectable:active,.agn-fam.selectable .agn-fam-head:active{opacity:.75}
.sel-box{flex:0 0 auto;width:20px;height:20px;border-radius:6px;
  border:1.5px solid var(--line-dark);background:var(--ink);
  display:inline-flex;align-items:center;justify-content:center}
.sel-box.on{background:var(--electric);border-color:var(--electric)}
.sel-box svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.agenda-item.picked{background:rgba(30,94,255,.12);border-radius:10px}
.agn-fam.picked .agn-fam-head{background:rgba(30,94,255,.18)}

@media (min-width:700px){
  .charts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chart-card-wide{grid-column:1/-1}
  .chart-box{height:240px}
}

/* ============ QR de recebimento (Pix) no rodapé do Cronômetro ============ */
.pix-box{margin-top:2rem}
.pix-card{
  background:var(--paper);color:var(--ink);border-radius:20px;padding:1.6rem 1.4rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.pix-qr{
  width:min(260px,72vw);height:auto;display:block;background:#fff;
  border-radius:12px;image-rendering:crisp-edges;  /* QR nítido pra escanear */
}
.pix-label{
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin-top:1.2rem;
}
.pix-key{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  background:transparent;border:none;margin-top:.25rem;padding:.2rem .3rem;
  font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:.01em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.pix-key svg{width:16px;height:16px;fill:none;stroke:var(--electric);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.pix-key:active{transform:translateY(1px)}
.pix-hint{color:var(--mute);font-size:.76rem;margin-top:.15rem}
.pix-copied{color:var(--ok);font-family:var(--display);font-weight:800;font-size:.82rem;
  margin-top:.4rem;height:1rem;opacity:0;transition:opacity .15s}
.pix-copied.show{opacity:1}
@media (min-width:700px){
  .pix-box{max-width:420px;margin-left:auto;margin-right:auto}
}

/* ============ ABA PAINEL: formulario compacto (cabe em 375x667) ============ */
.form-compact{padding:.7rem .8rem}
.fc-field{margin-bottom:.45rem}
.fc-field > label{font-size:.72rem;margin-bottom:.22rem;display:flex;align-items:center;gap:.3rem}
.form-compact input{padding:.5rem .7rem;font-size:.92rem;border-radius:10px}
.fc-row2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.45rem;align-items:start}
.fc-col > label{font-size:.72rem;margin-bottom:.22rem;display:flex;align-items:center;gap:.3rem}
.fc-toggle{display:flex;align-items:center;justify-content:space-between;gap:.4rem;
  background:var(--paper-2);border-radius:10px;padding:.35rem .5rem;min-height:38px}
.fc-lbl{font-family:var(--display);font-weight:700;font-size:.74rem;color:var(--ink);
  display:inline-flex;align-items:center;gap:.25rem;line-height:1.1}
.toggle-sm{width:40px;height:23px}
.toggle-sm::after{width:17px;height:17px;top:3px;left:3px}
.toggle-sm.on::after{transform:translateX(17px)}
.form-compact .btn-primary{padding:.65rem 1rem;font-size:.92rem}
.form-compact .msg{margin-top:.5rem}
/* seletores menores no formulario compacto */
.seg-sm{gap:.3rem}
.seg-sm .seg-btn{padding:.42rem .3rem;font-size:.75rem;border-radius:9px;min-height:34px}
/* Voltas / atalhos de tempo: 5 pilulas numa linha so */
.form-compact .seg-mini{gap:.28rem;flex-wrap:nowrap}
.form-compact .seg-mini .seg-btn{flex:1 1 0;min-width:0;padding:.32rem .1rem;font-size:.72rem;min-height:30px}
/* "?" com o texto de ajuda (economiza as linhas de fineprint) */
.hint-q{flex:0 0 auto;width:16px;height:16px;border-radius:50%;cursor:pointer;padding:0;
  border:1.2px solid var(--mute);background:transparent;color:var(--mute);
  font-family:var(--display);font-weight:800;font-size:.66rem;line-height:1}
.hint-q:hover{border-color:var(--electric);color:var(--electric)}
/* "Definir tempo" no tempo livre: numero + a unidade (minutos ou reais) */
.limit-row{display:flex;gap:.45rem;align-items:center}
.limit-row .seg-mini{flex:1 1 auto}
.limit-row input{flex:1 1 auto;min-width:0;text-align:center;padding:.42rem .3rem;
  font-family:var(--display);font-weight:700}
/* min | R$ — o dono diz o tempo do jeito que a conversa acontece na praca:
   "5 minutos" ou "me da 10 reais" */
.seg-unit{flex:0 0 auto!important;gap:.25rem}
.seg-unit .seg-btn{min-width:44px;padding:.42rem .5rem}
.limit-valor:empty{display:none}

/* ============ TAGS DE FAMILIA (7 cores fixas) ============
   Sete porque o dono atende varias familias ao mesmo tempo na praca. As cores
   fogem de proposito do azul do app (#1E5EFF), do verde de "pago" (#1F9D55), do
   laranja do VIP, do vermelho (#E63946) e do amarelo das fases (#F5B301) — e
   sao claras o bastante pra aparecer no cartao escuro.
   O "verde" e o "azul" daqui sao versoes CLARAS, justamente pra ninguem
   confundir a etiqueta da familia com "ja pagou" ou com o botao azul. */
:root{
  --tag-roxo:#8B5CF6; --tag-ciano:#00D5D0; --tag-branco:#F1F1EC;
  --tag-rosa:#FF5FA2; --tag-verde:#7ED957; --tag-azul:#7CC7FF; --tag-marrom:#B0703C;
}
.tag-roxo{--tag:var(--tag-roxo)}
.tag-ciano{--tag:var(--tag-ciano)}
.tag-branco{--tag:var(--tag-branco)}
.tag-rosa{--tag:var(--tag-rosa)}
.tag-verde{--tag:var(--tag-verde)}
.tag-azul{--tag:var(--tag-azul)}
.tag-marrom{--tag:var(--tag-marrom)}
.tag-pick{display:flex;flex-wrap:wrap;gap:.35rem}
.tag-btn{display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:.72rem;
  padding:.36rem .55rem;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);min-height:30px}
.tag-btn .tag-dot{width:11px;height:11px;border-radius:50%;background:var(--tag,#bbb);
  border:1px solid rgba(10,10,15,.22);flex:0 0 auto}
.tag-btn.active{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.tag-btn.tag-branco.active{border-color:var(--ink)}
/* dentro dos modais escuros o botao segue claro (o modal e claro) */

/* ============ ABA CRONOMETRO: cabecalho + 2 layouts ============ */
.cron-head{display:flex;align-items:center;gap:.45rem;margin-bottom:.8rem}
/* cidade na esquerda; os botoes (layout + tela cheia) juntos na direita */
.cron-head .city-title{margin-right:auto}
.cron-city{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--paper)}
.layout-btn{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;flex:0 0 auto;
  background:var(--ink-2);border:1.5px solid var(--line-dark);border-radius:999px;
  padding:.34rem .7rem;color:var(--mute-light);font-family:var(--display);font-weight:700;font-size:.72rem;
  touch-action:manipulation}
.layout-btn:hover{border-color:var(--orange);color:var(--paper)}
.layout-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}

/* ===== A LISTA INTEIRA E UMA GRADE SO =====
   Bloco de tag e cartao solto disputam AS MESMAS VAGAS. Antes o grupo era um
   bloco de largura total: uma tag com 1 crianca pegava a linha inteira e
   desperdicava o espaco de 3 cronometros. Agora o grupo ocupa no maximo
   2 vagas de largura (igual ao celular) e empilha pra baixo. */
/* "dense": se sobrar meia vaga do lado de uma tag pequena, um cronometro solto
   sobe e preenche — em vez de deixar buraco. */
/* ⚠️ E .att-list (CLASSE), nao #attActive: a MESMA grade serve duas telas — a do
   dono/funcionario (#attActive) e a do VISITANTE (#verList, sem senha). O pedido
   foi "a mesma tela, so que nao da pra editar"; duplicar estas regras pro
   visitante era garantir que uma das duas ia envelhecer sozinha. */
.att-list{display:grid;grid-template-columns:1fr;gap:.9rem;align-items:start;
  grid-auto-flow:row dense}
/* grade de dentro do bloco de tag (cards mesclados) */
.att-grid{display:grid;grid-template-columns:1fr;gap:.9rem;align-items:stretch}
/* min-width:0 e obrigatorio: sem isso o conteudo do cartao "empurra" a coluna
   do grid e a lista vaza pro lado da tela. */
.att-list .att-card{margin-top:0;min-width:0}
.att-list .att-actions{margin-top:auto}
/* ENCAIXE FINO (masonry): as linhas da grade sao de 4px e o JS calcula quantas
   cada item ocupa. Sem isso, um bloco de tag alto obrigava a linha inteira a
   ficar da altura dele e sobrava um buraco enorme do lado dos cartoes baixos.
   A classe .att-pack e ligada PELO JS — sem ele as linhas de 4px quebrariam a
   lista, entao o CSS sozinho nunca aplica. */
/* O row-gap TEM que ser 0 aqui: as linhas sao de 2px e o respiro entre cartoes
   ja entra na conta do JS. Sem o !important, o `gap` das faixas de densidade
   (mais especifico) voltava a valer e cada uma das ~80 linhinhas de um cartao
   ganhava 5px — os cartoes ficavam a 600px um do outro. Bug real. */
.att-list.att-pack{grid-auto-rows:2px;row-gap:0!important}
.att-list.att-pack > *{align-self:start}
/* padrao (celular / 1 coluna): o grupo ocupa a linha inteira */
.att-list > .att-group{grid-column:1/-1}
/* tag com 1 crianca = 1 vaga, e sobra espaco do lado pra outro cronometro */
.att-list.lay-compacto > .att-group.sz-1{grid-column:auto}

/* --- layout COMPACTO (padrao): tudo visivel, so menor --- */
.att-list.lay-compacto{grid-template-columns:repeat(2,1fr);gap:.5rem}
.lay-compacto .att-card{padding:.5rem .55rem;border-radius:14px}
.lay-compacto .att-paidq{display:none}          /* so o toggle, o rotulo nao cabe */
.lay-compacto .att-name{font-size:.85rem}
.lay-compacto .att-toy{font-size:.66rem;margin-top:.05rem}
.lay-compacto .att-mid{margin-top:.2rem}
.lay-compacto .att-timer{font-size:1.4rem}
.lay-compacto .att-amount{font-size:.92rem}
.lay-compacto .att-flags{margin-top:.2rem;gap:.2rem}
.lay-compacto .att-paid{font-size:.6rem;padding:.12rem .35rem}
.lay-compacto .att-paidtoggle{width:34px;height:19px}
.lay-compacto .att-paidtoggle::after{width:14px;height:14px;top:2.5px;left:2.5px}
.lay-compacto .att-paidtoggle.on::after{transform:translateX(15px)}
/* os botoes numa linha so (alvo de toque ~30px) */
.lay-compacto .att-actions{gap:.25rem;margin-top:.4rem;flex-wrap:nowrap}
.lay-compacto .att-actions .btn{min-width:0;flex:1 1 0;padding:.3rem .1rem;
  font-size:.68rem;border-radius:8px;min-height:30px;white-space:nowrap}
.lay-compacto .att-actions .att-cancel-x{flex:0 0 24px;width:24px;min-height:30px;padding:0;font-size:.8rem}
/* faixas de densidade: mais cronometro = cartao menor */
.lay-compacto.dens-2 .att-timer{font-size:1.25rem}
.lay-compacto.dens-2 .att-amount{font-size:.86rem}
.lay-compacto.dens-2 .att-card{padding:.45rem .5rem}
/* 9+ cronometros: o maximo de aperto (meta: 10 visiveis sem rolar em 375x667) */
.att-list.lay-compacto.dens-3{gap:.35rem}
.lay-compacto.dens-3 .att-card{padding:.38rem .45rem;border-radius:12px}
.lay-compacto.dens-3 .att-name{font-size:.78rem;line-height:1.2}
.lay-compacto.dens-3 .att-toy{font-size:.62rem}
.lay-compacto.dens-3 .att-timer{font-size:1.1rem}
.lay-compacto.dens-3 .att-amount{font-size:.8rem}
.lay-compacto.dens-3 .att-actions{margin-top:.28rem;gap:.2rem}
.lay-compacto.dens-3 .att-actions .btn{font-size:.62rem;min-height:28px}
.lay-compacto.dens-3 .att-actions .att-cancel-x{flex:0 0 22px;width:22px;min-height:28px}

/* ============ "TEM ALGUEM OLHANDO" (olho) ============ */
/* Acende no cartao quando alguem esta com o link daquele cronometro aberto, e
   no cabecalho da tag quando alguem esta no link do grupo. Pisca devagar pra
   dizer "isso esta acontecendo agora" sem virar alarme. Icone SVG de linha —
   sem emoji, como o resto do app. NAO pode crescer a altura do cartao (a regra
   dos cartoes iguais): 16px cabe dentro da linha do nome. */
.att-eye{
  display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;
  color:var(--electric);line-height:1;
  animation:eyePulse 2.4s ease-in-out infinite;
}
.att-eye svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.att-eye b{font-family:var(--display);font-weight:800;font-size:.68rem}
/* CINZA e apagado: ja abriram o link, mas ninguem esta olhando agora. Nao
   pisca — piscar e sinal de "esta acontecendo", e aqui nao esta. */
.att-eye-off{color:var(--mute);opacity:.75;animation:none}
@keyframes eyePulse{0%,100%{opacity:1}50%{opacity:.38}}
@media (prefers-reduced-motion:reduce){ .att-eye{animation:none} }
.att-group-head .att-eye svg{width:15px;height:15px}
@media (min-width:1100px){ .att-eye svg{width:19px;height:19px} .att-eye b{font-size:.8rem} }

/* selo discreto da pausa automatica */
.att-autopause{display:inline-block;background:rgba(245,179,1,.16);color:#F5B301;
  font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.02em;
  padding:.16rem .48rem;border-radius:999px}
.lay-compacto .att-autopause{font-size:.6rem;padding:.12rem .38rem}

/* ============ TABLET E PC: 4 CRONOMETROS POR LINHA ============ */
/* Pedido do dono: no tablet e no PC cabem 4 vagas na mesma linha, pra empilhar
   bastante cronometro sem rolar. As fontes acompanham a largura da vaga: em
   700px a vaga e estreita (densidade de celular) e vai crescendo ate o PC
   grande, onde o cronometro volta a ser enorme pra ler de longe. */
@media (min-width:700px){
  .att-list.lay-compacto{grid-template-columns:repeat(4,1fr);gap:.7rem}
  .att-list.lay-confortavel{grid-template-columns:repeat(2,1fr);gap:1.1rem}
  .lay-confortavel .att-grid-joined{grid-template-columns:repeat(2,1fr)}
  /* o bloco de tag NUNCA passa de 2 vagas: 2 em cima, o resto embaixo */
  .att-list.lay-compacto > .att-group{grid-column:span 2}
  .att-list.lay-compacto > .att-group.sz-1{grid-column:span 1}
  /* Em 700-899px a vaga fica ESTREITA (mais estreita que a do celular, porque
     sao 4 e nao 2): as fontes tem que ficar no tamanho do celular, senao o
     valor cai pra baixo do cronometro e o cartao cresce de altura. */
  .lay-compacto .att-card,
  .lay-compacto.dens-2 .att-card,
  .lay-compacto.dens-3 .att-card{padding:.5rem .55rem;border-radius:13px}
  .lay-compacto .att-name,
  .lay-compacto.dens-3 .att-name{font-size:.86rem}
  .lay-compacto .att-toy,
  .lay-compacto.dens-3 .att-toy{font-size:.64rem}
  .lay-compacto .att-timer,
  .lay-compacto.dens-2 .att-timer,
  .lay-compacto.dens-3 .att-timer{font-size:1.42rem}
  .lay-compacto .att-amount,
  .lay-compacto.dens-2 .att-amount,
  .lay-compacto.dens-3 .att-amount{font-size:.92rem}
  .lay-compacto .att-paidtoggle{width:38px;height:21px}
  .lay-compacto .att-paidtoggle::after{width:16px;height:16px;top:2.5px;left:2.5px}
  .lay-compacto .att-paidtoggle.on::after{transform:translateX(17px)}
  .lay-compacto .att-actions,
  .lay-compacto.dens-3 .att-actions{gap:.3rem;margin-top:.45rem}
  .lay-compacto .att-actions .btn,
  .lay-compacto.dens-3 .att-actions .btn{font-size:.74rem;min-height:34px;padding:.35rem .3rem;border-radius:9px}
  .lay-compacto .att-actions .att-cancel-x,
  .lay-compacto.dens-3 .att-actions .att-cancel-x{flex:0 0 28px;width:28px;min-height:34px;font-size:.9rem}
  .lay-compacto .att-paid,.lay-compacto .att-autopause{font-size:.64rem;padding:.14rem .4rem}
  .lay-confortavel .att-timer{font-size:3.2rem}
  .lay-confortavel .att-amount{font-size:1.9rem}
  .lay-confortavel .att-name{font-size:1.4rem}
  .cron-city{font-size:1.6rem}
  .city-title{font-size:1.6rem}
  .layout-btn{font-size:.9rem;padding:.55rem 1.1rem}
  .layout-btn svg{width:18px;height:18px}
}
/* Tablet deitado / notebook pequeno: a vaga ja aguenta numero maior */
@media (min-width:900px){
  .lay-compacto .att-card,
  .lay-compacto.dens-2 .att-card,
  .lay-compacto.dens-3 .att-card{padding:.62rem .72rem;border-radius:14px}
  .lay-compacto .att-name,
  .lay-compacto.dens-3 .att-name{font-size:.95rem}
  .lay-compacto .att-toy,
  .lay-compacto.dens-3 .att-toy{font-size:.7rem}
  .lay-compacto .att-timer,
  .lay-compacto.dens-2 .att-timer,
  .lay-compacto.dens-3 .att-timer{font-size:1.75rem}
  .lay-compacto .att-amount,
  .lay-compacto.dens-2 .att-amount,
  .lay-compacto.dens-3 .att-amount{font-size:1.05rem}
  .lay-compacto .att-actions .btn,
  .lay-compacto.dens-3 .att-actions .btn{font-size:.78rem;min-height:36px}
  .lay-compacto .att-actions .att-cancel-x,
  .lay-compacto.dens-3 .att-actions .att-cancel-x{flex:0 0 30px;width:30px;min-height:36px}
}
/* PC: continuam 4 vagas, mas cada uma fica mais larga — os numeros crescem */
@media (min-width:1100px){
  .lay-compacto .att-card,
  .lay-compacto.dens-2 .att-card,
  .lay-compacto.dens-3 .att-card{padding:.85rem .95rem;border-radius:16px}
  .lay-compacto .att-name,
  .lay-compacto.dens-3 .att-name{font-size:1.1rem}
  .lay-compacto .att-toy,
  .lay-compacto.dens-3 .att-toy{font-size:.8rem}
  .lay-compacto .att-timer,
  .lay-compacto.dens-2 .att-timer,
  .lay-compacto.dens-3 .att-timer{font-size:2.2rem}
  .lay-compacto .att-amount,
  .lay-compacto.dens-2 .att-amount,
  .lay-compacto.dens-3 .att-amount{font-size:1.3rem}
  .lay-compacto .att-actions,
  .lay-compacto.dens-3 .att-actions{gap:.4rem;margin-top:.6rem}
  .lay-compacto .att-actions .btn,
  .lay-compacto.dens-3 .att-actions .btn{font-size:.86rem;min-height:40px;border-radius:11px}
  .lay-compacto .att-actions .att-cancel-x,
  .lay-compacto.dens-3 .att-actions .att-cancel-x{flex:0 0 34px;width:34px;min-height:40px;font-size:1rem}
  .lay-compacto .att-paid,.lay-compacto .att-autopause{font-size:.72rem;padding:.18rem .5rem}
}
/* PC grande: a vaga e larga, entao o cronometro volta a ser gigante */
@media (min-width:1500px){
  .att-list.lay-confortavel{grid-template-columns:repeat(3,1fr)}
  .lay-confortavel .att-grid-joined{grid-template-columns:repeat(3,1fr)}
  .lay-compacto .att-card,
  .lay-compacto.dens-2 .att-card,
  .lay-compacto.dens-3 .att-card{padding:1rem 1.1rem;border-radius:18px}
  .lay-compacto .att-name,
  .lay-compacto.dens-3 .att-name{font-size:1.25rem}
  .lay-compacto .att-toy,
  .lay-compacto.dens-3 .att-toy{font-size:.88rem}
  .lay-compacto .att-timer,
  .lay-compacto.dens-2 .att-timer,
  .lay-compacto.dens-3 .att-timer{font-size:2.7rem}
  .lay-compacto .att-amount,
  .lay-compacto.dens-2 .att-amount,
  .lay-compacto.dens-3 .att-amount{font-size:1.55rem}
  .lay-compacto .att-paidq{display:inline;font-size:.85rem}
  .lay-compacto .att-actions .btn,
  .lay-compacto.dens-3 .att-actions .btn{font-size:.95rem;min-height:44px}
  .lay-compacto .att-actions .att-cancel-x,
  .lay-compacto.dens-3 .att-actions .att-cancel-x{flex:0 0 40px;width:40px;min-height:44px}
}

/* ============ BLOCO DE GRUPO (mesma tag = mesma familia) ============ */
.att-group{border:1.5px solid var(--tag,#888);border-left-width:5px;border-radius:16px;
  overflow:hidden;background:rgba(255,255,255,.02)}
.att-group-head{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  padding:.45rem .6rem;background:rgba(255,255,255,.05)}
.att-group-head .tag-dot{width:11px;height:11px;border-radius:50%;background:var(--tag,#888);flex:0 0 auto}
.att-group-name{font-family:var(--display);font-weight:800;font-size:.88rem;color:var(--paper)}
.att-group-count{font-family:var(--display);font-weight:600;font-size:.72rem;color:var(--mute-light)}
.att-group-btns{display:flex;gap:.3rem;flex:1 1 100%;margin-top:.1rem}
.att-group-btns .btn{flex:1 1 0;min-width:0;font-size:.68rem;padding:.32rem .3rem;
  min-height:30px;white-space:nowrap}
@media (min-width:560px){
  .att-group-btns{flex:0 0 auto;margin-top:0;margin-left:auto}
  .att-group-btns .btn{flex:0 0 auto}
}
/* cards MESCLADOS: encostados um no outro, sem gap e sem borda arredondada */
.att-grid-joined{gap:0}
.att-grid-joined .att-card{border-radius:0;border-left:none;border-right:none;
  border-top:none;border-bottom:1px solid var(--line-dark)}
.att-grid-joined .att-card:last-child{border-bottom:none}
.att-group-foot{padding:.55rem .8rem;background:rgba(255,255,255,.05);
  font-family:var(--display);font-weight:700;font-size:.78rem;color:var(--paper);
  font-variant-numeric:tabular-nums}
/* No compacto os cards do grupo ficam lado a lado, SEMPRE em 2 colunas (nunca 3):
   e isso que faz o bloco caber em 2 vagas e empilhar 2 em cima, 2 embaixo. */
.lay-compacto .att-grid-joined{grid-template-columns:repeat(2,1fr)}
.lay-compacto .att-grid-joined .att-card{border-right:1px solid var(--line-dark)}
.lay-compacto .att-grid-joined .att-card:nth-child(2n){border-right:none}
/* TAG COM 1 CRIANCA = 1 VAGA. Cabe uma coluna so, e o cabecalho perde os botoes
   de grupo e o rodape do total: com uma crianca so eles repetem o que o proprio
   cartao ja faz (Finalizar / Ja pagou) e comiam a altura de meio cronometro. */
.att-group.sz-1 .att-grid-joined{grid-template-columns:1fr}
.att-group.sz-1 .att-grid-joined .att-card{border-right:none}
.att-group.sz-1 .att-group-btns,
.att-group.sz-1 .att-group-foot{display:none}
.att-group.sz-1 .att-group-head{padding:.3rem .5rem}

/* ============ MODAIS NOVOS (conferir/ajustar, escolher, exibir mais) ============ */
.modal{max-height:88vh;overflow-y:auto}
.edit-row{background:var(--paper-2);border-radius:12px;padding:.7rem .8rem;margin-bottom:.6rem}
.edit-name{font-family:var(--display);font-weight:800;font-size:.95rem;margin-bottom:.45rem}
.edit-fields{display:flex;gap:.45rem;align-items:flex-end}
.edit-f{display:flex;flex-direction:column;gap:.2rem;flex:0 0 66px}
.edit-f-val{flex:1 1 auto}
.edit-f span{font-family:var(--display);font-weight:700;font-size:.66rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.edit-f input{width:100%;padding:.5rem .55rem;font-size:1rem;border-radius:10px;
  font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;text-align:center}
.edit-f-val input{text-align:right}
.edit-note{font-size:.68rem;color:var(--mute);margin-top:.35rem;font-style:italic}
.edit-total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line);padding-top:.7rem;margin-top:.3rem}
.edit-total span{font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--mute)}
.edit-total b{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--electric);
  font-variant-numeric:tabular-nums}
/* lista com caixinha de marcar (quais finalizar / quais ja pagaram) */
.pick-row{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;cursor:pointer;
  background:var(--paper-2);border-radius:12px;margin-bottom:.45rem}
.pick-row.off{opacity:.5;cursor:not-allowed}
.pick-row input[type=checkbox]{width:20px;height:20px;flex:0 0 auto;accent-color:var(--electric)}
.pick-name{flex:1 1 auto;min-width:0;font-family:var(--display);font-weight:700;font-size:.92rem}
.pick-why{font-family:var(--body);font-weight:500;font-size:.72rem;color:var(--mute)}
.pick-val{font-family:var(--display);font-weight:800;font-size:.95rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* "Exibir mais": prioriza o QR em tela pequena (iPhone de 375px) */
.modal-more{text-align:center}
.modal-more .modal-title{text-align:left}
.more-qr{display:flex;justify-content:center;align-items:center;min-height:150px;margin:.2rem 0 .5rem}
.more-qr img{width:min(230px,62vw);height:auto;background:#fff;border-radius:12px;
  padding:8px;image-rendering:pixelated}
.more-qrhint{font-size:.78rem;color:var(--mute);margin-bottom:.8rem;line-height:1.35}
.more-details{margin-top:1rem;text-align:left;background:var(--paper-2);
  border-radius:12px;padding:.8rem .9rem}
.more-details .pay-row{margin-bottom:.25rem;font-size:.85rem}
.more-details .pay-row:last-child{margin-bottom:0}
.modal-more .tag-pick{justify-content:flex-start}

/* marca de pagamento em grupo na Agenda */
.agenda-group{color:var(--mute-light);font-size:.72rem;margin-top:.1rem;font-style:italic}

/* ============ TELA PUBLICA /acompanhar (somente leitura) ============ */
.watch-wrap{padding-bottom:2.5rem}
.watch-card{background:var(--ink-2);border:1.5px solid var(--line-dark);border-radius:18px;
  padding:.85rem 1rem;margin-bottom:.7rem;text-align:center}
.watch-card.done{opacity:.7}
.watch-name{font-family:var(--display);font-weight:800;font-size:1.15rem}
.watch-toy{color:var(--mute-light);font-size:.8rem;font-weight:600;margin-top:.05rem}
.watch-timer{font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1.1;
  margin:.25rem 0 .05rem;font-variant-numeric:tabular-nums}
.watch-status{color:var(--mute-light);font-size:.88rem;font-weight:600}
.watch-val{color:var(--orange);font-family:var(--display);font-weight:800;font-size:1.5rem;
  margin-top:.4rem;font-variant-numeric:tabular-nums}
/* MESMAS cores de fase do admin */
.watch-card.w-yellow .watch-timer{color:#F5B301}
.watch-card.w-red .watch-timer{color:var(--alert)}
.watch-card.w-yellow{border-color:#F5B301;box-shadow:0 0 0 3px rgba(245,179,1,.16)}
.watch-card.w-red{border-color:var(--alert);box-shadow:0 0 0 3px rgba(230,57,70,.20)}
.watch-card.w-blink .watch-timer{animation:phaseBlink 1.8s ease-in-out infinite}
.watch-total{display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(135deg,rgba(255,122,26,.16),rgba(20,20,25,.35));
  border:1px solid rgba(255,122,26,.4);border-radius:16px;padding:1rem 1.2rem;margin-top:1.1rem}
.watch-total span{font-family:var(--display);font-weight:700;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute-light)}
.watch-total strong{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--paper);
  font-variant-numeric:tabular-nums}
.watch-foot{color:var(--mute-light);font-size:.78rem;text-align:center;margin-top:1.6rem;
  opacity:.75;line-height:1.45}

/* ============ ABAS: troca com animacao (nao "seco") ============ */
.pane{display:none}
.pane.pane-on{display:block}
@keyframes paneInR{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes paneInL{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.pane.pane-on.slide-r{animation:paneInR .2s cubic-bezier(.22,.61,.36,1)}
.pane.pane-on.slide-l{animation:paneInL .2s cubic-bezier(.22,.61,.36,1)}
/* a pilula da aba ativa desliza junto em vez de pular */
.tab{transition:background .2s cubic-bezier(.22,.61,.36,1),color .2s}
.tab svg{transition:transform .2s cubic-bezier(.22,.61,.36,1)}
.tab.active svg{transform:translateY(-1px) scale(1.08)}
/* cartoes entrando na lista */
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.att-list .att-card{animation:cardIn .18s ease}
@media (prefers-reduced-motion:reduce){
  .pane.pane-on.slide-r,.pane.pane-on.slide-l,.att-list .att-card{animation:none}
}

/* ============ TELA FIXA: a pagina nao rola, a lista rola por dentro ============ */
/* O dono nao quer "ficar descendo": o topo (logo + abas) fica sempre no lugar e
   so o conteudo da aba rola, quando passa do tamanho da tela. */
body.admin-shell{padding-bottom:0!important;overflow:hidden}
body.admin-shell .wrap-admin{
  height:100dvh;max-height:100dvh;display:flex;flex-direction:column;
  padding-bottom:0;overflow:hidden;
}
body.admin-shell #scanView{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  padding-bottom:calc(52px + env(safe-area-inset-bottom));   /* barra de 3 abas */
}
/* ===== MAIS TELA PROS CRONOMETROS =====
   As duas barras (logo em cima, 3 abas embaixo) comiam ~135px de uma tela de
   667px. Agora nascem finas em todo aparelho, e o titulo "Gestao da praca"
   (que so ocupava espaco — a logo ja diz onde voce esta) sai do admin logado. */
body.admin-shell #scanView > .eyebrow,
body.admin-shell #scanView > h1{display:none}
body.admin-shell .appbar-admin{margin-bottom:.35rem}
body.admin-shell .appbar-admin .admin-logo{height:2.2rem}
body.admin-shell .admin-side{font-size:.6rem;gap:1px}
body.admin-shell .admin-side svg{width:17px;height:17px}
body.admin-shell .wrap-admin{padding-top:.5rem}
body.admin-shell .cron-head{margin-bottom:.5rem}
/* IMPORTANTE: so o conteudo da aba estica/encolhe. Sem isto, o flex vertical
   espremia o cabecalho e as abas (os icones viravam risquinhos de 3px). */
body.admin-shell .wrap-admin > *:not(#scanView),
body.admin-shell #scanView > *:not(.pane){flex:0 0 auto}
body.admin-shell .pane.pane-on{
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  /* nada de rolar pra DIREITA: o conteudo tem que caber na largura, sempre */
  overflow-x:hidden;
}
/* o toast sobe um pouco pra nao ficar atras da barra */
body.admin-shell .toast{bottom:5.5rem}
/* ⚠️ iPad/iPhone: onde nao ha dvh, `100vh` e a viewport GRANDE (ignora as
   barras do Safari) — a logo em cima e a barra de abas embaixo ficavam
   cortadas atras da interface do navegador. `-webkit-fill-available` da a
   altura realmente visivel; o 100vh fica so como ultimo recurso. */
@supports not (height:100dvh){
  body.admin-shell .wrap-admin{height:100vh;max-height:100vh}
  body.admin-shell .wrap-admin{height:-webkit-fill-available;max-height:-webkit-fill-available}
}
/* respeita a area segura do aparelho (notch / barra de status) */
body.admin-shell .wrap-admin{padding-top:calc(.5rem + env(safe-area-inset-top))}

/* ============ ADMIN NO PC / TABLET: usa a tela toda ============ */
@media (min-width:700px){
  .wrap-admin{max-width:1100px}
}
@media (min-width:1100px){
  .wrap-admin{max-width:1500px}
  .charts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1500px){
  .wrap-admin{max-width:1800px}
}

/* ============ TELA CHEIA: some com as duas barras ============ */
/* O dono pediu mais espaco pros cronometros. O botao no topo da lista esconde
   o cabecalho E a barra das 3 abas; fica so um botao redondo no canto pra
   trazer tudo de volta (dai ele troca de aba normalmente). Lembra no aparelho. */
body.admin-shell.admin-full .appbar-admin,
body.admin-shell.admin-full .admin-nav{display:none}
body.admin-shell.admin-full #scanView{padding-bottom:.3rem}
body.admin-shell.admin-full .fab{bottom:calc(1rem + env(safe-area-inset-bottom))}
body.admin-shell.admin-full .toast{bottom:1.2rem}
/* Nao existe botao de sair da tela cheia aqui embaixo: o proprio botao do topo
   da lista (do lado do "Compacto") liga e desliga. Dois botoes pra mesma coisa
   so tirava espaco — embaixo fica so o "+". */
/* botao de tela cheia: mesmo estilo do "Compacto", so o icone (nao sobra largura) */
.full-btn{flex:0 0 auto;padding:.34rem .5rem}
.full-btn span{display:none}
/* O icone diz o que o botao FAZ: setas pra FORA (ic-full-in) = entrar na tela
   cheia; setas pra DENTRO (ic-full-out) = sair dela. Como o app ABRE em tela
   cheia, o normal e ver o de sair, com o botao ACESO (laranja) — "voce esta na
   tela cheia, aperte aqui pra sair". */
.full-btn .ic-full-out{display:none}
body.admin-full .full-btn{border-color:var(--orange);color:var(--orange)}
body.admin-full .full-btn .ic-full-in{display:none}
body.admin-full .full-btn .ic-full-out{display:inline-block}
@media (min-width:700px){ .full-btn{padding:.55rem .7rem} }

/* ============ "Exibir mais": cabe na tela do celular, sem rolar ============ */
.modal-more{padding:1.1rem 1.1rem 1rem}
.modal-more .modal-title{font-size:1.1rem;margin-bottom:.5rem}
.more-qr{min-height:0;margin:0 0 .4rem}
.more-qr img{width:min(190px,42vh);padding:6px}
.more-qrhint{font-size:.72rem;margin-bottom:.5rem;line-height:1.25}
.modal-more .btn-sm{padding:.5rem .9rem}
/* detalhes em 2 colunas: cabe o dobro na mesma altura */
.more-details{margin-top:.7rem;padding:.6rem .7rem;
  display:grid;grid-template-columns:1fr 1fr;gap:.15rem .8rem}
.more-details .pay-row{margin:0;font-size:.76rem;gap:.3rem}
.more-details .pay-row b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-more .pay-label{margin:.7rem 0 .35rem;font-size:.78rem}
/* mesma coisa aqui: 8 pilulas numa GRADE de 4 colunas (2 fileiras). Em fileira
   unica as 7 cores nao caberiam e o nome da cor era cortado. */
.modal-more .tag-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}
.modal-more .tag-btn{min-width:0;justify-content:center;padding:.32rem .2rem;font-size:.68rem;
  white-space:nowrap;overflow:hidden}
.modal-more #moreClose{margin-top:.7rem!important}
/* Telas curtas: aperta o ultimo fio de altura pra o formulario do Painel caber
   inteiro tanto no tempo fechado quanto no tempo livre (que tem um campo a mais). */
@media (max-height:700px){
  .form-compact{padding:.6rem .75rem}
  .fc-field,.fc-row2{margin-bottom:.38rem}
  .form-compact .btn-primary{padding:.58rem 1rem}
  .fc-toggle{min-height:36px;padding:.3rem .5rem}
}

/* telas curtas (iPhone pequeno de pe): aperta mais o QR */
@media (max-height:700px){
  .more-qr img{width:min(150px,34vh)}
  .more-details .pay-row{font-size:.72rem}
}
@media (min-width:700px){
  .modal-more{padding:1.6rem}
  .more-qr img{width:230px}
  .more-qrhint{font-size:.8rem}
}

/* ================= 3 ABAS: barra embaixo, no alcance do polegar ================= */
/* Substitui a barra de cima E a mdnav (Perfil/Home/Admin): uma navegacao so. */
.admin-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;height:52px;
  background:var(--ink-2);border-top:1px solid var(--line-dark);
  display:none;align-items:stretch;padding-bottom:env(safe-area-inset-bottom);
}
body.admin-shell .admin-nav{display:flex}
.anav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:transparent;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  color:var(--mute-light);font-family:var(--display);font-weight:700;font-size:.66rem;
  transition:color .18s;
}
.anav-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;display:block;transition:transform .18s}
.anav-btn.active{color:var(--orange)}
.anav-btn.active svg{transform:translateY(-2px) scale(1.06)}

/* botao "+" flutuante: cria sem sair da lista */
.fab{
  position:fixed;right:1.1rem;bottom:calc(52px + .9rem + env(safe-area-inset-bottom));
  z-index:9100;width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  background:var(--electric);color:#fff;display:none;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(30,94,255,.45);-webkit-tap-highlight-color:transparent;
}
body.admin-shell .fab{display:flex}
/* espaco no fim da lista pra o "+" nunca cobrir os botoes do ultimo cartao */
body.admin-shell #pane-home{padding-bottom:50px}
.fab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.fab:active{transform:scale(.94)}

/* ================= FOLHA que sobe de baixo (criar / cidade) ================= */
.sheet-overlay{
  position:fixed;inset:0;z-index:9400;background:rgba(0,0,0,.6);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fadeIn .18s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.sheet{
  background:var(--paper);color:var(--ink);width:100%;max-width:520px;
  border-radius:22px 22px 0 0;padding:.6rem 1rem calc(1rem + env(safe-area-inset-bottom));
  max-height:92vh;display:flex;flex-direction:column;
  animation:sheetUp .24s cubic-bezier(.22,.61,.36,1);
}
.sheet-grip{width:38px;height:4px;border-radius:2px;background:rgba(10,10,15,.18);
  margin:.1rem auto .5rem}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.6rem}
.sheet-title{font-family:var(--display);font-weight:800;font-size:1.1rem}
.sheet-close{background:transparent;border:none;cursor:pointer;font-size:1.1rem;
  color:var(--mute);padding:.2rem .4rem;line-height:1}
.sheet-body{overflow-y:auto;min-height:0}
.sheet .form-compact{padding:0}
.sheet-short .sheet-body{padding-bottom:.4rem}
/* opcoes de cidade */
.city-opt{
  width:100%;text-align:left;cursor:pointer;background:var(--paper-2);border:1.5px solid transparent;
  border-radius:12px;padding:.85rem 1rem;margin-bottom:.5rem;
  font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink);
}
.city-opt.on{border-color:var(--orange);background:rgba(255,122,26,.12);color:#8a3d00}
@media (min-width:700px){
  .sheet-overlay{align-items:center}
  .sheet{border-radius:22px;max-width:460px;padding:1rem 1.4rem 1.4rem}
  .sheet-grip{display:none}
}

/* titulo da aba Praca vira o seletor de cidade */
.city-title{
  display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;background:transparent;border:none;
  padding:0;color:var(--paper);font-family:var(--display);font-weight:800;font-size:1.25rem;
  -webkit-tap-highlight-color:transparent;
}
.city-title svg{width:18px;height:18px;fill:none;stroke:var(--orange);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.city-title:active{opacity:.7}

/* rotulo com dica curta ao lado (ex.: "minutos · vazio = sem limite") */
.lbl-hint{font-family:var(--body);font-weight:500;font-size:.68rem;color:var(--mute);
  text-transform:none;letter-spacing:0}
/* o campo de minutos e so o numero, sem texto dentro (antes o placeholder cortava) */
.limit-row input{width:100%;text-align:center;font-family:var(--display);font-weight:700;
  font-size:1.05rem;letter-spacing:.02em}

/* ================= ABA MAIS ================= */
.more-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1.4rem}
.more-item{
  display:flex;align-items:center;gap:.8rem;width:100%;cursor:pointer;text-decoration:none;
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:14px;
  padding:.95rem 1rem;color:var(--paper);
  font-family:var(--display);font-weight:700;font-size:.95rem;text-align:left;
}
.more-item:hover{border-color:var(--orange)}
.more-item > span{flex:1 1 auto;min-width:0}
.more-item svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.more-item .more-arrow{width:16px;height:16px;opacity:.5}
.more-danger{color:#ff8f97}
/* sub-telas (Camera / Senhas) dentro do Mais */
.subpane{display:none}
.subpane.sub-on{display:block;animation:paneInR .2s cubic-bezier(.22,.61,.36,1)}
.sub-back{
  display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;margin-bottom:1rem;
  background:transparent;border:none;padding:.3rem .1rem;
  color:var(--mute-light);font-family:var(--display);font-weight:700;font-size:.9rem;
}
.sub-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.sub-back:hover{color:var(--paper)}
/* Na aba Mais o QR e o destaque, mas as outras funcoes tem que aparecer junto:
   o QR encolhe o suficiente pra lista caber na mesma tela. */
.mais-home .pix-box{margin-top:0}
.mais-home .pix-box .eyebrow{margin-bottom:.5rem;font-size:.66rem}
.mais-home .pix-card{padding:.9rem}
.mais-home .pix-qr{width:min(200px,44vh)}
.mais-home .pix-label{margin-top:.6rem;font-size:.64rem}
.mais-home .pix-key{font-size:1.05rem;margin-top:.1rem}
.mais-home .pix-hint{font-size:.68rem}
.mais-home .pix-copied{font-size:.72rem;height:.9rem;margin-top:.2rem}
.mais-home .more-list{margin-top:.9rem;gap:.4rem}
.mais-home .more-item{padding:.7rem .9rem;font-size:.9rem}
@media (max-height:700px){
  .mais-home .pix-qr{width:min(165px,36vh)}
  .mais-home .more-item{padding:.6rem .9rem}
}

/* ================= QR do Pix DENTRO do modal de pagamento ================= */
.pay-pix{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--paper-2);border-radius:14px;padding:.7rem;margin-top:.7rem;
  animation:fadeIn .18s ease;
}
/* o QR é grande o bastante pro cliente escanear, mas sem empurrar o botao
   "Confirmar e finalizar" pra fora da tela.
   ⚠️ Agora e um <div> com um <img> gerado por dentro (o QR sai com o VALOR), nao
   mais a imagem fixa do banco — por isso a medida vive no container. */
.pay-pix-qr{width:min(150px,26vh);height:auto;background:#fff;border-radius:10px;padding:5px;
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:60px}
.pay-pix-qr img{width:100%;height:auto;display:block;image-rendering:pixelated}
/* "Pix de R$ 20,00" — o dono confere na tela o que o cliente vai ver no banco */
.pay-pix-val{margin:.4rem 0 0;color:var(--mute);font-size:.78rem;
  font-family:var(--display);font-weight:600}
.pay-pix-val b{color:var(--ink);font-weight:800;font-size:1rem;font-variant-numeric:tabular-nums}
.pay-pix-key{
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;background:transparent;border:none;
  margin-top:.35rem;padding:.15rem .3rem;color:var(--ink);
  font-family:var(--display);font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums;
}
.pay-pix-key svg{width:15px;height:15px;fill:none;stroke:var(--electric);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
/* os dois botoes na MESMA linha: cada linha extra aqui empurra o
   "Confirmar e finalizar" pra fora do alcance do dedo */
.pay-pix-acts{display:flex;align-items:center;justify-content:center;gap:.5rem;
  flex-wrap:wrap;margin-top:.3rem}
/* "copiar codigo" = o copia e cola COM o valor; e o caminho mais confiavel
   quando a camera do cliente nao colabora */
.pay-pix-copy{color:var(--electric);font-size:.86rem;margin-top:0}
/* a chave crua fica como ultimo recurso e discreta: por ela o cliente digita o
   valor na mao, e e exatamente isso que o QR com valor vem evitar */
.pay-pix-chave{background:transparent;border:none;cursor:pointer;color:var(--mute);
  font-family:var(--display);font-weight:600;font-size:.72rem;
  padding:.1rem .35rem;text-decoration:underline;text-decoration-color:var(--line)}
.pay-pix-hint{color:var(--mute);font-size:.7rem;margin-top:.15rem}
.pay-pix-hint.copiado{color:var(--ok);font-weight:700}
/* com o Pix aberto o resumo encolhe pra sobrar tela pro QR e pro botao de
   confirmar (o QR mora ENTRE os dois, e cada pixel aqui conta) */
.modal:has(.pay-pix:not([style*="none"])) .pay-summary{padding:.6rem .9rem;margin-bottom:.5rem}
.modal:has(.pay-pix:not([style*="none"])) .pay-total{font-size:1.4rem;margin-top:.25rem}
.modal:has(.pay-pix:not([style*="none"])) .pay-split{margin-top:.45rem}
.modal:has(.pay-pix:not([style*="none"])) .modal-title{margin-bottom:.5rem}
.modal:has(.pay-pix:not([style*="none"])) #payConfirm{margin-top:.7rem!important}
/* telas curtas: o QR aperta um pouco (135px ainda escaneia de perto tranquilo) */
@media (max-height:700px){ .pay-pix{padding:.55rem} .pay-pix-qr{width:min(135px,23vh)} }
@media (min-width:700px){ .pay-pix-qr{width:190px} }

/* ============ DIVULGAR O SITE + INSTALAR O APP (aba Mais) ============ */
.sub-title{font-family:var(--display);font-weight:800;font-size:1.25rem;margin:0 0 1rem}
.site-qr{display:flex;align-items:center;justify-content:center;min-height:200px}
.site-qr img{width:min(230px,60vw);height:auto;background:#fff;padding:10px;border-radius:14px;display:block}
/* ============ COMBINAR 2 FORMAS DE PAGAMENTO ============ */
/* Botao pequeno e discreto: quem paga numa forma so nem percebe que existe. */
.pay-split{margin-top:.6rem}
.split-toggle{
  background:transparent;border:1.5px dashed var(--line);border-radius:10px;cursor:pointer;
  width:100%;padding:.5rem .6rem;color:var(--mute);
  font-family:var(--display);font-weight:700;font-size:.8rem;
  -webkit-tap-highlight-color:transparent;
}
.split-toggle:hover{border-color:var(--electric);color:var(--electric)}
.split-toggle.on{border-style:solid;border-color:var(--electric);color:var(--electric)}
.split-body{margin-top:.6rem}
.split-lbl{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);margin:0 0 .3rem}
.split-rest{margin-top:.7rem}
.split-lbl2{margin-top:.7rem}
/* "Dividir R$ 60,00 em duas formas" — o total fica na cara, pra ele nao confundir
   o valor da conta com o dinheiro que o cliente entregou. */
.split-total{font-family:var(--display);font-weight:700;font-size:.82rem;color:var(--mute);
  margin:0 0 .6rem}
.split-total b{color:var(--ink);font-weight:800}
.split-val,.split-val2{
  width:100%;box-sizing:border-box;
  padding:.6rem .7rem;border-radius:11px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);text-align:center;
  font-family:var(--display);font-weight:800;font-size:1.15rem;
}
.split-val:focus,.split-val2:focus{outline:none;border-color:var(--electric)}
.split-info{font-family:var(--display);font-weight:700;font-size:.84rem;color:var(--ok);
  margin:.5rem 0 0;line-height:1.35}
.split-info.aviso{color:var(--mute)}
.split-info:empty{display:none}

/* explicacao do "?" */
.modal-hint{max-width:380px}
.hint-text{font-size:.95rem;line-height:1.5;color:var(--ink);margin-bottom:1.2rem}

/* ============ CABECALHO DO ADMIN: logo maior e centralizada ============ */
/* 3 colunas de mesma largura: a logo fica no centro de verdade, com "Voltar"
   de um lado e "Sair" do outro. */
.appbar-admin{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;
}
.appbar-admin .admin-logo{grid-column:2;height:3.6rem;margin:0 auto}
.admin-side{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  text-decoration:none;color:var(--mute-light);
  font-family:var(--display);font-weight:700;font-size:.66rem;
  -webkit-tap-highlight-color:transparent;
}
.admin-side svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.admin-side:hover{color:var(--paper)}
.admin-back{grid-column:1;justify-self:start}
.admin-exit{grid-column:3;justify-self:end}
.admin-exit:hover{color:#ff8f97}
@media (max-width:699px){
  .appbar-admin .admin-logo{height:3rem}
}

/* ============ FOLHA: passo 1 (opcoes) -> passo 2 (nome) ============ */
.sheet-head{position:relative}
/* "Voltar" escrito, nao so a setinha: se ele escolheu algo errado tem que ser
   obvio como corrigir */
.sheet-back{
  background:transparent;border:none;cursor:pointer;padding:.25rem .5rem .25rem .2rem;
  color:var(--electric);display:inline-flex;align-items:center;gap:.2rem;
  font-family:var(--display);font-weight:700;font-size:.88rem;
  -webkit-tap-highlight-color:transparent;
}
.sheet-back svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.sheet-back:active{opacity:.6}

.sheet-head .sheet-title{flex:1 1 auto}

/* ============ TELA CHEIA DO NOME ============ */
/* O problema nunca foi ONDE o nome ficava: era o teclado numa folha apertada —
   metade da tela virava teclado e o resto dancava. Aqui o nome ocupa a tela
   INTEIRA, ancorado no TOPO: resumo, campo grande e o botao colado nele. Nada
   mais na tela pra errar o dedo, e nada que possa pular quando o teclado sobe. */
.namescreen{
  position:fixed;inset:0;z-index:9700;background:var(--paper);color:var(--ink);
  display:none;flex-direction:column;align-items:stretch;
  padding:calc(.8rem + env(safe-area-inset-top)) 1.1rem 1rem;
  animation:paneInR .18s cubic-bezier(.22,.61,.36,1);
  /* ⚠️ TEM QUE ROLAR. A lista de clientes abre aqui dentro (ate 232px) e o
     botao "Iniciar cronometro" vem DEPOIS dela: sem rolagem, com o teclado
     aberto, o botao ficava fora da tela e nao havia como chegar nele. */
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.namescreen > *{flex:0 0 auto}
/* na tela cheia a lista e mais curta que na folha: aqui o teclado ja come metade */
#nsSug{max-height:min(232px,34vh)}
.ns-head{display:flex;align-items:center;margin-bottom:.5rem}
.ns-resumo{
  background:var(--paper-2);border-radius:10px;padding:.55rem .75rem;margin-bottom:.9rem;
  font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--mute);line-height:1.35;
}
.ns-label{
  display:block;font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:.4rem;
}
.ns-input{
  width:100%;padding:.9rem 1rem;border-radius:14px;border:2px solid var(--line);
  background:#fff;color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.5rem;
}
.ns-input:focus{outline:none;border-color:var(--electric)}
.ns-ok{width:100%;margin-top:.9rem;padding:.95rem 1rem;font-size:1.05rem}
.namescreen .msg{margin-top:.6rem}
@media (min-width:700px){
  .namescreen{padding:2rem;align-items:center}
  .namescreen > *{width:100%;max-width:460px}
}


/* ============ ACRESCIMO SEMPRE SEPARADO E EM VERMELHO ============ */
/* O dono (e a mae) precisam ver a conta aberta: o que foi combinado e o que
   esta entrando a mais. Antes era um numero so (R$23,00) e nao dava pra
   distinguir a tarifa do acrescimo. */
.att-amount{display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.att-val{color:var(--orange)}
.att-val-extra{color:var(--alert);font-size:.85em}
/* o tempo passado do combinado, do lado do tempo combinado */
.att-min.over{color:var(--alert)}
.att-card.att-yellow .att-min.over{color:#F5B301}
/* valor no formulario do tempo livre ("3 min · R$ 9,00") */
.limit-valor{flex:0 0 auto;font-family:var(--display);font-weight:700;font-size:.8rem;
  color:var(--ok);white-space:nowrap}
/* conta aberta no modal de cobranca */
.pay-extra-val{color:var(--alert)}
#payExtraRow span{color:var(--alert)}

/* ============ TELA DOS PAIS: acrescimo e status de pagamento ============ */
.watch-val{display:flex;align-items:baseline;gap:.4rem;justify-content:center;flex-wrap:wrap}
.w-extra{color:var(--alert)}
.watch-paid{
  display:inline-block;margin-top:.5rem;background:rgba(31,157,85,.14);color:#3ddc84;
  font-family:var(--display);font-weight:700;font-size:.8rem;line-height:1.35;
  padding:.32rem .7rem;border-radius:999px;
}
.watch-paid[hidden]{display:none}

/* ====== "ja pago" vs "falta pagar" ====== */
/* DONO (tela apertada): so o essencial — verde = quitado, vermelho = falta.
   Ex.: "R$ 20,00 ✓   +R$ 3,00" */
.att-val.pago{color:var(--ok)}
/* o "faltam R$X" do modal de cobranca em vermelho, dentro do aviso verde */
.pay-falta{color:var(--alert)}

/* PAIS (tela sobrando): o que ela precisa saber vem GRANDE */
.watch-payinfo:empty{display:none}
.watch-owe{
  display:flex;flex-direction:column;align-items:center;gap:.1rem;
  background:rgba(230,57,70,.12);border:1.5px solid rgba(230,57,70,.45);
  border-radius:14px;padding:.7rem 1rem;margin-top:.7rem;
}
.watch-owe-lbl{font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:#ff8f97}
.watch-owe-val{font-family:var(--display);font-weight:800;font-size:2rem;line-height:1.1;
  color:#ff6b76;font-variant-numeric:tabular-nums}
.watch-owe-sub{font-size:.78rem;color:var(--mute-light)}
@media (min-width:700px){
  .watch-owe-val{font-size:2.6rem}
  .watch-owe-lbl{font-size:.82rem}
}

/* ====== AVISO DO ACRESCIMO (o pai tem que ver de longe) ====== */
/* Nao e letra miuda: e a regra do preco. Diz o tempo combinado (7 min, 14 se
   sao 2 voltas, ou o tempo que ele escolheu no tempo livre) e quanto custa
   passar dali. Tempo livre SEM tempo definido nao mostra nada. */
.watch-warnbox:empty{display:none}
.watch-warn{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;
  background:rgba(245,179,1,.12);border:2px solid rgba(245,179,1,.55);
  border-radius:14px;padding:.8rem 1rem;margin-top:.8rem;
}
.watch-warn-lbl{font-family:var(--display);font-weight:800;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:#F5B301}
.watch-warn-txt{font-family:var(--display);font-weight:700;font-size:1.05rem;
  line-height:1.3;color:var(--paper)}
.watch-warn-txt b{color:#F5B301;font-weight:800}
.watch-warn.over{background:rgba(230,57,70,.14);border-color:rgba(230,57,70,.6)}
.watch-warn.over .watch-warn-lbl{color:#ff8f97}
.watch-warn.over .watch-warn-txt b{color:#ff6b76}
@media (min-width:700px){
  .watch-warn{padding:1.1rem 1.3rem}
  .watch-warn-lbl{font-size:.85rem}
  .watch-warn-txt{font-size:1.5rem}
}

/* ====== o valor nao pode vazar do cartao ====== */
/* Com o "✓" e o acrescimo, a linha do dinheiro ficou mais larga: sem min-width:0
   o flex nao deixa encolher e o conteudo passa da borda do cartao. */
.att-mid{min-width:0}
.att-mid > *{min-width:0}
.att-amount{flex:1 1 auto;overflow-wrap:anywhere}
.att-timer{flex:0 1 auto}
/* no compacto o "deu R$X · troco R$Y" some (fica so "✓ Dinheiro") — o detalhe
   completo continua nos detalhes do cronometro e na Agenda do Caixa */
.lay-compacto .att-paid-det{display:none}
/* o cronometro mantem a largura natural; o valor ocupa o resto e quebra sozinho */
.att-mid{gap:.7rem}
.att-timer{flex:0 0 auto}
.lay-compacto.dens-3 .att-mid{gap:.45rem}
/* Sem acrescimo o valor fica ao lado do cronometro (economiza altura, e o que
   faz 10 cronometros caberem). SO quando ha acrescimo ("R$ 20,00 ✓ +R$ 9,00")
   ele ganha uma linha propria — senao transbordaria do cartao de 2 colunas. */
.att-mid{flex-wrap:wrap;row-gap:.1rem}
.att-amount{flex:0 1 auto}
.att-card.has-extra .att-amount{flex:1 1 100%;justify-content:flex-end}

/* dens-3 (9+ cronometros no celular): aperta o maximo pra manter a meta de
   10 visiveis sem rolar. A linha do brinquedo com os minutos fica — e o que o
   dono pediu pra nunca sumir. */
@media (max-width:699px){
  .att-list.lay-compacto.dens-3{gap:.28rem}
  .lay-compacto.dens-3 .att-card{padding:.28rem .42rem}
  .lay-compacto.dens-3 .att-toy{font-size:.58rem;margin-top:0}
  .lay-compacto.dens-3 .att-mid{margin-top:.08rem}
  .lay-compacto.dens-3 .att-name{font-size:.74rem}
  .lay-compacto.dens-3 .att-paidtoggle{width:30px;height:17px}
  .lay-compacto.dens-3 .att-paidtoggle::after{width:12px;height:12px;top:2.5px;left:2.5px}
  .lay-compacto.dens-3 .att-paidtoggle.on::after{transform:translateX(13px)}
  .lay-compacto.dens-3 .att-actions{margin-top:.2rem;gap:.18rem}
  .lay-compacto.dens-3 .att-actions .btn{min-height:26px;font-size:.6rem}
  .lay-compacto.dens-3 .att-actions .att-cancel-x{min-height:26px}
}

/* ==================== COBRANÇA DO SISTEMA (dev → dono) ====================
   Aviso de pendência financeira do SISTEMA (não tem nada a ver com o caixa da
   praça). Quem manda no estado é o servidor: ver billing_state() no app.py.
   Só aparece com o admin logado. */

/* A faixa COBRE o "+" de propósito: mesma posição e altura do .fab, z-index
   acima dele. Pra criar cronômetro ele precisa abrir o aviso e dar "Entendi". */
.bill-banner{
  position:fixed;left:1rem;right:1rem;
  bottom:calc(52px + .9rem + env(safe-area-inset-bottom));
  z-index:9200;display:none;align-items:center;gap:.6rem;
  min-height:56px;padding:.6rem .7rem .6rem 1rem;border-radius:15px;
  background:#F5B301;color:#241A00;border:none;
  box-shadow:0 10px 30px rgba(0,0,0,.45);animation:billIn .2s ease;
}
.bill-banner.on{display:flex}
.bill-banner.n2{background:#E63946;color:#fff}
body.admin-shell.admin-full .bill-banner{bottom:calc(1rem + env(safe-area-inset-bottom))}
@keyframes billIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bill-banner .bb-ic{flex:0 0 auto;width:26px;height:26px}
.bill-banner .bb-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;display:block}
.bill-banner .bb-txt{flex:1 1 auto;min-width:0}
.bill-banner .bb-t{display:block;font-family:var(--display);font-weight:800;
  font-size:1rem;line-height:1.15}
.bill-banner .bb-s{display:block;font-size:.74rem;opacity:.82;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bill-banner .bb-btn{flex:0 0 auto;cursor:pointer;border:none;border-radius:11px;
  padding:.55rem .85rem;font-family:var(--display);font-weight:800;font-size:.82rem;
  background:rgba(0,0,0,.82);color:#fff;-webkit-tap-highlight-color:transparent}
.bill-banner.n2 .bb-btn{background:#fff;color:#E63946}
.bill-banner .bb-btn:active{transform:scale(.95)}

/* selo no topo do Caixa: discreto quando em dia, triângulo amarelo devendo */
.bill-caixa{display:flex;align-items:center;gap:.5rem;margin:0 0 .8rem}
.bill-chip{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  border:1.5px solid var(--line-dark);background:transparent;color:var(--mute-light);
  border-radius:999px;padding:.3rem .7rem;font-family:var(--display);font-weight:700;
  font-size:.72rem;-webkit-tap-highlight-color:transparent}
.bill-chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.bill-chip.pend{background:#F5B301;border-color:#F5B301;color:#241A00}
.bill-chip.pend.n2{background:#E63946;border-color:#E63946;color:#fff}

/* CAIXA TRAVADO: o borrão é só o efeito visual — os atendimentos fechados NEM
   SAEM DO SERVIDOR enquanto tem mês vencido (ver api_admin_attendances). */
.caixa-lock{filter:blur(12px);pointer-events:none;user-select:none}
#pane-caixa.bill-locked .eye-btn{opacity:.45;pointer-events:none}

/* ---- modal da fatura (a mini planilha dos meses) ---- */
.modal-bill{max-width:460px;display:flex;flex-direction:column;max-height:88vh;padding:1.3rem}
/* ⚠️ O "Entendi" fica FORA da área que rola: com 6 meses na lista ele sumia
   embaixo e o dono tinha que caçar o botão. Rola só o miolo. */
.bill-scroll{overflow-y:auto;margin:0 -.3rem;padding:0 .3rem;flex:1 1 auto}
.bill-foot{flex:0 0 auto;padding-top:.9rem}
.bill-note{background:var(--paper-2);border-radius:12px;padding:.7rem .85rem;
  font-size:.86rem;margin-bottom:.9rem;white-space:pre-wrap}
.bill-tab{width:100%;border-collapse:collapse;font-size:.85rem}
.bill-tab th{text-align:left;font-family:var(--display);font-weight:700;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.07em;color:var(--mute);padding:.3rem .25rem}
.bill-tab td{padding:.45rem .25rem;border-top:1px solid var(--line);vertical-align:middle}
.bill-tab .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bill-tab .bill-pick{width:18px;height:18px;accent-color:var(--electric)}
.bill-tab tr.pago{color:var(--mute)}
.bill-st{font-family:var(--display);font-weight:800;font-size:.68rem;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap}
.bill-st.atraso{color:var(--alert)}
.bill-st.ok{color:var(--ok)}
.bill-st.aberto{color:#B07E00}
.bill-total{display:flex;align-items:baseline;justify-content:space-between;
  margin-top:.9rem;padding-top:.7rem;border-top:2px solid var(--ink)}
.bill-total span{font-family:var(--display);font-weight:700;font-size:.8rem}
.bill-total b{font-family:var(--display);font-weight:800;font-size:1.6rem;
  font-variant-numeric:tabular-nums}
.bill-vazio{color:var(--mute);font-size:.86rem}

/* ---- nível 3: a tela inteira vira a cobrança e não fecha ---- */
.bill-full{position:fixed;inset:0;z-index:9600;background:rgba(10,10,15,.96);
  display:none;align-items:center;justify-content:center;padding:1.1rem}
.bill-full.on{display:flex}
.bill-full .modal-bill{max-height:92vh}
/* a conta aberta do mês da mão de obra (senão parece que a mensalidade é R$996) */
.bill-sub{font-size:.68rem;color:var(--mute);line-height:1.25;margin-top:.1rem}
.bill-chip span{white-space:nowrap}
.bill-tab .bill-mes{font-family:var(--display);font-weight:700;font-size:.92rem}
.bill-tab .bill-v{font-family:var(--display);font-weight:800;font-size:1rem;
  font-variant-numeric:tabular-nums}
.bill-tab td:last-child{text-align:right}
.bill-tab .bill-st{display:block;margin-top:.1rem}

/* ---- meses FUTUROS na fatura (adiantar pagamento) ----
   Nascem fechados: são 12 linhas e não podem empurrar o que ele realmente
   deve pra fora da tela. O botão abre/fecha (classe .futon no container). */
.bill-tab .bill-fut{display:none}
.bill-scroll.futon .bill-tab .bill-fut{display:table-row}
.bill-st.futuro{color:var(--mute)}
.bill-more{display:flex;align-items:center;gap:.5rem;width:100%;cursor:pointer;
  border:1.5px dashed var(--line);background:transparent;color:var(--ink);
  border-radius:12px;padding:.5rem .7rem;margin:.5rem 0 .1rem;
  -webkit-tap-highlight-color:transparent;text-align:left}
.bill-more-t{font-family:var(--display);font-weight:700;font-size:.85rem;flex:1 1 auto}
.bill-more-s{font-size:.74rem;color:var(--mute);flex:1 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bill-more svg{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:var(--mute);
  stroke-width:2.2;stroke-linecap:round;transition:transform .18s}
.bill-more.aberto svg{transform:rotate(90deg)}
.bill-more.aberto{border-color:var(--electric)}
.bill-tab .bill-futrow td{border-top:none;padding-top:0}
/* Em dia o selo é só o ícone, redondo e no canto direito — a linha inteira
   escrita ("pago até X · vence Y") virava barulho no topo do Caixa. O texto
   continua no title/aria-label e completo dentro da fatura. */
.bill-caixa{justify-content:flex-end}
.bill-chip.ok,.bill-chip.aviso{width:30px;height:30px;padding:0;
  justify-content:center;border-radius:50%}
.bill-chip.ok svg,.bill-chip.aviso svg{width:17px;height:17px}
.bill-chip.ok{border-color:rgba(31,157,85,.5);color:#5FD68F}
/* devendo com a cobranca DESLIGADA (nivel 0 / tregua): avisa e nao bloqueia */
.bill-chip.aviso{border-color:rgba(245,179,1,.6);color:#F5B301}
/* devendo, o selo volta a ser a pílula com texto e ocupa a esquerda */
.bill-caixa:has(.bill-chip.pend){justify-content:flex-start}
/* ⚠️ TABELA DE LARGURA FIXA. Sem isso os nomes longos ("Novembro/2026") e o
   botão de adiantar empurravam a tabela mais larga que a tela e a coluna do
   valor saía cortada ("R$ 996,0…"), com barra de rolagem lateral no modal. */
.bill-tab{table-layout:fixed}
.bill-tab thead th.c-pick{width:30px}
.bill-tab thead th.num{width:104px}
.bill-scroll{overflow-x:hidden}
.bill-tab .bill-mes{overflow-wrap:anywhere}

/* ============ CHAVE PIX EDITÁVEL (aba Mais) ============
   ⚠️ O `.pix-qr` deixou de ser <img> e virou <div> com a imagem dentro (o QR
   agora é GERADO da chave salva). A regra de largura continua no pai; a imagem
   de dentro só precisa preencher. */
.pix-qr{padding:6px;min-height:120px}
.pix-qr img{width:100%;height:auto;display:block;image-rendering:pixelated}
.pix-edit{margin-top:1.1rem}
.pix-edit svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- o editor da chave ---- */
.modal-pix{max-width:440px;max-height:88vh;display:flex;flex-direction:column;
  padding:1.4rem}
.pix-scroll{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;margin:0 -.3rem;padding:0 .3rem}
.pix-foot{flex:0 0 auto;padding-top:.9rem}
.pix-modal-sub{color:var(--mute);font-size:.84rem;margin:-.6rem 0 1.1rem}
.pix-in{width:100%;padding:.7rem .8rem;border-radius:12px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);font-family:var(--display);font-weight:700;
  font-size:1rem}
.pix-in:focus{outline:none;border-color:var(--electric)}
/* contador do nome: o limite de 25 é do BR Code e travava o campo calado */
.pix-cont{font-family:var(--body);font-weight:600;font-size:.7rem;color:var(--mute);
  text-transform:none;letter-spacing:0;margin-left:.4rem}
.pix-cont.cheio{color:var(--alert)}
/* passou dos 25 do padrão: ainda salva, mas o dono precisa ver o risco */
.pix-cont.risco{color:#B07E00}
.pix-check{font-size:.82rem;margin:.45rem 0 0;min-height:1.1rem;font-weight:600}
.pix-check.ok{color:var(--ok)}
.pix-check.err{color:var(--alert)}
.pix-two{display:grid;grid-template-columns:1fr;gap:.7rem;margin-top:.9rem}
@media (min-width:420px){.pix-two{grid-template-columns:1.4fr 1fr}}
.pix-two .pay-label{margin-bottom:.35rem}
.pix-prev{margin-top:1rem;background:var(--paper-2);border-radius:14px;
  padding:.9rem;display:flex;flex-direction:column;align-items:center}
.pix-prev-qr{width:min(150px,40vw);background:#fff;border-radius:10px;padding:5px}
.pix-prev-qr img{width:100%;height:auto;display:block;image-rendering:pixelated}
.pix-prev-t{color:var(--mute);font-size:.74rem;margin:.5rem 0 0}
/* "não, é telefone" — a correção de UM toque, que só aparece nos ~3% de chaves
   ambíguas (11 dígitos secos que servem pra CPF e pra celular) */
.pix-troca{margin-left:.5rem;cursor:pointer;border:none;background:transparent;
  color:var(--electric);font-family:var(--display);font-weight:700;
  font-size:.8rem;text-decoration:underline;padding:0;
  -webkit-tap-highlight-color:transparent}

/* ================= EDITAR PREÇOS E O SITE (aba Mais) =================
   Duas telas irmãs e MUITO parecidas de olhar, mas que fazem coisas
   diferentes: a de Preços mexe em dinheiro de verdade (o que o cronômetro
   cobra) e a do Site mexe só na vitrine. Por isso a de Preços leva a tarja
   .ed-aviso e a do site não — a diferença tem que estar na tela, não só na
   cabeça de quem programou. */
.ed-list{display:flex;flex-direction:column;gap:.55rem;margin:1rem 0}
.ed-item{
  display:flex;align-items:center;gap:.8rem;width:100%;cursor:pointer;text-align:left;
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:14px;
  padding:.8rem .9rem;color:var(--paper);
}
.ed-item:hover{border-color:var(--orange)}
.ed-item.off{opacity:.45}
.ed-thumb{
  width:52px;height:52px;flex:0 0 auto;border-radius:11px;object-fit:cover;
  background:var(--line-dark);
}
.ed-txt{flex:1 1 auto;min-width:0}
.ed-nome{font-family:var(--display);font-weight:800;font-size:.95rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-sub{color:var(--mute-light);font-size:.74rem;margin-top:.15rem;line-height:1.35}
.ed-item .more-arrow{width:16px;height:16px;flex:0 0 auto;opacity:.5;
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ed-off-tag{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute-light);border:1px solid var(--line-dark);
  border-radius:6px;padding:.05rem .3rem;margin-left:.35rem;vertical-align:middle}
.ed-vazio{color:var(--mute-light);font-size:.85rem;text-align:center;padding:1.4rem .6rem}
.sub-desc{color:var(--mute-light);font-size:.82rem;line-height:1.5;margin-bottom:.2rem}

/* a tarja que separa "isto cobra" de "isto é só vitrine" */
.ed-aviso{
  display:flex;gap:.6rem;align-items:flex-start;
  background:rgba(255,138,0,.1);border:1px solid rgba(255,138,0,.35);
  border-radius:12px;padding:.7rem .8rem;margin:.9rem 0;
  color:var(--paper);font-size:.78rem;line-height:1.45;
}
.ed-aviso b{color:var(--orange)}
.ed-aviso svg{width:17px;height:17px;flex:0 0 auto;margin-top:.1rem;
  fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* formulário dentro do modal de editar */
.ed-campo{margin-top:.85rem}
.ed-campo:first-child{margin-top:0}
/* ⚠️ color:inherit E DE PROPOSITO. Existe um `label{color:var(--ink)}` global
   (preto), que serve nos modais — eles tem fundo claro. Estes mesmos campos
   aparecem TAMBEM direto na sub-tela, que e escura, e ali o preto sumia no
   fundo: a tela de Endereco/WhatsApp/VIP ficava com os campos sem nome nenhum.
   Herdando a cor, o rotulo fica preto no modal e claro na tela escura. */
.ed-campo > label{display:block;font-family:var(--display);font-weight:600;
  font-size:.8rem;margin-bottom:.3rem;color:inherit}
.ed-in{
  width:100%;padding:.65rem .8rem;border-radius:11px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);font-family:var(--display);font-weight:700;
  font-size:1rem;
}
.ed-in:focus{outline:none;border-color:var(--electric)}
textarea.ed-in{font-weight:500;font-size:.92rem;line-height:1.45;resize:vertical;min-height:74px}
.ed-dois{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;align-items:end}
.ed-dica{color:var(--mute);font-size:.72rem;margin-top:.25rem;line-height:1.4}
/* prefixo R$ colado no campo, pra ele não digitar "R$" dentro */
.ed-money{display:flex;align-items:center;gap:.4rem;
  border:1.5px solid var(--line);border-radius:11px;background:#fff;padding-left:.7rem}
.ed-money:focus-within{border-color:var(--electric)}
.ed-money span{font-family:var(--display);font-weight:800;font-size:.9rem;color:var(--mute)}
.ed-money input{flex:1 1 auto;min-width:0;border:none;background:transparent;
  padding:.65rem .8rem .65rem .1rem;font-family:var(--display);font-weight:700;
  font-size:1rem;color:var(--ink)}
.ed-money input:focus{outline:none}

/* a prévia do card, do jeitinho que o cliente vai ver */
.ed-foto{
  width:100%;aspect-ratio:4/3;border-radius:14px;object-fit:cover;display:block;
  background:var(--paper-2);border:1.5px dashed var(--line);
}
.ed-foto-btns{display:flex;gap:.5rem;margin-top:.5rem}
.ed-foto-btns .btn{flex:1 1 0;padding:.6rem .5rem;font-size:.85rem}
.ed-conta{font-family:var(--display);font-weight:700;font-size:1.4rem;
  text-align:center;color:var(--electric);margin:.2rem 0 .1rem;font-variant-numeric:tabular-nums}
.ed-conta-sub{text-align:center;color:var(--mute);font-size:.76rem;margin-bottom:.2rem}

/* rodapé do modal: Apagar fica longe do Salvar de propósito */
.ed-foot{display:flex;gap:.6rem;margin-top:1.3rem}
.ed-foot .btn{flex:1 1 0}
.ed-apagar{margin-top:.7rem}
.ed-apagar .btn{width:100%}
.modal-ed{max-height:88vh;display:flex;flex-direction:column}
.modal-ed .ed-scroll{overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch}

/* O "Apagar" só fica VERMELHO DE VERDADE quando o nome bate e a senha foi
   digitada. Enquanto não, ele é um contorno apagado. O .btn-danger normal é
   transparente com texto vermelho — aceso e apagado ficavam quase iguais, e o
   dono não tinha como saber que já estava armado. */
.btn-danger[disabled]{opacity:.35;cursor:default}
.btn-danger.armado{background:var(--alert);color:#fff;border-color:var(--alert)}

/* etiqueta VERDE: "este local tem preço próprio" (a cinza é "herdou o padrão") */
.ed-tag-on{color:var(--ok);border-color:rgba(0,179,126,.45)}
/* o seletor de local da tela de Preços rola quando tem muitos locais */
#precoLocal{margin:.2rem 0 .5rem;overflow-x:auto;flex-wrap:nowrap}
#precoLocal .seg-btn{flex:0 0 auto}

/* Aviso da PRIMEIRA vez, na folha de escolher o local. Só aparece enquanto o
   aparelho nunca escolheu — depois disso some pra sempre e não vira ruído. */
/* ⚠️ A FOLHA E CLARA: o texto aqui vai em --ink. Tinha nascido com --paper
   (claro), copiado dos avisos que ficam no fundo escuro do admin — dava letra
   clara sobre fundo claro e o aviso quase nao se lia. */
.sheet-aviso{
  margin:.2rem 1.2rem 0;padding:.75rem .85rem;border-radius:12px;
  background:rgba(30,94,255,.1);border:1px solid rgba(30,94,255,.35);
  color:var(--ink);font-size:.82rem;line-height:1.45;
}
.sheet-aviso b{display:block;margin-bottom:.15rem;color:var(--electric)}

/* "mostrar na lista" dentro do aviso da Agenda: link, não botão — é uma ação
   secundária, e um botão cheio ali competiria com o "Limpar". */
.nota-link{
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--electric);font-family:var(--display);font-weight:700;
  font-size:inherit;text-decoration:underline;
}

/* ==========================================================================
   OS TRES NIVEIS DE ACESSO (dono / funcionario / visitante) — 14/09/2026
   ⚠️ ESCONDER AQUI NAO E TRAVA. Quem impede de verdade e o servidor (app.py,
   need_dono() e o filtro do api_admin_attendances). Isto aqui e conforto: o
   funcionario nao tropeca num botao que ia dar erro na cara dele.
   ========================================================================== */

/* o que e SO DO DONO some pro funcionario */
body.papel-func .so-dono { display: none !important; }
/* ...e a aba Caixa junto (o deslize tambem e barrado, no activateTab) */
body.papel-func .anav-btn[data-pane="caixa"] { display: none !important; }
/* com 2 abas em vez de 3, elas dividem o espaco sozinhas (a barra e flex) */

/* quem esta logado, no cabecalho */
.admin-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.quem-sou {
  font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  color: var(--muted, #8b8b9a); max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ---- o botao "Visualizar cronometros" na tela de senha ---- */
.ver-cta { width: 100%; margin-top: 14px; display: flex; align-items: center;
  justify-content: center; gap: 8px; }
.ver-cta svg { flex: 0 0 auto; }
.ver-cta-hint { text-align: center; margin-top: 6px; }

/* ---- a tela do visitante (SEM SENHA) ----
   ⚠️ NAO TEM MAIS CARTAO PROPRIO. O pedido foi "literalmente a mesma tela que o
   funcionario ve, so que nao da pra editar": o cartao, as cores de fim de tempo,
   as tags, os grupos de familia e a grade responsiva sao os MESMOS (.att-card,
   .att-group, .att-list). Existia aqui um .ver-card de tres linhas que vivia
   ficando pra tras a cada mudanca no cartao de verdade — por isso saiu.
   O que continua diferente e o que NAO aparece: valor em reais, sobrenome,
   forma de pagamento e qualquer botao. */
.ver-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem; }
.ver-head .city-title { margin-right: auto; }
.ver-hint { font-size: .72rem; color: var(--mute-light); margin: 0 0 .5rem; }

/* ONDE FICA O VALOR NO CARTAO DO DONO, aqui fica QUANTO FALTA. Mesmo lugar,
   mesma altura de cartao — por isso as duas telas ficam com o mesmo desenho. */
.ver-falta { font-family: var(--display); font-weight: 700; color: var(--orange);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ver-falta.livre { color: var(--mute-light); font-weight: 600; font-size: .9em; }
.ver-falta.fim { color: var(--alert); text-transform: uppercase; letter-spacing: .03em;
  font-size: .8em; }
/* cartao so de olhar: nada de cursor de clique nem do "afunda" do toque */
.att-card.ver-ro { cursor: default; }
.att-card.ver-ro:active { transform: none; }

/* A PAGINA NAO ROLA, so a lista — mesma armacao do admin logado, pelo mesmo
   motivo: a logo e o cabecalho ficam parados e a lista rola por dentro.
   ⚠️ A DIFERENCA PRO body.admin-shell e a LOGO: la ela encolhe pra 2,2rem
   porque o dono precisa de cada pixel pros 10 cronometros. Aqui ela fica no
   tamanho cheio, de proposito — quem abre esta tela nao sabe de quem e o site. */
body.ver-shell { padding-bottom: 0 !important; overflow: hidden; }
body.ver-shell .wrap-admin {
  height: 100dvh; max-height: 100dvh; display: flex; flex-direction: column;
  padding-bottom: 0; overflow: hidden;
  padding-top: calc(.5rem + env(safe-area-inset-top));
}
/* so a lista estica/encolhe: sem isto o flex vertical espremia o cabecalho e os
   icones viravam risquinhos de 3px (bug real, ja aconteceu no admin) */
body.ver-shell .wrap-admin > *:not(#verView) { flex: 0 0 auto; }
body.ver-shell #verView {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
body.ver-shell #verView > *:not(#verList) { flex: 0 0 auto; }
body.ver-shell #verList {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* navegador antigo sem dvh */
@supports not (height: 100dvh) {
  body.ver-shell .wrap-admin { height: 100vh; max-height: 100vh; }
}

/* ---- lista de funcionarios (aba Mais) ---- */
.staff-row {
  display: flex; align-items: center; gap: 8px; padding: 11px 0;
  border-bottom: 1px solid var(--line, #23232e);
}
.staff-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.staff-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#staffNovo { margin-top: 16px; width: 100%; }
/* ---- CADASTRO DE CLIENTES (busca ao criar + 🎁 do aniversario) ---- */
/* o presente, onde o nome aparece */
.niver-ic { font-size: .95em; line-height: 1; }

/* sugestoes enquanto ele digita o nome
   ⚠️ ESTES DOIS LUGARES SAO CLAROS, nao escuros. A folha "Novo cronometro" e a
   tela cheia do nome sao #F8F8F5. Escrevi isto com texto claro na primeira vez
   e a sugestao virou branco no branco: so o emoji do presente aparecia.
   E a MESMA armadilha do btn-ghost/btn-dim — errar nao da erro, some. */
.cli-sug { margin-top: 6px; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: #fff; max-height: 232px; overflow-y: auto; }
.cli-item { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  padding: 11px 12px; background: transparent; border: none; cursor: pointer;
  border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; }
.cli-item:last-child { border-bottom: none; }
.cli-item:hover, .cli-item:focus { background: rgba(255,122,26,.14); }
.cli-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-sub { margin-left: auto; font-size: .74rem; color: #6b6b78; flex: 0 0 auto; }
.cli-niver { font-size: .82rem; color: #8a3d00; }
/* ⚠️ FUNDO CLARO AQUI TAMBEM (a folha do cronometro e a tela cheia do nome sao
   #F8F8F5): texto escuro, senao some. E a mesma armadilha do btn-ghost/btn-dim. */
.cli-vazio { padding: 11px 12px; margin: 0; font-size: .82rem; color: #6b6b78;
  border-bottom: 1px solid var(--line); }
/* cadastrar na hora, sem sair da folha do cronometro. Fica GRUDADO no fim da
   lista mesmo com ela rolando: e a saida de quem nao achou a pessoa, e ter que
   rolar ate o fim pra achar a saida seria o mesmo que nao ter. */
.cli-novo { position: sticky; bottom: 0; background: #FFF3E8; font-weight: 700;
  color: #8a3d00; border-top: 1px solid rgba(255,122,26,.45); border-bottom: none; }
.cli-novo:hover, .cli-novo:focus { background: rgba(255,122,26,.22); }
.cli-mais { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center; background: var(--orange); color: #fff;
  font-weight: 800; font-size: .95rem; line-height: 1; }
/* ⚠️ ACIMA DA TELA CHEIA DO NOME (.namescreen e z-index 9700). O modal normal e
   9500: aberto pela lista suspensa da tela cheia, ele ficava ATRAS dela e o
   dono so via a tela do nome escurecer, sem entender o que tinha acontecido. */
.modal-overlay.modal-acima { z-index: 9800; }

/* a marca de quem ele escolheu (tambem em fundo CLARO) */
.cli-chip { margin-top: 7px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 9px 11px; border-radius: 10px; font-size: .86rem; color: var(--ink);
  background: rgba(255,122,26,.14); border: 1px solid rgba(255,122,26,.45); }
.cli-ok { color: var(--ok); font-weight: 800; }
/* o recado de "só o nome é obrigatório", dentro do modal CLARO de cadastro */
.cli-so-nome { margin: .7rem 0 0; line-height: 1.4; }

/* ================= NADA DE ZOOM NO ADMIN (21/09/2026) =================
   ⚠️ SO NO ADMIN, e o seletor e o que garante isso: `data-hide-mdnav="1"` so
   existe no <body> do admin.html. Esta folha e compartilhada com o painel, o
   cadastro, o login e a tela da mae — nessas o zoom CONTINUA, porque ali cortar
   zoom e cortar acessibilidade de quem precisa aumentar a letra.

   `pan-x pan-y` = pode arrastar pra rolar, NAO pode pinçar nem dar duplo-toque
   pra ampliar. E a metade do trabalho: o iPad ignora isso pra pinça da PAGINA,
   e quem segura la e o bloqueio dos eventos `gesture*` no admin.html. */
/* ⚠️ NO <body> BASTA, nao precisa de `*`. O navegador cruza o touch-action do
   elemento tocado com o dos ancestrais e fica com a INTERSECAO — entao um filho
   com `manipulation` (o .layout-btn tem) nao reabre a pinça: a intersecao com
   `pan-x pan-y` continua sem zoom. Espalhar isso em `*` so daria chance de
   quebrar algum arrasto no futuro sem ninguem entender por que. */
body[data-hide-mdnav="1"] { touch-action: pan-x pan-y; }
/* o iOS aumenta a fonte sozinho ao virar pra paisagem; aqui o tamanho e medido
   (10 cronometros sem rolar), entao ele nao pode reescalar nada */
body[data-hide-mdnav="1"] { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---- o dia do VIP gasto pelo Finalizar (modal de pagamento) ----
   ⚠️ FUNDO CLARO: o modal é #F8F8F5. Texto claro aqui some — é a mesma
   armadilha do btn-ghost/btn-dim descrita no CLAUDE.md. */
.vip-dia { margin: -.4rem 0 .9rem; display: grid; gap: .3rem; }
.vip-dia-ok, .vip-dia-alerta {
  font-size: .8rem; font-weight: 600; line-height: 1.35;
  padding: .5rem .7rem; border-radius: 10px;
}
.vip-dia-ok { color: #12653a; background: rgba(31,157,85,.14); border: 1px solid rgba(31,157,85,.4); }
/* já tinha usado hoje = SEGUNDO passeio do dia. Não é erro, é decisão do dono:
   por isso alerta (âmbar), não o vermelho de coisa quebrada. */
.vip-dia-alerta { color: #8a3d00; background: rgba(245,179,1,.18); border: 1px solid rgba(245,179,1,.55); }
.cli-x { margin-left: auto; background: transparent; border: none; cursor: pointer;
  color: #6b6b78; font-size: 1.05rem; padding: 0 4px; line-height: 1; }
.cli-x:hover { color: var(--ink); }

/* ---- a tela de clientes (aba Mais, so o dono) ---- */
.cli-resumo { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.cli-pill { padding: 6px 11px; border-radius: 999px; font-size: .76rem; font-weight: 600;
  background: rgba(255,255,255,.06); border: 1px solid var(--line-dark); color: var(--mute-light); }
.cli-pill.niver { background: rgba(255,122,26,.14); border-color: rgba(255,122,26,.4); color: var(--orange); }
.cli-row { display: flex; align-items: center; gap: 10px; padding: 11px 2px;
  border-bottom: 1px solid var(--line-dark); }
.cli-row-who { flex: 1 1 auto; min-width: 0; }
.cli-row-nome { font-weight: 600; display: flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⚠️ DEIXA QUEBRAR LINHA. Com nowrap o telefone era o primeiro a ser cortado
   ("(94) 99123-4…") — e o telefone é justamente o que ele usa pra chamar a
   pessoa. Uma linha a mais no cartão custa menos que um telefone pela metade. */
.cli-row-sub { font-size: .76rem; color: var(--mute-light); margin-top: 2px;
  line-height: 1.45; }
.cli-falta { color: var(--orange); }
.cli-acoes { display: flex; gap: 6px; flex: 0 0 auto; }
.cli-ic { width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
  border-radius: 10px; background: transparent; border: 1.5px solid var(--line-dark);
  color: var(--mute-light); cursor: pointer; }
.cli-ic:hover { border-color: var(--orange); color: var(--paper); }
.cli-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.cli-ic.zap:hover { border-color: #25D366; color: #25D366; }
#cliBusca { margin-top: 10px; }
#cliNovo { margin-top: 14px; width: 100%; }
/* o campo de busca vive num pane ESCURO — o estilo padrao de input e pra card
   claro e ficava um retangulo cinza no meio do escuro */
#cliBusca {
  width: 100%; padding: .78rem .95rem; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1.5px solid var(--line-dark);
  color: var(--paper); font: inherit;
}
#cliBusca::placeholder { color: var(--mute-light); }
#cliBusca:focus { outline: none; border-color: var(--orange); }
/* o presente NUNCA encolhe nem quebra: ele vive fora do nome, que e quem some
   com "..." (ver o aviso no admin.html, na linha do .att-name) */
.att-head .niver-ic { flex: 0 0 auto; margin-left: .15rem; }

/* ---- DESCONTO ---- */
/* ⚠️ o modal e CLARO (#F8F8F5) — texto escuro aqui, sempre */
.desc-linha { display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.desc-campo { display: flex; align-items: center; gap: 8px; }
.desc-rs { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--ink); }
#descValor { flex: 1 1 auto; font-family: var(--display); font-weight: 800; font-size: 1.5rem; }
.desc-atalhos { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.desc-atalho { padding: 8px 13px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: .88rem; }
.desc-atalho:hover { border-color: var(--orange); background: rgba(255,122,26,.1); }
.desc-conta { margin-top: 8px; font-size: .84rem; color: #6b6b78; min-height: 1.1em; }
.desc-conta.ruim { color: var(--alert); font-weight: 600; }
/* o botao dos detalhes fica aceso quando JA tem desconto */
#moreDesc.tem-desc { border-color: var(--orange); color: var(--orange); }

/* o valor do cartao quando teve desconto: o de tabela riscado, o novo em destaque */
.att-full { text-decoration: line-through; opacity: .5; font-weight: 600;
  margin-right: .3rem; font-size: .82em; }
.desc-tag { font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--orange); }
/* a tela da mae avisa que o valor ja esta com desconto (o CSS dela mora aqui,
   nao inline no acompanhar.html) */
.w-desc{font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--orange);display:block;margin-top:.1rem}

/* ---- tela de VIPs ---- */
.vip-st { display: inline-block; margin-top: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.vip-st.livre  { background: rgba(31,160,90,.16); color: #3ddb8b; }
.vip-st.usou   { background: rgba(255,255,255,.07); color: var(--mute-light); }
.vip-st.espera { background: rgba(255,122,26,.16); color: var(--orange); }
.vip-st.off    { background: rgba(255,255,255,.05); color: var(--mute-light); }
#vipFiltro { margin-bottom: 4px; }

/* ---- painel do cliente: os dias que ele ja andou ----
   ⚠️ A CARTEIRINHA E UM CARD CLARO (#F8F8F5). Escrevi isto com --paper /
   --mute-light (cores de fundo escuro) e o bloco ficou invisivel: estava no
   DOM, com o texto certo, e nao dava pra ler nada. QUARTA vez que esta mesma
   armadilha pega nesta tarefa — ver "A ARMADILHA DOS BOTOES" no CLAUDE.md. */
.dias{margin-top:.55rem;padding-top:.55rem;border-top:1px solid var(--line);
  font-size:.82rem;color:#6b6b78}
.dias b{color:var(--ink);font-family:var(--display);font-size:1rem}
.dias-lista{display:block;margin-top:.2rem;font-size:.72rem;color:#8b8b98}

/* ---- bloco "opcional" (e-mail e senha no cadastro / contas antigas no login) ----
   ⚠️ Estes vivem em CARD CLARO. Texto escuro aqui. */
.opcional { border: 1px solid var(--line); border-radius: 12px; padding: .2rem .9rem;
  background: rgba(0,0,0,.02); }
.opcional > summary { cursor: pointer; padding: .7rem 0; font-weight: 600;
  color: var(--ink); font-size: .92rem; list-style: none; }
.opcional > summary::-webkit-details-marker { display: none; }
.opcional > summary::before { content: '+ '; color: var(--electric); font-weight: 800; }
.opcional[open] > summary::before { content: '− '; }
.opcional > summary span { font-weight: 400; color: #6b6b78; font-size: .84rem; }
.opcional[open] { padding-bottom: .9rem; }
/* o tempo dado de brinde, do lado do tempo combinado */
.bonus-tag { color: var(--ok); font-weight: 800; margin-left: .25rem; font-size: .92em; }
#descTipo { margin-bottom: .4rem; }
#descMin { flex: 1 1 auto; font-family: var(--display); font-weight: 800; font-size: 1.5rem; }