/* Reserva de citas — tienda pública */
.appt-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.appt-modal[hidden] { display: none; }
.appt-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); }
.appt-modal-panel {
    position: relative; width: 100%; max-width: 62rem; max-height: 92vh; overflow: hidden;
    background: #fff; border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.12);
}
@media (min-width: 640px) {
    .appt-modal { align-items: center; padding: 1rem; }
    .appt-modal-panel { border-radius: 1rem; max-height: 88vh; }
}
.appt-modal-head {
    position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 1.25rem; border-bottom: 1px solid #e2e8f0;
}
.appt-modal-head h2 { font-size: 1.125rem; font-weight: 700; margin: 0; }
.appt-modal-service { font-size: 0.875rem; color: #64748b; margin: 0.25rem 0 0; }
.appt-modal-close {
    flex: 0 0 auto; width: 2rem; height: 2rem; border: none; background: #f1f5f9;
    border-radius: 0.5rem; font-size: 1.25rem; line-height: 1; cursor: pointer; color: #475569;
}
.appt-modal-body { max-height: calc(88vh - 4.5rem); overflow-y: auto; overscroll-behavior: contain; }
.appt-step { padding: 1.25rem; }
.appt-form-layout { display: grid; grid-template-columns: minmax(15rem, 0.8fr) minmax(21rem, 1.2fr); gap: 1.25rem; align-items: start; }
.appt-selected-panel {
    padding: 1rem; border: 1px solid #e2e8f0; border-radius: 0.875rem; background: #f8fafc;
}
.appt-selected-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; }
.appt-selected-head h3, .appt-section-title { margin: 0; font-size: 0.9375rem; font-weight: 750; color: #0f172a; }
.appt-selected-head span {
    flex: 0 0 auto; padding: 0.2rem 0.5rem; border-radius: 999px; background: #e5f5ef;
    color: #02a504; font-size: 0.6875rem; font-weight: 700;
}
.appt-selected-list { display: grid; gap: 0.5rem; }
.appt-selected-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.7rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 0.7rem; background: #fff;
}
.appt-selected-item span { min-width: 0; font-size: 0.8125rem; font-weight: 650; line-height: 1.35; color: #0f172a; }
.appt-selected-remove {
    flex: 0 0 auto; padding: 0.3rem 0.45rem; border: 0; border-radius: 0.4rem; background: transparent;
    color: #64748b; font: inherit; font-size: 0.7rem; font-weight: 700; cursor: pointer;
}
.appt-selected-remove:hover { background: #fee2e2; color: #b91c1c; }
.appt-selected-help { margin: 0.7rem 0 0; font-size: 0.72rem; line-height: 1.45; color: #64748b; }
.appt-details-panel { min-width: 0; }
.appt-label { display: block; font-size: 0.8125rem; font-weight: 600; color: #334155; margin: 0.85rem 0 0.35rem; }
.appt-input {
    width: 100%; padding: 0.55rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 0.5rem;
    font-size: 0.9375rem; font-family: inherit;
}
.appt-slots { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.appt-slot {
    padding: 0.45rem 0.7rem; font-size: 0.8125rem; font-weight: 600; border: 1px solid #e2e8f0;
    border-radius: 0.45rem; background: #fff; cursor: pointer; color: #334155;
}
.appt-slot.is-selected { border-color: var(--store-accent, #02a504); background: #F3FFFA; color: #015501; }
.appt-slot:disabled { opacity: 0.45; cursor: not-allowed; }
.appt-account-summary {
    margin: 0.85rem 0 0;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.appt-account-hint {
    margin: 0 0 0.55rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #64748b;
}
.appt-account-dl { margin: 0; display: grid; gap: 0.4rem; }
.appt-account-row {
    display: grid;
    grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.8125rem;
}
.appt-account-row dt { margin: 0; font-weight: 600; color: #64748b; }
.appt-account-row dd { margin: 0; color: #0f172a; font-weight: 600; }
.appt-error { font-size: 0.8125rem; color: #dc2626; margin: 0.65rem 0 0; }
.appt-submit { width: 100%; margin-top: 1rem; }
.appt-success { max-width: 28rem; margin: 0 auto; text-align: center; }
.appt-success-icon {
    width: 3rem; height: 3rem; margin: 0 auto 0.75rem; border-radius: 999px; background: #E9FFF7;
    color: #015501; font-size: 1.5rem; line-height: 3rem; font-weight: 700;
}
.appt-success h3 { margin: 0 0 0.5rem; font-size: 1.125rem; }
.appt-success p { color: #64748b; font-size: 0.875rem; margin: 0 0 1rem; }
.appt-success .sfv-btn { width: 100%; margin-bottom: 0.5rem; }

.sfv-btn--primary { background: var(--store-accent, #02a504); color: #fff; border: none; }

@media (max-width: 767px) {
    .appt-modal-panel { max-height: calc(100dvh - max(10px, env(safe-area-inset-top))); }
    .appt-modal-body { max-height: calc(100dvh - 4.5rem - max(10px, env(safe-area-inset-top))); }
    .appt-step { padding: 1rem; }
    .appt-form-layout { grid-template-columns: 1fr; gap: 1rem; }
    .appt-selected-panel { padding: 0.8rem; }
}