.hero-card h1 {
  font-size: clamp(2.35rem, 11vw, 5rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
  max-width: 13ch;
}

.hero-copy { color: var(--color-muted); font-size: 1.08rem; max-width: 44rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.step-list { display: grid; gap: var(--space-2); padding-left: 1.25rem; }
.success-card { text-align: center; }
.compact-hero h1 { font-size: clamp(2rem, 9vw, 3.8rem); max-width: 18ch; }

.section-header {
  align-items: flex-start;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.form-grid-2 { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.grid-two { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.agenda-list { display: grid; gap: var(--space-4); }
.agenda-day { display: grid; gap: var(--space-2); }
.agenda-day h3 { color: var(--color-muted); font-size: 0.95rem; margin: 0; text-transform: capitalize; }
.appointment-card div:first-child { display: grid; gap: 0.25rem; }
.appointment-card.is-block { border-style: dashed; }
.empty-state {
  background: var(--color-background-soft);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* Sprint 11.1: formulários operacionais ficam mais contidos para reduzir densidade na agenda. */
[data-appointment-panel],
[data-reschedule-panel] {
  border-left: 4px solid var(--color-surface-strong);
}

.public-shell .form-card,
.auth-card { box-shadow: var(--shadow-card); }

.customer-context-card {
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
}


/* Sprint 11.2 — agenda menos densa e plano mais legível */
.agenda-hero {
  box-shadow: none;
}

.agenda-hero h1 {
  font-size: clamp(1.9rem, 7vw, 3.2rem);
}

.agenda-hero .hero-copy {
  max-width: 56rem;
}

.plan-card {
  border-top: 5px solid var(--color-primary);
}

.plan-card .summary-grid {
  margin-top: var(--space-3);
}

.customer-area-shell {
  max-width: 920px;
}

/* Sprint 11.3 — calendário operacional com visualizações dia, semana e mês */
.agenda-shell {
  max-width: 1280px;
}

.agenda-topbar {
  align-items: flex-start;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.agenda-topbar h1 {
  font-size: clamp(2rem, 7vw, 3.3rem);
  letter-spacing: -0.04em;
  margin-bottom: 0.25rem;
}

.calendar-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
}

.calendar-app-toolbar {
  align-items: center;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.calendar-nav-group,
.segmented-control {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
}

.calendar-title-group h2 {
  font-size: clamp(1.25rem, 4vw, 1.8rem);
  margin: 0;
  text-transform: capitalize;
}

.calendar-title-group p {
  margin: 0.15rem 0 0;
}

.calendar-icon-button {
  border-radius: 999px;
  font-size: 1.25rem;
  min-width: 44px;
  padding-inline: 0.75rem;
}

.segmented-control {
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.2rem;
}

.segmented-control button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--color-text);
  cursor: pointer;
  font-weight: 900;
  min-height: 38px;
  padding: 0.35rem 0.75rem;
}

.segmented-control button[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-white);
}

.calendar-filter-bar {
  align-items: end;
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: var(--space-3);
}

.calendar-board {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-height: 34rem;
  overflow: auto;
}

.calendar-empty-state {
  margin: var(--space-3);
}

.calendar-day-heading {
  background: var(--color-background-soft);
  border-bottom: 1px solid var(--color-border);
  font-weight: 900;
  padding: var(--space-3);
  text-transform: capitalize;
}

.calendar-time-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  min-height: 5.5rem;
}

.calendar-time-row + .calendar-time-row {
  border-top: 1px solid var(--color-border);
}

.calendar-time-label {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 900;
  padding: var(--space-2);
  text-align: right;
}

.calendar-time-slot {
  border-left: 1px solid var(--color-border);
  display: grid;
  gap: 0.45rem;
  min-height: 5.5rem;
  padding: var(--space-2);
}

.calendar-week-view {
  display: grid;
  grid-template-columns: repeat(7, minmax(10rem, 1fr));
  min-height: 34rem;
}

.calendar-week-day {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 10rem;
}

.calendar-week-day + .calendar-week-day {
  border-left: 1px solid var(--color-border);
}

.calendar-week-day header,
.calendar-month-cell header {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  justify-content: space-between;
}

.calendar-week-day header {
  background: var(--color-background-soft);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2);
}

.calendar-week-day header span,
.calendar-month-weekday {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.calendar-week-day header strong,
.calendar-month-cell header strong {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  min-width: 2rem;
}

.calendar-week-day.is-today header strong,
.calendar-month-cell.is-today header strong {
  background: var(--color-primary);
  color: var(--color-white);
}

.calendar-week-events,
.calendar-month-events {
  display: grid;
  gap: 0.45rem;
}

.calendar-week-events {
  align-content: start;
  min-height: 28rem;
  padding: var(--space-2);
}

.calendar-month-view {
  display: grid;
  grid-template-columns: repeat(7, minmax(8rem, 1fr));
  min-height: 38rem;
}

.calendar-month-weekday {
  background: var(--color-background-soft);
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem;
  text-align: center;
}

.calendar-month-cell {
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  display: grid;
  gap: 0.35rem;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 8.5rem;
  padding: 0.55rem;
}

.calendar-month-cell:nth-child(7n + 1) {
  border-right: 0;
}

.calendar-month-cell.is-outside-month {
  background: color-mix(in srgb, var(--color-background-soft) 65%, var(--color-white));
  color: var(--color-muted);
}

.calendar-event {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 0.5rem;
  padding: 0.55rem;
}

.calendar-event.is-block {
  border-left-color: var(--color-warning-text);
  border-style: dashed;
}

.calendar-event.status-cancelled,
.calendar-event.status-completed {
  opacity: 0.72;
}

.calendar-event-main {
  display: grid;
  gap: 0.1rem;
}

.calendar-event-main strong {
  color: var(--color-primary);
  font-size: 0.82rem;
}

.calendar-event-main span {
  font-size: 0.9rem;
  font-weight: 900;
}

.calendar-event-main small,
.calendar-more-events,
.calendar-free-slot {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.calendar-free-slot {
  align-self: start;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  display: inline-flex;
  padding: 0.4rem 0.55rem;
}

.calendar-event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.calendar-event-actions .button {
  min-height: 34px;
  padding: 0.3rem 0.55rem;
}

.calendar-event-actions.is-compact .button {
  font-size: 0.78rem;
}

.agenda-actions-grid {
  align-items: start;
}

.calendar-day-view {
  display: grid;
  min-width: 620px;
}

/* Sprint 12 — perfis públicos e conta do cliente final */
.business-profile-shell {
  max-width: 1160px;
}

.public-site-header {
  position: sticky;
}

.business-profile-hero {
  overflow: hidden;
  padding: 0;
}

.business-profile-cover {
  background: linear-gradient(135deg, var(--color-surface-strong), var(--color-background-soft));
  background-position: center;
  background-size: cover;
  min-height: clamp(9rem, 26vw, 18rem);
}

.business-profile-identity {
  align-items: center;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: clamp(1rem, 3vw, 1.5rem);
}

.business-profile-heading h1 {
  font-size: clamp(1.8rem, 6vw, 3rem);
  margin-bottom: 0.35rem;
}

.business-profile-heading p:last-child {
  margin-bottom: 0;
}

.profile-avatar {
  align-items: center;
  background: var(--color-surface-strong);
  border: 3px solid var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  color: var(--color-primary);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 900;
  justify-content: center;
  overflow: hidden;
}

.profile-avatar-large {
  height: clamp(5rem, 14vw, 7.5rem);
  margin-top: clamp(-4rem, -8vw, -2.5rem);
  width: clamp(5rem, 14vw, 7.5rem);
}

.profile-avatar-small {
  height: 3.25rem;
  width: 3.25rem;
}

.profile-avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.profile-avatar span {
  font-size: 1.35rem;
}

.profile-avatar-large span {
  font-size: clamp(1.4rem, 5vw, 2.2rem);
}

.business-profile-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-4);
}

.business-profile-main,
.business-profile-sidebar {
  display: grid;
  gap: var(--space-4);
}

.profile-long-copy {
  line-height: 1.75;
  margin-bottom: 0;
  white-space: pre-line;
}

.profile-service-list {
  display: grid;
  gap: var(--space-2);
}

.profile-service-card {
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-3);
}

.profile-service-card h3,
.profile-service-card p {
  margin-bottom: 0;
}

.profile-details {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.profile-details > div {
  border-bottom: 1px solid var(--color-border);
  display: grid;
  gap: 0.15rem;
  padding-bottom: var(--space-2);
}

.profile-details > div:last-child {
  border-bottom: 0;
}

.profile-details dt {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-details dd {
  font-weight: 800;
  margin: 0;
  overflow-wrap: anywhere;
}

.profile-contact-actions .button {
  flex: 1 1 9rem;
}

.booking-business-summary {
  align-items: center;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1fr);
  margin-bottom: var(--space-4);
}

.booking-business-summary h1,
.booking-business-summary p {
  margin-bottom: 0.2rem;
}

.booking-business-summary .button {
  grid-column: 1 / -1;
}

.account-status-row {
  align-items: center;
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  padding: var(--space-3);
}

.account-status-row p {
  margin: 0;
}

.business-profile-cover img {
  display: block;
  height: clamp(9rem, 26vw, 18rem);
  object-fit: cover;
  width: 100%;
}

/* Versão 19 — cards de profissionais e vínculo recolhível de serviços */
.professional-card {
  display: grid;
  gap: var(--space-3);
  overflow: visible;
  position: relative;
}

.professional-card-header {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.professional-card-identity {
  min-width: 0;
}

.professional-card-name {
  display: block;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.professional-card-badges,
.professional-service-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.professional-billing-status {
  margin: 0;
}

.professional-linked-services {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.55rem;
  padding: 0.8rem;
}

.professional-linked-services-label {
  font-size: 0.82rem;
  font-weight: 900;
  margin: 0;
}

.professional-linked-services-empty {
  margin: 0;
}

.professional-service-chip {
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.3rem 0.6rem;
}

.professional-card-actions {
  align-items: flex-start;
  margin-top: 0;
}

.professional-service-linker {
  position: relative;
}

.professional-service-linker.is-open {
  z-index: 20;
}

.professional-service-dropdown {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 0.75rem;
  max-height: min(30rem, calc(100vh - 5rem));
  overflow: auto;
  padding: var(--space-3);
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: min(25rem, calc(100vw - 3rem));
  z-index: 30;
}

.professional-service-dropdown[hidden] {
  display: none;
}

.professional-service-dropdown-title {
  font-size: 0.95rem;
}

.professional-service-options {
  display: grid;
  gap: 0.5rem;
}

.professional-service-option {
  align-items: center;
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.7rem;
}

.professional-service-option:has(input:checked) {
  border-color: var(--color-primary);
}

.professional-service-option:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.65;
}

.professional-service-option input {
  min-height: auto;
  width: auto;
}

.professional-service-option-content {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.professional-service-option-content strong,
.professional-service-option-content small {
  overflow-wrap: anywhere;
}

.professional-service-hint {
  font-size: 0.78rem;
  margin: 0;
}

.professional-service-actions {
  margin-top: 0;
}

/* Versão 21 — funcionamento do estabelecimento e atendimento por profissional */
.availability-page-shell {
  display: grid;
  gap: var(--space-4);
  max-width: 1320px;
}

.availability-hero h1 {
  max-width: 20ch;
}

.availability-form-grid,
.availability-results-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}

.availability-form-card,
.availability-results-card {
  min-width: 0;
}

.availability-section-heading {
  align-items: flex-start;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1fr);
  margin-bottom: var(--space-4);
}

.availability-section-heading h2,
.availability-section-heading p {
  margin-bottom: 0.35rem;
}

.availability-section-icon {
  align-items: center;
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: inline-flex;
  font-size: 1.3rem;
  font-weight: 900;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

.schedule-card-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.schedule-card {
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  padding: var(--space-3);
}

.schedule-card-business {
  border-top: 4px solid var(--color-primary);
}

.schedule-card-professional {
  border-top: 4px solid var(--color-surface-strong);
}

.schedule-card-top {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: space-between;
}

.schedule-card h3,
.schedule-card p {
  margin: 0;
}

.schedule-card-time {
  font-size: 1.05rem;
  font-weight: 900;
}

.schedule-card-status {
  color: var(--color-success, #147a42);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.availability-rule-notice {
  margin: 0;
}

.schedule-card-remove {
  justify-self: start;
  margin-top: 0.2rem;
  min-height: 2.35rem;
  padding: 0.4rem 0.7rem;
}

/* Versão 26 — foto e telefone dos profissionais */
.professional-photo-field {
  display: grid;
  gap: 0.55rem;
}

.professional-photo-field input[type='file'] {
  cursor: pointer;
  padding: 0.7rem;
}

.professional-photo-help {
  font-size: 0.78rem;
  margin: 0;
}

.professional-photo-preview {
  align-items: center;
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3);
}

.professional-photo-preview[hidden] {
  display: none;
}

.professional-photo-preview img,
.professional-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.professional-photo-preview img {
  border-radius: var(--radius-md);
  height: 5rem;
  width: 5rem;
}

.professional-card-identity {
  align-items: center;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1fr);
}

.professional-card-identity-text {
  min-width: 0;
}

.professional-card-identity-text p {
  margin: 0.18rem 0 0;
  overflow-wrap: anywhere;
}

.professional-avatar {
  align-items: center;
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-primary);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 900;
  height: 3.75rem;
  justify-content: center;
  overflow: hidden;
  width: 3.75rem;
}

.professional-card-phone {
  font-size: 0.88rem;
}
.settings-shell{max-width:1100px}.settings-card{margin-bottom:1.25rem}.settings-image-preview{width:96px;height:96px;object-fit:cover;border-radius:50%;margin-top:.75rem;border:1px solid var(--border-color,#d8dee8)}.settings-cover-preview{width:100%;max-width:360px;height:140px;object-fit:cover;border-radius:12px;margin-top:.75rem;border:1px solid var(--border-color,#d8dee8)}


/* Versão 31 — cards públicos de equipe, serviços e informações */
.public-profile-cards {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.profile-team-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.profile-team-card {
  align-items: flex-start;
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
}

.profile-team-content {
  min-width: 0;
}

.profile-team-content h3,
.profile-team-content p {
  margin-bottom: 0.35rem;
}

.profile-team-role {
  color: var(--color-primary);
  font-size: 0.88rem;
  font-weight: 800;
}

.profile-team-bio,
.profile-service-description {
  line-height: 1.55;
  white-space: pre-line;
}

.profile-service-description {
  margin: 0.45rem 0;
}

.profile-information-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.profile-information-section {
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width: 0;
  padding: var(--space-3);
}

.profile-information-section h3 {
  margin-bottom: var(--space-2);
}

.profile-social-links {
  align-items: stretch;
}

.profile-social-links .button {
  flex: 1 1 8rem;
}


/* Versão 33 — conta do cliente simplificada */
.customer-delete-card {
  border-top: 5px solid var(--color-danger);
  margin-top: var(--space-4);
}

.customer-delete-form {
  max-width: 34rem;
}

/* Customer WhatsApp OTP — public booking */
.booking-identity,
.booking-otp {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border-color, #dfe7e3);
  border-radius: 16px;
  background: var(--surface-soft, #fbfaf7);
}

.booking-otp input[name="customerOtp"] {
  max-width: 180px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-align: center;
}