/* Salão Samara Florenço — agenda */

:root{
  --fundo:#F1EFF6;
  --cartao:#FFFFFF;
  --tinta:#1C1A22;
  --apagado:#8B8797;
  --linha:#E6E3EE;
  --rosa:#B0446E;
  --rosa-claro:#FBEEF4;
  --rosa-forte:#8E3358;
  --verde:#2E7D5B;
  --ambar:#B07A1F;
  --r:22px;
  --sombra:0 10px 30px rgba(28,26,34,.07);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--fundo);
  color:var(--tinta);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  line-height:1.45;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit}

.tela{
  max-width:480px;
  margin:0 auto;
  min-height:100%;
  padding:20px 18px 130px;
  position:relative;
}

/* ---- cabeçalho ---- */
.topo{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.topo h1{font-size:19px;font-weight:800;letter-spacing:-.3px;line-height:1.15}
.topo p{font-size:12.5px;color:var(--apagado);margin-top:1px}
.marca{
  width:44px;height:44px;border-radius:15px;flex:0 0 auto;
  background:linear-gradient(140deg,var(--rosa),var(--rosa-forte));
  color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:17px;letter-spacing:-.5px;
}

/* ---- hero ---- */
.hero{
  position:relative;border-radius:26px;overflow:hidden;
  aspect-ratio:16/12;margin-bottom:24px;box-shadow:var(--sombra);
  background:#ddd8e4;
}
.hero img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;display:block}
.hero .veu{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(28,20,28,.78) 0%,rgba(28,20,28,.25) 42%,rgba(28,20,28,0) 70%);
}
.hero .txt{position:absolute;left:20px;right:20px;bottom:18px;color:#fff}
.hero .txt strong{display:block;font-size:23px;font-weight:800;letter-spacing:-.5px;line-height:1.15}
.hero .txt span{display:block;font-size:13px;opacity:.85;margin-top:5px}

/* ---- blocos ---- */
.bloco{margin-bottom:26px}
.bloco > h2{
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;
  color:var(--apagado);margin-bottom:12px;
}
.cartao{background:var(--cartao);border-radius:var(--r);padding:18px;box-shadow:var(--sombra)}

/* ---- serviços ---- */
.servicos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.servico{
  background:var(--cartao);border-radius:18px;padding:14px;text-align:left;
  box-shadow:var(--sombra);border:2px solid transparent;transition:.15s;
}
.servico:hover{transform:translateY(-1px)}
.servico strong{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.2px}
.servico span{display:block;font-size:12px;color:var(--apagado);margin-top:3px}
.servico[aria-pressed="true"]{
  border-color:var(--rosa);background:var(--rosa-claro);
}
.servico[aria-pressed="true"] span{color:var(--rosa)}

/* ---- calendário ---- */
.mes{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mes h3{font-size:20px;font-weight:800;letter-spacing:-.4px;text-transform:capitalize}
.mes div{display:flex;gap:8px}
.seta{
  width:34px;height:34px;border-radius:12px;background:var(--fundo);
  display:grid;place-items:center;color:var(--tinta);font-size:15px;
}
.seta:disabled{opacity:.3;cursor:default}
.semana{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:8px}
.semana span{
  text-align:center;font-size:10.5px;font-weight:700;color:var(--apagado);
  text-transform:uppercase;letter-spacing:.4px;
}
.dias{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dia{
  aspect-ratio:1;border-radius:13px;display:grid;place-items:center;
  font-size:14.5px;font-weight:700;color:var(--tinta);background:var(--fundo);
  position:relative;
}
.dia.vazio{background:none}
.dia:disabled{color:#C6C2D2;background:transparent;cursor:default;font-weight:600}
.dia.livre::after{
  content:'';position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;
  background:var(--rosa);
}
.dia[aria-pressed="true"]{background:var(--rosa);color:#fff}
.dia[aria-pressed="true"]::after{background:#fff}

/* ---- horários ---- */
.horas{display:flex;flex-wrap:wrap;gap:8px}
.hora{
  padding:11px 16px;border-radius:14px;background:var(--cartao);
  font-size:14px;font-weight:700;box-shadow:var(--sombra);
}
.hora[aria-pressed="true"]{background:var(--rosa);color:#fff}
.hora:disabled{opacity:.35;cursor:default;box-shadow:none;text-decoration:line-through}

/* ---- formulário ---- */
.campo{margin-bottom:12px}
.campo label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--apagado)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:13px 15px;border-radius:14px;border:1.5px solid var(--linha);
  background:var(--cartao);font-size:15px;outline:none;
}
.campo input:focus,.campo select:focus{border-color:var(--rosa)}

/* ---- botão principal ---- */
.rodape{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--fundo) 55%,rgba(241,239,246,0));
}
.rodape .dentro{max-width:480px;margin:0 auto}
.botao{
  width:100%;padding:17px;border-radius:19px;color:#fff;font-size:16px;font-weight:800;
  background:linear-gradient(135deg,var(--rosa),var(--rosa-forte));
  box-shadow:0 10px 24px rgba(176,68,110,.32);letter-spacing:-.2px;
}
.botao:disabled{background:#CFCAD8;box-shadow:none;cursor:default}
.botao.claro{background:var(--cartao);color:var(--tinta);box-shadow:var(--sombra)}
.resumo{
  text-align:center;font-size:12.5px;color:var(--apagado);
  margin-bottom:10px;min-height:18px;
}
.resumo b{color:var(--tinta)}

/* ---- avisos ---- */
.vazio{
  text-align:center;color:var(--apagado);font-size:13.5px;padding:22px 10px;
}
.erro{
  background:#FDF1F1;color:#9E2B2B;padding:12px 14px;border-radius:14px;
  font-size:13px;font-weight:600;margin-bottom:12px;
}

/* ---- confirmação ---- */
.ok{text-align:center;padding:50px 0 20px}
.ok .marca-ok{
  width:74px;height:74px;border-radius:26px;margin:0 auto 20px;
  background:linear-gradient(140deg,var(--rosa),var(--rosa-forte));
  display:grid;place-items:center;color:#fff;font-size:34px;
}
.ok h2{font-size:25px;font-weight:800;letter-spacing:-.6px;margin-bottom:8px}
.ok p{color:var(--apagado);font-size:14px;margin-bottom:24px}
.recibo{text-align:left;display:grid;gap:12px}
.recibo .linha{display:flex;justify-content:space-between;gap:14px;font-size:14px}
.recibo .linha span{color:var(--apagado)}
.recibo .linha b{font-weight:700;text-align:right}

/* ---- painel ---- */
.abas{display:flex;gap:6px;background:var(--cartao);padding:5px;border-radius:17px;
  box-shadow:var(--sombra);margin-bottom:22px}
.abas button{flex:1;padding:11px 6px;border-radius:13px;font-size:13.5px;font-weight:700;color:var(--apagado)}
.abas button[aria-selected="true"]{background:var(--rosa);color:#fff}

.ag{background:var(--cartao);border-radius:18px;padding:15px;box-shadow:var(--sombra);margin-bottom:10px}
.ag .cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ag .quando{font-size:13px;font-weight:800;color:var(--rosa)}
.ag .nome{font-size:16px;font-weight:800;letter-spacing:-.3px;margin-top:3px}
.ag .serv{font-size:13px;color:var(--apagado);margin-top:2px}
.ag .acoes{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.ag .acoes button,.ag .acoes a{
  padding:8px 13px;border-radius:11px;background:var(--fundo);
  font-size:12.5px;font-weight:700;text-decoration:none;display:inline-block;
}
.ag .acoes .zap{background:#E7F5EE;color:var(--verde)}
.ag .acoes .cancelar{background:#FDF1F1;color:#9E2B2B}
.selo{font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:8px;
  text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.selo.novo{background:var(--rosa-claro);color:var(--rosa)}
.selo.feito{background:#E7F5EE;color:var(--verde)}
.selo.cancelado{background:#F3F1F6;color:var(--apagado)}

.diasem{background:var(--cartao);border-radius:18px;padding:15px;box-shadow:var(--sombra);margin-bottom:10px}
.diasem .cab{display:flex;justify-content:space-between;align-items:center;gap:12px;background:none;border:0;padding:0;color:inherit;font:inherit}
.diasem .cab strong{font-size:15px;font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  padding:9px 13px;border-radius:12px;background:var(--fundo);
  font-size:13px;font-weight:700;color:var(--apagado);
}
.chip[aria-pressed="true"]{background:var(--rosa);color:#fff}
.mini{font-size:12.5px;font-weight:700;color:var(--rosa);padding:6px 0}

.linha-serv{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.linha-serv input{flex:1;min-width:0;padding:11px 13px;border-radius:13px;
  border:1.5px solid var(--linha);background:var(--cartao);font-size:14px;outline:none}
.linha-serv input.curto{flex:0 0 82px}
.linha-serv button{width:38px;height:38px;border-radius:12px;background:#FDF1F1;color:#9E2B2B;flex:0 0 auto}

.aviso{background:var(--rosa-claro);color:var(--rosa-forte);padding:13px 15px;
  border-radius:15px;font-size:13px;font-weight:600;margin-bottom:16px;line-height:1.4}
.aviso button{color:var(--rosa);font-weight:800;text-decoration:underline;margin-left:4px}

.sair{font-size:12.5px;font-weight:700;color:var(--apagado);text-decoration:underline}

.oculto{display:none !important}