/* =========================================================
   Mate's — Estilos por página
   ========================================================= */

/* ===== DASHBOARD PAGE ===== */

/* ===== INBOX — espelho WhatsApp ===== */

/* ----- Coluna 1: lista de conversas ----- */
.wa-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow-sm);
  overflow: hidden;
}

/* ----- Coluna 2: thread de mensagens ----- */

/* mídia sob demanda */

/* composer */

/* estados vazios */

/* ----- Coluna 3: painel CRM ----- */

/* skeletons */

@keyframes wa-shimmer {
  to { background-position: -200% 0; }
}

/* responsivo do inbox */

@media (max-width: 760px) {

  .wa-list {
    max-height: 38vh;
  }
}

/* ===== CLIENT DETAIL PAGE ===== */
.client-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.client-info {
  flex: 1;
  min-width: 0;
}

.client-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--mb-text);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.client-phone {
  font-size: 14px;
  color: var(--mb-text-soft);
}

.client-tags {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.client-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.client-metric {
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius);
  padding: 14px;
  text-align: center;
  box-shadow: var(--mb-shadow-sm);
}

.client-metric-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--mb-primary-deep);
  letter-spacing: -0.02em;
}

.client-metric-label {
  font-size: 13px;
  color: var(--mb-text-soft);
  margin-top: 2px;
}

.client-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.client-section {
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius);
  padding: 16px;
  box-shadow: var(--mb-shadow-sm);
}

.client-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mb-text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Sobrescreve o <style> embutido do histórico de chat em clients.js
   (tema escuro original) para o tema claro atual */
#content .chat-day-label {
  background: #EDE9F7;
  color: var(--mb-text-soft);
}

#content .chat-msg-in {
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
}

#content .chat-msg-out {
  background: var(--mb-primary-soft);
  border: 1px solid #E2D9FD;
}

#content .chat-msg-text {
  color: var(--mb-text);
}

#content .chat-msg-time {
  color: var(--mb-text-soft);
}

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ===== PROFESSIONAL DETAIL ===== */

.prof-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--mb-surface), 0 0 0 5px rgba(124, 92, 252, 0.35);
}

/* ===== SCHEDULE EDITOR ===== */
.schedule-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--mb-surface);
  border-radius: var(--mb-radius-sm);
  border: 1px solid var(--mb-border);
  flex-wrap: wrap;
}

.schedule-day {
  width: 80px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mb-text);
}

.schedule-times {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap;
}

.schedule-times input {
  width: 70px;
  text-align: center;
}

.schedule-toggle {
  margin-left: auto;
}

/* ===== RECURRENCE PAGE ===== */

/* ===== REPORTS PAGE ===== */

/* ===== SETTINGS PAGE ===== */
.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
}

.settings-section {
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius);
  padding: 20px;
  box-shadow: var(--mb-shadow-sm);
}

.settings-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--mb-text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mensagens automáticas — toggles de cadência */
.reminder-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.reminder-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--mb-surface-2);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius-sm);
  font-size: 13px;
  color: var(--mb-text);
  cursor: pointer;
  transition: border-color 160ms ease;
}

.reminder-toggle-row:hover {
  border-color: var(--rule);
}

/* Switch (toggle) genérico */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch .switch-slider {
  position: absolute;
  inset: 0;
  background: var(--mb-border);
  border-radius: 22px;
  cursor: pointer;
  transition: background 160ms ease;
}

.switch .switch-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: var(--mb-surface);
  border-radius: 50%;
  box-shadow: var(--mb-shadow-sm);
  transition: transform 160ms ease;
}

.switch input:checked + .switch-slider {
  background: var(--mb-primary);
}

.switch input:checked + .switch-slider::before {
  transform: translateX(18px);
}

.switch input:focus-visible + .switch-slider {
  outline: 2px solid var(--mb-primary-soft);
  outline-offset: 2px;
}

/* Mensagens automáticas — hint de placeholders */
.placeholders-hint {
  font-size: 13px;
  color: var(--mb-text-soft);
  background: var(--mb-primary-soft);
  border-radius: var(--mb-radius-sm);
  padding: 8px 12px;
  margin-bottom: 14px;
  line-height: 1.8;
}

.placeholders-hint code {
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 13px;
  color: var(--mb-primary-deep);
}

/* Mensagens automáticas — templates editáveis */
.templates-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.template-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--mb-surface-2);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius-sm);
}

.template-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mb-text);
}

.template-textarea {
  resize: vertical;
  min-height: 64px;
  font-size: 13px;
  line-height: 1.5;
}

.template-item .btn-save-template {
  align-self: flex-end;
}

/* ===== QUEUE PAGE ===== */
.queue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius-sm);
  box-shadow: var(--mb-shadow-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.queue-item:hover {
  border-color: var(--rule);
  box-shadow: 0 4px 12px var(--shadow);
}

.queue-item-priority {
  width: 5px;
  height: 34px;
  border-radius: 3px;
  flex-shrink: 0;
}

.queue-item-content {
  flex: 1;
  min-width: 0;
}

.queue-item-phone {
  font-size: 13px;
  font-weight: 600;
  color: var(--mb-text);
}

.queue-item-message {
  font-size: 13px;
  color: var(--mb-text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-item-meta {
  font-size: 13px;
  color: var(--mb-text-soft);
  text-align: right;
  white-space: nowrap;
}

.queue-safety-card {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--ok) 24%, transparent);
  border-radius: 15px;
  background: var(--ok-bg);
}
.queue-safety-card strong { color: var(--ink); }
.queue-safety-card p { color: var(--ink-2); }

.queue-safety-card.is-paused {
  border-color: color-mix(in srgb, var(--wait) 30%, transparent);
  background: var(--wait-bg);
}
.queue-safety-card.is-disconnected {
  border-color: color-mix(in srgb, var(--ink-mute) 35%, transparent);
  background: var(--surface-2);
}
.queue-safety-card.is-disconnected .queue-safety-icon {
  color: var(--ink-mute);
  background: color-mix(in srgb, var(--ink-mute) 12%, transparent);
}
.queue-item.is-held {
  border-color: var(--rule);
  background: var(--surface-2);
}
.queue-item-held {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 13px;
}

.queue-safety-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--mb-success);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}

.queue-safety-card.is-paused .queue-safety-icon {
  color: var(--wait);
  background: color-mix(in srgb, var(--wait) 14%, transparent);
}

.queue-safety-copy {
  min-width: 0;
}

.queue-safety-copy > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.queue-safety-copy strong {
  font-size: 13px;
}

.queue-safety-copy p {
  margin: 3px 0 0;
  color: var(--mb-text-soft);
  font-size: 13px;
}

.queue-safety-metrics {
  display: flex;
  gap: 7px;
}

.queue-safety-metrics span {
  display: flex;
  flex-direction: column;
  min-width: 64px;
  padding: 7px 9px;
  color: var(--ink-2);
  border-radius: 9px;
  border: 1px solid var(--rule-soft);
  background: var(--surface);
  font-size: 13px;
  text-align: center;
}

.queue-safety-metrics strong {
  color: var(--mb-text);
  font-size: 13px;
}

.queue-safety-metrics .has-failures strong {
  color: var(--mb-danger);
}

.queue-item-error {
  margin-top: 4px;
  color: var(--mb-danger);
  font-size: 13px;
}

.queue-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

@media (max-width: 760px) {
  .queue-safety-card {
    grid-template-columns: 40px 1fr;
  }
  .queue-safety-metrics {
    grid-column: 2;
    flex-wrap: wrap;
  }
  .queue-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .queue-item-meta {
    width: 100%;
    padding-left: 17px;
    text-align: left;
    white-space: normal;
  }
  .queue-item-actions {
    justify-content: flex-start;
  }
}

/* ===== FILTER BAR ===== */

/* =========================================================
   Responsivo — painéis lado a lado viram coluna única
   ========================================================= */
@media (max-width: 900px) {
  .client-sections {
    grid-template-columns: 1fr;
  }

  .client-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ===== COMMAND DASHBOARD ===== */

.eyebrow { display:block; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.13em; color:var(--mb-primary); }

.text-button { border:0; background:none; color:var(--mb-primary); font-size:13px; font-weight:700; cursor:pointer; }
.today-timeline { display:flex; flex-direction:column; }

.status-pill { padding:3px 6px; border-radius:7px; font-size:13px; background:var(--rule-soft); color:var(--ink-mute); }.status-pill.confirmed,.status-pill.completed{background:var(--ok-bg);color:var(--ok)}.status-pill.in_progress{background:var(--rule-soft);color:var(--ink)}
.status-pill.reschedule_requested{background:var(--wait-bg);color:var(--wait)}

.forecast-note { font-size:13px; color:var(--mb-text-soft); }

/* Fechamento com próximo retorno */

/* ===== COMANDAS / FECHAMENTO FINANCEIRO ===== */

.order-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:18px; }
.order-summary article { min-width:0; display:flex; align-items:center; gap:12px; padding:15px; background:var(--mb-surface); border:1px solid var(--mb-border); border-radius:16px; box-shadow:var(--mb-shadow-sm); }
.order-summary article>div { min-width:0; display:flex; flex-direction:column; }
.order-summary small { color:var(--mb-text-soft); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.order-summary strong { overflow:hidden; margin:1px 0; color:var(--mb-text); font-size:18px; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }
.order-summary article div span { color:var(--mb-text-soft); font-size:13px; }

/* Os indicadores do topo NÃO usam cor decorativa. Num painel que a recepção
   olha por três segundos entre um cliente e outro, roxo/rosa/azul não dizem
   nada — só competem com o que realmente pede ação. O dado é a tinta.
   (Escopo em .order-summary: services.js ainda usa os chips coloridos.) */

.order-search { min-width:270px; display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink-mute); }
.order-search input { width:100%; border:0; outline:0; color:var(--mb-text); background:transparent; font-size:13px; }

.order-client-avatar { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border-radius:var(--radius-sm); color:var(--ink-2); background:var(--rule-soft); font-size:13px; font-weight:800; }

.modal-container.modal-order .modal-footer { justify-content:flex-start; align-items:center; flex-wrap:wrap; }
.modal-footer-spacer { flex:1 1 8px; min-width:8px; }
.order-footer-due { font-size:13px; font-weight:650; }
.order-footer-due[hidden] { display:none !important; }
.order-footer-due.is-pending { color:var(--wait); }
.order-footer-due.is-over { color:var(--mb-danger); }

/* Estado vazio: 360px reservava meia tela para uma frase. Um vazio honesto
   ocupa o espaço de um cartão, não o da lista inteira. O branco translúcido
   virava um bloco cinza sólido no tema escuro. */

.order-form-intro { display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface-2); }
.order-form-intro>span { width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:var(--radius-sm);color:var(--ink-mute);background:var(--rule-soft); }
.order-form-intro div { display:flex;flex-direction:column; }.order-form-intro strong{font-size:13px;color:var(--mb-text)}.order-form-intro small{font-size:13px;color:var(--mb-text-soft)}
.order-form-error { padding:10px 12px; border:1px solid color-mix(in srgb, var(--bad) 30%, transparent); border-radius:var(--radius-sm); color:var(--bad); background:var(--bad-bg); font-size:13px; font-weight:650; }
.order-form-error[hidden] { display:none; }
.order-editor { display:flex; flex-direction:column; gap:12px; }
.order-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:4px; }
.order-section-head.compact { align-items:center; margin:0; }
.order-section-head h4 { margin:1px 0 0; color:var(--mb-text); font-size:14px; letter-spacing:-.01em; }
.order-items { display:flex; flex-direction:column; gap:8px; }
.order-item { display:grid; grid-template-columns:28px minmax(170px,1.5fr) minmax(140px,1.1fr) 66px 145px 92px 44px; align-items:end; gap:8px; padding:11px; border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface-2); }
.order-item-index { width:25px;height:35px;display:grid;place-items:center;align-self:end;border-radius:var(--radius-sm);color:var(--ink-mute);background:var(--rule-soft);font-size:13px;font-weight:800; }
.order-item .form-group { min-width:0; }.order-item .form-select,.order-item .form-input{width:100%;font-size:13px;padding-top:9px;padding-bottom:9px}
.order-item-total { min-height:36px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end; }.order-item-total span{font-size:13px;color:var(--mb-text-soft)}.order-item-total strong{font-size:13px;color:var(--mb-text)}
.order-remove { width:44px;height:44px;min-width:44px;min-height:44px;align-self:end;display:grid;place-items:center;border:0;border-radius:var(--radius-sm);color:var(--ink-mute);background:transparent;font-size:18px;cursor:pointer; }.order-remove:hover:not(:disabled){color:var(--bad);background:var(--bad-bg)}.order-remove:disabled{opacity:.3;cursor:not-allowed}
.money-input { position:relative; }.money-input>span{position:absolute;left:9px;top:50%;z-index:1;transform:translateY(-50%);color:var(--mb-text-soft);font-size:13px}.money-input .form-input{width:100%;padding-left:29px}
.order-editor-bottom { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:10px; }
.order-panel { display:flex;flex-direction:column;gap:10px;padding:13px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface); }
.order-discount-row { display:grid;grid-template-columns:1fr 110px;gap:8px; }.order-notes{margin-top:2px}.order-notes textarea{resize:vertical}
.order-payments { display:flex;flex-direction:column;gap:7px; }
.order-payments-empty { padding:12px; border:1px dashed var(--rule); border-radius:var(--radius-sm); color:var(--mb-text-soft); background:var(--surface-2); font-size:13px; line-height:1.45; }
/* Marcação dos campos que impedem o salvamento. O destaque some na próxima
   interação para não confundir quem já corrigiu e voltar a aparecer se o
   problema persistir (ex.: preço zerado mantido). */
.order-item.is-invalid { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent); border-radius:var(--radius-sm); }
.order-payment.is-invalid { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent); border-radius:var(--radius-sm); }
.order-editor .form-input.is-invalid,
.order-editor .form-select.is-invalid { border-color: var(--bad); background: var(--bad-bg); }
.order-payment { display:grid;grid-template-columns:minmax(130px,1fr) 125px 72px 44px;gap:7px;align-items:center}.order-payment .form-select,.order-payment .form-input{width:100%;font-size:13px;padding-top:9px;padding-bottom:9px}
.order-payment-feedback { min-height:18px;font-size:13px;font-weight:650}.order-payment-feedback.is-balanced{color:var(--mb-success)}.order-payment-feedback.is-pending{color:var(--wait)}.order-payment-feedback.is-over{color:var(--mb-danger)}
/* A conta fecha aqui. O peso vem da régua superior marcada e do tamanho do
   número — não de um gradiente roxo, que só gritava sem informar nada. É o
   valor que a pessoa confere em voz alta antes de cobrar; ele é o destaque. */
.order-totals { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px;border-radius:var(--radius);border:1px solid var(--rule);border-top:2px solid var(--ink);background:var(--surface-2);color:var(--ink); }
.order-totals span { display:flex;flex-direction:column; }.order-totals small{color:var(--ink-mute);font-size:13px;text-transform:uppercase;letter-spacing:.05em}.order-totals strong{font-size:13px;color:var(--ink)}.order-totals .is-total{padding-left:12px;border-left:1px solid var(--rule)}.order-totals .is-total strong{font-family:var(--font-display);font-size:20px}

.order-detail-head { display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--mb-border)}.order-detail-head>div{display:flex;flex-direction:column}.order-detail-head strong{font-size:16px;color:var(--mb-text)}.order-detail-head small{font-size:13px;color:var(--mb-text-soft)}
.order-detail-items { display:flex;flex-direction:column }.order-detail-items article{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--rule-soft)}.order-detail-quantity{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--rule-soft);color:var(--ink-2);font-size:13px;font-weight:800}.order-detail-items article>div{display:flex;flex-direction:column}.order-detail-items article strong{font-size:13px;color:var(--mb-text)}.order-detail-items article small{font-size:13px;color:var(--mb-text-soft)}.order-detail-values{text-align:right}
.order-detail-financial { display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:var(--radius);background:var(--surface-2)}.order-detail-financial div,.order-detail-payments div{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--mb-text-soft)}.order-detail-financial strong,.order-detail-payments strong{color:var(--mb-text)}.order-detail-financial .is-total{padding-top:8px;border-top:1px solid var(--mb-border);font-size:14px}
.order-detail-payments { display:flex;flex-direction:column;gap:7px}.order-snapshot-note{display:flex;align-items:center;gap:7px;padding:10px 12px;border-radius:var(--radius-sm);color:var(--ok);background:var(--ok-bg);font-size:13px;font-weight:650}

@media(max-width:1100px){.order-summary{grid-template-columns:repeat(2,1fr)}.order-item{grid-template-columns:28px 1fr 1fr 60px 125px 75px 44px}}
@media(max-width:760px){.order-summary{grid-template-columns:1fr}.order-search{min-width:0}.order-editor-bottom{grid-template-columns:1fr}.order-item{grid-template-columns:28px 1fr 1fr 44px}.order-item-quantity,.order-item-price,.order-item-total{grid-column:2 / span 1}.order-item-professional{grid-column:3}.order-remove{grid-column:4;grid-row:1}.order-payment{grid-template-columns:1fr 110px 44px}.order-installments{grid-column:1}.order-totals{grid-template-columns:repeat(2,1fr)}}
/* Mobile estreito (iPhone SE / 375px): modal de comanda vira tela cheia e os
   botões de ação ficam fixos no rodapé para não exigir rolagem até o fim do
   formulário. Alvos de toque maiores evitam erro na pressa do balcão. */
@media(max-width:540px){
  .modal-overlay:has(.modal-order){padding:0}
  .modal-container.modal-order{width:100vw;height:100dvh;max-height:none;border-radius:0;margin:0}
  .modal-container.modal-order .modal-header{padding:14px 16px}
  .modal-container.modal-order .modal-body{padding:14px 16px calc(128px + env(safe-area-inset-bottom,0))}
  .modal-container.modal-order .modal-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0));gap:8px;box-shadow:0 -8px 24px rgba(15,23,42,.06)}
  .modal-container.modal-order .modal-footer .btn{min-height:44px;font-size:13px}
  .modal-container.modal-order .order-workbench{gap:12px}

  .order-item{gap:6px}
  .order-item .order-remove{width:44px;height:44px;min-width:44px;min-height:44px}
  .order-payment{gap:6px}
  .order-payment .order-remove{width:44px;height:44px;min-width:44px;min-height:44px}
  .modal-container.modal-order .order-footer-due{flex:1 1 100%;order:-1}
  .order-summary article{padding:13px}

}

/* ---- Comanda de duas colunas: caixa + posto de recorrência --------------
   À esquerda o dinheiro de hoje (itens, pagamento); à direita o do mês que
   vem (ficha, autorização, retorno). Lado a lado porque a janela de agir
   sobre os dois é a mesma: enquanto o cliente está na frente do balcão. */
/* Comanda ocupa a área útil inteira, preservando o trilho lateral: quem está
   no caixa não deveria disputar espaço com um modal estreito, e manter a
   navegação visível evita a sensação de estar preso numa caixa de diálogo. */
.modal-overlay:has(.modal-order) { padding: 12px 12px 12px calc(var(--rail-w) + 12px); }
.modal-container.modal-order { max-width: none; width: 100%; height: calc(100vh - 24px); max-height: none; }
.modal-container.modal-order .modal-body { flex: 1; min-height: 0; overflow: auto; }

.order-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.order-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1180px) { .modal-overlay:has(.modal-order) { padding: 12px; } }

.order-client-aside {
  position: sticky; top: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.order-client-aside .aside-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 28px 10px; text-align: center;
  color: var(--ink-mute); font-size: 13px;
}
.aside-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.aside-head > div { display: flex; flex-direction: column; min-width: 0; }
.aside-head strong { font-family: var(--font-display); font-size: 16px; letter-spacing: -.01em; }
.aside-head small { color: var(--ink-mute); font-size: 13px; }
.aside-section { display: flex; flex-direction: column; gap: 7px; padding-top: 10px; border-top: 1px solid var(--rule-soft); }
.aside-line { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ink-2); }
.aside-ok { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ok); }
.aside-warn { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--wait); font-weight: 600; }
.aside-consent-ok { color: var(--ok); }
.aside-consent-bad { color: var(--bad); }
.aside-consent-wait { color: var(--wait); }
.aside-sub { color: var(--ink-mute); font-size: 13px; }
.aside-porque { color: var(--ink-mute); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Formulário de retorno: dias é campo livre (60, 90, o que o salão praticar),
   e dia da semana + horário viram a preferência que o servidor usa para achar
   uma vaga real. Botões de intervalo fixo não davam conta da realidade. */

.aside-inline-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.aside-inline-form .form-input { font-size: 13px; padding-top: 7px; padding-bottom: 7px; }
.aside-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 4px; }
/* Botão explícito ao lado do campo: o Enter continua valendo, mas ninguém
   adivinha um atalho invisível — antes a pessoa digitava a tag e ia embora
   achando que tinha salvado. */
.aside-tag-add { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.aside-tag-add .form-input { font-size: 13px; padding-top: 7px; padding-bottom: 7px; }
.aside-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.aside-stats > div { display: flex; flex-direction: column; align-items: flex-start; }
.aside-stats strong { font-size: 14px; }
.aside-stats small { font-size: 13px; color: var(--ink-mute); }

/* Prompt de retorno pós-pagamento */

@media (max-width: 1100px) {
  .order-workbench { grid-template-columns: 1fr; }
  .order-client-aside { position: static; }
}

/* ===== CARTEIRA DE RECORRÊNCIA ===== */

/* Ações do header da tela. Botão primário à esquerda + kebab à direita;
   dropdown abre embaixo do kebab. Mesmo padrão visual usado em /clients. */

/* Modal pesado de cancelamento. Apenas texto em destaque com a cor crítica. */

/* Faixa horizontal de urgência — 4 chips "Todas / Atrasados / Hoje /
   Próximos 7 dias". Filtro client-side sobre a lista já carregada: clicar
   no chip ativo limpa o filtro (toggle). Cor do dot nunca é enfeite — só
   existe para dizer "este é o estado X". */

/* CTA dinâmico no hero — "N sem retorno · R$ X/mês provável". Cor âmbar via
   wait-bg / mb-warning é a do .btn-soft: já carrega "atenção não destrutiva"
   no design system, não é verde (verde = ação primária) e não é novidade. */

/* Multi-serviço: chips selecionáveis no modal. Substitui o <select> legado
   e mostra a lista de serviços do salão, marcando com badge "Já fez" os que o
   cliente já tem no histórico. Mínimo 1, sem máximo. Cor só com significado:
   verde selecionado, badge neutro para histórico. */

/* Mini-agenda dentro do modal de criar/editar recorrência. Aparece entre o
   campo "Horário preferido" e o botão "Salvar". Refetch silencioso quando o
   dia preferido ou o profissional mudam; sem consulta extra ao backend além
   do GET /api/appointments que já existia. Cor só com significado: livre
   (verde suave), ocupado (âmbar), selecionado (verde forte + borda). */

.rec-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 4px 0;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink-2);
  transition: border-color .12s, transform .04s;
}
.rec-slot:hover { border-color: var(--ink-mute); }
.rec-slot:active { transform: scale(.97); }

/* Drawer lateral — usado pela CTA do hero e em futuras adições. Não compete
   com o modal centralizado: posição fixa à direita, slide-in por transform,
   mesmo z-index do modal-overlay. */

.badge-warning {
  background: var(--wait-bg);
  color: var(--mb-warning);
  border: 1px solid var(--mb-warning);
}

.form-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 13px;
  border: 1px solid var(--rule);
  border-radius: 13px;
  background: var(--surface-2);
}

.form-intro > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-intro strong {
  color: var(--mb-text);
  font-size: 13px;
}

.form-intro span {
  color: var(--mb-text-soft);
  font-size: 13px;
  line-height: 1.45;
}

/* input-with-suffix: o sufixo ("dias") fica posicionado por cima do input
   (absolute) para que o campo preencha a largura total da coluna igual
   aos outros campos do .form-row. Auditoria 01/09 — alinhamento da
   primeira linha do modal de recorrência (Profissional/Retorno/Dia). */

/* ===== RESUMO PRIVADO DO PROFISSIONAL ===== */

.is-disabled {
  opacity: .55;
}

/* ===== CONFIGURAÇÕES GUIADAS ===== */
.settings-section-title svg {
  color: var(--mb-primary);
}

/* ==================== WhatsApp privacy & consent ==================== */
.consent-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}
.consent-badge > span { width: 6px; height: 6px; border-radius: 50%; }
.consent-badge.is-granted { color: #14734f; background: #e7f8ef; }
.consent-badge.is-granted > span { background: #1eaa73; }
.consent-badge.is-unknown { color: #8b621b; background: #fff4d9; }
.consent-badge.is-unknown > span { background: #d89b2b; }
.consent-badge.is-revoked { color: #ad3345; background: #ffeaed; }
.consent-badge.is-revoked > span { background: #d64a5e; }

/* Fundo era #faf8fd fixo enquanto o texto seguia var(--text-primary): no tema
   escuro dava quase-branco sobre quase-branco, 1.08:1 medido. Justo a linha que
   registra o consentimento de LGPD ficava invisível. Tokens seguem o tema. */
.consent-capture {
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface-2);
}
.consent-check-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.consent-check-row input { margin-top: 2px; accent-color: var(--primary); }
.consent-check-row strong { display: block; color: var(--ink); font-size: 13px; }
.consent-check-row small { display: block; margin-top: 3px; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.consent-capture-details { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule-soft); }

.client-privacy-card { grid-column: 1 / -1; }
.client-consent-state {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid;
  border-radius: 12px;
}
.client-consent-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
}
.client-consent-state strong { display: block; color: var(--ink); font-size: 13px; }
.client-consent-state > div > span { display: block; margin-top: 2px; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.client-consent-state.is-granted { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-bg); }
.client-consent-state.is-granted .client-consent-icon { color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, transparent); }
.client-consent-state.is-unknown { border-color: color-mix(in srgb, var(--wait) 40%, transparent); background: var(--wait-bg); }
.client-consent-state.is-unknown .client-consent-icon { color: var(--wait); background: color-mix(in srgb, var(--wait) 18%, transparent); }
.client-consent-state.is-revoked { border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: var(--bad-bg); }
.client-consent-state.is-revoked .client-consent-icon { color: var(--bad); background: color-mix(in srgb, var(--bad) 18%, transparent); }
.client-consent-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
}
.client-consent-meta strong { color: var(--text-secondary); }
.consent-event-list { margin-top: 13px; }
.consent-event-title { margin-bottom: 8px; color: var(--text-secondary); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.consent-event-row {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 9px;
  padding: 7px 0;
  border-top: 1px solid var(--rule-soft);
}
.consent-event-dot { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; }
.consent-event-dot.is-positive { background: var(--ok); }
.consent-event-dot.is-negative { background: var(--bad); }
.consent-event-row strong { display: block; color: var(--text-primary); font-size: 13px; }
.consent-event-row span { display: block; margin-top: 1px; color: var(--text-muted); font-size: 13px; }
.consent-event-row small { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 13px; }

.privacy-guardrail {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 13px;
  background: var(--surface-2);
}
.privacy-guardrail-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--ink);
  background: var(--rule-soft);
}
.privacy-guardrail strong { display: block; color: var(--text-primary); font-size: 13px; }
.privacy-guardrail div > span { display: block; margin-top: 2px; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.privacy-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.privacy-stat-card {
  min-height: 88px;
  padding: 12px;
  border: 1px solid var(--rule-soft);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 5px 18px var(--shadow);
}
.privacy-stat-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--ink);
  background: var(--rule-soft);
}
.privacy-stat-card strong { display: block; margin-top: 8px; color: var(--text-primary); font-size: 18px; line-height: 1; }
.privacy-stat-card > span:last-child { display: block; margin-top: 4px; color: var(--text-muted); font-size: 13px; }
.privacy-stat-card.is-positive .privacy-stat-icon { color: var(--ok); background: var(--ok-bg); }
.privacy-stat-card.is-pending .privacy-stat-icon { color: var(--wait); background: var(--wait-bg); }
.privacy-stat-card.is-blocked .privacy-stat-icon { color: var(--bad); background: var(--bad-bg); }
.privacy-skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-2) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
.privacy-list-card { padding: 0; overflow: hidden; }
.privacy-list-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--rule-soft); }
.privacy-list-head h3 { margin: 0; color: var(--text-primary); font-size: 13px; }
.privacy-list-head p { margin: 3px 0 0; color: var(--text-muted); font-size: 13px; }
.privacy-search { width: 250px; }
.privacy-table-wrap { overflow-x: auto; }
.privacy-table td { vertical-align: middle; }
.privacy-recipient { display: flex; align-items: center; gap: 9px; }
.privacy-block-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--bad);
  background: var(--bad-bg);
}
.privacy-recipient strong { display: block; color: var(--text-primary); font-size: 13px; }
.privacy-recipient div > span { display: block; margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.privacy-source-chip { display: inline-flex; padding: 4px 7px; border-radius: 7px; color: var(--ink-mute); background: var(--surface-2); font-size: 13px; white-space: nowrap; }
.privacy-empty { padding: 38px 20px; }
.privacy-modal-intro { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding: 11px 12px; border-radius: 11px; }
.privacy-modal-intro > svg { flex: 0 0 auto; }
.privacy-modal-intro strong { display: block; font-size: 13px; }
.privacy-modal-intro span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; }
.privacy-modal-intro.is-positive { color: var(--ok); background: var(--ok-bg); }
.privacy-modal-intro.is-warning { color: var(--wait); background: var(--wait-bg); }
.privacy-modal-intro.is-danger { color: var(--bad); background: var(--bad-bg); }

/* No estado REVOKED precisamos de 2 ações no mesmo card (botão + selo).
   Garante que ambos caibam lado a lado no desktop e quebrem em coluna
   no mobile estreito. */

/* Modal de criar/editar recorrência. 720px no desktop, 100% no mobile
   (já estava em 100% no breakpoint ≤540px via .modal-container padrão).
   form-row-3 = 3 colunas no desktop; no mobile cai pra 1 coluna pelo
   media query genérico de .form-row abaixo de 540px. */

@media (max-width: 720px) {
  /* Auditoria 01/09 (rodada 2) — fallback fullscreen para tablet balcão:
     entre 540-720px o modal de 720px estoura a viewport; em vez de manter
     scroll pequeno que esconde campos como Profissional/Retorno/Dia/
     Horário/Disponibilidade, forçamos 100% da largura E 100% da altura
     para que o scroll interno do modal-body cubra tudo. O rec-scroll-fade
     continua indicando que tem mais conteúdo abaixo. */

}

/* ===== Auditoria UX 01/09 — P0 modal truncado =====
   Conteúdo do modal-recurrence (~892px) estoura viewports intermediários
   (633px → ~444px visíveis). Em vez de paginar, mantemos scroll com:
   1) gap de form-group explícito em 14px (era 24px sentido + 14px default);
   2) fade "↓ mais campos" no fundo do modal-body que some no fim do scroll.
   O form-intro foi morto em recurrences.js e o hint virou ⓘ no header. */

/* ===== Auditoria UX 01/09 rodada 2 — P0-C =====
   Separar affordances: o scroll indicator "↓ mais campos" vive no
   rodapé do modal-body; o atalho "Histórico" do cliente vira um botão
   discreto (btn-ghost btn-sm) ao lado do label do picker, com seu próprio
   modal quando clicado. Antes disputavam o mesmo pixel no footer. */

/* ⓘ tooltip no título do modal. Pequeno, neutro, posiciona-se como um
   "info-icon" sem competir com o botão de fechar ×. Hover/focus mostram
   o title nativo do navegador. */

/* Badge de consentimento WhatsApp do cliente ao lado do nome no card. 3
   estados visualmente distintos com cores que só têm significado (regra
   do design system): verde = autorizado, âmbar = atenção, cinza = bloqueado.
   Mantemos o badge pequeno para não competir com o badge "Ativa/Pausada".

   Auditoria 01/09 (rodada 2) — P0-E Master: texto é o sinal principal.
   "Zap BLOQUEADO" é a maior string (15 caracteres) — o padding e font-size
   dão conta sem precisar truncar. Ícone (opcional) fica num span interno
   para alinhar verticalmente com o texto. */

/* Auditoria 01/09 (rodada 2) — P1-C Master: atalho inline "Pedir permissão
   Zap" no card ao lado do badge quando status é REVOKED ou UNKNOWN.
   Pequeno (btn-sm) e btn-soft (atenção não destrutiva) para não competir
   com os botões Editar/Pular/Pausar da actions row. Quebra de linha
   natural abaixo do badge em viewport estreito. */

/* Nota dentro do modal de pedir permissão Zap (P1-C). Tom neutro. */
.recurrence-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--wait-bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 0 12px;
}

@media (max-width: 900px) {
  .privacy-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .privacy-list-head { align-items: stretch; flex-direction: column; }
  .privacy-search { width: 100%; }
  .client-consent-state { grid-template-columns: 34px 1fr; }
  .client-consent-state .btn { grid-column: 1 / -1; }
}