/* =====================================================================
   FERMINO
   Carvao para estrutura, creme para papel, verde-garrafa como unico
   acento. Dinheiro ganha destaque por tamanho, nunca por cor.
   ===================================================================== */

:root{
  /* tinta e papel: a paleta sai do proprio logo */
  --tinta:#201E1D;
  --tinta-card:#3A3532;
  --tinta-linha:#4D4741;
  --papel:#F5EAD8;
  --papel-fraco:#A89B86;

  --cobre:#C67139;
  --cobre-forte:#A85B2A;
  --verde:#7A8A5E;
  --vermelho:#9C3B2C;

  /* papeis de uso, montados sobre os tokens acima */
  --fundo:var(--tinta);
  --superficie:var(--tinta-card);
  --linha:var(--tinta-linha);
  --linha-fraca:#332F2C;
  --texto:var(--papel);
  --texto-fraco:var(--papel-fraco);

  --acao:var(--cobre);
  --acao-forte:var(--cobre-forte);
  --acao-fundo:#2E2621;

  --ok:#B7C795;
  --ok-fundo:#242B1E;
  --erro:#E8A093;
  --erro-fundo:#33201C;

  --raio-card:18px;
  --raio-campo:14px;
  --raio-pilula:999px;
  --raio-tela:28px;
  --toque:44px;

  --fonte-titulo:'Caprasimo', Georgia, serif;
  --fonte-texto:'Figtree', system-ui, -apple-system, sans-serif;
}

/* modo claro: troca so o que o manual manda */
body.claro{
  --fundo:#F5EAD8;
  --superficie:#FFFAF0;
  --linha:#E2D3BB;
  --linha-fraca:#EDE0CB;
  --texto:#201E1D;
  --texto-fraco:#6F6353;
  --acao-fundo:#F6E4D3;
  --ok:#4F5E36;
  --ok-fundo:#E7EBDA;
  --erro:#8A3324;
  --erro-fundo:#F6E0DB;
}

/* apelidos mantidos para nao quebrar regras antigas */
:root{
  --carvao:var(--tinta);
  --creme:var(--papel);
  --verde-fundo:var(--acao-fundo);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--fonte-texto);
  font-size:16px;
  line-height:1.5;
  background:var(--fundo);
  color:var(--texto);
  min-height:100vh;
  display:flex;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

.oculto{display:none !important}

:focus-visible{
  outline:2px solid var(--acao);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* numeros alinhados como em caderno de conta */
.num{
  font-family:var(--fonte-titulo);
  font-weight:400;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}

.marca-texto{
  font-family:var(--fonte-titulo);
  font-weight:400;
  letter-spacing:2px;
}

/* ---------------- splash ---------------- */

.splash{
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.splash .marca-texto{font-size:24px;color:var(--texto-fraco)}

/* ---------------- entrada ---------------- */

.entrada{
  width:100%;
  max-width:430px;
  min-height:100vh;
  padding:24px 22px 40px;
  display:flex;
  align-items:center;
}
.entrada-caixa{width:100%}

.marca-bloco{
  background:var(--tinta);
  padding:34px 22px;
  text-align:center;
  margin-bottom:30px;
}
.marca-bloco .marca-texto{font-size:32px;color:var(--papel)}
.marca-frase{font-size:14px;color:var(--papel-fraco);margin-top:10px}

.form h2,.passo h2{
  font-family:var(--fonte-titulo);
  font-size:26px;
  font-weight:600;
  line-height:1.25;
  margin-bottom:20px;
}

label{
  display:block;
  font-size:15px;
  color:var(--texto-fraco);
  margin-bottom:7px;
}

input,select{
  width:100%;
  padding:15px 14px;
  font-size:17px;
  font-family:inherit;
  color:var(--texto);
  background:var(--superficie);
  border:1px solid var(--linha);
  border-radius:var(--raio-campo);
  margin-bottom:18px;
}
input::placeholder{color:var(--texto-fraco);opacity:0.55}

.dica{
  font-size:15px;
  color:var(--texto-fraco);
  margin:-10px 0 18px;
}

.campo-dinheiro{display:flex;margin-bottom:18px}
.campo-dinheiro .prefixo,
.campo-dinheiro .sufixo{
  display:flex;
  align-items:center;
  padding:0 15px;
  font-size:17px;
  color:var(--texto-fraco);
  background:var(--superficie);
  border:1px solid var(--linha);
}
.campo-dinheiro .prefixo{border-right:none;border-radius:var(--raio-campo) 0 0 6px}
.campo-dinheiro .sufixo{border-left:none;border-radius:0 6px 6px 0}
.campo-dinheiro input{margin-bottom:0;border-radius:0}
.campo-dinheiro .prefixo + input{border-radius:0 6px 6px 0}
.campo-dinheiro input:first-child{border-radius:var(--raio-campo) 0 0 6px}

/* ---------------- botoes ---------------- */

.btn-principal,.btn-secundario{
  width:100%;
  padding:17px;
  font-family:inherit;
  font-size:17px;
  font-weight:600;
  border-radius:var(--raio-campo);
  cursor:pointer;
}
.btn-principal{
  color:var(--papel);
  background:var(--acao);
  border:1px solid var(--acao);
}
.btn-principal:disabled{opacity:0.55;cursor:default}
.btn-secundario{
  color:var(--texto);
  background:transparent;
  border:1px solid var(--linha);
}

.btn-pequeno{
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  color:var(--acao);
  background:transparent;
  border:none;
  cursor:pointer;
  padding:6px 2px;
}

.link-discreto{
  display:inline-block;
  font-family:inherit;
  font-size:15px;
  color:var(--texto-fraco);
  background:transparent;
  border:none;
  text-decoration:underline;
  cursor:pointer;
  padding:8px 0;
  margin-bottom:14px;
}

.linha-link{
  margin-top:16px;
  font-size:16px;
  text-align:center;
  color:var(--texto-fraco);
}
.linha-link a{color:var(--acao)}

.recado{
  font-size:16px;
  line-height:1.5;
  padding:14px;
  border-radius:var(--raio-campo);
  margin-bottom:20px;
}
.recado.erro{background:var(--erro-fundo);color:var(--erro)}
.recado.ok{background:var(--ok-fundo);color:var(--ok)}

/* ---------------- passos ---------------- */

.passo{display:none}
.passo.ativo{display:block}
.passo-conta{
  font-size:14px;
  color:var(--texto-fraco);
  margin-bottom:12px;
}
.passo .btn-secundario{margin-bottom:12px}
.passo .link-discreto{display:block;margin:16px auto 0;text-align:center;width:100%}

/* ---------------- app ---------------- */

.app{
  width:100%;
  max-width:430px;
  min-height:100vh;
  padding-bottom:84px;
}

.topo{
  background:var(--tinta);
  color:var(--papel);
  padding:20px 22px;
}
.topo-marca{
  font-family:var(--fonte-titulo);
  font-size:12px;
  letter-spacing:4px;
  color:#7E7D77;
}
.topo h1{
  font-size:19px;
  font-weight:600;
  margin-top:5px;
  color:var(--papel);
}

/* resumo do dia, so na aba Hoje */
.hoje-resumo{
  padding-bottom:24px;
  margin-bottom:26px;
  border-bottom:1px solid var(--linha);
}
.heroi-rotulo{
  font-size:14px;
  color:var(--texto-fraco);
  margin-bottom:4px;
}
.heroi-valor{
  font-family:var(--fonte-titulo);
  font-size:40px;
  line-height:1;
  color:var(--texto);
}
.heroi-linha{
  display:flex;
  gap:34px;
  margin-top:20px;
}
.heroi-item span{
  display:block;
  font-size:13px;
  color:var(--texto-fraco);
  margin-bottom:2px;
}
.heroi-item strong{font-size:19px;color:var(--texto)}

.conteudo{padding:22px}

.painel{display:none}
.painel.ativo{display:block}

/* ---------------- lancar ---------------- */

.btn-grande{
  width:100%;
  padding:24px;
  font-family:inherit;
  font-size:19px;
  font-weight:600;
  color:var(--papel);
  background:var(--acao);
  border:none;
  border-radius:var(--raio-campo);
  cursor:pointer;
  margin-bottom:28px;
}

/* ---------------- caderno de atendimentos ---------------- */

.secao-titulo{
  font-size:13px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--texto-fraco);
  padding-bottom:10px;
  border-bottom:1px solid var(--linha);
  margin-bottom:2px;
}

.lancamento{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:15px 0;
  border-bottom:1px solid var(--linha-fraca);
}
.lancamento-hora{
  font-size:14px;
  color:var(--texto-fraco);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
  width:42px;
}
.lancamento-meio{flex:1;min-width:0}
.lancamento-cliente{font-size:17px;font-weight:600}
.lancamento-detalhe{
  font-size:14px;
  color:var(--texto-fraco);
  margin-top:3px;
}
.lancamento-fim{text-align:right;flex-shrink:0}
.lancamento-valor{
  font-size:17px;
  font-variant-numeric:tabular-nums;
}
.lancamento-fim button{
  font-family:inherit;
  font-size:13px;
  color:var(--texto-fraco);
  background:transparent;
  border:none;
  text-decoration:underline;
  cursor:pointer;
  padding:6px 0 0;
}

.vazio{
  padding:40px 4px;
  border-top:1px solid var(--linha);
}
.vazio-titulo{font-size:18px;font-weight:600;margin-bottom:8px}
.vazio-texto{font-size:16px;color:var(--texto-fraco);line-height:1.55}

.lista-vazia{
  font-size:16px;
  color:var(--texto-fraco);
  line-height:1.55;
  padding:14px 0;
}

/* ---------------- caixa ---------------- */

.seletor{
  display:flex;
  background:var(--superficie);
  border:1px solid var(--linha);
  border-radius:var(--raio-campo);
  padding:3px;
  margin-bottom:16px;
}
.seletor button{
  flex:1;
  padding:11px 4px;
  font-family:inherit;
  font-size:15px;
  color:var(--texto-fraco);
  background:transparent;
  border:none;
  border-radius:var(--raio-campo);
  cursor:pointer;
}
.seletor button.marcado{
  background:var(--acao);
  color:var(--papel);
  font-weight:600;
}

.linha-periodo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:26px;
}
#periodo-texto{flex:1;text-align:center;font-size:17px;font-weight:600}
.btn-seta{
  font-family:inherit;
  font-size:22px;
  line-height:1;
  width:46px;
  height:46px;
  color:var(--texto);
  background:transparent;
  border:1px solid var(--linha);
  border-radius:var(--raio-campo);
  cursor:pointer;
}

.painel-total{
  padding-bottom:22px;
  border-bottom:1px solid var(--linha);
  margin-bottom:28px;
}
.painel-total .heroi-valor{font-size:40px}

.linha-conta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  font-size:16px;
  padding:13px 0;
  border-bottom:1px solid var(--linha-fraca);
}
.linha-conta .valor{font-variant-numeric:tabular-nums}
.linha-conta small{font-size:14px;color:var(--texto-fraco)}
.linha-conta.destaque{
  font-size:18px;
  font-weight:600;
  border-bottom:none;
  padding-top:16px;
}

.grupo{margin-bottom:30px}
.grupo > .secao-titulo{margin-bottom:0}

.pessoa{
  padding:18px 0;
  border-bottom:1px solid var(--linha-fraca);
}
.pessoa-topo{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}
.pessoa-nome{font-size:18px;font-weight:600}
.pessoa-bruto{font-size:18px;font-variant-numeric:tabular-nums;color:var(--texto-fraco)}
.pessoa-sub{font-size:14px;color:var(--texto-fraco);margin-top:4px}
.pessoa-acerto{
  display:flex;
  justify-content:space-between;
  font-size:16px;
  margin-top:12px;
  padding:11px 13px;
  background:var(--verde-fundo);
  border-radius:var(--raio-campo);
}
.pessoa-acerto strong{font-variant-numeric:tabular-nums}
.pessoa-resto{
  display:flex;
  justify-content:space-between;
  font-size:15px;
  color:var(--texto-fraco);
  margin-top:7px;
  padding:0 13px;
}

.nota{
  font-size:14px;
  color:var(--texto-fraco);
  line-height:1.55;
  padding-top:16px;
  border-top:1px solid var(--linha-fraca);
}

/* ---------------- ajustes ---------------- */

.bloco{
  padding-bottom:28px;
  margin-bottom:28px;
  border-bottom:1px solid var(--linha);
}
.bloco:last-of-type{border-bottom:none}
.bloco h2{font-size:19px;font-weight:600;margin-bottom:6px}
.bloco-nota{
  font-size:15px;
  color:var(--texto-fraco);
  line-height:1.55;
  margin-bottom:18px;
}
.bloco-topo{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.bloco-topo h2{margin-bottom:0}

.item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 0;
  border-bottom:1px solid var(--linha-fraca);
}
.item-nome{font-size:17px}
.item-sub{font-size:14px;color:var(--texto-fraco);margin-top:3px}
.item-acoes{display:flex;gap:18px;flex-shrink:0}
.item-acoes button{
  font-family:inherit;
  font-size:15px;
  color:var(--texto-fraco);
  background:transparent;
  border:none;
  text-decoration:underline;
  cursor:pointer;
  padding:8px 0;
}

.btn-sair{
  width:100%;
  padding:16px;
  font-family:inherit;
  font-size:16px;
  color:var(--texto-fraco);
  background:transparent;
  border:1px solid var(--linha);
  border-radius:var(--raio-campo);
  cursor:pointer;
  margin-top:8px;
}

/* ---------------- ajuda ---------------- */

.faq{border-bottom:1px solid var(--linha-fraca)}
.faq-pergunta{
  width:100%;
  text-align:left;
  font-family:inherit;
  font-size:17px;
  color:var(--texto);
  background:transparent;
  border:none;
  cursor:pointer;
  padding:16px 0;
}
.faq-resposta{
  display:none;
  font-size:16px;
  color:var(--texto-fraco);
  line-height:1.6;
  padding:0 0 16px;
}
.faq.aberta .faq-resposta{display:block}

/* ---------------- barra ---------------- */

.barra{
  position:fixed;
  bottom:0;
  width:100%;
  max-width:430px;
  display:flex;
  background:var(--superficie);
  border-top:1px solid var(--linha);
  padding-bottom:env(safe-area-inset-bottom);
}
.barra-btn{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:11px 4px 13px;
  font-family:inherit;
  font-size:12px;
  color:var(--texto-fraco);
  background:transparent;
  border:none;
  cursor:pointer;
}
.barra-btn svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.barra-btn.ativo{color:var(--acao);font-weight:600}

/* ---------------- chips ---------------- */

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:20px;
}
.chip{
  font-family:inherit;
  font-size:16px;
  padding:12px 17px;
  border-radius:999px;
  border:1px solid var(--linha);
  background:var(--superficie);
  color:var(--texto);
  cursor:pointer;
}
.chip.marcado{
  background:var(--acao);
  border-color:var(--acao);
  color:var(--papel);
  font-weight:600;
}
.chips.atalhos{margin-top:-10px}
.chips.atalhos .chip{font-size:15px;padding:9px 14px;color:var(--texto-fraco)}

.montado{
  font-size:17px;
  padding:2px 0 20px;
  min-height:26px;
}
.montado span{color:var(--texto-fraco)}

/* ---------------- modal ---------------- */

.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:40;
}
.modal-fundo{position:absolute;inset:0;background:rgba(10,10,10,0.5)}
.modal-caixa{
  position:relative;
  width:100%;
  max-width:430px;
  background:var(--fundo);
  border-radius:var(--raio-tela) var(--raio-tela) 0 0;
  padding:24px 22px calc(24px + env(safe-area-inset-bottom));
  max-height:90vh;
  overflow-y:auto;
}
.modal-caixa h2{font-size:20px;font-weight:600;margin-bottom:22px}
.modal-acoes{display:flex;gap:10px;margin-top:10px}
.modal-acoes button{flex:1}

/* ---------------- aviso ---------------- */

.aviso{
  position:fixed;
  left:50%;
  bottom:98px;
  transform:translateX(-50%);
  width:calc(100% - 36px);
  max-width:394px;
  padding:14px 16px;
  border-radius:var(--raio-campo);
  font-size:16px;
  line-height:1.45;
  z-index:60;
  display:none;
}
.aviso.erro{background:var(--erro-fundo);color:var(--erro)}
.aviso.ok{background:var(--ok-fundo);color:var(--ok)}

/* ---------------- tutorial ---------------- */

.tutorial{
  position:fixed;
  inset:0;
  z-index:80;
  background:var(--tinta);
  color:var(--papel);
  display:flex;
  flex-direction:column;
  padding:36px 26px calc(26px + env(safe-area-inset-bottom));
}
.tutorial-corpo{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:430px;
  width:100%;
  margin:0 auto;
}
.tutorial-passo{display:none}
.tutorial-passo.ativo{display:block}
.tutorial-num{
  font-family:var(--fonte-titulo);
  font-size:13px;
  letter-spacing:3px;
  color:#7E7D77;
  margin-bottom:16px;
}
.tutorial-passo h2{
  font-family:var(--fonte-titulo);
  font-size:30px;
  font-weight:600;
  line-height:1.2;
  margin-bottom:16px;
  color:var(--papel);
}
.tutorial-passo p{
  font-size:17px;
  line-height:1.6;
  color:#B9B8B1;
  max-width:34em;
}
.tutorial-pe{
  max-width:430px;
  width:100%;
  margin:0 auto;
}
.tutorial-bolinhas{
  display:flex;
  gap:7px;
  justify-content:center;
  margin-bottom:22px;
}
.tutorial-bolinhas i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#3C3B37;
}
.tutorial-bolinhas i.ativa{background:var(--papel)}
.tutorial-pe .btn-principal{margin-bottom:8px}
.tutorial-pular{
  display:block;
  width:100%;
  font-family:inherit;
  font-size:15px;
  color:var(--papel-fraco);
  background:transparent;
  border:none;
  cursor:pointer;
  padding:12px;
}

/* ---------------- pessoa retratil no caixa ---------------- */
.pessoa{
  padding:0;
  border-bottom:1px solid var(--linha-fraca);
}
.pessoa-cabeca{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:17px 0;
  font-family:inherit;
  text-align:left;
  background:transparent;
  border:none;
  color:var(--texto);
  cursor:pointer;
}
.pessoa-cabeca .esquerda{flex:1;min-width:0}
.pessoa-nome{font-size:17px;font-weight:600}
.pessoa-sub{font-size:14px;color:var(--texto-fraco);margin-top:3px}
.pessoa-valor{
  font-size:17px;
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.pessoa-seta{
  width:18px;
  height:18px;
  flex-shrink:0;
  fill:none;
  stroke:var(--texto-fraco);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform 0.15s ease;
}
.pessoa.aberta .pessoa-seta{transform:rotate(180deg)}

.pessoa-detalhe{display:none;padding:0 0 18px}
.pessoa.aberta .pessoa-detalhe{display:block}

.detalhe-linha{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:15px;
  color:var(--texto-fraco);
  padding:8px 0;
}
.detalhe-linha .valor{font-variant-numeric:tabular-nums}
.detalhe-acerto{
  display:flex;
  justify-content:space-between;
  font-size:16px;
  margin-top:12px;
  padding:12px 14px;
  background:var(--verde-fundo);
  border-radius:var(--raio-campo);
}
.detalhe-acerto strong{font-variant-numeric:tabular-nums}
.detalhe-resto{
  display:flex;
  justify-content:space-between;
  font-size:15px;
  color:var(--texto-fraco);
  margin-top:8px;
  padding:0 14px;
}

/* ---------------- topo da aba Hoje ---------------- */
.linha-topo-hoje{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
}
.linha-topo-hoje .seletor{flex:1;margin-bottom:0}

.btn-canto{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:6px;
  height:40px;
  padding:0 12px;
  font-family:inherit;
  font-size:14px;
  background:transparent;
  border:1px solid var(--linha);
  border-radius:999px;
  color:var(--texto-fraco);
  cursor:pointer;
}
.btn-canto svg{
  width:17px;
  height:17px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.btn-canto .icone-escuro,
.btn-canto .rotulo-escuro{display:none}
body.claro .btn-canto .icone-claro,
body.claro .btn-canto .rotulo-claro{display:none}
body.claro .btn-canto .icone-escuro,
body.claro .btn-canto .rotulo-escuro{display:inline}

.linha-topo-hoje .titulo-aba{min-width:0}

@media (max-width:359px){
  .btn-canto{padding:0 10px;font-size:13px}
}

.lancamento-acoes{display:flex;gap:12px;justify-content:flex-end}

/* ---------------- janela do Hoje ---------------- */


/* ---------------- paywall ---------------- */
#paywall input{
  background:#242320;
  border-color:#3C3B37;
  color:var(--papel);
}
#paywall input::placeholder{color:#7E7D77}

/* ---------------- histórico do cliente ---------------- */
.historico{
  background:var(--verde-fundo);
  border-radius:var(--raio-campo);
  padding:13px 14px;
  margin:-6px 0 20px;
}
.historico-titulo{
  font-size:14px;
  color:var(--texto-fraco);
  margin-bottom:8px;
}
.historico-linha{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:15px;
  padding:3px 0;
}
.historico-linha .valor{font-variant-numeric:tabular-nums;flex-shrink:0}

/* ---------------- título da aba ---------------- */
.titulo-aba{
  flex:1;
  font-size:19px;
  font-weight:600;
}

/* ---------------- histórico ---------------- */
.cabeca-dia{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  color:var(--texto-fraco);
  padding:18px 0 8px;
  text-transform:capitalize;
}
.cabeca-dia span:last-child{
  text-transform:none;
  font-variant-numeric:tabular-nums;
}

/* cinco abas cabem mais apertadas */
.barra-btn{font-size:11px;padding:11px 2px 13px}
.barra-btn svg{width:21px;height:21px}

/* ---------------- fiado ---------------- */
.fiado-bloco{
  background:var(--erro-fundo);
  border-radius:var(--raio-card);
  padding:16px;
  margin-bottom:26px;
}
.fiado-topo{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding-bottom:12px;
  margin-bottom:4px;
  border-bottom:1px solid rgba(140,47,31,0.25);
}
body.claro .fiado-topo{border-bottom-color:rgba(138,51,36,0.22)}
.fiado-topo span{font-size:15px;color:var(--erro)}
.fiado-topo strong{font-size:22px;font-variant-numeric:tabular-nums;color:var(--erro)}
.fiado-linha{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 0;
}
.fiado-linha .item-nome,
.fiado-linha .item-sub{color:var(--erro)}
.fiado-fim{text-align:right;flex-shrink:0}
.fiado-fim .lancamento-valor{display:block;color:var(--erro)}
.fiado-fim button{
  font-family:inherit;
  font-size:14px;
  color:var(--erro);
  background:transparent;
  border:none;
  text-decoration:underline;
  cursor:pointer;
  padding:6px 0 0;
}
.etiqueta-fiado{color:var(--erro)}

/* ---------------- clientes ---------------- */
#busca-cliente{margin-bottom:20px}

.cliente-linha{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 0;
  font-family:inherit;
  text-align:left;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--linha-fraca);
  color:var(--texto);
  cursor:pointer;
}
.cliente-linha .esquerda{flex:1;min-width:0}
.cliente-linha .item-nome,
.cliente-linha .item-sub{display:block}
.cliente-gasto{
  font-size:16px;
  color:var(--texto-fraco);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}

.sumidos-bloco{
  background:var(--verde-fundo);
  border-radius:var(--raio-card);
  padding:16px;
  margin-bottom:26px;
}
.sumidos-titulo{
  font-size:15px;
  color:var(--texto-fraco);
  padding-bottom:10px;
  margin-bottom:2px;
  border-bottom:1px solid var(--linha);
}
.sumido-linha{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
}
.btn-whats{
  flex-shrink:0;
  font-family:inherit;
  font-size:15px;
  padding:9px 15px;
  border-radius:999px;
  background:var(--acao);
  color:var(--papel);
  border:none;
  text-decoration:none;
  cursor:pointer;
}
.btn-whats.vazio{
  background:transparent;
  color:var(--texto-fraco);
  border:1px solid var(--linha);
}

.ficha-numeros{
  display:flex;
  gap:20px;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid var(--linha);
}
.ficha-numeros span{
  display:block;
  font-size:13px;
  color:var(--texto-fraco);
  margin-bottom:3px;
}
.ficha-numeros strong{
  font-size:19px;
  font-variant-numeric:tabular-nums;
}

.como-botao{
  display:block;
  text-align:center;
  text-decoration:none;
  margin-bottom:22px;
}

/* ---------------- tour guiado ---------------- */
.tour{
  position:fixed;
  inset:0;
  z-index:90;
}
.tour-escuro{
  position:absolute;
  inset:0;
}
.tour-holofote{
  position:fixed;
  border-radius:var(--raio-card);
  box-shadow:0 0 0 9999px rgba(8,8,8,0.72);
  pointer-events:none;
  transition:top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.tour-balao{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 32px);
  max-width:398px;
  background:var(--superficie);
  border-radius:12px;
  padding:20px;
  transition:top 0.2s ease;
}
.tour-conta{
  font-size:13px;
  color:var(--texto-fraco);
  margin-bottom:8px;
}
.tour-balao h3{
  font-size:20px;
  font-weight:600;
  line-height:1.3;
  margin-bottom:10px;
}
.tour-balao p:not(.tour-conta){
  font-size:16px;
  line-height:1.55;
  color:var(--texto-fraco);
}
.tour-acoes{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
}
.tour-acoes button{
  font-family:inherit;
  font-size:16px;
  cursor:pointer;
}
.tour-sair{
  flex:1;
  text-align:left;
  font-size:15px;
  color:var(--texto-fraco);
  background:transparent;
  border:none;
  text-decoration:underline;
  padding:10px 0;
}
.tour-voltar{
  padding:12px 18px;
  color:var(--texto);
  background:transparent;
  border:1px solid var(--linha);
  border-radius:var(--raio-campo);
}
.tour-proximo{
  padding:12px 22px;
  font-weight:600;
  color:var(--papel);
  background:var(--acao);
  border:none;
  border-radius:var(--raio-campo);
}

/* ---------------- resumo do período ---------------- */
.resumo-periodo{
  padding-bottom:26px;
  margin-bottom:10px;
  border-bottom:1px solid var(--linha);
}
.resumo-apoio{
  font-size:16px;
  color:var(--texto-fraco);
  margin-top:10px;
}
.resumo-linhas{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 20px;
  margin-top:22px;
}
.resumo-linhas span{
  display:block;
  font-size:13px;
  color:var(--texto-fraco);
  margin-bottom:2px;
}
.resumo-linhas strong{
  font-size:19px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* ---------------- faixa de horário no lançamento ---------------- */
.faixa-horario{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--verde-fundo);
  border-radius:var(--raio-campo);
  padding:13px 14px;
  margin-bottom:18px;
}
.faixa-horario span{font-size:16px}
.faixa-horario button{
  font-family:inherit;
  font-size:15px;
  color:var(--texto-fraco);
  background:transparent;
  border:none;
  text-decoration:underline;
  cursor:pointer;
  padding:4px;
}

.aviso-fluxo{
  background:var(--verde-fundo);
  border-radius:var(--raio-campo);
  padding:12px 14px;
  margin-bottom:22px;
  color:var(--texto);
}

.historico-outro{
  font-family:inherit;
  font-size:15px;
  color:var(--texto-fraco);
  background:transparent;
  border:none;
  text-decoration:underline;
  cursor:pointer;
  padding:10px 0 2px;
}

/* ---------------- divisão no caixa ---------------- */
.divisao{
  display:flex;
  gap:12px;
  margin:14px 0 12px;
}
.divisao-parte{
  flex:1;
  background:var(--verde-fundo);
  border-radius:var(--raio-card);
  padding:15px;
}
.divisao-parte span{
  display:block;
  font-size:14px;
  color:var(--texto-fraco);
  margin-bottom:5px;
}
.divisao-parte strong{
  font-size:23px;
  line-height:1.1;
  display:block;
}
.nota-curta{
  font-size:14px;
  color:var(--texto-fraco);
  line-height:1.55;
}

/* ---------------- dias retráteis ---------------- */
.dia-grupo{border-bottom:1px solid var(--linha-fraca)}
.dia-cabeca{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:17px 0;
  font-family:inherit;
  text-align:left;
  background:transparent;
  border:none;
  color:var(--texto);
  cursor:pointer;
}
.dia-cabeca .esquerda{flex:1;min-width:0}
.dia-nome{
  display:block;
  font-size:17px;
  font-weight:600;
  text-transform:capitalize;
}
.dia-sub{
  display:block;
  font-size:14px;
  color:var(--texto-fraco);
  margin-top:3px;
}
.dia-valor{
  font-size:17px;
  font-variant-numeric:tabular-nums;
  color:var(--texto-fraco);
  flex-shrink:0;
}
.dia-valor.forte{
  font-size:20px;
  font-weight:600;
  color:var(--texto);
}

.dia-trilho{
  display:block;
  height:3px;
  border-radius:2px;
  background:var(--linha-fraca);
  margin-top:9px;
  max-width:190px;
}
.dia-preenche{
  display:block;
  height:100%;
  border-radius:2px;
  background:var(--acao);
  opacity:0.5;
}
.dia-grupo.aberta .dia-preenche{opacity:1}
.dia-grupo .pessoa-seta{transition:transform 0.15s ease}
.dia-grupo.aberta .pessoa-seta{transform:rotate(180deg)}
.dia-corpo{display:none;padding-bottom:10px}
.dia-grupo.aberta .dia-corpo{display:block}
.dia-corpo .lancamento:last-child{border-bottom:none}

/* ---------------- sugestão de cliente ---------------- */
.campo-sugestao{position:relative;margin-bottom:18px}
.campo-sugestao input{margin-bottom:0}
.sugestoes{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  background:var(--superficie);
  border:1px solid var(--linha);
  border-radius:var(--raio-campo);
  overflow:hidden;
  z-index:20;
}
.sugestoes button{
  display:block;
  width:100%;
  text-align:left;
  padding:14px;
  font-family:inherit;
  font-size:17px;
  color:var(--texto);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--linha-fraca);
  cursor:pointer;
}
.sugestoes button:last-child{border-bottom:none}

.painel-app{
  width:100%;
  max-width:760px;
  margin:0 auto;
  min-height:100vh;
  padding:0 20px 40px;
}

.painel-topo{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:26px 0 22px;
}
.painel-topo h1{
  font-family:var(--fonte-titulo);
  font-size:28px;
  font-weight:600;
  margin-top:4px;
}

.painel-app .seletor{margin-bottom:26px}

.visao{display:none}
.visao.ativa{display:block}

.visao h2{
  font-size:18px;
  font-weight:600;
  margin:30px 0 14px;
}
.visao h2:first-child{margin-top:0}

/* ---------------- cartões de número ---------------- */

.cartoes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:8px;
}
.cartao-num{
  background:var(--superficie);
  border:1px solid var(--linha);
  border-radius:var(--raio-card);
  padding:16px;
}
.cartao-num.destaque{
  background:var(--verde-fundo);
  border-color:transparent;
}
.cartao-num span{
  display:block;
  font-size:13px;
  color:var(--texto-fraco);
  margin-bottom:6px;
}
.cartao-num strong{
  display:block;
  font-size:32px;
  line-height:1;
  margin-bottom:6px;
}
.cartao-num small{
  font-size:13px;
  color:var(--texto-fraco);
}

/* ---------------- gráfico de barras ---------------- */

.grafico{
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:190px;
  padding-top:10px;
  margin-bottom:14px;
}
.coluna{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  height:100%;
}
.coluna-corpo{
  flex:1;
  width:100%;
  display:flex;
  align-items:flex-end;
}
.coluna-cheia{
  width:100%;
  background:var(--acao);
  border-radius:5px 5px 0 0;
}
.coluna-num{
  font-size:13px;
  margin-top:7px;
  font-variant-numeric:tabular-nums;
}
.coluna-dia{
  font-size:11px;
  color:var(--texto-fraco);
  margin-top:2px;
}

/* ---------------- linhas de barbearia ---------------- */

.linha-barbearia{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 0;
  border-bottom:1px solid var(--linha-fraca);
}
.linha-barbearia .esquerda{flex:1;min-width:0}
.linha-barbearia .direita{text-align:right;flex-shrink:0}
.linha-barbearia .item-sub{display:block;margin-top:3px}

.pastilha{
  display:inline-block;
  font-size:13px;
  padding:4px 11px;
  border-radius:999px;
}
.pastilha.viva{background:var(--ok-fundo);color:var(--ok)}
.pastilha.morna{background:var(--linha-fraca);color:var(--texto-fraco)}
.pastilha.parada{background:var(--erro-fundo);color:var(--erro)}

/* ---------------- rodapé ---------------- */

.painel-pe{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--linha);
}
.painel-pe a,
.painel-pe button{
  font-family:inherit;
  font-size:15px;
  color:var(--texto-fraco);
  background:transparent;
  border:none;
  text-decoration:underline;
  cursor:pointer;
  padding:8px 0;
}

@media (max-width:520px){
  .cartoes{grid-template-columns:1fr}
  .grafico{height:150px}
  .coluna-dia{font-size:10px}
}

/* ---------------- dia a dia por barbearia ---------------- */
.barbearia-bloco{border-bottom:1px solid var(--linha-fraca)}
.barbearia-bloco .linha-barbearia{border-bottom:none}

.como-botao-linha{
  width:100%;
  font-family:inherit;
  text-align:left;
  background:transparent;
  border:none;
  color:var(--texto);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:14px;
}
.como-botao-linha .pessoa-seta{transition:transform 0.15s ease}
.barbearia-bloco.aberta .pessoa-seta{transform:rotate(180deg)}

.barbearia-detalhe{display:none;padding:4px 0 20px}
.barbearia-bloco.aberta .barbearia-detalhe{display:block}

.tiras{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:96px;
  margin-top:12px;
}
.tira{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  height:100%;
}
.tira-corpo{
  flex:1;
  width:100%;
  display:flex;
  align-items:flex-end;
  background:var(--linha-fraca);
  border-radius:10px;
  overflow:hidden;
}
.tira-cheia{
  width:100%;
  background:var(--acao);
  border-radius:10px;
}
.tira-num{
  font-size:11px;
  margin-top:5px;
  min-height:14px;
  font-variant-numeric:tabular-nums;
}
.tira-dia{
  font-size:10px;
  color:var(--texto-fraco);
}

.rotulo-filtro{
  display:flex;
  align-items:center;
  font-size:15px;
  color:var(--texto-fraco);
  margin-right:2px;
}

/* ---------------- esconder valores ---------------- */
.heroi-linha-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.heroi-linha-topo .heroi-rotulo{margin-bottom:0}

.btn-olho{
  flex-shrink:0;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:-8px -8px 0 0;
  background:transparent;
  border:none;
  color:var(--texto-fraco);
  cursor:pointer;
}
.btn-olho svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.btn-olho .olho-fechado{display:none}
body.sem-valores .btn-olho .olho-aberto{display:none}
body.sem-valores .btn-olho .olho-fechado{display:block}

body.sem-valores .heroi-valor,
body.sem-valores .lancamento-valor,
body.sem-valores .dia-valor,
body.sem-valores .pessoa-valor,
body.sem-valores .pessoa-bruto,
body.sem-valores .cliente-gasto,
body.sem-valores .linha-conta .valor,
body.sem-valores .divisao-parte strong,
body.sem-valores .detalhe-acerto strong,
body.sem-valores .detalhe-resto span:last-child,
body.sem-valores .detalhe-linha .valor,
body.sem-valores .historico-linha .valor,
body.sem-valores .ficha-numeros strong,
body.sem-valores .fiado-topo strong,
body.sem-valores .fiado-fim .lancamento-valor,
body.sem-valores .cartao-num strong{
  filter:blur(9px);
  user-select:none;
  pointer-events:none;
}

/* ---------------- marca ---------------- */
.logo-splash{
  width:200px;
  max-width:60vw;
  height:auto;
}
.logo-entrada{
  display:block;
  width:190px;
  max-width:70%;
  height:auto;
  margin:0 auto 4px;
}
.topo{
  display:flex;
  align-items:center;
  gap:12px;
}
.topo-simbolo{
  width:34px;
  height:34px;
  border-radius:10px;
  flex-shrink:0;
}
.topo h1{margin-top:0}
.painel-marca{display:flex;align-items:center;gap:12px}