/* ==========================================================================
   Modulo AGENDA PUBLICA
   - painel: /public-calendar e /appointments (dentro da casca do painel)
   - pagina do cliente do espaco: /book/{slug} (body.ag-pub, casca propria)
   A cor de destaque da pagina publica vem de --ag-accent / --ag-on-accent.
   ========================================================================== */

/* ---------------------------------------------------------------- comum */
.ag-tag{
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.72rem; font-weight:600; line-height:1; letter-spacing:.01em;
  padding:.3rem .5rem; border-radius:999px;
  background:var(--ps-surface-2); color:var(--ps-ink-2); border:1px solid var(--ps-border);
  white-space:nowrap;
}

/* ======================================================= PAINEL ========= */
.ag-card-h{ font-size:1rem; font-weight:600; margin:0 0 .75rem; }
.ag-sub-h{ font-size:.92rem; font-weight:600; margin:1.25rem 0 .75rem; }

.ag-start{ text-align:center; max-width:40rem; margin:0 auto; padding:2rem 1.25rem; }
.ag-start-ic{
  width:3.25rem; height:3.25rem; margin:0 auto 1rem; border-radius:16px;
  display:grid; place-items:center; background:var(--ps-grad-soft); color:var(--ps-mid);
}
.ag-start-ic svg{ width:1.6rem; height:1.6rem; }
.ag-start-list{ text-align:left; margin:1rem auto 1.5rem; padding-left:1.1rem; max-width:32rem; }
.ag-start-list li{ color:var(--ps-ink-2); font-size:.92rem; line-height:1.55; margin-bottom:.4rem; }

.ag-status{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.75rem; }
.ag-status .ag-card-h{ margin-bottom:.4rem; }
.ag-linkbox{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.ag-linkbox .ps-input{ flex:1 1 16rem; min-width:0; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.85rem; }
.ag-linkbox .btn{ display:inline-flex; align-items:center; gap:.35rem; }
.ag-linkbox .btn svg{ width:15px; height:15px; }

.ag-week{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:.5rem; }
.ag-week-row{ display:grid; grid-template-columns:9.5rem auto auto auto; justify-content:start; align-items:center; gap:.5rem; }
.ag-week-day{ font-size:.9rem; font-weight:500; }
.ag-week-row.is-closed .ag-week-day{ color:var(--ps-ink-3); }
.ag-week-sep{ color:var(--ps-ink-3); }
/* Largo o bastante para o relogio de 12 h (08:00 AM) que alguns navegadores mostram. */
.ag-time-in{ width:9.5rem; }
@media (max-width:560px){
  .ag-week-row{ grid-template-columns:1fr auto 1fr; gap:.25rem .4rem; margin-bottom:.35rem; }
  .ag-week-day{ grid-column:1 / -1; }
  .ag-week-row .ag-time-in{ width:100%; min-width:0; }
}

.ag-offs{ list-style:none; margin:0 0 1rem; padding:0; border:1px solid var(--ps-border); border-radius:var(--ps-r); overflow:hidden; }
.ag-off{ display:flex; align-items:center; gap:.75rem; padding:.6rem .8rem; border-bottom:1px solid var(--ps-border); flex-wrap:wrap; }
.ag-off:last-child{ border-bottom:0; }
.ag-off-day{ font-weight:500; font-size:.9rem; flex:1 1 12rem; }
.ag-off-what{ color:var(--ps-ink-2); font-size:.85rem; flex:1 1 10rem; }
.ag-off-form{ border-top:1px solid var(--ps-border); padding-top:.25rem; }
.ag-off-hours{ display:flex; align-items:center; gap:.5rem; margin:.25rem 0 .5rem; max-width:21rem; }
.ag-off-hours .ag-time-in{ flex:1 1 0; width:auto; min-width:0; }
.ag-off-hours[hidden]{ display:none; }

.ag-svc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.ag-svc-row{
  display:flex; align-items:center; gap:1rem; justify-content:space-between;
  background:var(--ps-surface); border:1px solid var(--ps-border); border-radius:var(--ps-r-lg); padding:.85rem 1rem;
}
.ag-svc-row.is-off{ opacity:.7; }
.ag-svc-info{ min-width:0; }
.ag-svc-row-name{ font-weight:600; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ag-svc-row-meta{ display:flex; flex-wrap:wrap; gap:.35rem .75rem; align-items:center; margin-top:.3rem; font-size:.82rem; color:var(--ps-ink-2); }
.ag-svc-acts{ display:flex; gap:.35rem; flex:none; }
.ag-form-acts{ display:flex; gap:.5rem; flex-wrap:wrap; }
.ag-btn-ic{ display:inline-flex !important; align-items:center; gap:.35rem; white-space:nowrap; }
.ag-btn-ic svg{ width:15px; height:15px; flex:none; }
[data-ag-only][hidden]{ display:none; }

.ag-pay-status{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.75rem 0 1rem; }
.ag-pay-acts{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--ps-border); }
.ag-pay-acts .btn{ display:inline-flex; align-items:center; gap:.35rem; }
.ag-pay-acts svg{ width:15px; height:15px; }

/* ---- atendimentos ---- */
.ag-appts{ display:flex; flex-direction:column; gap:.65rem; }
.ag-appt{
  display:grid; grid-template-columns:7.5rem 1fr auto; gap:.5rem 1rem; align-items:start;
  background:var(--ps-surface); border:1px solid var(--ps-border); border-radius:var(--ps-r-lg); padding:.9rem 1rem;
}
.ag-appt.is-off{ opacity:.72; }
.ag-appt-when{ display:flex; flex-direction:column; gap:.15rem; }
.ag-appt-day{ font-size:.82rem; color:var(--ps-ink-2); }
.ag-appt-time{ font-weight:700; font-variant-numeric:tabular-nums; }
.ag-appt-body{ min-width:0; }
.ag-appt-top{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.ag-appt-svc{ font-weight:600; }
.ag-appt-guest{ display:flex; flex-wrap:wrap; gap:.25rem .75rem; margin-top:.35rem; font-size:.88rem; }
.ag-appt-guest a{ color:var(--ps-link); text-decoration:none; overflow-wrap:anywhere; }
.ag-appt-note{ margin:.4rem 0 0; font-size:.85rem; color:var(--ps-ink-2); border-left:3px solid var(--ps-border-strong); padding-left:.6rem; }
.ag-appt-meta{ display:flex; flex-wrap:wrap; gap:.3rem .9rem; margin-top:.45rem; font-size:.82rem; color:var(--ps-ink-2); }
.ag-appt-meta a{ color:var(--ps-link); }
.ag-appt-acts{ display:flex; flex-direction:column; gap:.35rem; align-items:stretch; }
.ag-appt-acts .btn{ width:100%; white-space:nowrap; }
.ag-cancel-paid{ display:flex; flex-direction:column; gap:.35rem; max-width:13rem; margin:0; }
.ag-refund{ display:flex; align-items:flex-start; gap:.4rem; font-size:.76rem; line-height:1.35; color:var(--ps-ink-2); cursor:pointer; }
.ag-refund input{ margin-top:.12rem; flex:none; accent-color:var(--ps-mid); }
.ag-warn{ display:inline-flex; align-items:center; gap:.3rem; color:#b45309 !important; font-weight:600; }
.ag-warn svg{ width:14px; height:14px; }
.ag-pager{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1rem; }
@media (max-width:640px){
  .ag-appt{ grid-template-columns:1fr; }
  .ag-appt-when{ flex-direction:row; gap:.5rem; align-items:baseline; }
  .ag-appt-acts{ flex-direction:row; flex-wrap:wrap; }
  .ag-appt-acts .btn{ width:auto; }
}

/* ======================================================= PAGINA PUBLICA = */
body.ag-pub{ background:var(--ps-bg); min-height:100vh; }
.ag-wrap{ max-width:560px; margin:0 auto; padding:28px 16px 32px; }
.ag-pub a{ color:inherit; }
.ag-pub :focus-visible{ outline:2px solid var(--ag-accent); outline-offset:2px; }

.ag-head{ text-align:center; margin-bottom:1.25rem; }
.ag-photo{
  width:72px; height:72px; border-radius:50%; object-fit:cover; display:block; margin:0 auto .75rem;
  border:3px solid var(--ag-accent); background:var(--ps-surface);
}
.ag-photo-ini{
  display:grid; place-items:center; background:var(--ag-accent); color:var(--ag-on-accent);
  font:700 1.8rem/1 var(--ps-font-display);
}
.ag-title{ font-size:1.45rem; margin:0 0 .35rem; }
.ag-title a{ text-decoration:none; }
.ag-bio{ color:var(--ps-ink-2); font-size:.95rem; line-height:1.55; margin:0 auto; max-width:30rem; }

.ag-card{
  background:var(--ps-surface); border:1px solid var(--ps-border); border-radius:var(--ps-r-lg);
  padding:1.25rem; box-shadow:var(--ps-shadow);
}
.ag-h2{ font-size:1.12rem; margin:0 0 1rem; }
.ag-text{ color:var(--ps-ink-2); font-size:.95rem; margin:0 0 1rem; }
.ag-hint{ color:var(--ps-ink-3); font-size:.82rem; margin:.75rem 0; }
.ag-muted{ color:var(--ps-ink-3); }
.ag-opt{ color:var(--ps-ink-3); font-weight:400; }
.ag-empty{ color:var(--ps-ink-2); text-align:center; padding:1.25rem .5rem; margin:0; }
.ag-alert, .ag-ok{
  border-radius:var(--ps-r); padding:.7rem .9rem; font-size:.9rem; margin:0 0 1rem;
  background:rgba(245,71,107,.08); border:1px solid rgba(245,71,107,.3); color:var(--ps-ink);
}
.ag-ok{ background:rgba(0,176,131,.08); border-color:rgba(0,176,131,.3); }
.ag-err{ color:var(--ps-out); font-size:.8rem; margin:.3rem 0 0; }
.ag-pub .ps-input[aria-invalid="true"]{ border-color:var(--ps-out); }
.ag-pub .ps-input:focus{ border-color:var(--ag-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--ag-accent) 18%, transparent); }

.ag-back{ display:inline-block; font-size:.85rem; color:var(--ps-ink-2) !important; text-decoration:none; margin-bottom:.75rem; }
.ag-back:hover{ color:var(--ps-ink) !important; }

/* ---- servicos ---- */
.ag-svcs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.ag-svc{
  display:flex; align-items:center; gap:.75rem; text-decoration:none;
  border:1px solid var(--ps-border); border-radius:var(--ps-r); padding:.9rem 1rem;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.ag-svc:hover{ border-color:var(--ag-accent); box-shadow:var(--ps-shadow); transform:translateY(-1px); }
.ag-svc-main{ display:flex; flex-direction:column; gap:.3rem; min-width:0; flex:1; }
.ag-svc-name{ font-weight:600; font-size:1rem; }
.ag-svc-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .7rem; font-size:.84rem; color:var(--ps-ink-2); }
.ag-svc-desc{ font-size:.85rem; color:var(--ps-ink-3); line-height:1.5; }
.ag-chev{ font-size:1.6rem; line-height:1; color:var(--ps-ink-3); flex:none; }

.ag-sum{ background:var(--ps-surface-2); border:1px solid var(--ps-border); border-radius:var(--ps-r); padding:.75rem .9rem; margin-bottom:1.1rem; }
.ag-sum-name{ font-weight:600; margin-bottom:.25rem; }
.ag-sum-when{ margin-top:.45rem; font-size:.9rem; }
.ag-sum-when strong{ font-variant-numeric:tabular-nums; }

/* ---- faixa de dias e horarios ---- */
.ag-strip-wrap{ display:flex; align-items:center; gap:.35rem; margin:0 -.25rem 1rem; }
.ag-strip{
  display:flex; gap:.4rem; overflow-x:auto; scroll-snap-type:x proximity; padding:.25rem;
  scrollbar-width:none; flex:1; min-width:0;
}
.ag-strip::-webkit-scrollbar{ display:none; }
.ag-day{
  flex:0 0 3.6rem; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center;
  gap:.1rem; padding:.5rem 0; border-radius:12px; border:1px solid var(--ps-border); text-decoration:none;
  background:var(--ps-surface); transition:border-color .2s, background .2s;
}
a.ag-day:hover{ border-color:var(--ag-accent); }
.ag-day-w, .ag-day-m{ font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ps-ink-3); }
.ag-day-n{ font-size:1.15rem; font-weight:700; font-variant-numeric:tabular-nums; }
.ag-day.is-on{ background:var(--ag-accent); border-color:var(--ag-accent); color:var(--ag-on-accent); }
.ag-day.is-on .ag-day-w, .ag-day.is-on .ag-day-m{ color:var(--ag-on-accent); opacity:.85; }
.ag-day.is-off{ opacity:.38; }
.ag-day.is-off.is-on{ opacity:.6; }
.ag-nav{
  flex:none; width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--ps-border); text-decoration:none; font-size:1.3rem; line-height:1; background:var(--ps-surface);
}
.ag-nav:hover{ border-color:var(--ag-accent); }
.ag-dayname{ font-size:.95rem; font-weight:600; margin:0 0 .75rem; font-family:var(--ps-font-body); }
.ag-times{ display:grid; grid-template-columns:repeat(auto-fill, minmax(5.2rem, 1fr)); gap:.5rem; }
.ag-time{
  display:block; text-align:center; padding:.6rem 0; border-radius:10px; text-decoration:none;
  border:1px solid var(--ag-accent); color:var(--ps-ink); font-weight:600; font-variant-numeric:tabular-nums;
  transition:background .15s, color .15s;
}
.ag-time:hover, .ag-time:focus-visible{ background:var(--ag-accent); color:var(--ag-on-accent); }

/* ---- formularios ---- */
.ag-form{ margin:0; }
.ag-btn{
  display:block; width:100%; text-align:center; text-decoration:none; cursor:pointer;
  background:var(--ag-accent); color:var(--ag-on-accent) !important; border:1px solid var(--ag-accent);
  border-radius:12px; padding:.8rem 1rem; font-weight:600; font-size:1rem; margin-top:.5rem;
  transition:filter .2s, transform .2s;
}
.ag-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.ag-btn-danger{ background:var(--ps-out); border-color:var(--ps-out); color:#fff !important; }
.ag-linkbtn{
  background:none; border:0; padding:.25rem 0; color:var(--ps-ink-2); font-size:.88rem;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.ag-linkbtn:hover{ color:var(--ps-ink); }
.ag-links{ display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; justify-content:center; margin-top:1rem; }
.ag-links form{ margin:0; }
.ag-code{ font-size:1.6rem; letter-spacing:.5em; text-align:center; font-variant-numeric:tabular-nums; padding-left:.5em; }

.ag-ro, .ag-dl{ display:grid; grid-template-columns:auto 1fr; gap:.45rem 1rem; margin:0 0 1rem; font-size:.92rem; }
.ag-ro dt, .ag-dl dt{ color:var(--ps-ink-3); font-weight:500; }
.ag-ro dd, .ag-dl dd{ margin:0; min-width:0; overflow-wrap:anywhere; }
.ag-dl{ border-top:1px solid var(--ps-border); padding-top:1rem; }
.ag-dl a{ color:var(--ps-link); font-weight:600; }
.ag-url{ display:block; font-size:.78rem; color:var(--ps-ink-3); word-break:break-all; }

/* ---- pronto / atendimento ---- */
.ag-done-h{ display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }
.ag-done-h .ag-h2{ margin:0; }
.ag-check{
  width:2rem; height:2rem; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--ag-accent); color:var(--ag-on-accent); font-weight:700;
}
.ag-confirm{ margin-top:1.25rem; padding:1rem; border:1px solid rgba(245,71,107,.35); border-radius:var(--ps-r); background:rgba(245,71,107,.05); text-align:center; }
.ag-confirm form{ margin:0 0 .5rem; }
.ag-cancel-q, .ag-again{ text-align:center; margin:1rem 0 0; font-size:.9rem; }
.ag-cancel-q a, .ag-again a{ color:var(--ps-ink-2); text-underline-offset:3px; }
.ag-nf{ text-align:center; padding:2.5rem 1.25rem; }

/* ---- rodape ---- */
.ag-foot{ display:flex; flex-direction:column; align-items:center; gap:.5rem; margin-top:1.75rem; font-size:.78rem; color:var(--ps-ink-3); }
.ag-foot a{ color:var(--ps-ink-3); text-decoration:none; }
.ag-foot a:hover{ color:var(--ps-ink); }
.ag-langs{ display:flex; gap:.75rem; }
.ag-langs a.is-on{ color:var(--ps-ink); font-weight:600; }

@media (min-width:600px){
  .ag-wrap{ padding-top:48px; }
  .ag-card{ padding:1.6rem; }
  .ag-btn{ display:inline-block; width:auto; min-width:12rem; }
  .ag-confirm .ag-btn{ width:100%; }
}