/* =============================================================
   AREA DA CLIENTE — conta, horarios marcados, remarcar/cancelar.
   Vira /public/assets/css/cliente.css

   Mesma identidade da vitrine (verde sobre o cinza da pagina),
   porque para a cliente isto e a mesma coisa que o site da
   Larissa — nao um sistema a parte.
   ============================================================= */

.tela{
  width:100%;
  max-width:calc(var(--coluna) + var(--margem)*2);
  margin-inline:auto;
  padding:0 var(--margem) 100px;
}
.tela--estreita{max-width:calc(430px + var(--margem)*2)}

/* ---------- CABECALHO ---------- */
.cabeca{
  position:sticky;top:0;z-index:10;
  background:color-mix(in srgb,var(--fundo) 90%,transparent);
  backdrop-filter:blur(10px);
  padding:16px 0 14px;
  margin-bottom:20px;
}
.cabeca__linha{display:flex;align-items:center;gap:12px}
.voltar{
  width:44px;height:44px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--branco);
  box-shadow:var(--sombra);
  transition:background var(--transicao);
}
.voltar:hover{background:var(--verde-suave)}
.voltar svg{width:20px;height:20px;fill:none;stroke:var(--verde-botao);
            stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cabeca__titulo{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em}
.cabeca__passo{margin:2px 0 0;font-size:13px;color:var(--texto-suave)}
.cabeca__acao{margin-left:auto}

/* ---------- CAIXA DE CONTA ---------- */
.painel-conta{
  background:var(--branco);
  border-radius:var(--raio);
  padding:22px 20px;
  box-shadow:var(--sombra);
}

.campo{margin-bottom:16px}
.campo__rotulo{
  display:block;margin-bottom:7px;
  font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--texto-suave);
}
.campo__entrada{
  width:100%;min-width:0;min-height:52px;
  padding:0 15px;
  background:var(--branco);
  border:1.8px solid var(--linha);
  border-radius:var(--raio-p);
  transition:border-color var(--transicao),box-shadow var(--transicao);
}
.campo__entrada:focus{
  outline:none;border-color:var(--verde-principal);
  box-shadow:0 0 0 4px rgba(113,158,94,.16);
}
.campo__dica{margin:6px 0 0;font-size:12px;color:var(--texto-suave);line-height:1.45}

.senha{position:relative}
.senha .campo__entrada{padding-right:52px}
.senha__olho{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--texto-suave);
}
.senha__olho:hover{background:var(--verde-suave);color:var(--verde-botao)}
.senha__olho svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
                 stroke-linecap:round;stroke-linejoin:round}

/* Forca da senha, no cadastro */
.forca{display:flex;gap:4px;margin-top:9px}
.forca i{flex:1;height:4px;border-radius:999px;background:var(--linha);
         transition:background var(--transicao)}
.forca[data-nivel="1"] i:nth-child(1){background:var(--erro)}
.forca[data-nivel="2"] i:nth-child(-n+2){background:var(--aviso)}
.forca[data-nivel="3"] i:nth-child(-n+3){background:var(--ok)}

/* Erro em linguagem humana, nunca mensagem tecnica */
.erro{
  display:none;
  background:var(--erro-suave);color:var(--erro);
  border-radius:var(--raio-p);
  padding:12px 14px;margin-bottom:18px;
  font-size:13px;line-height:1.5;
}
.erro[data-visivel]{display:block;animation:treme 400ms ease}
@keyframes treme{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

.btn-principal{
  width:100%;min-height:54px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--verde-principal);color:var(--branco);
  border-radius:999px;
  font-size:15.5px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 6px 20px rgba(46,59,39,.18);
  transition:background var(--transicao),transform var(--transicao),opacity var(--transicao);
}
.btn-principal:hover:not(:disabled){background:var(--verde-escuro)}
.btn-principal:active:not(:disabled){transform:scale(.99)}
.btn-principal:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

.ajuda{
  margin:16px 0 0;text-align:center;
  font-size:12.5px;line-height:1.6;color:var(--texto-suave);
}
.ajuda a{color:var(--verde-botao);font-weight:600;text-decoration:underline}

.alternativa{
  margin:20px 0 0;text-align:center;
  font-size:14px;color:var(--texto-suave);
}
.alternativa a{color:var(--verde-botao);font-weight:700}

.consentimento{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--verde-suave);
  border-radius:var(--raio-p);
  padding:14px;margin:18px 0;
  font-size:12.5px;line-height:1.55;color:var(--texto-suave);
}
.consentimento input{width:21px;height:21px;flex:none;margin-top:1px;
                     accent-color:var(--verde-principal)}
.consentimento a{color:var(--verde-botao);font-weight:600;text-decoration:underline}

/* ---------- MEUS HORARIOS ---------- */
.secao{
  margin:0 0 12px;
  font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto-suave);
}
.secao:not(:first-of-type){margin-top:30px}

.reserva{
  background:var(--branco);
  border-radius:var(--raio);
  padding:16px;
  margin-bottom:12px;
  box-shadow:var(--sombra);
  border-left:4px solid var(--verde-principal);
}
.reserva--pendente{border-left-color:var(--aviso)}
.reserva--passado{border-left-color:var(--neutro);opacity:.72}
.reserva--cancelado{border-left-color:var(--erro);opacity:.6}

.reserva__topo{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.reserva__quando{flex:1;min-width:0}
.reserva__data{
  margin:0;font-size:16.5px;font-weight:700;line-height:1.25;
  color:var(--verde-titulo);
}
.reserva__hora{
  margin:2px 0 0;font-size:13.5px;color:var(--texto-suave);
  font-variant-numeric:tabular-nums;
}
.reserva__servico{
  margin:0;font-size:14.5px;font-weight:600;
}
.reserva__valor{
  margin:2px 0 0;font-size:13px;color:var(--texto-suave);
  font-variant-numeric:tabular-nums;
}

.reserva__acoes{
  display:flex;gap:9px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--linha);
}
.acao{
  flex:1;min-width:120px;min-height:46px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  border-radius:999px;
  font-size:13.5px;font-weight:700;
  transition:background var(--transicao),color var(--transicao);
}
.acao svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
          stroke-linecap:round;stroke-linejoin:round}
.acao--remarcar{color:var(--verde-botao);box-shadow:inset 0 0 0 1.6px var(--verde-claro)}
.acao--remarcar:hover{background:var(--verde-suave)}
.acao--cancelar{color:var(--erro);box-shadow:inset 0 0 0 1.6px #E8C4C0}
.acao--cancelar:hover{background:var(--erro-suave)}
.acao--zap{background:var(--verde-principal);color:var(--branco)}
.acao--zap:hover{background:var(--verde-escuro)}
.acao--zap svg{fill:currentColor;stroke:none}

/* Explica POR QUE o botao sumiu. Um botao que some sem
   explicacao faz a pessoa achar que o site quebrou. */
.trava{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--linha);
  font-size:12.5px;line-height:1.55;color:var(--texto-suave);
}
.trava svg{width:16px;height:16px;flex:none;margin-top:1px;
           fill:none;stroke:var(--aviso);stroke-width:2;
           stroke-linecap:round;stroke-linejoin:round}
.trava a{color:var(--verde-botao);font-weight:600;text-decoration:underline}

/* ---------- ESTADO VAZIO ---------- */
.vazio{
  background:var(--branco);
  border-radius:var(--raio);
  padding:36px 22px;text-align:center;
  box-shadow:var(--sombra);
}
.vazio svg{width:72px;height:72px;margin:0 auto 16px;display:block;
           fill:none;stroke:var(--verde-claro);stroke-width:1.5;
           stroke-linecap:round;stroke-linejoin:round}
.vazio__titulo{margin:0 0 6px;font-size:17px;font-weight:700}
.vazio__texto{margin:0 0 20px;font-size:13.5px;color:var(--texto-suave);line-height:1.6}

/* ---------- CONFIRMACAO DE CANCELAMENTO ---------- */
/* Cancelar e irreversivel: nunca acontece num toque so. */
.painel{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:flex-end;
  visibility:hidden;
}
.painel[data-aberto="true"]{visibility:visible}
.painel__fundo{
  position:absolute;inset:0;
  background:rgba(28,38,24,.44);
  opacity:0;transition:opacity 300ms var(--transicao);
}
.painel[data-aberto="true"] .painel__fundo{opacity:1}
.painel__folha{
  position:relative;width:100%;
  background:var(--branco);
  border-radius:var(--raio) var(--raio) 0 0;
  padding:8px var(--margem) calc(24px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform 380ms var(--traco);
}
.painel[data-aberto="true"] .painel__folha{transform:translateY(0)}
.painel__alca{width:42px;height:4px;border-radius:999px;
              background:var(--linha);margin:8px auto 18px}
.painel__titulo{margin:0 0 8px;font-size:19px;font-weight:700}
.painel__texto{margin:0 0 20px;font-size:14px;line-height:1.6;color:var(--texto-suave)}
.painel__texto b{color:var(--texto)}
.painel__acoes{display:flex;flex-direction:column;gap:9px}
.painel__acoes .acao{min-height:52px}
@media (min-width:640px){
  .painel{align-items:center;justify-content:center;padding:20px}
  .painel__folha{max-width:440px;border-radius:var(--raio);
                 transform:translateY(16px) scale(.98);padding-bottom:24px}
  .painel[data-aberto="true"] .painel__folha{transform:none}
  .painel__alca{display:none}
}

.aviso-preview{
  max-width:calc(430px + var(--margem)*2);
  margin:14px auto 0;
  padding:11px 15px;
  background:#FAF0DC;
  border-radius:var(--raio-p);
  font-size:12.5px;line-height:1.5;color:#6B5416;
}
.aviso-preview a{color:#6B5416;font-weight:700;text-decoration:underline}