/* =========================================================================
   Página pública de agendamento (frenty.app/f/a/<código>) — mobile primeiro.
   Independente do Bootstrap do ERP. Prefixo ap-*.
   ========================================================================= */
:root {
  --ap-bg: #f4f5fb; --ap-card: #fff; --ap-ink: #1f2430; --ap-ink2: #5b6272; --ap-ink3: #8a8fa3; --ap-line: #e8eaf3;
  --ap-brand: #250048; --ap-brand2: #6d28d9; --ap-soft: #f1eafe; --ap-soft2: #e6d9fc;
  --ap-ok: #16a34a; --ap-ok-soft: #ecfdf3; --ap-warn: #b45309; --ap-warn-soft: #fffbeb; --ap-err: #dc2626; --ap-err-soft: #fef2f2;
  --ap-radius: 22px; --ap-shadow: 0 1px 2px rgba(20,16,50,.04), 0 12px 32px rgba(20,16,50,.08);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ap { margin: 0; background: var(--ap-bg); color: var(--ap-ink); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.ap a { color: var(--ap-brand2); }
.ap button, .ap input, .ap textarea { font: inherit; color: inherit; }
.ap [hidden] { display: none !important; }
.ap :focus-visible { outline: 3px solid rgba(109,40,217,.5); outline-offset: 2px; }
.ap-wrap { max-width: 1040px; margin: 0 auto; padding: 14px 14px 132px; }

/* ---------- topo ---------- */
.ap-hero { position: relative; overflow: hidden; padding: 22px 22px 24px; border-radius: 26px; color: #fff;
  background: radial-gradient(900px 260px at 90% -30%, rgba(167,139,250,.55), transparent 60%), linear-gradient(135deg, #250048 0%, #4c1d95 55%, #6d28d9 100%);
  box-shadow: 0 18px 44px rgba(76,29,149,.28); }
.ap-hero__row { display: flex; align-items: center; gap: 16px; }
.ap-avatar { flex: none; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-weight: 800; font-size: 20px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26); }
.ap-eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.78); overflow-wrap: anywhere; }
.ap-hero h1 { margin: 2px 0 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.ap-hero__agenda { margin: 8px 0 0; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 14px; font-weight: 700; }
.ap-hello { margin: 12px 0 0; font-size: 15px; color: rgba(255,255,255,.9); }
.ap-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none; }

/* ---------- grade ---------- */
.ap-grid { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 900px) { .ap-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; } .ap-col { display: grid; gap: 20px; } .ap-hero { padding: 28px 32px; } .ap-hero h1 { font-size: 32px; } }
.ap-col { display: grid; gap: 16px; align-content: start; }
.ap-card { background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); box-shadow: var(--ap-shadow); padding: 20px; }
.ap-h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.ap-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800; background: var(--ap-soft); color: var(--ap-brand2); }
.ap-card.is-done .ap-num { background: var(--ap-brand2); color: #fff; }
.ap-hint { margin: 0 0 12px; font-size: 14px; color: var(--ap-ink2); }
.ap-note { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; background: var(--ap-warn-soft); color: var(--ap-warn); }

/* ---------- calendário ---------- */
.ap-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ap-cal__title { margin: 0; font-size: 18px; font-weight: 800; text-align: center; flex: 1; }
.ap-cal__title small { font-weight: 600; color: var(--ap-ink3); }
.ap-nav { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--ap-line); background: #fff; color: var(--ap-ink2); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.ap-nav:hover:not(:disabled) { background: var(--ap-soft); color: var(--ap-brand2); }
.ap-nav:disabled { opacity: .35; cursor: not-allowed; }
.ap-cal__dow, .ap-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ap-cal__dow span { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ap-ink3); padding: 4px 0 8px; }
.ap-day { position: relative; height: 48px; border: 0; border-radius: 14px; background: transparent; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ap-ink3); cursor: default; padding: 0; }
.ap-day.is-free { background: var(--ap-soft); color: var(--ap-brand); cursor: pointer; transition: transform .12s, background .12s; }
.ap-day.is-free:hover { background: var(--ap-soft2); transform: translateY(-1px); }
.ap-day.is-free::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ap-brand2); }
.ap-day.is-full { text-decoration: line-through; color: #b8bccb; }
.ap-day.is-today { box-shadow: inset 0 0 0 2px var(--ap-soft2); }
.ap-day.is-sel { background: var(--ap-brand2); color: #fff; box-shadow: 0 8px 18px rgba(109,40,217,.35); }
.ap-day.is-sel::after { background: #fff; }
.ap-cal__sk { height: 48px; border-radius: 14px; }
.ap-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 13px; color: var(--ap-ink2); }
.ap-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.ap-prox { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 14px; border: 0; border-radius: 14px; background: var(--ap-ok-soft); color: #166534; font-weight: 700; font-size: 14px; cursor: pointer; }

/* ---------- horários ---------- */
.ap-when { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; font-size: 15px; font-weight: 700; color: var(--ap-brand); }
.ap-per { margin-top: 16px; }
.ap-per:first-of-type { margin-top: 0; }
.ap-per h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ap-ink3); }
.ap-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }
.ap-hour { height: 48px; border-radius: 14px; border: 1.5px solid var(--ap-soft2); background: #fff; color: var(--ap-brand); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer; transition: all .12s; }
.ap-hour:hover { background: var(--ap-soft); }
.ap-hour.is-sel { background: var(--ap-brand2); border-color: var(--ap-brand2); color: #fff; box-shadow: 0 8px 18px rgba(109,40,217,.35); }
.ap-empty { padding: 26px 14px; text-align: center; color: var(--ap-ink2); }
.ap-empty b { display: block; margin-bottom: 4px; color: var(--ap-ink); }
.ap-sk { background: linear-gradient(100deg, #eceef7 30%, #f7f8fc 50%, #eceef7 70%); background-size: 200% 100%; animation: ap-shimmer 1.3s infinite linear; border-radius: 14px; }
@keyframes ap-shimmer { to { background-position: -200% 0; } }

/* ---------- formulário ---------- */
.ap-form { display: grid; gap: 14px; }
.ap-field label, .ap-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--ap-ink2); }
.ap-field label small { font-weight: 600; color: var(--ap-ink3); }
.ap-input { width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid var(--ap-line); border-radius: 14px; background: #fff; font-size: 16px; transition: border-color .12s, box-shadow .12s; appearance: none; -webkit-appearance: none; }
textarea.ap-input { height: auto; min-height: 96px; padding: 14px 16px; resize: vertical; }
.ap-input:focus { outline: 0; border-color: var(--ap-brand2); box-shadow: 0 0 0 4px rgba(109,40,217,.14); }
.ap-input[aria-invalid="true"] { border-color: var(--ap-err); background: var(--ap-err-soft); }
.ap-msg { margin: 6px 0 0; font-size: 13px; color: var(--ap-err); }
.ap-two { display: grid; gap: 14px; } @media (min-width: 560px) { .ap-two { grid-template-columns: 1fr 1fr; } }
.ap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-chip { position: relative; }
.ap-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ap-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ap-line); background: #fff; font-size: 15px; font-weight: 700; color: var(--ap-ink2); }
.ap-chip input:checked + span { background: var(--ap-soft); border-color: var(--ap-brand2); color: var(--ap-brand2); }
.ap-chip input:focus-visible + span { outline: 3px solid rgba(109,40,217,.5); outline-offset: 2px; }
.ap-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.ap-mesa { height: 46px; border-radius: 12px; border: 1.5px solid var(--ap-soft2); background: #fff; color: var(--ap-brand); font-weight: 800; cursor: pointer; }
.ap-mesa.is-sel { background: var(--ap-brand2); color: #fff; border-color: var(--ap-brand2); }
.ap-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ap-priv { margin: 0; font-size: 13px; color: var(--ap-ink3); }

/* ---------- botões ---------- */
.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 16px; font-size: 16px; font-weight: 800; cursor: pointer; text-decoration: none; transition: transform .12s, box-shadow .12s, opacity .12s; background: linear-gradient(135deg, #4c1d95, #6d28d9); color: #fff !important; box-shadow: 0 10px 24px rgba(109,40,217,.35); }
.ap-btn:hover:not(:disabled) { transform: translateY(-1px); }
.ap-btn:disabled { opacity: .6; cursor: wait; }
.ap-btn--ghost { background: var(--ap-soft); color: var(--ap-brand2) !important; box-shadow: none; }
.ap-btn--wpp { background: #25d366; color: #052e16 !important; box-shadow: 0 10px 24px rgba(37,211,102,.3); }
.ap-btn--danger { background: var(--ap-err-soft); color: var(--ap-err) !important; box-shadow: none; }
.ap-btn--block { width: 100%; }
.ap-spin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; animation: ap-rot .7s linear infinite; }
@keyframes ap-rot { to { transform: rotate(360deg); } }

/* ---------- barra fixa de confirmação ---------- */
.ap-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--ap-line); box-shadow: 0 -10px 30px rgba(20,16,50,.08); transform: translateY(110%); transition: transform .25s ease; }
.ap-bar.is-on { transform: translateY(0); }
.ap-bar__in { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ap-bar__sum { min-width: 0; line-height: 1.25; }
.ap-bar__sum small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ap-ink3); }
.ap-bar__sum b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-bar .ap-btn { flex: none; }
.ap-erro { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--ap-err-soft); color: var(--ap-err); font-size: 14px; font-weight: 600; }

/* ---------- sucesso ---------- */
.ap-ok { max-width: 560px; margin: 16px auto 0; text-align: center; padding: 30px 22px 26px; }
.ap-ok__chk { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--ap-ok-soft); color: var(--ap-ok); animation: ap-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.ap-ok__chk svg { width: 44px; height: 44px; stroke: currentColor; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: ap-draw .5s .25s ease forwards; }
@keyframes ap-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ap-draw { to { stroke-dashoffset: 0; } }
.ap-ok h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.01em; }
.ap-ok__sub { margin: 0 0 18px; color: var(--ap-ink2); }
.ap-sum { text-align: left; margin: 0 0 18px; padding: 6px 18px; border: 1px solid var(--ap-line); border-radius: 18px; background: #fafbff; }
.ap-sum div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ap-line); }
.ap-sum div:last-child { border-bottom: 0; }
.ap-sum dt { margin: 0; color: var(--ap-ink3); font-size: 14px; font-weight: 700; }
.ap-sum dd { margin: 0; font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.ap-wpp-st { margin: 0 0 18px; padding: 12px 14px; border-radius: 14px; font-size: 14px; font-weight: 600; background: var(--ap-ok-soft); color: #166534; text-align: left; }
.ap-wpp-st.is-neutral { background: var(--ap-soft); color: var(--ap-brand); }
.ap-acts { display: grid; gap: 10px; }
@media (min-width: 480px) { .ap-acts--2 { grid-template-columns: 1fr 1fr; } }

/* ---------- lista de agendas (link do grupo) ---------- */
.ap-agendas { display: grid; gap: 12px; }
@media (min-width: 640px) { .ap-agendas { grid-template-columns: 1fr 1fr; } }
.ap-ag { min-width: 0; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--ap-line); border-radius: 18px; background: #fff; text-decoration: none; color: var(--ap-ink) !important; box-shadow: var(--ap-shadow); transition: transform .12s, border-color .12s; }
.ap-ag:hover { transform: translateY(-2px); border-color: var(--ap-soft2); }
.ap-ag__av { flex: none; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; color: #fff; }
.ap-ag__nome { min-width: 0; font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.ap-ag__sub { font-size: 13px; color: var(--ap-ink3); }
.ap-ag > i { margin-left: auto; color: var(--ap-ink3); }

/* ---------- confirmação (agenda_confirmacao.php) ---------- */
.ap-conf { max-width: 560px; margin: 16px auto 0; text-align: center; padding: 28px 22px 24px; }
.ap-conf h2 { margin: 6px 0 6px; font-size: 23px; }
.ap-conf p { margin: 0 0 18px; color: var(--ap-ink2); }
.ap-conf__ico { width: 76px; height: 76px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; }
.ap-conf__ico.ok { background: var(--ap-ok-soft); color: var(--ap-ok); } .ap-conf__ico.warn { background: var(--ap-warn-soft); color: var(--ap-warn); } .ap-conf__ico.err { background: var(--ap-err-soft); color: var(--ap-err); } .ap-conf__ico.info { background: var(--ap-soft); color: var(--ap-brand2); }

@media (max-width: 480px) {
  .ap-hero h1 { font-size: 23px; } .ap-hero { padding: 18px; border-radius: 22px; } .ap-avatar { width: 48px; height: 48px; font-size: 17px; border-radius: 15px; }
  .ap-card { padding: 16px; border-radius: 20px; } .ap-day { height: 44px; border-radius: 12px; }
  .ap-bar .ap-btn { padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) { .ap *, .ap *::before, .ap *::after { animation: none !important; transition: none !important; } }