/* Maid Manager Design System — component layer sourced from ds_vitrine_completa.html */

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: BUTTON ──
═══════════════════════════════════════════════════════════════ */
.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mm-s-2);
  height: 40px;
  padding: 0 var(--mm-s-4);
  border-radius: var(--mm-r-md);
  border: 1px solid var(--mm-border);
  background: var(--mm-surface);
  color: var(--mm-text-primary);
  font-family: var(--mm-font);
  font-size: var(--mm-text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--mm-t-fast) var(--mm-ease),
              border-color var(--mm-t-fast) var(--mm-ease),
              box-shadow var(--mm-t-fast) var(--mm-ease),
              transform 180ms var(--mm-spring),
              opacity var(--mm-t-fast);
  box-shadow: var(--mm-shadow-xs);
}
.mm-btn:hover  { background: var(--mm-surface-hover); border-color: var(--mm-border-medium); box-shadow: var(--mm-shadow-sm); }
.mm-btn:active { transform: scale(0.96); box-shadow: var(--mm-shadow-xs); }
.mm-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.mm-btn:focus-visible { outline: 2px solid var(--mm-brand-500); outline-offset: 2px; }

.mm-btn--primary {
  background: var(--mm-brand-600);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--mm-shadow-brand);
}
.mm-btn--primary:hover { background: var(--mm-brand-500); box-shadow: 0 6px 24px rgba(229,72,77,0.40); }

.mm-btn--secondary {
  background: var(--mm-brand-100);
  color: var(--mm-brand-600);
  border-color: transparent;
  box-shadow: none;
}
.mm-btn--secondary:hover { background: #fde4e4; }

.mm-btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.mm-btn--ghost:hover { background: var(--mm-surface-strong); }

.mm-btn--danger {
  background: var(--mm-danger-50);
  color: var(--mm-danger-600);
  border-color: var(--mm-danger-100);
  box-shadow: none;
}
.mm-btn--danger:hover { background: var(--mm-danger-100); }

.mm-btn--glass {
  background: var(--mm-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--mm-glass-border);
  box-shadow: var(--mm-shadow-sm);
}

/* Sizes */
.mm-btn--xs { height: 28px; padding: 0 var(--mm-s-3); font-size: var(--mm-text-xs); border-radius: var(--mm-r-sm); }
.mm-btn--sm { height: 34px; padding: 0 var(--mm-s-3); font-size: var(--mm-text-xs); border-radius: var(--mm-r-md); }
.mm-btn--lg { height: 48px; padding: 0 var(--mm-s-5); font-size: var(--mm-text-md); border-radius: var(--mm-r-lg); }
.mm-btn--xl { height: 56px; padding: 0 var(--mm-s-6); font-size: var(--mm-text-lg); border-radius: var(--mm-r-xl); font-weight: 600; }
.mm-btn--full { width: 100%; }

/* Icon button */
.mm-btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--mm-r-md);
  flex-shrink: 0;
}
.mm-btn--icon.mm-btn--sm { width: 30px; height: 30px; border-radius: var(--mm-r-sm); }
.mm-btn--icon.mm-btn--lg { width: 44px; height: 44px; border-radius: var(--mm-r-lg); }

/* FAB */
.mm-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--mm-brand-600);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mm-shadow-brand);
  transition: transform 200ms var(--mm-spring),
              box-shadow var(--mm-t-fast) var(--mm-ease);
  -webkit-tap-highlight-color: transparent;
}
.mm-fab:hover  { transform: scale(1.08); box-shadow: 0 8px 28px rgba(229,72,77,0.46); }
.mm-fab:active { transform: scale(0.93); }
.mm-fab--sm { width: 40px; height: 40px; }
.mm-fab--lg { width: 64px; height: 64px; border-radius: 50%; }

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: BADGE / PILL ──
═══════════════════════════════════════════════════════════════ */
.mm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--mm-r-pill);
  font-size: var(--mm-text-xs);
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.mm-badge--soft    { background: var(--mm-surface-strong);   color: var(--mm-text-secondary); }
.mm-badge--outline { background: transparent; border: 1px solid var(--mm-border-medium); color: var(--mm-text-secondary); }
.mm-badge--brand   { background: var(--mm-brand-100);  color: var(--mm-brand-600); }
.mm-badge--success { background: var(--mm-success-100); color: var(--mm-success-600); }
.mm-badge--warning { background: var(--mm-warning-100); color: var(--mm-warning-600); }
.mm-badge--danger  { background: var(--mm-danger-100);  color: var(--mm-danger-600); }
.mm-badge--info    { background: var(--mm-info-100);    color: var(--mm-info-600); }

/* Status dot */
.mm-badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* BadgeTeam */
.mm-badge-team {
  display: inline-flex;
  align-items: center;
  gap: var(--mm-s-2);
  padding: 3px 10px 3px 3px;
  border-radius: var(--mm-r-pill);
  background: var(--mm-surface-strong);
  font-size: var(--mm-text-xs);
  font-weight: 500;
  border: 1px solid var(--mm-border-soft);
}
.mm-badge-team__avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mm-brand-600);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: AVATAR ──
═══════════════════════════════════════════════════════════════ */
.mm-avatar {
  border-radius: 50%;
  background: var(--mm-brand-600);
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  /* default */
  width: 36px; height: 36px; font-size: var(--mm-text-xs);
}
.mm-avatar--xs { width: 24px; height: 24px; font-size: 9px; }
.mm-avatar--sm { width: 30px; height: 30px; font-size: 10px; }
.mm-avatar--lg { width: 48px; height: 48px; font-size: var(--mm-text-md); }
.mm-avatar--xl { width: 64px; height: 64px; font-size: var(--mm-text-xl); }

.mm-avatar--b { background: var(--mm-brand-600); }
.mm-avatar--g { background: var(--mm-success-600); }
.mm-avatar--i { background: var(--mm-info-500); }
.mm-avatar--o { background: var(--mm-warning-600); }
.mm-avatar--soft { background: var(--mm-surface-strong); color: var(--mm-text-secondary); border: 1px solid var(--mm-border); }

.mm-avatar-group { display: flex; }
.mm-avatar-group .mm-avatar {
  border: 2.5px solid var(--mm-surface);
  margin-left: -9px;
}
.mm-avatar-group .mm-avatar:first-child { margin-left: 0; }

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: INPUTS ──
═══════════════════════════════════════════════════════════════ */
.mm-input, .mm-select, .mm-textarea {
  font-family: var(--mm-font);
  font-size: var(--mm-text-sm);
  color: var(--mm-text-primary);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-md);
  outline: none;
  width: 100%;
  transition: border-color var(--mm-t-fast) var(--mm-ease),
              box-shadow var(--mm-t-fast) var(--mm-ease);
}
.mm-input, .mm-select { height: 40px; padding: 0 var(--mm-s-3); }
.mm-textarea  { padding: var(--mm-s-3); min-height: 88px; resize: vertical; }
.mm-input:focus, .mm-select:focus, .mm-textarea:focus {
  border-color: var(--mm-brand-400);
  box-shadow: 0 0 0 3px rgba(229,72,77,0.11);
}
.mm-input::placeholder, .mm-textarea::placeholder { color: var(--mm-text-placeholder); }
.mm-input--sm, .mm-select--sm { height: 34px; font-size: var(--mm-text-xs); border-radius: var(--mm-r-sm); }

/* States */
.mm-input.is-invalid, .mm-select.is-invalid, .mm-textarea.is-invalid {
  border-color: var(--mm-danger-500);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.10);
}

/* Input with icon */
.mm-input-wrap { position: relative; display: flex; align-items: center; }
.mm-input-wrap > .mm-input { padding-left: 38px; }
.mm-input-wrap__icon {
  position: absolute;
  left: 12px;
  color: var(--mm-text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.mm-input-wrap--trail > .mm-input { padding-right: 38px; padding-left: var(--mm-s-3); }
.mm-input-wrap__trail {
  position: absolute;
  right: 12px;
  color: var(--mm-text-muted);
  display: flex;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: FIELD ──
═══════════════════════════════════════════════════════════════ */
.mm-field { display: flex; flex-direction: column; gap: var(--mm-s-1); }

.mm-field__label {
  font-size: var(--mm-text-xs);
  font-weight: 600;
  color: var(--mm-text-secondary);
  letter-spacing: 0.01em;
}
.mm-field__label--required::after {
  content: ' *';
  color: var(--mm-brand-600);
}

.mm-field__helper {
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
  margin-top: 1px;
}
.mm-field__error {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--mm-text-xs);
  color: var(--mm-danger-600);
  font-weight: 500;
  margin-top: 1px;
}

/* ── FORM GRID ── */
.mm-form-grid {
  display: grid;
  gap: var(--mm-s-4);
  grid-template-columns: repeat(12, 1fr);
}
.mm-col-2  { grid-column: span 2; }
.mm-col-3  { grid-column: span 3; }
.mm-col-4  { grid-column: span 4; }
.mm-col-5  { grid-column: span 5; }
.mm-col-6  { grid-column: span 6; }
.mm-col-7  { grid-column: span 7; }
.mm-col-8  { grid-column: span 8; }
.mm-col-9  { grid-column: span 9; }
.mm-col-12 { grid-column: span 12; }

@media (max-width: 640px) {
  .mm-col-2,.mm-col-3,.mm-col-4,.mm-col-5,.mm-col-6,
  .mm-col-7,.mm-col-8,.mm-col-9 { grid-column: span 12; }
}

/* ── FORM SECTION ── */
.mm-form-section + .mm-form-section { padding-top: var(--mm-s-5); border-top: 1px solid var(--mm-border-soft); margin-top: var(--mm-s-5); }
.mm-form-section__header { margin-bottom: var(--mm-s-4); }
.mm-form-section__label {
  font-size: var(--mm-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mm-text-muted);
  margin-bottom: var(--mm-s-1);
}
.mm-form-section__title {
  font-size: var(--mm-text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mm-form-section__sub {
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: CARD ──
═══════════════════════════════════════════════════════════════ */
.mm-card {
  background: var(--mm-surface);
  border-radius: var(--mm-r-xl);
  border: 1px solid var(--mm-border-soft);
  box-shadow: var(--mm-shadow-sm);
  padding: var(--mm-s-5);
}
.mm-card--soft     { background: var(--mm-surface-soft);  box-shadow: none; border-color: var(--mm-border); }
.mm-card--elevated { box-shadow: var(--mm-shadow-md); }
.mm-card--interactive {
  cursor: pointer;
  transition: transform 180ms var(--mm-spring), box-shadow var(--mm-t-mid) var(--mm-ease);
}
.mm-card--interactive:hover  { transform: translateY(-2px); box-shadow: var(--mm-shadow-md); }
.mm-card--interactive:active { transform: scale(0.99); box-shadow: var(--mm-shadow-xs); }

.mm-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mm-s-3);
  margin-bottom: var(--mm-s-4);
}
.mm-card__title    { font-size: var(--mm-text-md); font-weight: 600; letter-spacing: -0.01em; }
.mm-card__subtitle { font-size: var(--mm-text-sm); color: var(--mm-text-secondary); margin-top: 2px; }
.mm-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--mm-s-4);
  margin-top: var(--mm-s-4);
  border-top: 1px solid var(--mm-border-soft);
}

/* ── DASHBOARD CARD ── */
.mm-dash-card {
  background: var(--mm-surface);
  border-radius: var(--mm-r-xl);
  border: 1px solid var(--mm-border-soft);
  box-shadow: var(--mm-shadow-sm);
  padding: var(--mm-s-4) var(--mm-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--mm-s-2);
}
.mm-dash-card__label {
  font-size: var(--mm-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mm-text-muted);
}
.mm-dash-card__value {
  font-size: var(--mm-text-3xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--mm-text-primary);
}
.mm-dash-card__trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--mm-text-sm);
  font-weight: 500;
}
.mm-dash-card__trend--up   { color: var(--mm-success-600); }
.mm-dash-card__trend--down { color: var(--mm-danger-600); }
.mm-dash-card__trend--flat { color: var(--mm-text-muted); }
.mm-dash-card__icon {
  width: 36px; height: 36px;
  border-radius: var(--mm-r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-bottom: var(--mm-s-1);
}
.mm-dash-card__icon--brand   { background: var(--mm-brand-100);   color: var(--mm-brand-600); }
.mm-dash-card__icon--success { background: var(--mm-success-100); color: var(--mm-success-600); }
.mm-dash-card__icon--warning { background: var(--mm-warning-100); color: var(--mm-warning-600); }
.mm-dash-card__icon--info    { background: var(--mm-info-100);    color: var(--mm-info-600); }

/* ── APPOINTMENT CARD ── */
.mm-appt-card {
  background: var(--mm-surface);
  border-radius: var(--mm-r-xl);
  border: 1px solid var(--mm-border-soft);
  box-shadow: var(--mm-shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform 180ms var(--mm-spring), box-shadow var(--mm-t-mid) var(--mm-ease);
}
.mm-appt-card:hover  { transform: translateY(-2px); box-shadow: var(--mm-shadow-md); }
.mm-appt-card:active { transform: scale(0.99); box-shadow: var(--mm-shadow-xs); }

.mm-appt-card__stripe {
  height: 3px;
  background: linear-gradient(90deg, var(--mm-brand-600), var(--mm-brand-400));
}
.mm-appt-card__stripe--success { background: linear-gradient(90deg, var(--mm-success-600), #4ade80); }
.mm-appt-card__stripe--warning { background: linear-gradient(90deg, var(--mm-warning-600), var(--mm-warning-500)); }
.mm-appt-card__stripe--info    { background: linear-gradient(90deg, var(--mm-info-600), var(--mm-info-500)); }

.mm-appt-card__body   { padding: var(--mm-s-4); }
.mm-appt-card__head   { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mm-s-3); }
.mm-appt-card__client { font-size: var(--mm-text-md); font-weight: 600; letter-spacing: -0.01em; }
.mm-appt-card__type   { font-size: var(--mm-text-sm); color: var(--mm-text-secondary); margin-top: 2px; }
.mm-appt-card__meta   { display: flex; flex-wrap: wrap; gap: var(--mm-s-3); margin-top: var(--mm-s-3); }
.mm-appt-card__meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
}
.mm-appt-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mm-s-3) var(--mm-s-4);
  border-top: 1px solid var(--mm-border-soft);
  background: var(--mm-surface-soft);
}

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: MODAL SYSTEM ──
═══════════════════════════════════════════════════════════════ */
.mm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12,12,20,0.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mm-t-slow) var(--mm-ease);
}
@media (min-width: 640px) {
  .mm-overlay {
    align-items: center;
    padding: var(--mm-s-5);
  }
}
.mm-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ModalShell */
.mm-modal {
  background: var(--mm-surface);
  border-radius: var(--mm-r-3xl) var(--mm-r-3xl) 0 0;
  box-shadow: var(--mm-shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: 96dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 380ms cubic-bezier(0.32, 1, 0.55, 1);
}
@media (min-width: 640px) {
  .mm-modal {
    border-radius: var(--mm-r-2xl);
    transform: translateY(20px) scale(0.96);
    transition: transform var(--mm-t-slow) var(--mm-spring);
    max-height: 90dvh;
  }
}
.mm-overlay.is-open .mm-modal {
  transform: translateY(0) scale(1);
}

/* ModalShell variants */
.mm-modal--sm  { max-width: 380px; }
.mm-modal--lg  { max-width: 680px; }

/* ModalDragHandle */
.mm-modal__handle {
  width: 36px;
  height: 4px;
  background: var(--mm-border-medium);
  border-radius: var(--mm-r-pill);
  margin: var(--mm-s-3) auto 0;
  flex-shrink: 0;
}
@media (min-width: 640px) { .mm-modal__handle { display: none; } }

/* ModalHeader */
.mm-modal__header {
  display: flex;
  align-items: center;
  gap: var(--mm-s-3);
  padding: var(--mm-s-4) var(--mm-s-5);
  border-bottom: 1px solid var(--mm-border-soft);
  flex-shrink: 0;
}
.mm-modal__header--center { justify-content: center; flex-direction: column; text-align: center; padding: var(--mm-s-5); }

/* ModalBackButton — left slot in header */
.mm-modal__back {
  display: flex;
  align-items: center;
  gap: var(--mm-s-2);
  font-size: var(--mm-text-sm);
  font-weight: 500;
  color: var(--mm-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color var(--mm-t-fast);
}
.mm-modal__back:hover { color: var(--mm-text-primary); }

/* ModalTitle block */
.mm-modal__title-block { flex: 1; min-width: 0; }
.mm-modal__title    { font-size: var(--mm-text-md); font-weight: 600; letter-spacing: -0.01em; }
.mm-modal__subtitle { font-size: var(--mm-text-xs); color: var(--mm-text-muted); margin-top: 1px; }

/* ModalCloseButton */
.mm-modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--mm-r-md);
  border: none;
  background: var(--mm-surface-strong);
  color: var(--mm-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--mm-t-fast), color var(--mm-t-fast), transform 180ms var(--mm-spring);
}
.mm-modal__close:hover  { background: var(--mm-border); color: var(--mm-text-primary); }
.mm-modal__close:active { transform: scale(0.93); }

/* ── COMPONENT: ModalHeaderIcon ─────────────────────────────────────
   Decorative colored icon container for the left slot of ModalHeader.
   Communicates modal intent (create / edit / delete / confirm / alert)
   through semantic color tokens. Always aria-hidden="true".

   Sizes:   --sm (28px)  |  default (36px)  |  --lg (44px)
   Palette: --create · --edit · --delete · --success · --warning
   Icons:   calendar · clock · user · pin — all Lucide / SF-style
─────────────────────────────────────────────────────────────────── */
.mm-modal__header-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--mm-r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--mm-brand-100);
  color: var(--mm-brand-600);
  transition: background var(--mm-t-fast) var(--mm-ease),
              color var(--mm-t-fast) var(--mm-ease);
}
/* Size variants */
.mm-modal__header-icon--sm { width: 28px; height: 28px; border-radius: var(--mm-r-md); }
.mm-modal__header-icon--lg { width: 44px; height: 44px; border-radius: var(--mm-r-xl); }
/* Palette modifiers */
.mm-modal__header-icon--create  { background: var(--mm-brand-100);   color: var(--mm-brand-600);   }
.mm-modal__header-icon--edit    { background: var(--mm-info-100);     color: var(--mm-info-500);    }
.mm-modal__header-icon--delete  { background: var(--mm-danger-100);   color: var(--mm-danger-600);  }
.mm-modal__header-icon--success { background: var(--mm-success-100);  color: var(--mm-success-600); }
.mm-modal__header-icon--warning { background: var(--mm-warning-100);  color: var(--mm-warning-600); }

/* ModalBody */
.mm-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--mm-s-1);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.mm-modal__body::-webkit-scrollbar { width: 3px; }
.mm-modal__body::-webkit-scrollbar-thumb { background: var(--mm-border-medium); border-radius: 4px; }

/* ModalDivider */
.mm-modal__divider {
  height: 1px;
  background: var(--mm-border-soft);
  margin: var(--mm-s-4) calc(-1 * var(--mm-s-5));
}

/* ModalFooter */
.mm-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mm-s-3);
  padding: var(--mm-s-3) var(--mm-s-5) calc(var(--mm-s-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--mm-border-soft);
  background: var(--mm-surface);
  flex-shrink: 0;
}
.mm-modal__footer--spread { justify-content: space-between; }
.mm-modal__footer--stack  { flex-direction: column; gap: var(--mm-s-2); }

/* FullScreen modal */
.mm-modal--fullscreen {
  max-width: 100%;
  max-height: 100dvh;
  border-radius: 0;
  transform: translateY(0) scale(0.98);
}
@media (min-width: 640px) {
  .mm-modal--fullscreen { border-radius: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: TOOLBAR ──
═══════════════════════════════════════════════════════════════ */
.mm-toolbar {
  display: flex;
  align-items: center;
  gap: var(--mm-s-3);
  padding: var(--mm-s-3) var(--mm-s-4);
  background: var(--mm-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--mm-border-soft);
  border-radius: var(--mm-r-xl);
  box-shadow: var(--mm-shadow-sm);
}

/* ToolbarBack — same as modal back but for page nav */
.mm-toolbar__back {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--mm-text-sm);
  font-weight: 500;
  color: var(--mm-brand-600);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: opacity var(--mm-t-fast);
}
.mm-toolbar__back:hover { opacity: 0.7; }

/* ToolbarTitle block */
.mm-toolbar__title-block { flex: 1; min-width: 0; }
.mm-toolbar__title {
  font-size: var(--mm-text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-toolbar__subtitle {
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
  margin-top: 1px;
}

/* ToolbarActions */
.mm-toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--mm-s-2);
  flex-shrink: 0;
}

/* ToolbarButton — lightweight ghost icon */
.mm-toolbar__btn {
  width: 34px;
  height: 34px;
  border-radius: var(--mm-r-md);
  border: none;
  background: transparent;
  color: var(--mm-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--mm-t-fast), color var(--mm-t-fast), transform 180ms var(--mm-spring);
}
.mm-toolbar__btn:hover  { background: var(--mm-surface-strong); color: var(--mm-text-primary); }
.mm-toolbar__btn:active { transform: scale(0.90); }
.mm-toolbar__btn--active { color: var(--mm-brand-600); background: var(--mm-brand-100); }

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: LIST SYSTEM ──
═══════════════════════════════════════════════════════════════ */
.mm-list {
  /* background: var(--mm-surface); */
  border-radius: var(--mm-r-xl);
  /* border: 1px solid var(--mm-border-soft); */
  /* box-shadow: var(--mm-shadow-xs); */
  overflow: hidden;
}

.mm-list-item {
  display: flex;
  align-items: center;
  gap: var(--mm-s-3);
  transition: background var(--mm-t-fast);
  position: relative;
}
.mm-list-item:last-child { border-bottom: none; }
.mm-list-item--interactive { cursor: pointer; }
.mm-list-item--interactive:hover { background: var(--mm-surface-hover); }
.mm-list-item--interactive:active { background: var(--mm-surface-strong); }

/* List item content */
.mm-list-item__body { flex: 1; min-width: 0; }
.mm-list-item__title {
  font-size: var(--mm-text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Variante leve para casos sem ênfase visual, como endereço em preview */
.mm-list-item__title--normal {
  font-weight: 400;
}

.mm-list-item__sub {
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-list-item__meta  { font-size: var(--mm-text-xs); color: var(--mm-text-muted); flex-shrink: 0; }
.mm-list-item__trail { display: flex; align-items: center; gap: var(--mm-s-2); flex-shrink: 0; }

.mm-list-item__icon {
  /* width: 34px;
  height: 34px; */
  /* border-radius: var(--mm-r-lg); */
  display: flex;
  align-items: center;
  /* justify-content: center; */
  flex-shrink: 0;
}

/* .mm-list-item__icon--info {
  background: var(--mm-info-100);
  color: var(--mm-info-600);
}
 */

/* Small reusable interaction helpers */
.mm-icon-muted {
  color: var(--mm-text-muted);
}

.mm-badge--interactive {
  cursor: pointer;
}

/* ListItemActions — reveal on hover */
.mm-list-item__actions {
  display: flex;
  align-items: center;
  gap: var(--mm-s-1);
  opacity: 0;
  transition: opacity var(--mm-t-mid) var(--mm-ease);
  flex-shrink: 0;
}
.mm-list-item:hover .mm-list-item__actions,
.mm-list-item:focus-within .mm-list-item__actions { opacity: 1; }

/* Chevron for navigable list items */
.mm-list-item__chevron {
  color: var(--mm-text-muted);
  opacity: 0.4;
  flex-shrink: 0;
  transition: transform var(--mm-t-fast) var(--mm-ease);
}
.mm-list-item--interactive:hover .mm-list-item__chevron { opacity: 0.8; transform: translateX(2px); }

/* ListDivider */
.mm-list-divider {
  height: 1px;
  background: var(--mm-border-soft);
  margin: 0 var(--mm-s-4);
}
.mm-list-divider--full { margin: 0; }

/* Section list (iOS grouped) */
.mm-list-section { margin-bottom: var(--mm-s-5); }
.mm-list-section__label {
  font-size: var(--mm-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mm-text-muted);
  padding: 0 var(--mm-s-4);
  margin-bottom: var(--mm-s-2);
}

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: SEGMENTED CONTROL ──
═══════════════════════════════════════════════════════════════ */
.mm-segmented {
  display: inline-flex;
  background: var(--mm-surface-strong);
  border-radius: calc(var(--mm-r-md) + 2px);
  padding: 3px;
  gap: 2px;
}
.mm-segmented--full { display: flex; }
.mm-segmented--full .mm-segmented__item { flex: 1; }

.mm-segmented__item {
  flex: 0;
  padding: 6px 14px;
  border-radius: var(--mm-r-md);
  font-size: var(--mm-text-xs);
  font-weight: 500;
  color: var(--mm-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 160ms var(--mm-ease);
  white-space: nowrap;
  font-family: var(--mm-font);
  display: flex;
  align-items: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
}
.mm-segmented__item:active { transform: scale(0.95); }
.mm-segmented__item--active {
  background: var(--mm-surface);
  color: var(--mm-text-primary);
  box-shadow: var(--mm-shadow-sm);
  font-weight: 600;
}
.mm-segmented__item:hover:not(.mm-segmented__item--active) { color: var(--mm-text-primary); }

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: TOGGLE SWITCH ──
═══════════════════════════════════════════════════════════════ */
.mm-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-s-4);
  padding: var(--mm-s-3) 0;
}
.mm-toggle-row + .mm-toggle-row { border-top: 1px solid var(--mm-border-soft); }
.mm-toggle-row__body { display: flex; flex-direction: column; gap: 1px; }
.mm-toggle-row__label { font-size: var(--mm-text-sm); font-weight: 500; }
.mm-toggle-row__desc  { font-size: var(--mm-text-xs); color: var(--mm-text-muted); }

.mm-toggle-wrap { display: flex; align-items: center; gap: var(--mm-s-3); cursor: pointer; }
.mm-toggle-wrap__label { font-size: var(--mm-text-sm); font-weight: 500; user-select: none; }

.mm-toggle {
  -webkit-appearance: none;
  appearance: none;
  width: 46px;
  height: 28px;
  border-radius: var(--mm-r-pill);
  background: var(--mm-surface-strong);
  border: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 220ms var(--mm-ease);
}
.mm-toggle::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.22);
  transition: transform 250ms var(--mm-spring);
}
.mm-toggle:checked { background: var(--mm-success-600); }
.mm-toggle:checked::after { transform: translateX(18px); }
.mm-toggle:focus-visible { outline: 2px solid var(--mm-brand-500); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: ACTION BAR ──
═══════════════════════════════════════════════════════════════ */
.mm-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-s-3);
  padding: var(--mm-s-3) var(--mm-s-4);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border-soft);
  border-radius: var(--mm-r-xl);
  box-shadow: var(--mm-shadow-sm);
}
.mm-action-bar--sticky {
  position: sticky;
  bottom: var(--mm-s-4);
  z-index: 10;
  background: var(--mm-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: FEEDBACK ──
═══════════════════════════════════════════════════════════════ */

/* Alert */
.mm-alert {
  display: flex;
  gap: var(--mm-s-3);
  padding: var(--mm-s-3) var(--mm-s-4);
  border-radius: var(--mm-r-lg);
  font-size: var(--mm-text-sm);
  border: 1px solid transparent;
}
.mm-alert__icon { flex-shrink: 0; margin-top: 1px; }
.mm-alert__title { font-weight: 600; margin-bottom: 2px; font-size: var(--mm-text-sm); }
.mm-alert__body  { flex: 1; }
.mm-alert__close { flex-shrink: 0; cursor: pointer; margin-left: auto; opacity: 0.6; background: none; border: none; display: flex; align-items: flex-start; padding: 1px; color: inherit; transition: opacity var(--mm-t-fast); }
.mm-alert__close:hover { opacity: 1; }

.mm-alert--success { background: var(--mm-success-50);  border-color: rgba(34,197,94,0.20);  color: #14532d; }
.mm-alert--warning { background: var(--mm-warning-50);  border-color: rgba(245,158,11,0.22); color: #713f12; }
.mm-alert--danger  { background: var(--mm-danger-50);   border-color: rgba(239,68,68,0.20);  color: #7f1d1d; }
.mm-alert--info    { background: var(--mm-info-50);     border-color: rgba(59,130,246,0.20); color: #1e3a8a; }
.mm-alert--neutral { background: var(--mm-surface-soft); border-color: var(--mm-border); color: var(--mm-text-secondary); }

/* EmptyState */
.mm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--mm-s-3);
  /* padding: var(--mm-s-8) var(--mm-s-5); */
}
.mm-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--mm-r-xl);
  background: var(--mm-surface-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mm-text-muted);
  margin-bottom: var(--mm-s-1);
}
.mm-empty__title { font-size: var(--mm-text-lg); font-weight: 600; letter-spacing: -0.01em; }
.mm-empty__desc  { font-size: var(--mm-text-sm); color: var(--mm-text-secondary); max-width: 30ch; line-height: 1.6; }

/* LoadingState */
.mm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mm-s-3);
  padding: var(--mm-s-7) var(--mm-s-5);
}
.mm-loading__spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--mm-border);
  border-top-color: var(--mm-brand-600);
  border-radius: 50%;
  animation: mm-spin 0.75s linear infinite;
}
.mm-loading__label { font-size: var(--mm-text-sm); color: var(--mm-text-muted); }
@keyframes mm-spin { to { transform: rotate(360deg); } }

/* Skeleton */
.mm-skeleton {
  background: linear-gradient(
    90deg,
    var(--mm-surface-strong) 25%,
    var(--mm-surface-hover) 50%,
    var(--mm-surface-strong) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--mm-r-md);
  animation: mm-shimmer 1.5s ease-in-out infinite;
}
@keyframes mm-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Progress */
.mm-progress { height: 6px; background: var(--mm-surface-strong); border-radius: var(--mm-r-pill); overflow: hidden; }
.mm-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--mm-brand-600), var(--mm-brand-400));
  border-radius: var(--mm-r-pill);
  transition: width 0.5s var(--mm-spring);
}
.mm-progress__bar--success { background: linear-gradient(90deg, var(--mm-success-600), #4ade80); }
.mm-progress__bar--info    { background: linear-gradient(90deg, var(--mm-info-600), var(--mm-info-500)); }
.mm-progress--sm  { height: 4px; }
.mm-progress--lg  { height: 10px; border-radius: var(--mm-r-md); }

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: CHECKBOX ──
═══════════════════════════════════════════════════════════════ */
.mm-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--mm-s-3);
  cursor: pointer;
  padding: var(--mm-s-2) 0;
}
.mm-checkbox-row__check {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: var(--mm-r-sm);
  border: 1.5px solid var(--mm-border);
  background: var(--mm-surface);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition: background var(--mm-t-fast) var(--mm-ease),
              border-color var(--mm-t-fast) var(--mm-ease),
              transform 160ms var(--mm-spring);
}
.mm-checkbox-row__check:checked {
  background: var(--mm-brand-600);
  border-color: var(--mm-brand-600);
}
.mm-checkbox-row__check:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6L5 8.5L9.5 3.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
}
.mm-checkbox-row__check:active { transform: scale(0.88); }
.mm-checkbox-row__check:focus-visible { outline: 2px solid var(--mm-brand-500); outline-offset: 2px; }
.mm-checkbox-row__body { flex: 1; }
.mm-checkbox-row__label { font-size: var(--mm-text-sm); font-weight: 500; line-height: 1.4; }
.mm-checkbox-row__desc  { font-size: var(--mm-text-xs); color: var(--mm-text-muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: RADIO GROUP ──
═══════════════════════════════════════════════════════════════ */
.mm-radio-group { display: flex; flex-direction: column; gap: var(--mm-s-2); }
.mm-radio-row {
  display: flex;
  align-items: center;
  gap: var(--mm-s-3);
  cursor: pointer;
  padding: var(--mm-s-3) var(--mm-s-4);
  border-radius: var(--mm-r-lg);
  border: 1.5px solid var(--mm-border);
  background: var(--mm-surface);
  transition: border-color var(--mm-t-fast), background var(--mm-t-fast), transform 160ms var(--mm-spring);
}
.mm-radio-row:hover  { border-color: var(--mm-border-medium); background: var(--mm-surface-hover); }
.mm-radio-row:active { transform: scale(0.99); }
.mm-radio-row--selected {
  border-color: var(--mm-brand-400);
  background: var(--mm-brand-50);
}
.mm-radio-row__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--mm-border);
  background: var(--mm-surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--mm-t-fast), background var(--mm-t-fast);
}
.mm-radio-row--selected .mm-radio-row__dot {
  border-color: var(--mm-brand-600);
  background: var(--mm-brand-600);
}
.mm-radio-row--selected .mm-radio-row__dot::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}
.mm-radio-row__label { font-size: var(--mm-text-sm); font-weight: 500; flex: 1; }
.mm-radio-row__sub   { font-size: var(--mm-text-xs); color: var(--mm-text-muted); margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: CLIENT CARD ──
═══════════════════════════════════════════════════════════════ */
.mm-client-card {
  background: var(--mm-surface);
  border-radius: var(--mm-r-xl);
  border: 1px solid var(--mm-border-soft);
  box-shadow: var(--mm-shadow-sm);
  padding: var(--mm-s-4);
  display: flex;
  gap: var(--mm-s-4);
  align-items: flex-start;
  cursor: pointer;
  transition: transform 180ms var(--mm-spring), box-shadow var(--mm-t-mid) var(--mm-ease);
}
.mm-client-card:hover  { transform: translateY(-2px); box-shadow: var(--mm-shadow-md); }
.mm-client-card:active { transform: scale(0.99); box-shadow: var(--mm-shadow-xs); }
.mm-client-card__body  { flex: 1; min-width: 0; }
.mm-client-card__name  { font-size: var(--mm-text-md); font-weight: 600; letter-spacing: -0.01em; }
.mm-client-card__address {
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-client-card__meta  { display: flex; flex-wrap: wrap; gap: var(--mm-s-2); margin-top: var(--mm-s-3); }
.mm-client-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--mm-s-3);
  padding-top: var(--mm-s-3);
  border-top: 1px solid var(--mm-border-soft);
}

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: TOOLTIP ──
═══════════════════════════════════════════════════════════════ */
.mm-tooltip-wrap { position: relative; display: inline-flex; }
.mm-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: var(--mm-text-primary);
  color: var(--mm-surface);
  font-size: var(--mm-text-xs);
  font-weight: 500;
  padding: 5px 9px;
  border-radius: var(--mm-r-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--mm-t-fast), transform var(--mm-t-fast) var(--mm-spring);
  z-index: 999;
}
.mm-tooltip-wrap:hover .mm-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: TAG INPUT ──
═══════════════════════════════════════════════════════════════ */
.mm-tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-s-2);
  padding: var(--mm-s-2) var(--mm-s-3);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-md);
  background: var(--mm-surface);
  min-height: 44px;
  align-items: center;
  cursor: text;
  transition: border-color var(--mm-t-fast), box-shadow var(--mm-t-fast);
}
.mm-tag-input:focus-within {
  border-color: var(--mm-brand-400);
  box-shadow: 0 0 0 3px rgba(229,72,77,0.10);
}
.mm-tag-input__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--mm-r-pill);
  background: var(--mm-brand-100);
  color: var(--mm-brand-600);
  font-size: var(--mm-text-xs);
  font-weight: 600;
}
.mm-tag-input__tag-remove {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: none;
  background: rgba(229,72,77,0.15);
  color: var(--mm-brand-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  padding: 0;
  transition: background var(--mm-t-fast);
}
.mm-tag-input__tag-remove:hover { background: rgba(229,72,77,0.3); }
.mm-tag-input__ghost {
  flex: 1;
  min-width: 80px;
  border: none;
  outline: none;
  font: inherit;
  font-size: var(--mm-text-sm);
  background: transparent;
  color: var(--mm-text-primary);
}
.mm-tag-input__ghost::placeholder { color: var(--mm-text-placeholder); }

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: STEP INDICATOR ──
═══════════════════════════════════════════════════════════════ */
.mm-steps {
  display: flex;
  align-items: center;
  gap: 0;
}
.mm-steps__item {
  display: flex;
  align-items: center;
  flex: 1;
}
.mm-steps__item:last-child { flex: none; }
.mm-steps__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--mm-border);
  background: var(--mm-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mm-text-xs);
  font-weight: 700;
  color: var(--mm-text-muted);
  flex-shrink: 0;
  transition: all var(--mm-t-mid) var(--mm-ease);
  z-index: 1;
  position: relative;
}
.mm-steps__item--done .mm-steps__dot {
  background: var(--mm-success-600);
  border-color: var(--mm-success-600);
  color: #fff;
}
.mm-steps__item--active .mm-steps__dot {
  background: var(--mm-brand-600);
  border-color: var(--mm-brand-600);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(229,72,77,0.15);
}
.mm-steps__line {
  flex: 1;
  height: 2px;
  background: var(--mm-border);
  transition: background var(--mm-t-mid);
}
.mm-steps__item--done .mm-steps__line { background: var(--mm-success-600); }
.mm-steps__label {
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
  margin-top: var(--mm-s-2);
  text-align: center;
  white-space: nowrap;
}
.mm-steps__item--active .mm-steps__label { color: var(--mm-brand-600); font-weight: 600; }
.mm-steps__item--done .mm-steps__label   { color: var(--mm-success-600); }
.mm-steps-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--mm-s-2);
}

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: INLINE DATE/TIME STRIP ──
═══════════════════════════════════════════════════════════════ */
.mm-datetime-strip {
  display: flex;
  align-items: stretch;
  border-radius: var(--mm-r-lg);
  overflow: hidden;
  border: 1px solid var(--mm-border);
  background: var(--mm-surface);
}
.mm-datetime-strip__day {
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mm-text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--mm-surface);
  background: var(--mm-brand-600);
  padding: var(--mm-s-3) var(--mm-s-4);
}
.mm-datetime-strip__content {
  padding: var(--mm-s-3) var(--mm-s-4);
  flex: 1;
}
.mm-datetime-strip__label  { font-size: var(--mm-text-xs); color: var(--mm-text-muted); font-weight: 500; margin-bottom: 2px; }
.mm-datetime-strip__period { font-size: var(--mm-text-sm); font-weight: 600; color: var(--mm-text-primary); }
.mm-datetime-strip__dur    { font-size: var(--mm-text-xs); color: var(--mm-text-muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: INFO GRID (appointment details) ──
═══════════════════════════════════════════════════════════════ */
.mm-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mm-s-3);
}
.mm-info-cell {
  background: var(--mm-surface-soft);
  border: 1px solid var(--mm-border-soft);
  border-radius: var(--mm-r-lg);
  padding: var(--mm-s-3) var(--mm-s-4);
}
.mm-info-cell--wide { grid-column: span 2; }
.mm-info-cell__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--mm-text-xs);
  font-weight: 600;
  color: var(--mm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--mm-s-2);
}
.mm-info-cell__value {
  font-size: var(--mm-text-sm);
  font-weight: 500;
  color: var(--mm-text-primary);
}
.mm-info-cell__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--mm-text-xs);
  font-weight: 600;
  color: var(--mm-brand-600);
  margin-top: var(--mm-s-2);
  cursor: pointer;
  text-decoration: none;
}
.mm-info-cell__link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: EXTRAS SELECTOR ──
═══════════════════════════════════════════════════════════════ */
.mm-extras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-s-2);
}
.mm-extras__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mm-s-2);
  padding: var(--mm-s-2) var(--mm-s-3);
  border-radius: var(--mm-r-lg);
  border: 1.5px solid var(--mm-border);
  background: var(--mm-surface);
  font-size: var(--mm-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--mm-t-fast) var(--mm-ease), transform 160ms var(--mm-spring);
  -webkit-tap-highlight-color: transparent;
}
.mm-extras__chip:hover  { border-color: var(--mm-brand-400); background: var(--mm-brand-50); color: var(--mm-brand-600); }
.mm-extras__chip:active { transform: scale(0.95); }
.mm-extras__chip--selected {
  border-color: var(--mm-brand-600);
  background: var(--mm-brand-100);
  color: var(--mm-brand-600);
}

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: CATALOG TABLE ──
═══════════════════════════════════════════════════════════════ */
.mm-catalog {
  background: var(--mm-surface);
  border-radius: var(--mm-r-xl);
  border: 1px solid var(--mm-border-soft);
  overflow: hidden;
}
.mm-catalog__head {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: var(--mm-s-4);
  padding: var(--mm-s-3) var(--mm-s-5);
  background: var(--mm-surface-soft);
  border-bottom: 1px solid var(--mm-border-soft);
  font-size: var(--mm-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mm-text-muted);
}
.mm-catalog__row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: var(--mm-s-4);
  padding: var(--mm-s-3) var(--mm-s-5);
  border-bottom: 1px solid var(--mm-border-soft);
  align-items: center;
  transition: background var(--mm-t-fast);
}
.mm-catalog__row:last-child { border-bottom: none; }
.mm-catalog__row:hover { background: var(--mm-surface-hover); }
.mm-catalog__row--group {
  background: var(--mm-surface-soft);
  grid-template-columns: 1fr;
  padding: var(--mm-s-2) var(--mm-s-5);
}
.mm-catalog__group-title {
  font-size: var(--mm-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mm-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: TOAST SYSTEM ──
═══════════════════════════════════════════════════════════════ */
.mm-toast-region {
  position: fixed;
  bottom: var(--mm-s-5);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--mm-s-2);
  z-index: 9999;
  pointer-events: none;
  width: min(420px, calc(100vw - var(--mm-s-6)));
}

.mm-toast {
  display: flex;
  align-items: center;
  gap: var(--mm-s-3);
  padding: var(--mm-s-3) var(--mm-s-4);
  background: var(--mm-text-primary);
  color: var(--mm-surface);
  border-radius: var(--mm-r-xl);
  font-size: var(--mm-text-sm);
  font-weight: 500;
  box-shadow: var(--mm-shadow-xl);
  pointer-events: all;
  cursor: default;
  animation: mm-toast-in 0.32s var(--mm-spring) forwards;
  will-change: transform, opacity;
  max-width: 100%;
  line-height: 1.4;
}
.mm-toast.is-leaving {
  animation: mm-toast-out 0.22s var(--mm-ease-out) forwards;
}
@keyframes mm-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes mm-toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(0.96); }
}

.mm-toast__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--mm-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-toast__icon--success { background: var(--mm-success-600); }
.mm-toast__icon--warning { background: var(--mm-warning-600); }
.mm-toast__icon--danger  { background: var(--mm-danger-600); }
.mm-toast__icon--info    { background: var(--mm-info-500); }
.mm-toast__icon--brand   { background: var(--mm-brand-600); }

.mm-toast__body  { flex: 1; min-width: 0; }
.mm-toast__title { font-weight: 600; white-space: normal; }
.mm-toast__desc  { font-size: var(--mm-text-xs); opacity: 0.72; margin-top: 1px; }

.mm-toast__action {
  flex-shrink: 0;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: var(--mm-r-md);
  color: var(--mm-surface);
  font: inherit;
  font-size: var(--mm-text-xs);
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: background var(--mm-t-fast);
  white-space: nowrap;
}
.mm-toast__action:hover { background: rgba(255,255,255,0.20); }

.mm-toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  transition: color var(--mm-t-fast), transform 160ms var(--mm-spring);
}
.mm-toast__close:hover  { color: rgba(255,255,255,0.9); }
.mm-toast__close:active { transform: scale(0.88); }

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: MODAL VARIANTS (fullscreen + sheet anatomy) ──
═══════════════════════════════════════════════════════════════ */

/* Sheet — bottom-aligned on all viewports (showcase static) */
.mm-modal--sheet {
  border-radius: var(--mm-r-3xl) var(--mm-r-3xl) 0 0;
  max-width: 100%;
  max-height: 75dvh;
  align-self: flex-end;
  margin: 0;
}

/* Fullscreen */
.mm-modal--fullscreen {
  border-radius: 0;
  max-width: 100%;
  max-height: 100dvh;
  height: 100dvh;
}
@media (min-width: 640px) {
  .mm-modal--fullscreen { border-radius: 0; }
}
/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: NAVIGATION BREADCRUMB ──
═══════════════════════════════════════════════════════════════ */
.mm-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--mm-s-2);
  flex-wrap: wrap;
}
.mm-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--mm-s-2);
  font-size: var(--mm-text-sm);
  color: var(--mm-text-muted);
}
.mm-breadcrumb__item--active {
  color: var(--mm-text-primary);
  font-weight: 500;
}
.mm-breadcrumb__sep {
  color: var(--mm-text-muted);
  opacity: 0.4;
}
.mm-breadcrumb__link {
  cursor: pointer;
  transition: color var(--mm-t-fast);
}
.mm-breadcrumb__link:hover { color: var(--mm-text-primary); }

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: DIVIDER ──
═══════════════════════════════════════════════════════════════ */
.mm-divider {
  height: 1px;
  background: var(--mm-border-soft);
}
.mm-divider--label {
  display: flex;
  align-items: center;
  gap: var(--mm-s-3);
}
.mm-divider--label::before,
.mm-divider--label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mm-border-soft);
}
.mm-divider__text {
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: COMBOBOX (searchable select) ──
   A lista (#clientComboboxList) é renderizada via PORTAL no <body>
   pelo JS — nunca dentro do modal — para escapar do stacking context
   criado por transform:translateY() na animação do modal.
   O posicionamento top/left/width é calculado em JS via getBoundingClientRect.
═══════════════════════════════════════════════════════════════ */

.mm-combobox {
  position: relative;
  width: 100%;
}

.mm-combobox__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.mm-combobox__input {
  padding-right: 32px;
  cursor: pointer;
  /* ≥16px previne auto-zoom do iOS em campos de texto */
  font-size: var(--mm-text-base, 16px);
}

.mm-combobox__input:focus { cursor: text; }

.mm-combobox__chevron {
  position: absolute;
  right: 10px;
  pointer-events: none;
  color: var(--mm-text-muted);
  display: flex;
  align-items: center;
  transition: transform var(--mm-t-fast) var(--mm-ease);
}

.mm-combobox[aria-expanded="true"] .mm-combobox__chevron {
  transform: rotate(180deg);
}

/* ── Lista — portal: renderizada no <body> ────────────────────
   position:fixed + z-index alto garante estar acima de qualquer
   modal/overlay mesmo com transform no ancestral do input.       */
.mm-combobox__list {
  position: fixed;
  z-index: 999999;
  margin: 0;
  padding: var(--mm-s-1) 0;
  list-style: none;
  background: var(--mm-surface-elevated);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-md);
  box-shadow: var(--mm-shadow-lg);
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(-4px);
  animation: mm-combobox-in var(--mm-t-fast) var(--mm-ease) forwards;
}

@keyframes mm-combobox-in {
  to { opacity: 1; transform: translateY(0); }
}

.mm-combobox__option {
  display: flex;
  align-items: center;
  gap: var(--mm-s-2);
  padding: 9px var(--mm-s-3);
  font-size: var(--mm-text-sm);
  color: var(--mm-text-primary);
  cursor: pointer;
  user-select: none;
  transition: background var(--mm-t-fast);
}

.mm-combobox__option:hover,
.mm-combobox__option.is-active  { background: var(--mm-surface-hover); }

.mm-combobox__option.is-selected { color: var(--mm-brand-600); font-weight: 500; }

.mm-combobox__option.is-selected::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mm-brand-500);
  margin-left: auto;
  flex-shrink: 0;
}

.mm-combobox__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mm-surface-strong);
  color: var(--mm-text-secondary);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.mm-combobox__match {
  background: rgba(229, 72, 77, 0.12);
  border-radius: 2px;
  color: var(--mm-brand-600);
  font-weight: 600;
}

.mm-combobox__empty {
  padding: 14px var(--mm-s-3);
  font-size: var(--mm-text-sm);
  color: var(--mm-text-muted);
  text-align: center;
}

[data-theme="dark"] .mm-combobox__option:hover,
[data-theme="dark"] .mm-combobox__option.is-active {
  background: rgba(255,255,255,0.06);
}

/* ═══════════════════════════════════════════════════════════════
   ── D20: FOCUS-VISIBLE — keyboard focus ring (WCAG 2.4.7) ──
   These rules only fire for keyboard/sequential focus, not mouse.
═══════════════════════════════════════════════════════════════ */

/* Upgrade input :focus → :focus-visible so mouse clicks don't show ring */
.mm-input:focus:not(:focus-visible),
.mm-select:focus:not(:focus-visible),
.mm-textarea:focus:not(:focus-visible) {
  border-color: var(--mm-border-medium);
  box-shadow: none;
}

.mm-input:focus-visible,
.mm-select:focus-visible,
.mm-textarea:focus-visible {
  border-color: var(--mm-brand-400);
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.18);
  outline: none;
}

/* DS interactive elements missing focus-visible */
.mm-card[tabindex]:focus-visible,
.mm-list-item:focus-visible,
.mm-tag:focus-visible,
.mm-combobox__option:focus-visible,
.mm-chip:focus-visible {
  outline: 2px solid var(--mm-brand-500);
  outline-offset: 2px;
}

/* Links */
a:focus-visible {
  outline: 2px solid var(--mm-brand-500);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   ── COMPONENT: USER MENU DROPDOWN (.mm-user-menu)
   iOS-like dropdown that appears below the topbar user pill.
   Used in dashboard_mobile via #userDropdown alias.
═══════════════════════════════════════════════════════════════ */
.mm-user-menu,
#userDropdown {
  position: absolute;
  top: var(--mm-dash-topbar-height, 56px);
  right: var(--mm-s-3);

  min-width: var(--mm-dash-dropdown-min-md, 180px);
  padding: var(--mm-s-2);

  background: var(--mm-surface-elevated);
  border-radius: var(--mm-r-xl);

  box-shadow: var(--mm-shadow-md);
  border: 1px solid var(--mm-border-soft);

  z-index: 50;
}

.mm-user-menu__item {
  display: flex;
  align-items: center;
  gap: var(--mm-s-2);

  width: 100%;
  padding: var(--mm-s-3);

  border-radius: var(--mm-r-lg);
  background: transparent;
  border: none;

  font-size: var(--mm-text-sm);
  font-weight: 500;
  color: var(--mm-text-primary);

  cursor: pointer;
  transition: background var(--mm-t-fast) var(--mm-ease);
}

.mm-user-menu__item:hover {
  background: var(--mm-surface-hover);
}

.mm-user-menu__icon {
  width: var(--mm-icon-size-sm);
  height: var(--mm-icon-size-sm);
  color: var(--mm-text-secondary);
}