/* Sistema de Agendamento para Psicóloga — página pública (mobile first) */
.sap-app {
	--b: var(--sap-brand, #4f7c78);
	--b-soft: color-mix(in srgb, var(--b) 12%, #fff);
	--b-line: color-mix(in srgb, var(--b) 30%, #fff);
	--ink: #26312f;
	--mut: #6b7774;
	--line: #e2e8e6;
	--bg: #ffffff;
	--danger: #b5483f;
	box-sizing: border-box;
	max-width: 640px;
	margin: 0 auto;
	padding: 20px 16px 32px;
	color: var(--ink);
	background: var(--bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(38, 49, 47, .06);
}
.sap-app *, .sap-app *::before, .sap-app *::after { box-sizing: border-box; }
.sap-app button, .sap-app input, .sap-app textarea { font: inherit; color: inherit; }
.sap-app [hidden] { display: none !important; }

.sap-head h2 { margin: 0 0 4px; font-size: 1.55rem; line-height: 1.2; font-family: Georgia, "Times New Roman", serif; font-weight: 600; color: var(--ink); }
.sap-pro { margin: 0; color: var(--b); font-weight: 600; font-size: .95rem; }
.sap-sub { margin: 8px 0 0; color: var(--mut); }
.sap-loading, .sap-empty, .sap-muted { color: var(--mut); }
.sap-loading { display: flex; align-items: center; gap: 10px; padding: 24px 0; }
.sap-spinner { width: 18px; height: 18px; border: 2px solid var(--b-line); border-top-color: var(--b); border-radius: 50%; animation: sap-spin .8s linear infinite; }
@keyframes sap-spin { to { transform: rotate(360deg); } }

/* etapas */
.sap-steps { list-style: none; display: flex; gap: 6px; margin: 18px 0 8px; padding: 0; }
.sap-steps li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--mut); min-width: 0; }
.sap-steps li i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .78rem; font-weight: 600; background: var(--line); color: var(--mut); }
.sap-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sap-steps li.on { color: var(--ink); font-weight: 600; }
.sap-steps li.on i { background: var(--b); color: #fff; }
.sap-steps li.ok i { background: var(--b-soft); color: var(--b); }
@media (max-width: 480px) { .sap-steps li:not(.on) span { display: none; } .sap-steps li.on { flex: 3; } }

.sap-body { margin-top: 12px; }
.sap-h3 { margin: 12px 0 14px; font-size: 1.1rem; }

/* cartões de serviço */
.sap-cards { display: grid; gap: 10px; }
.sap-card { position: relative; display: block; width: 100%; text-align: left; padding: 16px 40px 16px 16px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .05s; }
.sap-card:hover, .sap-card:focus-visible { border-color: var(--b); box-shadow: 0 4px 14px rgba(79, 124, 120, .14); outline: none; }
.sap-card:active { transform: scale(.995); }
.sap-card-t { display: block; font-weight: 600; font-size: 1.02rem; }
.sap-card-m { display: block; color: var(--b); font-size: .88rem; font-weight: 500; margin-top: 2px; }
.sap-card-d { display: block; color: var(--mut); font-size: .88rem; margin-top: 6px; }
.sap-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--b); }

.sap-chosen, .sap-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 10px 14px; background: var(--b-soft); border-radius: 12px; font-size: .92rem; margin-bottom: 14px; }
.sap-summary { flex-direction: column; align-items: flex-start; }
.sap-link { background: none; border: 0; padding: 0; color: var(--b); font-weight: 600; text-decoration: underline; cursor: pointer; font-size: .88rem; }

/* calendário */
.sap-cal { border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.sap-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sap-icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--ink); }
.sap-icon:disabled { opacity: .3; cursor: default; }
.sap-cal-wd, .sap-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sap-cal-wd span { text-align: center; font-size: .72rem; color: var(--mut); font-weight: 600; padding: 4px 0; }
.sap-day { aspect-ratio: 1 / 1; min-height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: .95rem; border: 0; background: transparent; color: #b4bdbb; position: relative; }
.sap-day.empty { visibility: hidden; }
.sap-day.today::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
button.sap-day.s-available { background: var(--b-soft); color: var(--b); font-weight: 700; cursor: pointer; }
button.sap-day.s-available:hover { background: var(--b-line); }
button.sap-day.sel { background: var(--b); color: #fff; }
.sap-day.s-full { color: #c9786f; text-decoration: line-through; background: #fbefed; }
.sap-day.s-blocked, .sap-day.s-closed { color: #b4bdbb; }
.sap-day.s-loading { color: transparent; background: linear-gradient(90deg, #f2f5f4, #e9eeec, #f2f5f4); background-size: 200%; animation: sap-sh 1.2s infinite; }
@keyframes sap-sh { to { background-position: -200% 0; } }
.sap-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; font-size: .78rem; color: var(--mut); }
.sap-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -1px; }
.l-av { background: var(--b-soft); border: 1px solid var(--b); }
.l-full { background: #fbefed; border: 1px solid #c9786f; }
.l-off { background: #fff; border: 1px solid #c9d1cf; }

.sap-times { margin-top: 18px; }
.sap-times h4 { margin: 0 0 10px; font-size: 1rem; }
.sap-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.sap-slot { min-height: 46px; border: 1.5px solid var(--b-line); background: #fff; border-radius: 12px; font-weight: 600; color: var(--b); cursor: pointer; }
.sap-slot:hover { border-color: var(--b); }
.sap-slot.sel { background: var(--b); border-color: var(--b); color: #fff; }

/* formulário */
.sap-form { display: grid; gap: 14px; }
.sap-form label, .sap-field { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.sap-form small { font-weight: 400; color: var(--mut); }
.sap-app input[type=text], .sap-app input[type=tel], .sap-app input[type=email], .sap-app input[type=date], .sap-app textarea {
	width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-size: 16px; font-weight: 400;
}
.sap-app input:focus, .sap-app textarea:focus { outline: none; border-color: var(--b); box-shadow: 0 0 0 3px var(--b-soft); }
.sap-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sap-privacy { background: #f7f9f8; border-radius: 12px; padding: 12px 14px; font-size: .86rem; color: var(--mut); }
.sap-privacy p { margin: 0 0 10px; }
.sap-form .sap-consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--ink); font-size: .86rem; }
.sap-consent input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--b); flex: none; }
.sap-consent a { color: var(--b); }
.sap-policy { font-size: .84rem; color: var(--mut); margin: 10px 0 0; }

/* botões */
.sap-btn { display: inline-flex; justify-content: center; align-items: center; min-height: 50px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--b); color: #fff !important; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; width: 100%; transition: filter .15s; }
.sap-btn:hover { filter: brightness(1.07); }
.sap-btn:disabled { opacity: .45; cursor: not-allowed; }
.sap-btn.ghost { background: #fff; color: var(--b) !important; border: 1.5px solid var(--b-line); }
.sap-btn.danger { background: var(--danger); }
.sap-btn.ghost.danger { background: #fff; color: var(--danger) !important; border-color: #e5b9b4; }
.sap-actions { display: grid; gap: 10px; margin-top: 18px; }
@media (min-width: 520px) { .sap-actions { grid-template-columns: 1fr 1fr; } .sap-actions .sap-btn:only-child { grid-column: 1 / -1; } }

/* mensagens */
.sap-error { background: #fbefed; color: #8f2f27; border: 1px solid #efc4bf; padding: 12px 14px; border-radius: 12px; margin: 10px 0; font-size: .92rem; }
.sap-note { background: #fff8e8; border: 1px solid #f0dca8; color: #6b5217; padding: 12px 14px; border-radius: 12px; margin: 12px 0; font-size: .9rem; }
.sap-note.ok { background: #eef7f2; border-color: #bfe0cd; color: #1f5b3a; }
.sap-pill { display: inline-block; padding: 3px 12px; border-radius: 99px; font-size: .8rem; font-weight: 600; background: var(--b-soft); color: var(--b); }
.sap-pill.st-cancelado { background: #fbefed; color: #8f2f27; }
.sap-pill.st-pendente { background: #fff8e8; color: #6b5217; }

/* confirmação */
.sap-done { text-align: center; padding: 8px 0 4px; }
.sap-done .sap-check { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: var(--b); color: #fff; display: grid; place-items: center; font-size: 2rem; }
.sap-done h3 { margin: 0 0 6px; font-size: 1.2rem; letter-spacing: .06em; color: var(--b); }
.sap-done p { margin: 0; color: var(--mut); }
.sap-dl { margin: 18px 0 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sap-dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.sap-dl > div:last-child { border-bottom: 0; }
.sap-dl dt { color: var(--mut); font-size: .88rem; flex: none; }
.sap-dl dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word; }

@media (prefers-reduced-motion: reduce) { .sap-app * { animation: none !important; transition: none !important; } }
@media (prefers-color-scheme: dark) { .sap-app.sap-auto-dark { --ink: #e9efed; --bg: #1b2321; --line: #2f3b38; --mut: #9fb0ac; } }