/* =====================================================================
   ComReserva — app do cliente
   ---------------------------------------------------------------------
   Escrito para o celular. As cores --cor, --cor-texto e --cor-esc vêm
   do banco (a cor que o salão escolheu) e são injetadas no <head>.

   Os botões, os selos e os quadradinhos de ícone são os mesmos do
   painel administrativo: quem passa de um lado para o outro não sente
   que trocou de sistema.
   ===================================================================== */

:root{
  --tinta:#11221A;
  --texto:#33403A;
  --cinza:#6B7A73;
  --cinza-claro:#9AA8A1;
  --borda:#E4EAE7;
  --borda-forte:#D2DCD7;
  --fundo:#F6F8F7;
  --branco:#fff;

  --verde:var(--cor,#3CCB63);
  --verde-esc:var(--cor-esc,#199A47);
  --verde-fundo:color-mix(in srgb,var(--cor,#3CCB63) 12%,white);
  --verde-borda:color-mix(in srgb,var(--cor,#3CCB63) 30%,white);

  /* A mesma família de cores do painel administrativo */
  --azul:#2E90FA;    --azul-f:#E8F2FE;
  --roxo:#7A5AF8;    --roxo-f:#EFEDFE;
  --laranja:#F79009; --laranja-f:#FEF3E2;
  --rosa:#EE46BC;    --rosa-f:#FDEDF8;
  --ciano:#06AED4;   --ciano-f:#E4F8FC;
  --ambar:#EAB308;   --ambar-f:#FDF6E0;
  --vermelho:#F04438;--vermelho-f:#FEECEA;

  --r:14px;
  --sombra:0 1px 2px rgba(17,34,26,.05);
  --sombra-md:0 6px 20px rgba(17,34,26,.09);
  --barra:66px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Qualquer regra nossa com display: flex ou grid passa por cima do
   hidden do navegador. Sem isto, uma div escondida aparece vazia. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--fundo);color:var(--texto);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom));
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.025em;color:var(--tinta)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit}
.svgi{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;
      stroke-linejoin:round;display:block;flex:0 0 auto}

.envolve{max-width:520px;margin:0 auto;padding:0 15px}

/* =====================================================================
   Botões — copiados do painel administrativo
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:11px;border:1px solid var(--borda-forte);
  background:var(--branco);color:var(--texto);
  font-weight:700;font-size:14px;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 2px rgba(17,34,26,.05);
  transition:transform .14s cubic-bezier(.2,.9,.3,1), box-shadow .16s, background .14s, border-color .14s;
}
.btn:active{transform:scale(.97)}
.btn .svgi{margin:-1px 0}

.btn-verde{
  background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 92%,white),var(--verde));
  border-color:color-mix(in srgb,var(--verde) 80%,black);
  color:var(--cor-texto,#06301A);
}
.btn-escuro{background:linear-gradient(180deg,#1F2A24,var(--tinta));border-color:var(--tinta);color:#fff}
.btn-vermelho{background:linear-gradient(180deg,#F5675C,var(--vermelho));border-color:#D92D20;color:#fff}
.btn-fantasma{background:transparent;border-color:var(--borda);color:var(--cinza);box-shadow:none}

.btn-largo{width:100%}
.btn-grande{padding:14px 22px;font-size:15px;border-radius:12px}
.btn-pequeno{padding:7px 12px;font-size:12.5px;border-radius:9px}
.btn-pequeno .svgi{width:15px;height:15px}
.btn[disabled]{opacity:.45;pointer-events:none;box-shadow:none}

@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(17,34,26,.09)}
  .btn:hover:not([class*="btn-v"]):not(.btn-escuro){background:var(--fundo)}
  .btn-verde:hover{background:var(--verde);box-shadow:0 6px 18px color-mix(in srgb,var(--verde) 34%,transparent)}
  .btn-vermelho:hover{box-shadow:0 6px 18px rgba(240,68,56,.3)}
  .btn-escuro:hover{background:#000}
  .btn-fantasma:hover{background:var(--fundo);color:var(--texto)}
}

/* Quadradinho de ícone colorido — igual ao dos KPIs do painel */
.ic-quadro{
  width:36px;height:36px;flex:0 0 36px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--verde-fundo);color:var(--verde-esc);
}
.ic-quadro.azul   {background:var(--azul-f);   color:var(--azul)}
.ic-quadro.roxo   {background:var(--roxo-f);   color:var(--roxo)}
.ic-quadro.laranja{background:var(--laranja-f);color:#B54708}
.ic-quadro.rosa   {background:var(--rosa-f);   color:#C11574}
.ic-quadro.ciano  {background:var(--ciano-f);  color:#0891B2}
.ic-quadro.ambar  {background:var(--ambar-f);  color:#A16207}
.ic-quadro.vermelho{background:var(--vermelho-f);color:#B42318}
.ic-quadro.cinza  {background:var(--fundo);    color:var(--cinza)}

/* Selos — iguais aos do painel */
.selo{
  display:inline-flex;align-items:center;gap:5px;border-radius:20px;
  padding:3px 10px;font-size:11.5px;font-weight:800;white-space:nowrap;
}
.selo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.selo.verde{background:var(--verde-fundo);color:var(--verde-esc)}
.selo.azul{background:var(--azul-f);color:#175CD3}
.selo.laranja{background:var(--laranja-f);color:#B54708}
.selo.vermelho{background:var(--vermelho-f);color:#B42318}
.selo.roxo{background:var(--roxo-f);color:#5925DC}
.selo.cinza{background:var(--fundo);color:var(--cinza)}

/* =====================================================================
   Cabeçalho e barra de baixo
   ===================================================================== */
.cabeca{
  position:sticky;top:0;z-index:30;background:var(--branco);
  border-bottom:1px solid var(--borda);
}
.cabeca .dentro{
  max-width:520px;margin:0 auto;padding:10px 15px;
  display:flex;align-items:center;gap:11px;
}
.marca-salao{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:var(--texto)}
.marca-salao:active{opacity:.65}
.logo-salao{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;overflow:hidden;
  display:grid;place-items:center;object-fit:cover;
  background:var(--verde);color:var(--cor-texto,#06301A);font-size:13.5px;font-weight:800;
}
.nomes{flex:1;min-width:0}
.nomes b{display:block;font-size:14px;font-weight:800;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nomes small{display:block;font-size:11.5px;color:var(--cinza);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sino{
  position:relative;width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  display:grid;place-items:center;color:var(--cinza);
  border:1px solid var(--borda-forte);background:var(--branco);
}
.sino:active{background:var(--fundo);transform:scale(.94)}
.sino.tem{color:var(--verde-esc);border-color:var(--verde-borda);background:var(--verde-fundo)}
.sino .bolha{
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;background:var(--vermelho);color:#fff;
  font-size:10px;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--branco);
}

.barra-baixo{
  position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--branco);
  border-top:1px solid var(--borda);padding-bottom:env(safe-area-inset-bottom);
}
.barra-baixo .dentro{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.barra-baixo a{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 8px;
  color:var(--cinza-claro);font-size:10.5px;font-weight:700;
}
.barra-baixo a .ic{display:grid;place-items:center;height:24px}
.barra-baixo a.on{color:var(--verde-esc)}
.barra-baixo a:active{background:var(--fundo)}

/* =====================================================================
   Cartão — a peça de que as telas são feitas
   ===================================================================== */
.cartao{
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--r);
  box-shadow:var(--sombra);overflow:hidden;margin-bottom:12px;
}
.cartao-topo{
  display:flex;align-items:center;gap:11px;padding:14px 15px;
  border-bottom:1px solid var(--borda);
}
.cartao-topo .txt{flex:1;min-width:0}
.cartao-topo h2{font-size:14.5px;font-weight:800}
.cartao-topo small{display:block;font-size:12px;color:var(--cinza);margin-top:1px}
.cartao-topo .dir{margin-left:auto;flex:0 0 auto}
.cartao-corpo{padding:15px}

.titulo-tela{padding:18px 0 12px}
.titulo-tela .oi{display:block;font-size:12.5px;color:var(--cinza);font-weight:600}
.titulo-tela h1{font-size:24px;font-weight:800;letter-spacing:-.035em;margin-top:1px}
.titulo-tela.com-volta{display:flex;align-items:center;gap:11px}
.titulo-tela.com-volta h1{font-size:21px}
.volta{
  width:36px;height:36px;flex:0 0 36px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--borda-forte);background:var(--branco);color:var(--texto);
  box-shadow:var(--sombra);
}
.volta:active{transform:scale(.94)}

/* =====================================================================
   O próximo horário
   ===================================================================== */
.proximo{
  display:flex;align-items:center;gap:13px;padding:14px 15px;
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--r);
  border-left:3px solid var(--verde);box-shadow:var(--sombra);margin-bottom:12px;
}
.proximo.esperando{border-left-color:var(--laranja)}
.proximo-dia{
  width:52px;height:56px;flex:0 0 52px;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--verde-fundo);color:var(--verde-esc);
}
.proximo.esperando .proximo-dia{background:var(--laranja-f);color:#B54708}
.proximo-dia b{font-size:22px;font-weight:800;letter-spacing:-.04em;line-height:1}
.proximo-dia span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.proximo-txt{flex:1;min-width:0}
.proximo-linha{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.proximo-rot{
  font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;color:var(--cinza-claro);white-space:nowrap;
}
.proximo-linha .selo{margin-left:auto;flex:0 0 auto;font-size:10.5px;padding:2px 8px}
.proximo-txt b{display:block;font-size:15px;font-weight:800;letter-spacing:-.025em;line-height:1.3}
.proximo-txt small{display:block;font-size:12.5px;color:var(--cinza)}
.proximo-pe{
  display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  padding:11px 15px;border-top:1px solid var(--borda);
}
.proximo-nota{
  padding:11px 15px;border-top:1px solid var(--borda);background:var(--laranja-f);
  font-size:12.5px;color:#B54708;line-height:1.5;
}
.proximo-caixa{
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--r);
  border-left:3px solid var(--verde);box-shadow:var(--sombra);
  margin-bottom:12px;overflow:hidden;
}
.proximo-caixa.esperando{border-left-color:var(--laranja)}
.proximo-caixa .proximo{border:0;box-shadow:none;margin:0;border-radius:0}

/* =====================================================================
   Marcar — os três passos, aqui mesmo na tela inicial
   ===================================================================== */
.marcar{
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--r);
  box-shadow:var(--sombra);overflow:hidden;margin-bottom:12px;
}
.marcar > header{
  display:flex;align-items:center;gap:11px;padding:14px 15px;
  border-bottom:1px solid var(--borda);
}
.marcar > header .txt{flex:1;min-width:0}
.marcar > header b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.02em}
.marcar > header small{display:block;font-size:12px;color:var(--cinza);margin-top:1px}

.etapa{border-bottom:1px solid var(--borda)}
.etapa:last-child{border-bottom:0}
.etapa-cab{
  display:flex;align-items:center;gap:10px;padding:12px 15px;width:100%;
  background:none;border:0;text-align:left;cursor:default;
}
.etapa-n{
  width:23px;height:23px;flex:0 0 23px;border-radius:7px;display:grid;place-items:center;
  background:var(--fundo);color:var(--cinza-claro);font-size:11.5px;font-weight:800;
  border:1px solid var(--borda);
}
.etapa.viva .etapa-n{
  background:var(--verde);color:var(--cor-texto,#06301A);border-color:transparent;
}
.etapa.feita .etapa-n{background:var(--verde-fundo);color:var(--verde-esc);border-color:var(--verde-borda)}
.etapa-txt{flex:1;min-width:0}
.etapa-txt b{display:block;font-size:13.5px;font-weight:700;color:var(--cinza)}
.etapa.viva .etapa-txt b,.etapa.feita .etapa-txt b{color:var(--tinta);font-weight:800}
.etapa-eco{
  display:block;font-size:12.5px;color:var(--verde-esc);font-weight:600;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.etapa-trocar{
  margin-left:auto;flex:0 0 auto;font-size:12px;font-weight:700;color:var(--verde-esc);
  background:none;border:0;padding:4px 2px;cursor:pointer;
}
.etapa-corpo{padding:0 15px 14px}
.etapa.dorme{opacity:.45}
.etapa.dorme .etapa-corpo{display:none}
.etapa.fechada .etapa-corpo{display:none}

/* ---------- Calendário ---------- */
.cal-topo{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cal-topo .mes{
  flex:1;text-align:center;font-size:14.5px;font-weight:800;
  letter-spacing:-.02em;text-transform:capitalize;
}
.cal-nav{
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--borda-forte);background:var(--branco);color:var(--cinza);cursor:pointer;
}
.cal-nav:active{background:var(--fundo);transform:scale(.93)}
.cal-nav[disabled]{opacity:.3;pointer-events:none}

.cal-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-semana span{
  text-align:center;font-size:10px;font-weight:800;color:var(--cinza-claro);
  letter-spacing:.06em;padding:6px 0 3px;
}
.cal-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-dia{
  aspect-ratio:1;border-radius:10px;display:grid;place-items:center;position:relative;
  font-size:13.5px;font-weight:700;border:1px solid transparent;background:none;
  color:var(--cinza-claro);cursor:default;padding:0;
}
.cal-dia.vazio{visibility:hidden}
.cal-dia.livre{
  color:var(--tinta);background:var(--branco);cursor:pointer;
  border-color:color-mix(in srgb,var(--verde) 38%,var(--borda));
}
.cal-dia.livre:active{background:var(--verde-fundo);transform:scale(.9)}
.cal-dia.escolhido{
  background:var(--verde);color:var(--cor-texto,#06301A);border-color:transparent;
  box-shadow:0 2px 8px color-mix(in srgb,var(--verde) 30%,transparent);
}
.cal-dia.meu::after{
  content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;
  background:var(--verde-esc);
}
.cal-dia.escolhido.meu::after{background:var(--cor-texto,#06301A);opacity:.6}
.cal-dia.hoje{box-shadow:inset 0 0 0 2px var(--borda-forte)}
.cal-dia.escolhido.hoje{box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.cal-carregando{grid-column:1/-1;text-align:center;padding:26px;color:var(--cinza-claro);font-size:13px}

.cal-legenda{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:11px;padding-top:11px;
  border-top:1px solid var(--borda);font-size:11.5px;color:var(--cinza);
}
.cal-legenda span{display:flex;align-items:center;gap:6px}
.cal-legenda i{width:10px;height:10px;border-radius:3px;display:block;flex:0 0 auto}
.cal-legenda .livre{border:1.5px solid color-mix(in srgb,var(--verde) 42%,var(--borda));background:var(--branco)}
.cal-legenda .meu{background:var(--verde)}
.cal-legenda .fechado{background:var(--borda-forte)}

/* ---------- Horários ---------- */
.horarios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.horario{
  padding:11px 2px;border-radius:10px;border:1px solid var(--borda-forte);
  background:var(--branco);color:var(--texto);
  font-weight:700;font-size:13.5px;text-align:center;cursor:pointer;
  box-shadow:0 1px 2px rgba(17,34,26,.04);
}
.horario:active{transform:scale(.95)}
.horario.on{
  background:var(--verde);border-color:color-mix(in srgb,var(--verde) 80%,black);
  color:var(--cor-texto,#06301A);
  box-shadow:0 2px 9px color-mix(in srgb,var(--verde) 28%,transparent);
}
.dica-etapa{margin:0;padding:14px 0;text-align:center;color:var(--cinza);font-size:13px;line-height:1.55}

/* ---------- Serviços ---------- */
.servico{
  display:flex;align-items:center;gap:11px;padding:11px 13px;
  border:1px solid var(--borda-forte);border-radius:11px;background:var(--branco);
  margin-bottom:7px;cursor:pointer;
}
.servico:last-of-type{margin-bottom:0}
.servico.on{
  border-color:var(--verde);background:var(--verde-fundo);
  box-shadow:0 2px 8px color-mix(in srgb,var(--verde) 16%,transparent);
}
.servico .marca{
  width:21px;height:21px;flex:0 0 21px;border-radius:6px;border:1.5px solid var(--borda-forte);
  display:grid;place-items:center;color:transparent;background:var(--branco);
}
.servico.on .marca{background:var(--verde);border-color:var(--verde);color:var(--cor-texto,#06301A)}
.servico .marca .svgi{width:13px;height:13px}
.servico .info{flex:1;min-width:0}
.servico .info b{display:block;font-size:14px;font-weight:700}
.servico .info small{display:block;font-size:11.5px;color:var(--cinza-claro)}
.servico .preco{font-weight:800;font-size:14px;white-space:nowrap}

.encaixe{
  margin-top:11px;padding:11px 13px;border-radius:10px;
  background:var(--laranja-f);border:1px solid #FEDF89;color:#B54708;
  font-size:12.5px;line-height:1.5;
}
.encaixe b{display:block;font-weight:800;margin-bottom:2px}
.encaixe.ruim{background:var(--vermelho-f);border-color:#FECDCA;color:#B42318}

/* ---------- Fecho ---------- */
.fecho{padding:14px 15px;border-top:1px solid var(--borda);background:var(--fundo)}
.fecho-conta{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:11px;
}
.fecho-conta span{font-size:12.5px;color:var(--cinza);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fecho-conta b{font-size:19px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;flex:0 0 auto}
.fecho .campo-obs{
  width:100%;padding:10px 13px;border:1px solid var(--borda-forte);border-radius:10px;
  background:var(--branco);font:inherit;font-size:16px;margin-bottom:9px;color:var(--texto);
}
.fecho .campo-obs:focus{outline:2px solid var(--verde);border-color:var(--verde)}

/* =====================================================================
   Pagar, atalhos e listas da tela inicial
   ===================================================================== */
.faixa{
  display:flex;align-items:center;gap:11px;padding:12px 15px;margin-bottom:12px;
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--r);
  box-shadow:var(--sombra);color:var(--texto);
}
.faixa:active{transform:scale(.99)}
.faixa .txt{flex:1;min-width:0}
.faixa .txt b{display:block;font-size:14px;font-weight:800;letter-spacing:-.02em}
.faixa .txt small{display:block;font-size:12px;color:var(--cinza);margin-top:1px}
.faixa .btn{flex:0 0 auto;pointer-events:none}
.faixa > .svgi:last-child{color:var(--cinza-claro)}

.atalhos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.atalho{
  background:var(--branco);border:1px solid var(--borda);border-radius:12px;
  padding:12px 5px 10px;text-align:center;box-shadow:var(--sombra);
}
.atalho:active{transform:scale(.95)}
.atalho .ic-quadro{margin:0 auto 7px}
.atalho span{display:block;font-size:11.5px;font-weight:700;color:var(--texto)}

.linhas{padding:2px 0}
.linha{
  display:flex;align-items:center;gap:11px;padding:11px 15px;
  border-bottom:1px solid var(--borda);font-size:13.5px;
}
.linha:last-child{border-bottom:0}
.linha-data{font-weight:700;color:var(--cinza);flex:0 0 auto;font-variant-numeric:tabular-nums}
.linha-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.nada{text-align:center;padding:30px 20px}
.nada .ic-quadro{width:56px;height:56px;flex-basis:56px;border-radius:17px;margin:0 auto 12px}
.nada h3{font-size:15.5px;font-weight:800;margin-bottom:5px}
.nada p{font-size:13px;color:var(--cinza);line-height:1.55;max-width:26em;margin:0 auto}

/* =====================================================================
   Pagamento
   ===================================================================== */
.conta-aberta{
  padding:17px;border-radius:var(--r);margin-bottom:12px;text-align:center;
  background:var(--branco);border:1px solid var(--borda);box-shadow:var(--sombra);
}
.conta-aberta .rot{
  display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;color:var(--cinza-claro);
}
.conta-aberta .valor{display:block;font-size:32px;font-weight:800;letter-spacing:-.04em;margin:4px 0 2px}
.conta-aberta .sub{display:block;font-size:12.5px;color:var(--cinza)}

.pix-titular{
  display:flex;align-items:baseline;gap:10px;padding-bottom:11px;margin-bottom:11px;
  border-bottom:1px solid var(--borda);
}
.pix-titular span{font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--cinza-claro)}
.pix-titular b{font-size:14px}
.pix-chave-caixa{
  padding:12px 14px;border-radius:11px;margin-bottom:11px;
  background:var(--fundo);border:1px dashed var(--borda-forte);
}
.pix-chave-caixa .rot{
  display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--cinza-claro);margin-bottom:3px;
}
.pix-chave-caixa .valor{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14.5px;word-break:break-all;line-height:1.45;
}
.pix-passos{
  margin:15px 0 0;padding-left:19px;display:grid;gap:6px;list-style:decimal;
  font-size:12.5px;color:var(--cinza);line-height:1.5;
}
.pix-passos::marker{color:var(--verde-esc)}
.pix-passos b{color:var(--texto)}
.pix-recado{
  display:flex;gap:8px;align-items:flex-start;margin:13px 0 0;padding:11px 13px;
  border-radius:10px;background:var(--azul-f);border:1px solid #C9E2F8;color:#1E5F92;
  font-size:12.5px;line-height:1.5;
}
.rodape-fino{
  display:flex;gap:8px;align-items:flex-start;padding:2px 4px 8px;
  font-size:11.5px;color:var(--cinza-claro);line-height:1.5;
}

/* =====================================================================
   Avisos
   ===================================================================== */
.aviso-item{
  display:flex;align-items:flex-start;gap:11px;padding:13px 15px;
  border-bottom:1px solid var(--borda);color:var(--texto);
}
.aviso-item:last-child{border-bottom:0}
.aviso-item:active{background:var(--fundo)}
.aviso-item .ic-quadro{width:32px;height:32px;flex-basis:32px;border-radius:10px}
.aviso-txt{flex:1;min-width:0}
.aviso-txt b{display:block;font-size:13.5px;font-weight:700;line-height:1.4}
.aviso-txt small{display:block;font-size:12.5px;color:var(--cinza);line-height:1.5;margin-top:2px}
.aviso-txt time{display:block;font-size:11px;color:var(--cinza-claro);margin-top:4px}
.aviso-item > .svgi{color:var(--cinza-claro);margin-top:8px}

/* =====================================================================
   Recados e folhas
   ===================================================================== */
.recado{
  display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:11px;
  margin:12px 0;font-size:13px;line-height:1.5;
}
.recado.ok{background:var(--verde-fundo);border:1px solid var(--verde-borda);color:var(--verde-esc)}
.recado.erro{background:var(--vermelho-f);border:1px solid #FECDCA;color:#B42318}
.recado.info{background:var(--azul-f);border:1px solid #C9E2F8;color:#1E5F92}
.recado.atencao{background:var(--laranja-f);border:1px solid #FEDF89;color:#B54708}
.recado b{font-weight:800}

.veu{
  position:fixed;inset:0;background:rgba(17,34,26,.5);z-index:80;
  display:none;align-items:flex-end;justify-content:center;
}
.veu.mostra{display:flex}
.folha{
  background:var(--branco);width:100%;max-width:520px;
  border-radius:20px 20px 0 0;padding:8px 18px calc(22px + env(safe-area-inset-bottom));
  max-height:88vh;overflow-y:auto;animation:sobe .24s cubic-bezier(.2,.9,.3,1);
}
@keyframes sobe{from{transform:translateY(100%)}to{transform:none}}
.pega{width:38px;height:4px;border-radius:99px;background:var(--borda-forte);margin:0 auto 16px}
.folha h3{font-size:17px;font-weight:800;margin-bottom:5px}
.folha .sub{font-size:13.5px;color:var(--cinza);margin-bottom:18px;line-height:1.5}
.folha .pronto-ic{
  width:64px;height:64px;margin:2px auto 13px;border-radius:50%;display:grid;place-items:center;
  background:var(--verde-fundo);color:var(--verde-esc);
}
.folha .pronto-ic.espera{background:var(--laranja-f);color:#B54708}
.resumo-conf{
  padding:13px 14px;border-radius:11px;background:var(--fundo);
  border:1px solid var(--borda);font-size:13.5px;line-height:1.55;margin-bottom:16px;
}
.resumo-conf > b{display:block;font-size:15px;font-weight:800;margin-bottom:2px}
.resumo-conf span{display:block;color:var(--cinza)}

.carregando{
  width:17px;height:17px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;display:inline-block;animation:gira .6s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .carregando{animation-duration:1.6s}
  .folha{animation:none}
}

/* Campos não podem ter menos de 16px: abaixo disso o iPhone dá zoom
   sozinho quando o dedo encosta. */
input,select,textarea{font-size:16px}
@media (min-width:901px) and (hover:hover){ input,select,textarea{font-size:14px} }
/* ---------- Chat ---------- */
.chat-tela{
  position:fixed;inset:0;background:var(--fundo);z-index:60;display:flex;flex-direction:column;
}
.chat-topo{
  background:var(--branco);border-bottom:1px solid var(--borda);
  padding:calc(11px + env(safe-area-inset-top)) 14px 11px;
  display:flex;align-items:center;gap:11px;flex:0 0 auto;
}
.chat-topo .voltar{background:none;border:0;color:var(--texto);cursor:pointer;padding:0 3px;
  display:grid;place-items:center}
.chat-topo .quem b{display:block;font-size:14.5px;font-weight:800}
.chat-topo .quem small{font-size:11.5px;color:#12B76A;font-weight:600}
.chat-topo .acoes{margin-left:auto;display:flex;gap:7px}

.chat-corpo{
  flex:1;overflow-y:auto;padding:16px 14px;
  display:flex;flex-direction:column;gap:9px;
  -webkit-overflow-scrolling:touch;
}
.msg{max-width:82%;display:flex;flex-direction:column;gap:5px}
.msg.eu{align-self:flex-end;align-items:flex-end}
.msg.robo{align-self:flex-start}
.bolha{
  padding:11px 14px;border-radius:17px;font-size:14.5px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;
}
.msg.robo .bolha{background:var(--branco);border:1px solid var(--borda);border-bottom-left-radius:5px}
.msg.eu .bolha{background:var(--cor);color:var(--cor-texto);border-bottom-right-radius:5px}
.msg .hora{font-size:10.5px;color:var(--cinza-claro);padding:0 5px}

.digitando{
  align-self:flex-start;background:var(--branco);border:1px solid var(--borda);
  border-radius:17px;border-bottom-left-radius:5px;padding:14px 16px;display:flex;gap:4px;
}
.digitando i{width:7px;height:7px;border-radius:50%;background:var(--cinza-claro);animation:pula 1.3s infinite}
.digitando i:nth-child(2){animation-delay:.18s}
.digitando i:nth-child(3){animation-delay:.36s}
@keyframes pula{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

.chat-botoes{display:flex;flex-wrap:wrap;gap:7px;margin-top:3px}
.chat-botao{
  padding:8px 14px;border-radius:20px;border:1.5px solid var(--cor);
  background:var(--branco);color:var(--cor-esc);font-size:13px;font-weight:700;cursor:pointer;
}
.chat-botao:active{background:var(--cor);color:var(--cor-texto)}

.chat-pe{
  background:var(--branco);border-top:1px solid var(--borda);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  display:flex;gap:9px;align-items:flex-end;flex:0 0 auto;
}
.chat-pe textarea{
  flex:1;border:1px solid var(--borda);border-radius:20px;padding:11px 15px;
  resize:none;max-height:110px;font-size:15px;line-height:1.4;background:var(--fundo);
}
.chat-pe textarea:focus{outline:none;border-color:var(--cor);background:var(--branco)}
.chat-enviar{
  width:44px;height:44px;border-radius:50%;border:0;background:var(--cor);color:var(--cor-texto);
  font-size:17px;cursor:pointer;flex:0 0 44px;display:grid;place-items:center;
}
.chat-enviar:disabled{opacity:.4}

/* ---------- PIX / redes ---------- */
.copiar-caixa{
  display:flex;align-items:center;gap:10px;background:var(--fundo);
  border:1px dashed var(--borda);border-radius:13px;padding:12px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  word-break:break-all;line-height:1.5;
}
.rede{
  display:flex;align-items:center;gap:12px;padding:13px 15px;
  border:1px solid var(--borda);border-radius:14px;background:var(--branco);margin-bottom:9px;
}
.rede .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:17px;flex:0 0 38px}
.rede .txt{flex:1;min-width:0}
.rede .txt b{display:block;font-size:14px;font-weight:700}
.rede .txt small{font-size:12px;color:var(--cinza-claro)}
.rede .seta{color:var(--cinza-claro);font-size:16px}

/* ---------- Formulários ---------- */
.campo{margin-bottom:14px}
.campo label{display:block;font-weight:700;font-size:12.5px;margin-bottom:6px}
.campo input,.campo select,.campo textarea{
  width:100%;padding:13px 15px;border:1px solid var(--borda);border-radius:13px;
  background:var(--branco);font-size:16px;   /* 16px evita o zoom automático no iPhone */
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--cor);box-shadow:0 0 0 3px color-mix(in srgb,var(--cor) 22%,transparent);
}
.campo .dica{font-size:12px;color:var(--cinza-claro);margin-top:6px;line-height:1.45}

/* ---------- A porta de entrada ----------
   Muitos salões usam este endereço como link da bio. Quem chega nunca
   viu o sistema, então a tela apresenta antes de pedir qualquer coisa —
   e os dois botões ficam grandes o bastante para ninguém procurar. */
.porta{
  min-height:100vh;min-height:100dvh;background:var(--cor);
  display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 0;
}

.porta-topo{flex:0 0 auto;text-align:center;padding:44px 22px 28px}
.porta-marca{
  width:96px;height:96px;border-radius:29px;margin:0 auto 16px;
  background:rgba(255,255,255,.22);backdrop-filter:blur(6px);
  display:grid;place-items:center;overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.16);
}
.porta-marca img{width:100%;height:100%;object-fit:cover}
.porta-marca span{font-size:38px;font-weight:800;color:var(--cor-texto)}
.porta-topo h1{
  font-size:26px;font-weight:800;color:var(--cor-texto);
  letter-spacing:-.5px;line-height:1.2;margin:0;
}
.porta-topo p{
  margin:9px auto 0;font-size:14.5px;color:var(--cor-texto);
  opacity:.82;line-height:1.5;max-width:26em;
}

.porta-folha{
  flex:1;background:var(--branco);border-radius:28px 28px 0 0;
  padding:26px 22px calc(26px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 30px rgba(0,0,0,.12);
}

.porta-nota{
  margin:16px 0 0;text-align:center;font-size:13px;
  color:var(--cinza);line-height:1.55;
}
.porta-nota b{color:var(--texto)}

/* O que a pessoa ganha, dito no que ela faz. */
.porta-lista{
  display:grid;gap:2px;margin-top:24px;
  border-top:1px solid var(--borda);padding-top:8px;
}
.pl-item{display:flex;gap:13px;align-items:flex-start;padding:13px 2px}
.pl-ic{
  width:38px;height:38px;flex:0 0 38px;border-radius:12px;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--cor) 14%, transparent);
  color:var(--cor-esc);
}
.pl-item b{display:block;font-size:14.5px;line-height:1.35}
.pl-item span:not(.pl-ic){
  display:block;font-size:13px;color:var(--cinza);margin-top:2px;line-height:1.5;
}

.porta-zap{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:18px;padding:13px;border-radius:13px;
  border:1px solid var(--borda);color:var(--cinza);
  font-size:13.5px;font-weight:600;text-decoration:none;
}
.porta-zap:hover{border-color:var(--cor);color:var(--cor-esc)}

/* O segundo botão da porta não pode parecer desligado: quem já é
   cliente tem de achá-lo tão rápido quanto quem vai se cadastrar. */
.porta-folha .btn-grande:not(.btn-verde){
  background:color-mix(in srgb, var(--cor) 11%, var(--branco));
  border-color:color-mix(in srgb, var(--cor) 34%, transparent);
  color:var(--cor-esc);
}
.porta-folha .btn-grande:not(.btn-verde):hover{
  background:color-mix(in srgb, var(--cor) 17%, var(--branco));
  border-color:var(--cor);
}

.porta-volta{
  display:block;margin-top:16px;text-align:center;
  font-size:14px;font-weight:700;color:var(--cor-esc);text-decoration:none;
}

/* A opacidade fica só na assinatura, nunca no fundo: baixar o fundo
   junto deixava o verde do body vazar por baixo. */
.porta-pe{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--borda);
  opacity:.36;filter:grayscale(1);
}
.porta-pe span{font-size:11.5px;color:var(--cinza)}

@media (min-width:760px){
  .porta{align-items:center;justify-content:center;padding:40px 20px}
  .porta-topo{padding:0 0 26px}
  .porta-folha{
    flex:0 0 auto;width:100%;max-width:440px;border-radius:24px;
    padding:26px;box-shadow:0 20px 50px rgba(0,0,0,.18);
  }
}

/* ---------- Diversos ---------- */
.veu{
  position:fixed;inset:0;background:rgba(11,31,19,.5);z-index:70;
  display:none;align-items:flex-end;justify-content:center;
}
.veu.mostra{display:flex}
.folha{
  background:var(--branco);border-radius:24px 24px 0 0;width:100%;max-width:520px;
  max-height:88vh;overflow-y:auto;padding:8px 18px calc(22px + env(safe-area-inset-bottom));
  animation:sobe .26s cubic-bezier(.2,.9,.3,1);
}
@keyframes sobe{from{transform:translateY(100%)}to{transform:none}}
.folha .pega{width:38px;height:4px;border-radius:4px;background:var(--borda);margin:8px auto 16px}
.folha h3{font-size:17px;font-weight:800;margin-bottom:6px}
.folha p.sub{margin:0 0 18px;color:var(--cinza);font-size:13.5px;line-height:1.5}

.carregando{
  display:inline-block;width:17px;height:17px;border:2.5px solid rgba(255,255,255,.35);
  border-top-color:currentColor;border-radius:50%;animation:gira .7s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}

@media (min-width:560px){
  body{padding-bottom:24px}
  .barra-baixo{position:static;border-top:0;border-radius:0 0 var(--r) var(--r);margin-top:20px}
  .resumo-fixo{bottom:0}
}

/* ---------- Cartela de fidelidade ---------- */
/* Títulos de seção soltos (fora de cartão) */
.secao-titulo{display:flex;align-items:center;gap:10px;margin:18px 0 9px}
.secao-titulo h2{font-size:14px;font-weight:800;color:var(--cinza)}
.secao-titulo a{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--verde-esc)}

/* Linha de horário de funcionamento com o dia de hoje em destaque */
.linha.hoje{background:var(--verde-fundo)}
.linha.hoje .linha-nome{font-weight:800;color:var(--tinta)}

/* Pílulas do histórico */
.pilula{
  display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;
  font-size:11.5px;font-weight:700;background:var(--fundo);color:var(--cinza);
  border:1px solid var(--borda);cursor:pointer;
}
.pilula.forte{background:var(--verde-fundo);color:var(--verde-esc);border-color:var(--verde-borda)}

/* Redes sociais: fileira curta, só o que o salão tem */
.redes{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-bottom:12px}
.redes .rede{
  background:var(--branco);border:1px solid var(--borda);border-radius:12px;
  padding:12px 5px 10px;text-align:center;box-shadow:var(--sombra);
}
.redes .rede:active{transform:scale(.95)}
.redes .ic-quadro{margin:0 auto 7px}
.redes .rede span:last-child{display:block;font-size:11.5px;font-weight:700;color:var(--texto)}

/* =====================================================================
   Blocos coloridos — os mesmos do painel do salão
   ---------------------------------------------------------------------
   Degradê na diagonal, halo claro no topo, ícone num quadrado
   translúcido e seta no canto. É o que dá o brilho sem estourar a cor.
   ===================================================================== */
.blocos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.blocos .largo{grid-column:1/-1}

.bloco{
  position:relative;display:flex;flex-direction:column;gap:2px;
  border-radius:16px;padding:14px 15px 13px;border:0;
  color:#fff;text-align:left;overflow:hidden;
  background:linear-gradient(150deg,var(--b1),var(--b2));
  box-shadow:0 6px 20px -6px var(--brilho), 0 2px 6px rgba(17,34,26,.1);
  transition:transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .22s;
}
.bloco:active{transform:scale(.97)}
.bloco::after{
  content:"";position:absolute;inset:-40% -20% auto -20%;height:130%;
  background:radial-gradient(60% 60% at 30% 0%,rgba(255,255,255,.30),transparent 70%);
  pointer-events:none;
}
.bloco .ico-topo{
  width:32px;height:32px;border-radius:10px;margin-bottom:8px;
  background:rgba(255,255,255,.22);display:grid;place-items:center;
  backdrop-filter:blur(3px);
}
.bloco .rot{
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  opacity:.86;line-height:1.3;
}
.bloco .tit{font-size:16px;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-top:2px}
.bloco .num{font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1.05;margin-top:2px;
  font-variant-numeric:tabular-nums}
.bloco .pe{font-size:11.5px;opacity:.86;margin-top:4px;line-height:1.4}
.bloco .seta{position:absolute;right:13px;bottom:12px;opacity:.6}

.bloco.verde   {--b1:#34D95A;--b2:#12A63C;--brilho:rgba(28,190,70,.5)}
.bloco.roxo    {--b1:#9B6BFF;--b2:#6739E0;--brilho:rgba(122,90,248,.5)}
.bloco.azul    {--b1:#43A5FF;--b2:#1668D8;--brilho:rgba(46,144,250,.5)}
.bloco.ciano   {--b1:#2BC6DE;--b2:#0A8EA8;--brilho:rgba(6,174,212,.48)}
.bloco.rosa    {--b1:#F45FC8;--b2:#C4249B;--brilho:rgba(238,70,188,.48)}
.bloco.laranja {--b1:#FFAE3B;--b2:#E07B06;--brilho:rgba(247,144,9,.5)}
.bloco.vermelho{--b1:#FF6B5E;--b2:#D92D20;--brilho:rgba(240,68,56,.55)}
.bloco.escuro  {--b1:#3A4A42;--b2:#16241D;--brilho:rgba(17,34,26,.45)}

/* Sem nada para dizer, o bloco fica calmo — igual ao do painel */
.bloco.calmo{
  background:var(--branco);color:var(--texto);
  border:1px solid var(--borda);box-shadow:var(--sombra);
}
.bloco.calmo::after{display:none}
.bloco.calmo .ico-topo{background:var(--fundo);color:var(--cinza)}
.bloco.calmo .rot{color:var(--cinza-claro);opacity:1}
.bloco.calmo .tit,.bloco.calmo .num{color:var(--tinta)}
.bloco.calmo .pe{color:var(--cinza);opacity:1}
.bloco.calmo .seta{color:var(--cinza-claro)}

@media(max-width:340px){ .blocos{grid-template-columns:1fr} }

/* ---------- Pedir corrida ---------- */
.corridas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.corrida{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:13px 8px;border-radius:12px;border:1px solid var(--borda-forte);
  background:var(--branco);box-shadow:var(--sombra);
}
.corrida:active{transform:scale(.96)}
.corrida-marca{font-size:17px;font-weight:800;letter-spacing:-.04em}
.corrida small{font-size:11.5px;color:var(--cinza)}
.corrida.uber{background:#000;border-color:#000;color:#fff}
.corrida.uber small{color:rgba(255,255,255,.7)}
.corrida.noventa{background:#FFE600;border-color:#E6CF00;color:#111}
.corrida.noventa small{color:rgba(0,0,0,.6)}
.corridas:has(.corrida:only-child){grid-template-columns:1fr}

/* Pagamento em verde mais fundo, para não se confundir com o WhatsApp */
.bloco.verde-fundo{--b1:#1FA855;--b2:#0B6B36;--brilho:rgba(15,110,55,.5)}
.bloco.preto     {--b1:#3A4A42;--b2:#101A15;--brilho:rgba(16,26,21,.5)}
.bloco.marinho   {--b1:#1E4B8F;--b2:#0B2447;--brilho:rgba(15,45,90,.55)}
/* As cores das corridas são as das marcas — é assim que a pessoa acha
   o botão sem ler. */
.bloco.grafite   {--b1:#2C2C2E;--b2:#000;--brilho:rgba(0,0,0,.45)}
.bloco.amarelo   {--b1:#FFE600;--b2:#E8C400;--brilho:rgba(232,196,0,.5);color:#1A1A00}
.bloco.amarelo .ico-topo{background:rgba(0,0,0,.12)}
.bloco.amarelo .rot,.bloco.amarelo .pe{opacity:.72}
.bloco.amarelo::after{background:radial-gradient(60% 60% at 30% 0%,rgba(255,255,255,.45),transparent 70%)}

/* ---------- O botão de agendar ---------- */
.agendar-botao{
  display:flex;align-items:center;gap:13px;width:100%;margin-bottom:12px;
  padding:16px 17px;border-radius:16px;border:0;color:var(--cor-texto,#06301A);
  background:linear-gradient(150deg,color-mix(in srgb,var(--cor) 92%,white),var(--cor));
  box-shadow:0 6px 20px -6px color-mix(in srgb,var(--cor) 46%,transparent),
             0 2px 6px rgba(17,34,26,.1);
  position:relative;overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .22s;
}
.agendar-botao::after{
  content:"";position:absolute;inset:-40% -20% auto -20%;height:130%;
  background:radial-gradient(60% 60% at 30% 0%,rgba(255,255,255,.3),transparent 70%);
  pointer-events:none;
}
.agendar-botao:active{transform:scale(.98)}
.agendar-botao .ico{
  width:44px;height:44px;flex:0 0 44px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.24);backdrop-filter:blur(3px);
}
.agendar-botao .txt{flex:1;min-width:0}
.agendar-botao .txt b{display:block;font-size:17px;font-weight:800;letter-spacing:-.03em}
.agendar-botao .txt small{display:block;font-size:12.5px;opacity:.82;margin-top:1px}
.agendar-botao > .svgi:last-child{opacity:.7}

/* =====================================================================
   Cartela de fidelidade
   ---------------------------------------------------------------------
   Uma trilha em vez de bolinhas soltas: dá para ver de longe quanto já
   andou e quanto falta. O último ponto é o prêmio.
   ===================================================================== */
.cartela{
  border-radius:16px;overflow:hidden;margin-bottom:12px;
  background:var(--branco);
  border:1px solid color-mix(in srgb,var(--cor) 30%,var(--borda));
  box-shadow:var(--sombra);
}
.cartela-topo{
  display:flex;align-items:center;gap:11px;padding:13px 15px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--cor) 12%,white),var(--branco) 72%);
  border-bottom:1px solid color-mix(in srgb,var(--cor) 18%,var(--borda));
}
.cartela-ic{
  width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;
  background:var(--cor);color:var(--cor-texto,#06301A);
}
.cartela-txt{flex:1;min-width:0}
.cartela-txt .rot{
  display:block;font-size:10px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cinza-claro);
}
.cartela-txt b{
  display:block;font-size:15px;font-weight:800;letter-spacing:-.025em;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cartela-conta{
  flex:0 0 auto;font-size:22px;font-weight:800;letter-spacing:-.04em;
  color:var(--verde-esc);font-variant-numeric:tabular-nums;
}
.cartela-conta small{font-size:13px;opacity:.55;font-weight:700}

.cartela-corpo{padding:14px 15px 15px}
.cartela-frase{font-size:13.5px;color:var(--cinza);line-height:1.5;margin-bottom:14px}
.cartela-frase b{color:var(--tinta);font-weight:800}

/* A trilha: uma barra que enche por baixo dos pontos */
.cartela-trilho{position:relative;height:30px;display:flex;align-items:center}
.cartela-trilho::before{
  content:"";position:absolute;left:13px;right:13px;height:5px;border-radius:99px;
  background:var(--fundo);border:1px solid var(--borda);
}
.cartela-cheia{
  position:absolute;left:13px;height:5px;border-radius:99px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--cor) 70%,white),var(--cor));
  max-width:calc(100% - 26px);
  transition:width .8s cubic-bezier(.2,.8,.3,1);
}
.cartela-pontos{
  position:relative;display:flex;justify-content:space-between;width:100%;
}
.ponto{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--branco);border:2px solid var(--borda);color:var(--cinza-claro);
  font-size:10px;font-weight:800;flex:0 0 auto;
}
.ponto.feito{
  background:var(--cor);border-color:var(--cor);color:var(--cor-texto,#06301A);
}
.ponto.ultimo{
  width:30px;height:30px;border-style:dashed;
  border-color:color-mix(in srgb,var(--cor) 55%,white);color:var(--verde-esc);
}
.ponto.ultimo.feito{border-style:solid;background:var(--cor);color:var(--cor-texto,#06301A)}

.cartela-pe{
  display:flex;align-items:center;gap:6px;margin-top:13px;
  font-size:12px;color:var(--cinza);
}

/* Completa: vira o único bloco cheio de cor da tela */
.cartela.completa{
  border:0;color:#fff;
  background:linear-gradient(145deg,#34D95A,#0B7A2B);
  box-shadow:0 10px 28px -8px rgba(28,190,70,.55);
}
.cartela.completa .cartela-topo{
  background:rgba(255,255,255,.12);border-bottom-color:rgba(255,255,255,.2);
}
.cartela.completa .cartela-ic{background:rgba(255,255,255,.24);color:#fff}
.cartela.completa .cartela-txt .rot{color:rgba(255,255,255,.8)}
.cartela.completa .cartela-txt b{color:#fff}
.cartela.completa .cartela-conta{color:#fff}
.cartela.completa .cartela-frase{color:rgba(255,255,255,.9)}
.cartela.completa .cartela-frase b{color:#fff}
.cartela.completa .cartela-trilho::before{background:rgba(255,255,255,.2);border-color:transparent}
.cartela.completa .cartela-cheia{background:#fff}
.cartela.completa .ponto{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.45);color:#fff}
.cartela.completa .ponto.feito{background:#fff;border-color:#fff;color:#0B7A2B}
.cartela.completa .ponto.ultimo{border-style:solid}

/* =====================================================================
   Histórico
   ---------------------------------------------------------------------
   Cada visita é uma ficha com a data à esquerda, feito extrato. A tarja
   colorida na borda diz de longe se deu certo ou não.
   ===================================================================== */
.resumo-historico{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--r);
  box-shadow:var(--sombra);overflow:hidden;margin-bottom:10px;
}
.resumo-historico > div{padding:14px 10px;text-align:center;border-right:1px solid var(--borda)}
.resumo-historico > div:last-child{border-right:0}
.resumo-historico b{
  display:block;font-size:19px;font-weight:800;letter-spacing:-.045em;
  color:var(--verde-esc);line-height:1.15;white-space:nowrap;
}
/* Valores grandes encolhem em vez de quebrar em duas linhas */
.resumo-historico b:has(+ span){font-size:clamp(14px,4.6vw,19px)}
.resumo-historico b.curto{
  font-size:14px;color:var(--tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.resumo-historico span{
  display:block;font-size:10.5px;font-weight:700;color:var(--cinza-claro);
  text-transform:uppercase;letter-spacing:.05em;margin-top:4px;
}
.desde{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;color:var(--cinza);margin-bottom:16px;
}
.desde .svgi{color:var(--laranja)}

.mes-linha{
  display:flex;align-items:baseline;gap:10px;margin:18px 2px 9px;
}
.mes-linha b{font-size:13px;font-weight:800;color:var(--cinza)}
.mes-linha span{
  margin-left:auto;font-size:12.5px;font-weight:700;color:var(--cinza-claro);
  font-variant-numeric:tabular-nums;
}

.visita{
  background:var(--branco);border:1px solid var(--borda);border-radius:13px;
  border-left:3px solid var(--borda-forte);box-shadow:var(--sombra);
  overflow:hidden;margin-bottom:8px;
}
.visita.t-verde   {border-left-color:var(--verde)}
.visita.t-azul    {border-left-color:var(--azul)}
.visita.t-laranja {border-left-color:var(--laranja)}
.visita.t-roxo    {border-left-color:var(--roxo)}
.visita.t-vermelho{border-left-color:var(--vermelho)}

.visita-topo{display:flex;align-items:flex-start;gap:12px;padding:12px 14px}
.visita-data{
  width:42px;flex:0 0 42px;text-align:center;padding-top:1px;
}
.visita-data b{
  display:block;font-size:19px;font-weight:800;letter-spacing:-.04em;
  color:var(--tinta);line-height:1;font-variant-numeric:tabular-nums;
}
.visita-data span{
  display:block;font-size:9.5px;font-weight:800;color:var(--cinza-claro);
  text-transform:uppercase;letter-spacing:.06em;margin-top:2px;
}
.visita-txt{flex:1;min-width:0}
.visita-txt b{
  display:block;font-size:14px;font-weight:700;line-height:1.35;
}
.visita-txt span{display:block;font-size:12px;color:var(--cinza);margin-top:2px}
.visita-extras{color:var(--verde-esc) !important;font-weight:600}

.visita-valor{flex:0 0 auto;text-align:right;display:grid;gap:4px;justify-items:end}
.visita-valor b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.visita-valor .desconto{font-size:11px;color:var(--verde-esc);font-weight:700}
.visita-valor .premio{
  display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;
  color:var(--verde-esc);
}
.visita-valor .selo{font-size:10px;padding:2px 8px}

.visita-nota{
  padding:0 14px 12px 68px;font-size:12px;color:var(--cinza);line-height:1.5;
  margin-top:-4px;
}
.visita-pe{
  display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px;
  border-top:1px solid var(--borda);background:var(--fundo);
}

@media(max-width:380px){
  .visita-nota{padding-left:14px}
  .visita-topo{flex-wrap:wrap}
  .visita-valor{width:100%;flex-direction:row;justify-items:start;
    justify-content:flex-start;gap:8px;align-items:center}
}

/* =====================================================================
   Computador
   ---------------------------------------------------------------------
   O app nasceu para o celular e continua assim. No computador ele não
   vira outro produto: ganha ar, o menu sai do rodapé e vai para a
   lateral, e o conteúdo se divide em duas colunas — porque uma coluna
   de 520px no meio de uma tela de 27 polegadas parece defeito.
   ===================================================================== */
@media (min-width:900px){

  /* No HTML o menu vem depois do conteúdo, porque no celular ele é
     uma barra fixa no rodapé. No computador ele sobe para logo abaixo
     do cabeçalho — a ordem visual muda, a do documento não. */
  body{padding-bottom:0;display:flex;flex-direction:column;min-height:100vh}
  .cabeca{order:1}
  .barra-baixo{order:2}
  .envolve{order:3;flex:1}

  /* Cabeçalho ocupando a largura toda */
  .cabeca .dentro{max-width:1080px;padding:14px 28px}
  .logo-salao{width:42px;height:42px;flex-basis:42px;border-radius:13px}
  .nomes b{font-size:16px}
  .nomes small{font-size:12.5px}

  /* O menu deixa o rodapé e vira uma barra dentro do cabeçalho */
  .barra-baixo{
    position:static;border-top:0;border-bottom:1px solid var(--borda);
    background:var(--branco);
  }
  .barra-baixo .dentro{
    max-width:1080px;padding:0 28px;display:flex;gap:4px;
    grid-template-columns:none;
  }
  .barra-baixo a{
    flex-direction:row;gap:8px;padding:13px 15px;font-size:14px;
    border-bottom:2px solid transparent;
  }
  .barra-baixo a .ic{height:auto}
  .barra-baixo a .ic .svgi{width:19px;height:19px}
  .barra-baixo a.on{border-bottom-color:var(--verde)}
  .barra-baixo a:hover{background:var(--fundo)}

  /* Uma coluna centrada, com largura de leitura. Quem precisa de duas
     colunas pede explicitamente, com .duas-colunas no HTML. */
  .envolve{max-width:680px;padding:0 28px 48px}

  .duas-colunas{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);
    gap:24px;align-items:start;
  }
  .coluna-lado{position:sticky;top:20px}

  /* A inicial é a única com duas colunas: ela pede mais largura. */
  body:has(.duas-colunas) .envolve,
  body:has(.duas-colunas) .cabeca .dentro,
  body:has(.duas-colunas) .barra-baixo .dentro{max-width:1080px}

  .titulo-tela{padding:26px 0 16px}
  .titulo-tela h1{font-size:29px}
  .titulo-tela.com-volta h1{font-size:25px}

  /* Blocos coloridos maiores, já que há espaço */
  .blocos{gap:12px}
  .bloco{padding:16px 17px 15px;border-radius:18px}
  .bloco:hover{transform:translateY(-3px)}
  .bloco .tit{font-size:17px}

  .agendar-botao{padding:20px 22px}
  .agendar-botao .txt b{font-size:19px}
  .agendar-botao:hover{transform:translateY(-2px)}

  /* Calendário e horários respiram */
  .cal-dia{font-size:15px;border-radius:12px}
  .cal-semana span{font-size:11px}
  .horarios{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .horario{padding:13px 4px;font-size:14px}
  .horario:hover{border-color:var(--verde);background:var(--verde-fundo)}
  .servico:hover{border-color:var(--verde)}

  /* Ficha de visita com mais folga */
  .visita-topo{padding:14px 16px}
  .visita-data{width:48px;flex-basis:48px}
  .visita-data b{font-size:21px}
  .visita-txt b{font-size:15px}

  /* Folhas viram janelas no meio da tela */
  .veu{align-items:center;padding:24px}
  .folha{
    max-width:440px;border-radius:18px;padding:10px 24px 24px;
    animation:aparece .2s cubic-bezier(.2,.9,.3,1);
  }
  @keyframes aparece{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
  .pega{display:none}
  .folha h3{padding-top:12px}

  /* O chat usa a altura toda da janela */
  .chat-tela{max-width:1080px;margin:0 auto}
}

@media (min-width:900px) and (prefers-reduced-motion:reduce){
  .folha{animation:none}
}

/* Telas largas: a coluna da direita para de esticar */
@media (min-width:1280px){
  body:has(.duas-colunas) .envolve,
  body:has(.duas-colunas) .cabeca .dentro,
  body:has(.duas-colunas) .barra-baixo .dentro{max-width:1140px}
  .duas-colunas{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
}

/* ---------- Recado no alto da tela ----------
   Para o que muda o dia da pessoa: remarcação, salão fechado, prêmio.
   Fica até ela tocar no ✓ — o sininho guarda o resto. */
.recado-topo{
  display:flex;align-items:flex-start;gap:11px;
  border:1px solid var(--borda);border-radius:16px;
  padding:14px 14px 14px 13px;margin:0 0 16px;
  background:var(--branco);box-shadow:0 2px 10px rgba(16,24,40,.05);
}
.recado-topo .rt-ic{
  width:36px;height:36px;border-radius:11px;flex:0 0 36px;
  display:grid;place-items:center;
}
.recado-topo > div{flex:1;min-width:0}
.recado-topo b{display:block;font-size:14.5px;line-height:1.35}
.recado-topo span:not(.rt-ic){
  display:block;font-size:13px;color:var(--cinza);margin-top:3px;line-height:1.5;
}
.recado-topo .rt-ok{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;
  background:var(--fundo);color:var(--cinza);font-weight:800;font-size:15px;
}
.recado-topo .rt-ok:hover{background:var(--verde-fundo);color:var(--verde-esc)}

.recado-topo.mudou   {border-color:#C7D7FE;background:#F5F8FF}
.recado-topo.mudou   .rt-ic{background:#E0EAFF;color:#3538CD}
.recado-topo.fechado {border-color:#FEDF89;background:#FFFCF5}
.recado-topo.fechado .rt-ic{background:#FEF0C7;color:#B54708}
.recado-topo.premio  {border-color:#ABEFC6;background:#F6FEF9}
.recado-topo.premio  .rt-ic{background:#DCFAE6;color:#067647}
.recado-topo.trocando{border-color:#C7D7FE;background:#F5F8FF}
.recado-topo.trocando .rt-ic{background:#E0EAFF;color:#3538CD}

/* ---------- Caixas de seleção com explicação ----------
   A explicação é o que faz a pessoa decidir. Sem ela, "alteração" e
   "resposta" viram a mesma coisa e ninguém sabe o que está desligando. */
.caixas{display:grid;gap:9px}
.caixa{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  border:1.5px solid var(--borda);border-radius:13px;padding:12px 13px;
  background:var(--branco);transition:border-color .14s, background .14s;
}
.caixa input{width:auto;margin:2px 0 0;flex:0 0 auto;accent-color:var(--verde)}
.caixa b{display:block;font-size:14px;line-height:1.35}
.caixa small{display:block;font-size:12.5px;color:var(--cinza);margin-top:2px;line-height:1.45}
.caixa:hover{border-color:var(--verde)}
.caixa:has(input:checked){border-color:var(--verde);background:var(--verde-fundo)}

/* ---------- Ficha do salão ----------
   A primeira pergunta de quem abre esta tela é "está aberto agora?".
   Ela vem respondida antes de qualquer tabela de horários. */
.ficha-salao{
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--r);
  box-shadow:var(--sombra);padding:22px 18px;text-align:center;margin-bottom:12px;
}
.fs-marca{
  width:74px;height:74px;border-radius:22px;margin:0 auto 12px;overflow:hidden;
  display:grid;place-items:center;background:var(--verde-fundo);
}
.fs-marca img{width:100%;height:100%;object-fit:cover}
.fs-marca span{font-size:27px;font-weight:800;color:var(--verde-esc)}
.ficha-salao h2{font-size:20px;letter-spacing:-.4px;margin:0}
.fs-agora{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  padding:5px 12px;border-radius:99px;font-size:12.5px;font-weight:700;
}
.fs-agora::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.fs-agora.sim{background:var(--verde-fundo);color:var(--verde-esc)}
.fs-agora.nao{background:var(--fundo);color:var(--cinza)}
.fs-endereco{
  margin:12px 0 0;font-size:13.5px;color:var(--texto);line-height:1.5;
  display:flex;align-items:flex-start;gap:6px;justify-content:center;text-align:left;
}
.fs-endereco svg{flex:0 0 auto;margin-top:3px;color:var(--vermelho)}
.fs-sobre{
  margin:10px 0 0;font-size:13px;color:var(--cinza);line-height:1.6;
}

/* A rolagem elástica do iOS faz parecer que a página não acaba. */
html{overscroll-behavior-y:none}
body{overscroll-behavior-y:none;overflow-x:hidden}