/* Telas do Método Hermelo: Hoje, Lembretes e configuração inicial.
   Usa apenas os tokens globais (tokens.css). Raios: painéis 16px (--radius),
   controles 10px (--radius-sm), botões em pílula. */

.method-page { max-width: 1240px; margin: 0 auto; padding: 8px 0 64px; }
.method-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
.method-head .page-title { margin: 0; }
.method-lede { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; max-width: 60ch; }
.method-skeleton { height: 280px; border-radius: var(--radius); background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 200% 100%; animation: method-shimmer 1.4s linear infinite; }
@keyframes method-shimmer { to { background-position: -200% 0; } }

.method-notice {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; margin-bottom: 14px;
  border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface);
}
.method-notice > svg { flex: none; margin-top: 2px; }
.method-notice > div { flex: 1; min-width: 0; }
.method-notice strong { display: block; color: var(--ink); }
.method-notice p { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.method-notice.is-wait { background: var(--wait-bg); border-color: transparent; }
.method-notice.is-wait > svg { color: var(--wait); }
.method-notice.is-bad { background: var(--bad-bg); border-color: transparent; }
.method-notice.is-bad > svg { color: var(--bad); }
.method-notice .btn { flex: none; align-self: center; }

.method-empty { text-align: center; padding: 56px 24px; border: 1px dashed var(--rule); border-radius: var(--radius); background: var(--surface); }
.method-empty h2 { margin: 12px 0 6px; font-size: 22px; }
.method-empty p { margin: 0 auto 18px; color: var(--ink-2); max-width: 44ch; }
.method-empty.is-done > svg { color: var(--brand-text); }

/* ---------- Lembretes ---------- */
.rem-mode { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rem-mode-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; background: var(--surface); border: 1px solid var(--rule); color: var(--ink-2);
}
.rem-mode-pill.is-manual svg, .rem-mode-pill.is-auto svg { color: var(--brand-text); }
.rem-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.rem-hero {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px 32px;
  padding: 26px 28px; border-radius: var(--radius); background: var(--brand-deep); color: #EEF3EC; margin-bottom: 14px;
}
.rem-hero-count { display: flex; align-items: baseline; gap: 12px; }
.rem-hero-count strong { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.rem-hero-count span { font-size: 16px; font-weight: 600; color: #B8CBBE; max-width: 16ch; }
.rem-hero-meta { display: flex; gap: 28px; margin: 0; }
.rem-hero-meta dt { font-size: 13px; color: #A9BDB0; font-weight: 600; }
.rem-hero-meta dd { margin: 2px 0 0; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rem-hero .rem-run { background: #B9E2C4; border-color: #B9E2C4; color: #0D1F15; min-height: 48px; padding: 0 24px; font-size: 15px; }
.rem-hero .rem-run:hover { background: #D2EEDA; }

.rem-how { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 4px 18px; margin-bottom: 24px; }
.rem-how summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: var(--ink); }
.rem-how ol { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); }
.rem-how p { margin: 8px 0 14px; font-size: 13.5px; color: var(--ink-mute); }

.rem-group { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); margin: 22px 0 10px; }
.rem-list { display: grid; gap: 10px; }
.rem-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px 16px; align-items: start;
  padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule);
  transition: border-color .2s, box-shadow .2s, opacity .3s;
}
.rem-card.is-opened { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.rem-card.is-blocked { background: var(--surface-2); }
.rem-card.is-done { display: block; background: var(--brand-soft); border-color: transparent; }
.rem-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--brand-soft); color: var(--brand-text); }
.rem-main { min-width: 0; }
.rem-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rem-line strong { font-size: 16px; color: var(--ink); }
.rem-kind { font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); }
.rem-context { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.rem-text { margin: 10px 0 0; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); color: var(--ink-2); font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; }
.rem-blocked, .rem-warning { margin: 8px 0 0; font-size: 13.5px; display: flex; gap: 6px; align-items: flex-start; }
.rem-blocked { color: var(--bad); }
.rem-warning { color: var(--wait); }
.rem-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 188px; }
.rem-actions .btn { justify-content: center; }
.rem-error { grid-column: 2 / -1; margin: 6px 0 0; color: var(--bad); font-size: 13.5px; }
.rem-done { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--brand-text); }

.rem-cadence { position: sticky; top: 24px; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); }
.rem-cadence h2 { font-size: 17px; margin: 0 0 14px; }
.rem-cadence ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.rem-cadence ol::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--rule); }
.rem-cadence li { position: relative; padding-left: 28px; }
.rem-cadence li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--surface); }
.rem-cadence li span { display: block; font-weight: 750; color: var(--ink); }
.rem-cadence li small { display: block; color: var(--ink-mute); font-size: 13px; margin-top: 2px; }
.rem-cadence > p { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-2); }

.rem-skip p { color: var(--ink-2); margin: 0 0 14px; }
.rem-skip-options { display: grid; gap: 8px; margin-bottom: 12px; }
.rem-skip-options label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); cursor: pointer; }
.rem-skip-options label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }

.rem-seq .rem-card { grid-template-columns: 44px minmax(0, 1fr); }
.rem-seq .rem-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; }
.rem-seq .rem-actions .btn { flex: 1; min-height: 46px; }
.rem-seq-progress { height: 6px; border-radius: 999px; background: var(--surface-2); margin-bottom: 16px; overflow: hidden; }
.rem-seq-progress span { display: block; height: 100%; background: var(--brand); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.rem-seq-hint { margin: 14px 0 0; color: var(--ink-2); font-size: 14px; text-align: center; }
.rem-seq-done { text-align: center; padding: 16px 0; }
.rem-seq-done > svg { color: var(--brand-text); }
.rem-seq-done h2 { margin: 10px 0 4px; }

@media (max-width: 1080px) {
  .rem-layout { grid-template-columns: minmax(0, 1fr); }
  .rem-cadence { position: static; }
}
@media (max-width: 640px) {
  .rem-hero { grid-template-columns: 1fr; padding: 22px; }
  .rem-hero .rem-run { width: 100%; }
  .rem-card { grid-template-columns: 40px minmax(0, 1fr); }
  .rem-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .rem-actions .btn { flex: 1 1 auto; min-height: 44px; }
  .rem-avatar { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .method-skeleton { animation: none; }
}

/* ---------- Hoje ---------- */
.today-greet { margin: 0 0 4px; font-size: 15px; font-weight: 650; color: var(--ink-mute); }
.today-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.today-actions .btn { min-height: 44px; }
.today-first {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 20px 24px; margin-bottom: 18px; border-radius: var(--radius); background: var(--brand-soft);
}
.today-first h2 { margin: 0 0 4px; font-size: 18px; }
.today-first p { margin: 0; color: var(--ink-2); max-width: 64ch; }
.today-first .today-first-note { margin-top: 8px; font-size: 14px; color: var(--ink-mute); }
/* Etapa C2: "Quem já devia ter voltado" e o checklist da 1ª semana no topo do Hoje. */
.today-due, .first-week { margin-bottom: 18px; }
.due-head, .first-week > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 12px; }
.due-head h2, .first-week h2 { margin: 0 0 4px; font-size: 18px; }
.due-head p, .first-week > header p { margin: 0; color: var(--ink-2); }
.due-head .link { display: inline-flex; align-items: center; min-height: 44px; }
.due-examples { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 12px; padding: 12px 14px; border-radius: 12px; background: var(--wait-bg); }
.due-examples p { margin: 0; color: var(--ink-2); font-size: 14px; max-width: 60ch; }
.due-examples-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.due-examples-actions .btn, .due-actions .btn { min-height: 44px; }
.due-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.due-row { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.due-who { flex: 1 1 240px; min-width: 0; }
.due-who p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }
.due-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.due-row.is-called { opacity: .75; }
.due-foot { margin: 10px 0 0; color: var(--ink-mute); font-size: 14px; }
.due-preview-bubble { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--ok-bg); color: var(--ink); line-height: 1.45; }
.due-preview-note { color: var(--ink-mute); font-size: 14px; }
.first-week-bar { flex: 0 1 200px; height: 8px; margin-top: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.first-week-bar span { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--brand); }
.first-week-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.first-week-list li { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rule-soft); }
.first-week-list li > div:not(.first-week-actions) { flex: 1 1 240px; min-width: 0; }
.first-week-list p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }
.first-week-list small { color: var(--ink-mute); font-size: 14px; }
.first-week-list li.is-next { border-color: var(--brand); }
.first-week-list li.is-done strong, .first-week-list li.is-skipped strong { color: var(--ink-mute); text-decoration: line-through; }
.first-week-num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); font-weight: 700; font-size: 14px; }
.first-week-list li.is-done .first-week-num { background: var(--ok-bg); color: var(--ok); }
.first-week-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.first-week-actions .btn { min-height: 44px; }

.today-forecast {
  padding: 26px 28px 20px; border-radius: 22px; margin-bottom: 18px;
  background: var(--brand-deep); color: #EEF3EC;
  --rec: #9FD6AF; --other: rgba(238, 243, 236, .42); --free: rgba(238, 243, 236, .1);
}
.method-skeleton.is-dark { height: 180px; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%) 0 0 / 200% 100%; }
.forecast-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.forecast-top h2 { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #B9E2C4; }
.forecast-periods { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(0,0,0,.22); gap: 2px; }
.forecast-periods button { border: 0; background: none; color: #C9D8CD; font: 700 13px var(--font-ui); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.forecast-periods button[aria-pressed="true"] { background: #EEF3EC; color: #0F1D17; }
.forecast-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px 48px; align-items: center; }
.forecast-label { margin: 0; font-size: 15px; font-weight: 650; color: #B8CBBE; }
.forecast-value { margin: 6px 0 6px; font-size: clamp(40px, 5vw, 60px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; color: #F4F7F2; }
.forecast-sub { margin: 0; color: #B8CBBE; font-size: 14.5px; }
.forecast-bar { display: flex; gap: 4px; height: 14px; }
.forecast-bar span { border-radius: 999px; min-width: 0; transition: flex-grow .6s cubic-bezier(.16,1,.3,1); }
.forecast-bar .is-rec { background: var(--rec); }
.forecast-bar .is-other { background: var(--other); }
.forecast-bar .is-free { background: repeating-linear-gradient(135deg, var(--free) 0 6px, transparent 6px 12px); box-shadow: inset 0 0 0 1px var(--free); }
.forecast-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.forecast-legend li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #D5E1D8; }
.forecast-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.forecast-legend i.is-rec { background: var(--rec); }
.forecast-legend i.is-other { background: var(--other); }
.forecast-legend i.is-free { box-shadow: inset 0 0 0 1.5px rgba(238,243,236,.5); }
.forecast-legend strong { color: #F4F7F2; font-variant-numeric: tabular-nums; min-width: 38px; }
.forecast-legend small { margin-left: auto; color: #9DB3A5; font-variant-numeric: tabular-nums; }
.forecast-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 750; color: #B9E2C4; text-decoration: none; }
.forecast-cta svg { transform: rotate(-90deg); }
.forecast-cta:hover { color: #D2EEDA; }
.forecast-note { margin: 12px 0 0; color: #B8CBBE; font-size: 13.5px; }
.forecast-foot { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid rgba(238,243,236,.12); font-size: 13px; color: #93AA9B; }
.forecast-error h2 { margin: 0 0 4px; font-size: 18px; color: #F4F7F2; }
.forecast-error p { margin: 0; color: #B8CBBE; }

.today-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.today-side { display: grid; gap: 18px; }
.today-panel { padding: 20px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); }
.today-panel > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.today-panel > header > div { min-width: 0; }
.today-panel > header > a { flex: none; white-space: nowrap; }
.today-panel h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.today-panel h2 svg { color: var(--brand-text); }
.today-panel header p { margin: 4px 0 0; color: var(--ink-mute); font-size: 14px; }
.today-panel > p { color: var(--ink-2); margin: 0 0 14px; }
.today-count { min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; background: var(--brand); color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.today-mini { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.today-mini li { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.today-mini li.is-more { background: none; color: var(--ink-mute); }
.today-empty { padding: 24px 0; text-align: center; color: var(--ink-2); }
.today-empty p { margin: 0 0 12px; }

.today-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.today-timeline li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule-soft); }
.today-timeline li:first-child { border-top: 0; }
.today-timeline time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); font-size: 15px; }
.today-timeline li.is-done time, .today-timeline li.is-off time { color: var(--ink-mute); }
.today-timeline li.is-off .today-appt strong { text-decoration: line-through; color: var(--ink-mute); }
.today-timeline li.is-now { background: linear-gradient(90deg, var(--brand-soft), transparent 70%); border-radius: 12px; padding-left: 10px; margin-left: -10px; }
.today-timeline li.is-next time { color: var(--brand-text); }
.today-appt { min-width: 0; }
.today-appt strong { display: block; color: var(--ink); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-appt span { display: block; color: var(--ink-mute); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-appt-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.chip.is-rec { background: var(--brand-soft); color: var(--brand-text); }
.chip.is-ok { background: var(--ok-bg); color: var(--ok); }
.chip.is-now { background: var(--brand); color: var(--brand-ink); }
.chip.is-bad { background: var(--bad-bg); color: var(--bad); }
.chip.is-done, .chip.is-off { color: var(--ink-mute); }

.today-ring {
  --p: 0; width: 112px; height: 112px; border-radius: 50%; margin: 2px 0 14px;
  background: radial-gradient(closest-side, var(--surface) 76%, transparent 77% 100%), conic-gradient(var(--brand) calc(var(--p) * 1%), var(--surface-2) 0);
  display: grid; place-items: center;
}
.today-ring strong { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.today-next p strong { color: var(--ink); }

.today-team { margin-top: 18px; --rec: var(--brand); --other: color-mix(in srgb, var(--ink-mute) 45%, transparent); --free: var(--rule); }
.today-team-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.today-team-list li { display: grid; grid-template-columns: 160px minmax(0, 1fr) 110px; gap: 16px; align-items: center; }
.today-team-name { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-team-pct { text-align: right; color: var(--ink-mute); font-size: 14px; }
.today-team-pct strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.forecast-bar.is-thin { height: 10px; }

/* ---------- Meu dia (profissional) ---------- */
.myday-hero { display: grid; grid-template-columns: repeat(2, auto) 1fr; gap: 16px 36px; align-items: center; padding: 22px 24px; border-radius: var(--radius); background: var(--brand-deep); color: #EEF3EC; margin-bottom: 18px; }
.myday-hero > div > strong { display: block; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.myday-hero > div > span { color: #B8CBBE; font-size: 14px; }
.myday-next { justify-self: end; }
/* Sobrepõe o cartão claro antigo de pages.css: aqui a caixa fica sobre o fundo escuro,
   com um selo de ícone e um contorno mais vivo, para não virar um retângulo sem graça. */
.myday-hero .myday-next { display: flex; align-items: flex-start; gap: 12px; max-width: 280px; padding: 14px 16px;
  border: 1px solid rgba(143, 224, 166, .38); border-radius: 12px;
  background: linear-gradient(180deg, rgba(238, 243, 236, .14), rgba(238, 243, 236, .05)); color: #EEF3EC; text-align: left;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.myday-next svg { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: rgba(143, 224, 166, .18); color: #8FE0A6; box-sizing: border-box; }
.myday-next span { display: block; color: #9FE3B4; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.myday-next strong { display: block; font-size: 19px !important; letter-spacing: -0.02em !important; margin-top: 2px; }
.myday-hero .myday-next strong { color: #FFFFFF; }
.myday-next em { font-style: normal; color: #C3D8C8; font-size: 13.5px; display: block; margin-top: 1px; }
.myday-next.is-late svg { background: rgba(224, 178, 90, .18); color: #E0B25A; }
.myday-next.is-late span { color: #E8C57E; }
.myday-next.is-done { align-items: center; }
.myday-next.is-done strong { margin: 0; font-size: 15px !important; }
/* Onda 7 (21/10/2026): Meu dia com abas Hoje · Amanhã · Semana e "Combinar a volta" em cada linha. */
.myday-hero { grid-template-columns: auto 1fr; }
.myday-tabs { display: flex; gap: 4px; margin: 0 0 16px; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.myday-tabs button { flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: none; color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.myday-tabs button span { color: var(--ink-mute); font-weight: 500; }
.myday-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(20, 40, 30, .12); }
.myday-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.myday-tip { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.myday-tip svg { flex: none; margin-top: 2px; color: var(--brand-text); }
.myday-list { list-style: none; margin: 0; padding: 4px 18px; display: grid; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.myday-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule-soft); }
.myday-list li:first-child { border-top: 0; }
.myday-list time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); font-size: 15px; align-self: start; padding-top: 1px; }
.myday-list li.is-done time { color: var(--ink-mute); }
.myday-list li.is-next time { color: var(--brand-text); }
.myday-appt { display: grid; gap: 2px; min-width: 0; }
.myday-appt strong { font-size: 15.5px; color: var(--ink); }
.myday-appt > span { font-size: 14px; color: var(--ink-2); }
.myday-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.myday-tags .chip { font-size: 13px; }
.myday-proposed { display: inline-flex; align-items: flex-start; gap: 6px; margin-top: 6px; padding: 5px 10px; border-radius: 10px; line-height: 1.4; background: var(--brand-soft); color: var(--brand-text); font-size: 13px; font-weight: 600; }
.myday-action { display: grid; justify-items: end; gap: 2px; }
.myday-action .btn { width: auto; white-space: nowrap; }
.myday-action .btn[disabled] { opacity: .55; cursor: not-allowed; }
.myday-action small { font-size: 13px; color: var(--ink-mute); }
.myday-list.is-compact { padding: 2px 16px; }
.myday-list.is-compact li { grid-template-columns: 52px minmax(0, 1fr); padding: 10px 0; }
.myday-summary { margin: 0 0 12px; font-size: 15px; color: var(--ink-2); }
.myday-summary strong { color: var(--ink); }
.myday-day { margin: 0 0 14px; }
.myday-day h3 { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: 15px; color: var(--ink); }
.myday-day h3 span { font-weight: 500; color: var(--ink-2); font-size: 14px; }
.myday-day.is-empty h3 { color: var(--ink-mute); }
.myday-goal { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-2); }
.myday-goal strong { color: var(--ink); }
.myday-booked { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
@media (max-width: 540px) {
  .myday-list { padding: 2px 14px; }
  .myday-list li { grid-template-columns: 48px minmax(0, 1fr); }
  .myday-action { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; gap: 10px; margin-top: 6px; }
}
.myday-foot { margin: 12px 0 0; color: var(--ink-mute); font-size: 13.5px; }

@media (max-width: 1080px) {
  .today-grid { grid-template-columns: minmax(0, 1fr); }
  .forecast-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .today-forecast { padding: 20px; border-radius: 18px; }
  .forecast-periods { width: 100%; overflow-x: auto; }
  .today-timeline li { grid-template-columns: 48px minmax(0, 1fr); }
  .today-appt-tags { grid-column: 2; justify-content: flex-start; }
  .today-timeline li > .btn { grid-column: 2; justify-self: start; }
  .today-team-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .today-team-list .forecast-bar { grid-column: 1 / -1; grid-row: 2; }
  .myday-hero { grid-template-columns: 1fr 1fr; }
  .myday-next { grid-column: 1 / -1; justify-self: start; max-width: none; width: 100%; }
  .today-actions { width: 100%; }
  .today-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- Configuração inicial ---------- */
.setup-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 28px; }
.setup-head .page-title { margin: 0; max-width: 24ch; }
.setup-plan { padding: 8px 14px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); font-weight: 750; font-size: 13.5px; text-decoration: none; }
.setup-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.setup-rail { position: sticky; top: 24px; display: grid; gap: 18px; }
.setup-progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.setup-progress span { display: block; height: 100%; background: var(--brand); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.setup-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.setup-rail button {
  width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px; border-radius: 12px;
  border: 1px solid transparent; background: none; color: var(--ink-2); cursor: pointer; font: inherit;
}
.setup-rail button:hover { background: var(--surface); }
.setup-rail button.is-current { background: var(--surface); border-color: var(--rule); color: var(--ink); box-shadow: var(--shadow); }
.setup-rail strong { display: block; font-size: 15px; color: inherit; }
.setup-rail small { display: block; font-size: 13px; color: var(--ink-mute); margin-top: 2px; }
.setup-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--surface-2); color: var(--ink-2); }
.setup-rail .is-current .setup-num { background: var(--brand); color: var(--brand-ink); }
.setup-rail .is-done .setup-num { background: var(--brand-soft); color: var(--brand-text); }
/* Passo que ainda não chegou: visível, mas não abre fora de ordem (onda 9). */
.setup-rail button.is-ahead { cursor: default; }
.setup-rail button.is-ahead:hover { background: none; }
.setup-rail button.is-ahead strong { color: var(--ink-mute); }
.setup-hours-sum > summary { font-weight: 650; color: var(--ink); }
.setup-hours-sum .when-open, .setup-hours-sum[open] .when-closed { display: none; }
.setup-hours-sum[open] .when-open { display: inline; }
/* Tabela de serviços sugeridos: o nome ocupa a linha inteira, então o cabeçalho fica numa linha só
   (Preço · Duração · Volta em); no celular, cada campo leva o próprio rótulo. */
.setup-table.is-staged .setup-tr.is-head > span:first-child { display: none; }
.setup-cell-label { display: none; }
.setup-method { padding: 16px 18px; border-radius: var(--radius); background: var(--brand-deep); color: #EEF3EC; }
.setup-method h2 { margin: 0 0 6px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #B9E2C4; }
.setup-method p { margin: 0; color: #D5E1D8; font-size: 14.5px; }

.setup-panel { padding: 28px 30px; border-radius: 22px; background: var(--surface); border: 1px solid var(--rule); min-height: 420px; }
.setup-panel > h2 { margin: 0 0 6px; font-size: 24px; }
.setup-lede { margin: 0 0 22px; color: var(--ink-2); max-width: 64ch; }
.setup-form { display: grid; gap: 16px; max-width: 640px; }
.setup-form h3 { margin: 6px 0 0; font-size: 17px; }
.setup-help { display: block; margin-top: 6px; color: var(--ink-mute); font-size: 13px; }
.setup-error { margin: 0; color: var(--bad); font-weight: 600; }
.setup-actions { display: flex; gap: 12px 18px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.setup-actions .btn-primary { min-height: 46px; padding: 0 24px; font-size: 15px; }
.setup-note { color: var(--ink-2); }
.setup-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.setup-table { display: grid; margin-bottom: 18px; border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden; }
.setup-tr { display: grid; grid-template-columns: minmax(0, 2fr) 110px 110px 160px; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--rule-soft); }
.setup-table.is-staged .setup-tr { grid-template-columns: minmax(0, 2fr) 120px 120px 140px 40px; }
.setup-tr:first-child { border-top: 0; }
.setup-tr.is-head { background: var(--surface-2); font-size: 13px; font-weight: 750; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .05em; }
.setup-tr .form-input { min-height: 38px; padding: 6px 10px; width: 100%; }
.setup-days { width: 76px !important; display: inline-block; }
.setup-table.is-staged .setup-help { padding: 8px 14px 12px; margin: 0; }
.setup-presets p { margin: 0 0 10px; color: var(--ink-2); }
.setup-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px dashed var(--ink-mute); background: none; color: var(--ink); font: 650 14px var(--font-ui); cursor: pointer; }
.chip-btn:hover { border-style: solid; border-color: var(--brand); color: var(--brand-text); background: var(--brand-soft); }

.setup-people { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.setup-people li { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.setup-person { display: flex; align-items: center; gap: 12px; }
.setup-person-info { flex: 1; min-width: 0; }
.setup-person-info strong { display: block; }
.setup-person-info small { color: var(--ink-mute); }
.setup-person-warn { color: var(--bad); font-weight: 650; }
.setup-person-actions { flex: none; display: flex; align-items: center; gap: 4px; }
.setup-person-actions .btn { min-height: 44px; }
.setup-person-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; background: none; border: 0; color: var(--ink-2); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.setup-people li.is-editing { background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.setup-edit { display: grid; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.setup-edit .setup-actions { margin: 0; }
.setup-edit .setup-actions .btn, .setup-pro .setup-actions .btn { min-height: 44px; }
.setup-checks label { min-height: 44px; }
.prof-access-toggle.is-disabled { cursor: default; }
.prof-access-toggle.is-disabled strong { color: var(--ink-mute); }
.setup-salon-hours > .setup-help { margin: 0 0 10px; }
@media (max-width: 520px) {
  .setup-person { flex-wrap: wrap; }
  .setup-person-actions { width: 100%; padding-left: 52px; }
}
/* Seleção discreta (passo 1 e passo 3): fundo suave, borda de 2 px e ✓ à direita; o cartão não muda de tamanho. */
/* "Adicionar outra pessoa" fica em .setup-actions, FORA de .setup-form: o seletor não pode depender do formulário. */
.setup-actions #sp-add { min-height: 44px; }
.setup-fieldset { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 14px 16px; margin: 0; }
.setup-fieldset legend { padding: 0 6px; font-weight: 750; color: var(--ink-2); font-size: 14px; }
.setup-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.setup-checks label { display: inline-flex; gap: 8px; align-items: center; font-size: 14.5px; }
.setup-days-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.day-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.day-toggle span { display: grid; place-items: center; width: 50px; height: 44px; border-radius: 10px; border: 1px solid var(--rule); font-weight: 700; font-size: 13.5px; cursor: pointer; color: var(--ink-2); }
.day-toggle input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.day-toggle input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.setup-hours { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.setup-hours label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; }
.setup-hours .form-input { width: 120px; }


/* Primeiro acesso (20/10): horário e jornada ficam fechados até "Ajustar". */
.setup-details { border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.setup-details > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px; cursor: pointer; color: var(--ink-2); font-size: 14.5px; }
.setup-details > summary::-webkit-details-marker { display: none; }
.setup-details-link { flex: none; display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-text); font-weight: 700; }
.setup-details[open] .setup-details-link { color: var(--ink-mute); }
.setup-details-body { padding: 14px 16px 16px; border-top: 1px solid var(--rule-soft); }
.setup-sum { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--wait-bg); color: var(--ink-2); font-size: 14px; }
.setup-actions .setup-later { margin: 0; }
/* Etapa C2 (20/10): "Só eu" / "Eu e mais gente". */
.setup-team-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 4px 0 18px; }
.setup-team-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 64px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; position: relative; }
.setup-team-card strong { font-size: 16px; }
.setup-team-card span { color: var(--ink-mute); font-size: 14px; }
.setup-team-card:hover { border-color: var(--brand); }
.setup-team-card.is-primary, .setup-team-card.is-current { padding: 13px 17px; padding-right: 44px; border: 2px solid var(--brand); background: var(--brand-soft); color: var(--ink); }
.setup-team-card.is-primary::after, .setup-team-card.is-current::after { content: "✓"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; font-weight: 800; color: var(--brand); }
.setup-team-card:disabled { opacity: .6; cursor: progress; }
.setup-team-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.setup-count { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.setup-stepper { display: inline-flex; align-items: center; gap: 6px; }
.setup-stepper .btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 22px; font-weight: 600; line-height: 1; }
.setup-stepper .btn:disabled { opacity: .45; }
.setup-stepper output { min-width: 32px; text-align: center; font-size: 18px; font-weight: 700; }
.setup-group-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.setup-group-rows li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; padding: 12px 14px 2px; border-radius: 12px; background: var(--surface-2); }
.setup-group-rows li > :only-child { grid-column: 1 / -1; }

@media (max-width: 1080px) {
  .setup-layout { grid-template-columns: minmax(0, 1fr); }
  .setup-rail { position: static; }
  .setup-rail ol { grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; }
  .setup-rail small, .setup-method { display: none; }
}
@media (max-width: 720px) {
  /* Os 3 passos visíveis de uma vez no celular, sem rolar para o lado (onda 9). */
  .setup-progress { display: none; }
  .setup-rail ol { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .setup-rail button { flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; text-align: center; }
  .setup-rail strong { font-size: 13px; line-height: 1.25; font-weight: 650; }
  .setup-head { margin-bottom: 16px; }
  .setup-head .setup-plan { display: none; }
  .setup-cell-label { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 650; color: var(--ink-mute); }
  .setup-panel { padding: 20px 18px; border-radius: 18px; }
  .setup-grid2, .setup-group-rows li { grid-template-columns: minmax(0, 1fr); }
  .setup-tr, .setup-table.is-staged .setup-tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .setup-tr.is-head { display: none; }
  .setup-tr > span:first-child { grid-column: 1 / -1; }
}

/* ---------- Equipe e acessos ---------- */
.access-section { margin-top: 32px; padding: 26px 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--rule); }
.access-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.access-head h2 { margin: 0 0 4px; font-size: 22px; }
.access-head p { margin: 0; color: var(--ink-2); max-width: 60ch; }
.access-profiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.access-profiles article { padding: 16px 18px; border-radius: var(--radius); background: var(--surface-2); }
.access-profiles article:first-child { background: var(--brand-deep); color: #EEF3EC; }
.access-profiles article:first-child h3, .access-profiles article:first-child p { color: #EEF3EC; }
.access-profiles article:first-child small { color: #B9E2C4; }
.access-profiles article:first-child .access-icon { background: rgba(185, 226, 196, .16); color: #B9E2C4; }
.access-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-text); margin-bottom: 10px; }
.access-profiles h3 { margin: 0; font-size: 17px; }
.access-profiles small { display: block; color: var(--ink-mute); font-weight: 650; margin-top: 2px; }
.access-profiles p { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.access-list { display: grid; gap: 8px; }
.access-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--rule-soft); }
.access-row.is-off { opacity: .6; }
.access-row strong { display: block; }
.access-row small { color: var(--ink-mute); }
.access-state { font-size: 13px; color: var(--ink-mute); font-weight: 650; }
.access-muted { color: var(--ink-2); margin: 0; }
@media (max-width: 900px) {
  .access-profiles { grid-template-columns: minmax(0, 1fr); }
  .access-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .access-row .chip, .access-row .access-state { grid-column: 2; justify-self: start; }
}

/* ---------- Recorrência ---------- */
.method-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); margin: 0 0 20px; width: fit-content; max-width: 100%; }
.method-tabs button { border: 0; background: none; color: var(--ink-2); font: 700 14px var(--font-ui); padding: 9px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.method-tabs button:hover { color: var(--ink); }
.method-tabs button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.returns-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.returns-stats > div, .returns-stats > button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.returns-stats > button:hover { border-color: var(--brand); }
.returns-stats > :first-child { background: var(--brand-deep); border-color: transparent; }
.returns-stats > :first-child strong, .returns-stats > :first-child span, .returns-stats > :first-child small { color: #EEF3EC; }
.returns-stats small { color: var(--ink-mute); font-size: 13px; line-height: 1.4; margin-top: 4px; }
.returns-stats .is-attention { border-color: color-mix(in srgb, var(--wait) 35%, var(--rule)); }
.returns-stats strong { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.returns-stats span { color: var(--ink-mute); font-size: 13.5px; }
.returns-stats .is-attention strong { color: var(--wait); }
@media (max-width: 900px) { .returns-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .method-tabs { border-radius: 16px; } }
.forecast-periods button, .method-tabs button { white-space: nowrap; }
@media (max-width: 640px) {
  .forecast-periods { scrollbar-width: none; }
  .forecast-periods::-webkit-scrollbar { display: none; }
  .method-tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
}
.rem-history { display: inline-block; margin-top: 12px; font-size: 13.5px; }

/* Agenda de hoje: etiquetas sob o nome, ação à direita (não espreme o nome). */
.today-timeline li { grid-template-columns: 56px minmax(0, 1fr) auto; }
.today-appt .today-appt-tags { justify-content: flex-start; margin-top: 6px; }
.today-appt-action { display: flex; justify-content: flex-end; }
.chip.is-wait { background: var(--wait-bg); color: var(--wait); }
.today-next-state:empty { display: none; }
@media (max-width: 640px) {
  .today-timeline li { grid-template-columns: 48px minmax(0, 1fr); }
  .today-appt-action { grid-column: 2; justify-content: flex-start; }
  .today-appt-action:empty { display: none; }
}

/* ---------- Combinar o próximo ---------- */
.modal-next-step { max-width: 760px; }
.ns-paid { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 700; color: var(--brand-text); }
.ns-script { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--brand-soft); margin-bottom: 16px; }
.ns-script svg { flex: none; color: var(--brand-text); margin-top: 2px; }
.ns-script p { margin: 0; color: var(--ink-2); }
/* minmax(0,1fr): um texto longo não alarga a coluna além da tela do celular. */
.ns-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ns-step { padding: 18px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface); }
.ns-step.is-done { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--surface-2); border-color: transparent; }
.ns-step header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ns-step.is-done header { margin: 0; flex: 1; justify-content: space-between; }
.ns-step.is-done .chip { white-space: normal; min-width: 0; }
.ns-step h3 { margin: 0; font-size: 17px; }
.ns-step header small { color: var(--ink-mute); }
.ns-choice, .ns-other { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.ns-other { grid-template-columns: 1fr; }
.ns-choice label, .ns-other > label { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1.5px solid var(--rule); cursor: pointer; }
.ns-choice label:has(input:checked), .ns-other > label:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); }
.ns-choice input, .ns-other input[type=radio] { accent-color: var(--brand); margin-top: 3px; }
.ns-choice strong { display: flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--ink); }
.ns-choice small, .ns-other small { display: block; color: var(--ink-mute); font-size: 13px; margin-top: 2px; }
.ns-other strong { display: block; color: var(--ink); }
.ns-fields { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.ns-fields label, .ns-contact label { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ink-2); font-size: 14px; }
.ns-fields .form-input, .ns-fields .form-select, .ns-contact .form-input, .ns-contact .form-select { min-height: 40px; width: auto; }
.ns-freq .form-input { width: 76px !important; }
.ns-hint { margin: 10px 0; color: var(--ink-2); font-size: 14px; }
.ns-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ns-slot { min-width: 64px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface); font: 700 14px var(--font-ui); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.ns-slot:hover { border-color: var(--brand); }
.ns-slot[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.ns-muted { color: var(--ink-mute); font-size: 14px; }
/* .btn.ns-confirm vence `.catalog-scope .btn { white-space: nowrap }`: o texto
   "Cliente aceitou · reservar …" quebra linha em vez de empurrar a janela para fora. */
.btn.ns-confirm { width: 100%; min-height: 46px; white-space: normal; text-align: center; justify-content: center; }
.ns-contact { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 4px 0 8px; }
.ns-error { margin: 10px 0 0; color: var(--bad); font-weight: 600; }
.ns-later { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--wait-bg); color: var(--ink-2); }
.ns-later svg { color: var(--wait); flex: none; margin-top: 2px; }
@media (max-width: 640px) {
  .ns-choice { grid-template-columns: 1fr; }
  .ns-fields label { width: 100%; justify-content: space-between; }
  .ns-fields .form-input, .ns-fields .form-select { flex: 1; }
}
.access-group { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 6px; font-size: 15px; }
.access-group:first-child { margin-top: 0; }
.access-group small { font-weight: 550; color: var(--ink-mute); font-size: 13px; }
.access-row { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
.access-row.is-missing { border-style: dashed; }
.access-state.is-on { color: var(--brand-text); }
.access-actions { display: flex; gap: 6px; align-items: center; }
.access-delete { padding: 4px 10px; color: var(--bad); }
.access-delete:hover { border-color: var(--bad); background: var(--bad-bg); }
.access-confirm p { color: var(--ink-2); margin: 0 0 10px; }
@media (max-width: 900px) { .access-actions { grid-column: 2; } }

/* ---------- Horário de funcionamento ---------- */
.bh-editor { display: grid; gap: 6px; }
.bh-row { display: grid; grid-template-columns: 150px auto; align-items: center; gap: 12px; min-height: 44px; }
.bh-day { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; color: var(--ink); cursor: pointer; }
.bh-day input { width: 18px; height: 18px; accent-color: var(--brand); }
.bh-times { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-mute); }
.bh-times .form-input { width: 116px; min-height: 38px; }
.bh-closed { display: none; color: var(--ink-mute); font-size: 14px; }
.bh-row.is-closed .bh-times { display: none; }
.bh-row.is-closed .bh-closed { display: inline; }
.bh-row.is-closed .bh-day span { color: var(--ink-mute); }
.bh-copy { justify-self: start; margin-top: 4px; font-size: 13.5px; min-height: 44px; display: inline-flex; align-items: center; }   /* alvo de toque de 44 px (antes 39) */
.salon-hours-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.salon-hours-title { margin: 0 0 4px; font-size: 15px; font-weight: 750; }
@media (max-width: 520px) { .bh-row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Acesso ao Hermelo no cadastro do profissional ---------- */
.prof-access { margin: 18px 0 6px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface); }
.prof-access h3 { margin: 0 0 10px; font-size: 15.5px; }
.prof-access-toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.prof-access-toggle input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.prof-access-toggle strong { display: block; color: var(--ink); }
.prof-access-toggle small { display: block; color: var(--ink-mute); font-size: 13.5px; margin-top: 2px; line-height: 1.45; }
.prof-access-status { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.prof-access-status strong { display: block; color: var(--ink); }
.prof-access-state { font-size: 13px; font-weight: 700; color: var(--ink-mute); }
.prof-access-state.is-on { color: var(--brand-text); }
.prof-access-state.is-wait, .access-state.is-wait { color: var(--wait); }
.prof-access-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.prof-access .catalog-help { margin: 10px 0 0; }
.prof-delete-footer { margin-right: auto; color: var(--bad); }

/* ---------- Convite: confirmação e envio pelo WhatsApp ---------- */
.btn-whatsapp { border-color: var(--brand); color: var(--brand-text); }
.btn-whatsapp:hover { background: var(--brand-soft, var(--surface)); }
.invite-sent p { color: var(--ink-2); margin: 0 0 12px; line-height: 1.5; }
.invite-sent-line { display: flex; gap: 8px; align-items: center; color: var(--ink) !important; }
.invite-sent-line > span { min-width: 0; overflow-wrap: anywhere; } /* e-mail comprido não estica a janela */
.invite-sent-line svg { color: var(--brand-text); flex: none; }
.invite-sent-wa { margin-top: 6px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface); }
.invite-sent-wa p { margin-bottom: 10px; }
.invite-sent-wa .btn-whatsapp { min-height: 42px; padding-inline: 16px; }

/* ---------- Excluir serviço no menu ⋯ ---------- */
.services-row-popover-item.is-danger { color: var(--ui-danger, var(--bad)); }

/* ---------- Serviços: pendências do método e ciclo de retorno ---------- */
.services-gaps { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.services-gap-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.services-gap-pill strong { font-size: 14px; font-weight: 750; }
.services-gap-pill:hover { background: color-mix(in srgb, var(--cat-accent) 10%, transparent); }
.services-gap-pill.is-active { border-color: var(--cat-accent); background: var(--cat-bg, #fff); }
.services-gap-ok { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.services-category-chip.is-gap { display: inline-flex; align-items: center; gap: 6px; }
.catalog-cycle-missing { font-size: 13px; font-weight: 650; color: var(--wait, #9a6b00); background: color-mix(in srgb, var(--wait, #9a6b00) 10%, transparent); border: 1px dashed color-mix(in srgb, var(--wait, #9a6b00) 45%, transparent); border-radius: 4px; padding: 4px 8px; }
button.catalog-cycle-missing { cursor: pointer; font-family: inherit; }
button.catalog-cycle-missing:hover { border-style: solid; }
.service-cycle-block { margin: 4px 0 18px; padding: 14px 16px; border-radius: var(--radius, 12px); border: 1px solid color-mix(in srgb, var(--cat-accent) 30%, transparent); background: color-mix(in srgb, var(--cat-accent) 6%, transparent); }
.service-cycle-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.service-cycle-head .form-label { margin: 0; }
.service-cycle-badge { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cat-accent); }
.service-cycle-block > .catalog-help { margin: 0 0 10px; }
.service-cycle-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.service-cycle-row .service-input-suffix { width: 150px; }
.service-cycle-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.service-cycle-chip { min-height: 34px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--cat-control, var(--rule)); background: var(--cat-bg, transparent); color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.service-cycle-chip.is-active { border-color: var(--cat-accent); color: var(--cat-accent); font-weight: 700; }
.service-cycle-block > small.catalog-help { display: block; margin-top: 8px; }
@media (max-width: 520px) { .service-cycle-row .service-input-suffix { width: 100%; } }

/* ---------- Onboarding: serviços no mesmo padrão do catálogo ---------- */
.setup-tr { grid-template-columns: minmax(0, 2fr) 120px 100px 150px; }
.setup-table.is-staged .setup-tr { grid-template-columns: minmax(0, 2fr) 130px 110px 130px 40px; }
.setup-prefix, .setup-suffix { position: relative; display: block; }
.setup-prefix > span, .setup-suffix > span { position: absolute; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ink-mute); pointer-events: none; }
.setup-prefix > span { left: 10px; }
.setup-suffix > span { right: 10px; }
.setup-prefix .form-input { padding-left: 34px !important; }
.setup-suffix .form-input { padding-right: 42px !important; }
.setup-cycle:placeholder-shown { border-style: dashed; border-color: var(--wait); background: var(--wait-bg); }
.setup-cycle:placeholder-shown::placeholder { color: var(--wait); font-weight: 650; }
/* Novos serviços: nome inteiro numa linha, números embaixo (o painel é estreito). */
.setup-table.is-staged .setup-tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 36px; row-gap: 8px; }
.setup-table.is-staged .setup-tr > span:first-child { grid-column: 1 / -1; }
@media (max-width: 720px) {
  /* Preço, duração e dias inteiros à vista no celular (120,00 e 180 min não cortam). */
  /* O × sobe para a linha do nome; os dias ficam com a sobra da segunda linha. */
  .setup-table.is-staged .setup-tr { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 44px; column-gap: 6px; padding: 10px; }
  .setup-table.is-staged .setup-tr > span:first-child { grid-column: 1 / 4; }
  .setup-table.is-staged .setup-tr > [data-remove] { grid-column: 4; grid-row: 1; display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; }
  .setup-table.is-staged .setup-tr > span:nth-child(4) { grid-column: 3 / 5; }
  .setup-table.is-staged .setup-tr .form-input { min-height: 44px; }
  .setup-table.is-staged .setup-prefix .form-input { padding-left: 30px !important; }
  .setup-table.is-staged .setup-suffix .form-input { padding-right: 32px !important; }
  .setup-table.is-staged .setup-suffix > span { right: 8px; }
  .setup-chips .chip-btn { min-height: 44px; }
}
.setup-presets { margin-top: 14px; }

/* O ciclo de retorno é o campo do método: fica visível em qualquer largura. */
@media (max-width: 1279px) and (min-width: 1024px) {
  .catalog-scope :is(.services-table-head,.services-row) { grid-template-columns: minmax(170px,2fr) 88px 80px 110px minmax(120px,1fr) 88px; }
  .catalog-scope .services-row-return, .catalog-scope .services-table-head > span:nth-child(4) { display: block; }
}
@media (max-width: 1023px) {
  .catalog-scope .services-row-return { display: block; grid-column: 1; font-size: 15px; }
  .catalog-scope .services-row-team { grid-column: 2; align-self: end; }
  .catalog-scope .services-row-actions { grid-column: 1 / -1; justify-self: end; }
  .catalog-scope .catalog-service-icon.is-empty { display: none; }
}
@media (max-width: 1023px) {
  .catalog-scope .services-row-actions { position: absolute; top: 10px; right: 10px; grid-column: auto; }
  .catalog-scope .services-row-name { padding-right: 84px; }
}
.catalog-cycle-onetime { font-size: 13px; font-weight: 650; color: var(--cat-muted, var(--ink-mute)); border: 1px solid var(--cat-control, var(--rule)); border-radius: 4px; padding: 3px 8px; }
.service-cycle-onetime { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; cursor: pointer; }
.service-cycle-onetime input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--cat-accent); flex: none; }
.service-cycle-onetime span { font-size: 14px; font-weight: 600; }
.service-cycle-onetime small { display: block; font-weight: 400; color: var(--cat-muted, var(--ink-mute)); margin-top: 2px; }
.service-cycle-block.is-one-time .service-cycle-row { opacity: .45; }

/* ---------- Onboarding "Quem atende": mesma linguagem do cadastro ---------- */
.setup-pro .prof-access-toggle { margin: 4px 0 14px; }
.setup-hours { display: grid; gap: 10px; }
.setup-hours-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.setup-hours-row > span { min-width: 84px; font-weight: 650; font-size: 14px; }
.setup-hours-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-mute); }
.setup-hours-row .form-input { width: 128px; min-height: 44px; }   /* alvo de toque de 44 px (antes 43) */

/* ---------- Ajustes → WhatsApp: conexão (o que traz) separada do modo de envio ---------- */
.wa-capacidades { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 2px; border: 1px solid var(--rule); border-radius: var(--radius-sm, 10px); overflow: hidden; }
.wa-capacidades li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--surface); }
.wa-capacidades li + li { border-top: 1px solid var(--rule-soft); }
.wa-capacidade-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-text); }
.wa-capacidades strong { display: block; font-size: 14.5px; color: var(--ink); }
.wa-capacidades div span { display: block; font-size: 13px; color: var(--ink-mute); line-height: 1.45; }
.wa-capacidade-situacao { font-size: 13px; font-weight: 700; color: var(--ink-mute); white-space: nowrap; }
.wa-capacidade-situacao.is-on { color: var(--brand-text); }

@media (max-width: 640px) {
  .wa-capacidades li { grid-template-columns: 34px minmax(0, 1fr); }
  .wa-capacidade-situacao { grid-column: 2; }

}

/* ---------- Clientes: convite para trazer os contatos do WhatsApp ---------- */
.clients-wa-invite { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px 14px; align-items: center; margin: 0 0 20px; padding: 14px 18px; border-radius: var(--radius, 12px); background: var(--brand-soft); color: var(--ink); }
.clients-wa-invite > svg { color: var(--brand-text); }
.clients-wa-invite strong { display: block; font-size: 15px; }
.clients-wa-invite span { display: block; font-size: 13.5px; color: var(--ink-2, var(--ink-mute)); }
.clients-wa-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) { .clients-wa-invite { grid-template-columns: 22px minmax(0, 1fr); } .clients-wa-actions { grid-column: 2; } }
.wa-sync-alerta { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: -4px 0 16px; padding: 14px 16px; border-radius: var(--radius-sm, 10px); background: var(--wait-bg); }
.wa-sync-alerta > svg { color: var(--wait); }
.wa-sync-alerta strong, .wa-sync-alerta span { display: block; }
.wa-sync-alerta span { font-size: 13px; color: var(--ink-2, var(--ink-mute)); margin-top: 2px; }
@media (max-width: 640px) { .wa-sync-alerta { grid-template-columns: 22px minmax(0, 1fr); } .wa-sync-alerta .btn { grid-column: 2; justify-self: start; } }

/* ---------- Clientes: próximo cuidado, lembretes e contato sem nome ---------- */
.clients-care strong { display: block; }
.clients-care span { display: block; }
.clients-care.is-booked strong { color: var(--brand-text); }
.clients-care.is-soon strong { color: var(--wait); }
.clients-care.is-late strong { color: var(--bad); }
.clients-care.is-first strong { color: var(--ink); }
.clients-care .clients-visits { font-size: 13px; color: var(--cat-muted, var(--ink-mute)); margin-top: 2px; }
.clients-status-hint { display: block; font-size: 13px; color: var(--cat-muted, var(--ink-mute)); }
.clients-avatar.is-unnamed { display: inline-grid; place-items: center; color: var(--cat-muted, var(--ink-mute)); }
.clients-name.is-unnamed, .clients-profile-name h1.is-unnamed { color: var(--ink-mute); font-style: italic; font-weight: 600; }
.clients-phone .clients-text-button { font-size: 13px; padding: 0; }
.clients-profile-name .clients-text-button { margin-top: 4px; }
.clients-row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.clients-wa-button { padding-inline: 10px; }
.client-next.is-first { border-style: solid; }
.client-next.is-first .client-next-icon { color: var(--brand-text); }
@media (min-width: 1024px) { .clients-list-head, .clients-record { grid-template-columns: minmax(200px,1.3fr) minmax(190px,1.1fr) minmax(150px,.8fr) 160px; } }
.clients-row-actions .btn { width: auto; }
@media (max-width: 760px) {
  .clients-relationship.clients-care { grid-column: 1 / -1; grid-row: 2; }
  .clients-permission { grid-row: 3; }
  .clients-row-actions { grid-column: 1 / -1; grid-row: 4; justify-content: flex-start; }
}
/* Hoje › atalho para Comandas › Falta combinar. */
.today-next-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; border: 0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: normal; text-align: left; }
.today-next-link:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Combinar o próximo · recorrente em três perguntas: frequência, dia, data. */
.ns-plan { display: grid; gap: 14px; margin-bottom: 14px; }
.ns-q { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.ns-q-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); font-weight: 700; font-size: 13px; }
.ns-q strong { display: block; margin: 3px 0 8px; color: var(--ink); font-size: 14.5px; }
.ns-q-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ns-q-row .ns-freq { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ink-2); font-size: 14px; }
.ns-q-row .ns-freq .form-input { min-height: 40px; }
.ns-chips, .ns-days { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-chip { min-width: 48px; min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface); font: 700 14px var(--font-ui); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.ns-chip:hover:not(:disabled) { border-color: var(--brand); }
.ns-chip[aria-pressed="true"], .ns-chip[aria-checked="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.ns-chip:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.rhythm { display: grid; gap: 8px; margin: 0 0 14px; }
.rhythm-label { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.rhythm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rhythm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rhythm .ns-chip { position: relative; min-height: 44px; font-size: 15px; }
.rhythm .ns-chip.is-standard::after, .rhythm-dot { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
.rhythm .ns-chip.is-standard::after { position: absolute; top: 5px; right: 5px; }
.rhythm .ns-chip.is-standard[aria-pressed="true"]::after { background: var(--brand-ink); }
.rhythm-other { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ink-2); font-size: 14px; }
.rhythm-other .form-input { width: 96px !important; min-height: 44px; font-size: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.rhythm-note { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; color: var(--ink-2); font-size: 14px; }
.rhythm-note > span { display: inline-flex; align-items: flex-start; gap: 6px; }
.rhythm-note .rhythm-dot { margin-top: .55em; }
.rhythm-other .form-input.is-chosen { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 700; }
@media (max-width: 540px) {
  .rhythm-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; }
  .rhythm .ns-chip { min-width: 0; padding: 6px 4px; }
}
.ns-when { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.ns-when strong { display: inline; margin: 0; }
.ns-shift { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.ns-hint:empty { display: none; }
@media (max-width: 540px) {
  .ns-q { grid-template-columns: 1fr; gap: 6px; }
  .ns-q-n { display: none; }
  .ns-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ns-current { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: 13px; color: var(--ink-mute); }

/* Recorrência · filas de trabalho do método. */
.returns-tab-count { display: inline-block; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--wait-bg); color: var(--wait); font-size: 13px; line-height: 20px; text-align: center; }
.returns-queue { margin: 0 0 20px; padding: 20px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); }
.returns-queue > header h2 { margin: 0; font-size: 19px; }
.returns-queue > header p { margin: 4px 0 8px; color: var(--ink-mute); font-size: 14px; }
.returns-list .care-row .chip { margin-right: 4px; }
.returns-list .care-row.is-due strong { color: var(--ink); }
.returns-row-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.returns-row-actions .btn { width: auto; }
.returns-empty { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule); color: var(--ink-2); }
.returns-booked-summary { display: flex; flex-wrap: wrap; gap: 12px 32px; padding: 12px 0 16px; }
.returns-booked-summary strong { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.returns-booked-summary span { color: var(--ink-mute); font-size: 13px; }
@media (max-width: 540px) {
  .returns-queue { padding: 16px; }
  .returns-row-actions { width: 100%; }
  .returns-row-actions .btn { flex: 1; }
}
/* Vagas da semana para quem passou da hora (E2-03; hoje dentro de Voltas). */
.chair-summary { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 4px 0 14px; color: var(--ink-mute); font-size: 14px; }
.chair-summary strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.chair-days { display: grid; gap: 18px; }
.chair-day h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.chair-window { margin: 0 0 10px; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.chair-window > header { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--surface-2); font-size: 14px; }
.chair-window > header span { color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.chair-candidate { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--rule); }
.chair-candidate p { margin: 2px 0; color: var(--ink-2); font-size: 14px; }
.chair-candidate small { color: var(--ink-mute); font-size: 13px; font-variant-numeric: tabular-nums; }
.chair-candidate .btn { width: auto; flex-shrink: 0; }
.chair-candidate.is-called { opacity: .7; }
@media (max-width: 540px) {
  .chair-candidate { flex-direction: column; align-items: stretch; }
  .chair-candidate .btn { width: 100%; }
}
/* Nome de cliente clicável (lib/client-quick.js): parece texto, abre a ficha rápida. */
.client-link { display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.client-link:hover { text-decoration-color: currentColor; color: var(--brand-text); }
.client-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.ns-script .ns-ficha { margin-left: auto; flex: none; align-self: center; font-size: 13px; font-weight: 700; color: var(--brand-text); }
.cq-layer { position: fixed; inset: 0; z-index: 150; display: flex; justify-content: flex-end; background: rgba(23, 22, 20, .35); animation: cq-fade .15s ease-out; }
.cq-drawer { width: min(420px, 100%); height: 100%; display: flex; flex-direction: column; background: var(--surface); box-shadow: -12px 0 32px rgba(23, 22, 20, .18); animation: cq-in .18s ease-out; }
.cq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 12px; padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
.cq-head h2 { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.cq-close { width: 40px; height: 40px; flex: none; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); font-size: 22px; line-height: 1; color: var(--ink-2); cursor: pointer; }
.cq-body { flex: 1; overflow-y: auto; padding: 4px 24px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 18px; }
.cq-contact { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cq-phone { margin: 0; font-size: 16px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; user-select: all; }
.cq-phone span { font-size: 13px; font-weight: 400; color: var(--ink-mute); user-select: text; }
.cq-contact .btn { width: auto; }
.cq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cq-chips .chip { white-space: normal; }
.cq-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.cq-facts div { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.cq-facts div:first-child { grid-column: 1 / -1; }
.cq-facts dt { font-size: 13px; color: var(--ink-mute); }
.cq-facts dd { margin: 4px 0 0; font-weight: 700; color: var(--ink); }
.cq-facts dd small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-mute); margin-top: 2px; }
.cq-warn { color: var(--wait); }
.cq-section h3 { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.cq-section p { margin: 0; color: var(--ink-2); }
.cq-visits { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cq-visits li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--rule); }
.cq-visits li span { font-size: 13px; color: var(--ink-mute); }
.cq-muted { color: var(--ink-mute); margin: 0; }
.cq-full { margin-top: auto; width: 100%; min-height: 46px; }
@keyframes cq-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cq-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cq-layer, .cq-drawer { animation: none; } }
@media (max-width: 540px) { .cq-drawer { width: 100%; } .cq-head, .cq-body { padding-inline: 16px; } }
/* Mensagem da reserva (lib/booking-message.js): autorização no balcão e cartão "Reserva feita". */
.bm-consent:empty { display: none; }
.bm-consent { margin: 12px 0; }
.bm-consent p { margin: 0; font-size: 14px; }
.bm-ask { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--surface); cursor: pointer; }
.bm-ask:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); }
.bm-ask input { accent-color: var(--brand); margin-top: 3px; width: 18px; height: 18px; flex: none; }
.bm-ask strong { display: block; font-size: 14px; color: var(--ink); }
.bm-ask small { display: block; font-size: 13px; color: var(--ink-mute); margin-top: 2px; }
.bm-ok { display: flex; align-items: center; gap: 6px; color: var(--brand-text); font-weight: 600; }
.bm-warn { display: flex; align-items: center; gap: 6px; color: var(--wait); font-weight: 600; }
.bm-muted { color: var(--ink-mute); }
.bm-now { margin: 0; font-weight: 700; color: var(--ink); }
.bm-card { display: grid; gap: 10px; margin-top: 14px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface); }
.bm-card header { display: flex; align-items: center; gap: 12px; }
.bm-card h3 { margin: 0; font-size: 17px; }
.bm-card header small { display: block; color: var(--ink-mute); font-size: 13px; }
.bm-card p { margin: 0; }
.bm-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); }
.bm-preview { margin: 0; padding: 12px 14px; border-radius: 12px 12px 12px 4px; background: #E7F6DE; color: #1F2A1C; font-size: 14.5px; line-height: 1.45; white-space: normal; }
.bm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bm-actions .btn { width: auto; }
.bm-error { margin: 0; color: var(--bad); font-weight: 600; }
.bm-modal .bm-card { margin-top: 0; border: 0; padding: 0; }
@media (max-width: 540px) { .bm-actions .btn { flex: 1; } }
.bm-modal .bm-card h3 { display: none; }
/* Lembretes · quem ainda não autorizou e lembretes em uso. */
.rem-reach-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; }
.rem-reach-list span { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 600; }
.rem-reach-list small { font-weight: 400; color: var(--ink-mute); }
.rem-cadence.is-legacy ol li::before { opacity: .55; }
.rem-cadence-off { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--wait-bg); }
.rem-cadence-off strong { display: block; color: var(--ink); font-size: 14px; }
.rem-cadence-off p { margin: 4px 0 8px; font-size: 13px; color: var(--ink-2); }
.rem-cadence-off .btn { width: auto; }
@media (max-width: 540px) {
  .method-notice.rem-reach { flex-wrap: wrap; }
  .method-notice.rem-reach > div { flex: 1 1 calc(100% - 32px); }
  .method-notice.rem-reach > .btn { margin-left: 30px; }
}

/* Hoje · Recepcionista IA no teste de 30 dias (só Master) */
.today-ai { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-text); }
.today-ai > div { display: flex; gap: 12px; align-items: flex-start; flex: 1 1 320px; }
.today-ai > div svg { flex: none; margin-top: 2px; }
.today-ai p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2, var(--ink)); }
.today-ai p strong { color: var(--brand-text); }
.today-ai .btn { flex: none; }
.today-ai-actions { display: inline-flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; flex: none; }
.today-ai-actions .btn-ghost { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding-inline: 10px; }
.today-ai.is-ended { background: var(--wait-bg); }
.today-ai.is-ended p strong, .today-ai.is-ended > div svg { color: var(--wait); }

/* Hoje · conversas com a IA desligada em que o cliente escreveu de novo e ninguém da equipe respondeu ainda */
.today-handoffs { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; margin-bottom: 16px; border-radius: 14px; background: var(--wait-bg); }
.today-handoffs > div { display: flex; gap: 12px; align-items: flex-start; }
.today-handoffs > div svg { flex: none; margin-top: 2px; color: var(--wait); }
.today-handoffs p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2, var(--ink)); }
.today-handoffs p strong { color: var(--wait); }
.today-handoffs-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.today-handoffs-list button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; border: none; border-radius: 10px; background: var(--surface); font: inherit; text-align: left; cursor: pointer; }
.today-handoffs-list button:hover, .today-handoffs-list button:focus-visible { background: var(--surface-2); }
.today-handoffs-list button span { color: var(--ink-2); font-size: 14px; flex: none; }

/* Hoje do profissional: as próximas semanas. */
.myday-future { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.myday-future > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.myday-future h2 { margin: 0; font-size: 16px; }
.myday-future-toggle { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.myday-future-toggle button { padding: 5px 14px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.myday-future-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.myday-future-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.myday-future-stats div { display: grid; gap: 2px; }
.myday-future-stats strong { font-size: 26px; line-height: 1.1; color: var(--ink); }
.myday-future-stats span { font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.myday-future-empty { margin: 0; color: var(--ink-2); }
.myday-future-foot { margin: 12px 0 0; font-size: 13.5px; color: var(--brand-text); font-weight: 600; }
@media (max-width: 540px) { .myday-future-stats { grid-template-columns: 1fr; } .myday-future-stats div { grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; } }

/* E3-01 · App do profissional: instalar e comissão do mês */
.myday-install { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--brand-soft); color: var(--brand-text); }
.myday-install[hidden] { display: none; }
.myday-install strong { display: block; font-size: 15px; }
.myday-install p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.myday-commission { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.myday-commission > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.myday-commission h2 { margin: 0; font-size: 16px; }
.myday-commission-total { display: grid; gap: 2px; }
.myday-commission-total strong { font-size: 30px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.myday-commission-total span { font-size: 13.5px; color: var(--ink-2); }
.myday-commission-items { margin-top: 12px; }
.myday-commission-items summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--brand-text); }
.myday-commission-items ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.myday-commission-items li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); font-size: 14px; }
.myday-commission-items li em { display: block; font-style: normal; font-size: 13px; color: var(--ink-mute); }
.myday-commission-items li strong { font-variant-numeric: tabular-nums; }
@media (max-width: 540px) { .myday-install { flex-direction: column; align-items: stretch; } }

/* E1-04 · Fechamento do dia (a partir das 18h) */
.today-close { margin-bottom: 16px; }
.today-close-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.today-close-stats > div { padding: 12px 14px; border-radius: 12px; background: var(--surface-2, var(--surface)); border: 1px solid var(--rule); }
.today-close-stats dt { font-size: 14px; color: var(--ink-mute); }
.today-close-stats dd { margin: 4px 0 0; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.today-close-stats small { color: var(--ink-mute); font-size: 14px; }
.today-close-stats .is-wait { background: var(--wait-bg); border-color: transparent; }
.today-close-stats .is-wait dd { color: var(--wait); }
.today-close-sub { margin: 0 0 8px; font-size: 14.5px; }
.today-close-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.today-close-list li { display: flex; align-items: center; gap: 10px; }
.today-close-who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.today-close-who:hover { border-color: var(--brand); }
.today-close-who span { color: var(--ink-mute); font-size: 14px; }
.today-close-nophone { color: var(--ink-mute); font-size: 14px; }
.today-close-ok { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; margin: 0; }
@media (max-width: 640px) { .today-close-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 23/10/2026: no celular o nome ficava espremido atrás dos botões; agora quebra a linha. */
@media (max-width: 640px) { .today-close-list li { flex-wrap: wrap; } .today-close-list .today-close-who { flex: 1 1 100%; } .today-close-actions { display: flex; flex-wrap: wrap; gap: 8px; } }

/* E1-08 · Pedidos de remarcar em destaque (Hoje e Lembretes) */
.resched-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.resched-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface); }
.resched-list li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resched-list span { color: var(--ink-mute); font-size: 13px; }

/* E1-05 · Placar do método por profissional */
.msb-scroll { overflow-x: auto; }
.msb-table { width: 100%; border-collapse: separate; border-spacing: 4px; font-variant-numeric: tabular-nums; }
.msb-table th, .msb-table td { padding: 8px 10px; text-align: center; font-size: 14px; white-space: nowrap; }
.msb-table thead th { color: var(--ink-mute); font-weight: 600; font-size: 13px; }
.msb-table tbody th { text-align: left; font-weight: 700; }
.msb-table tbody th small, .msb-table td small { display: block; font-weight: 500; font-size: 13px; color: var(--ink-mute); }
.msb-table td { border-radius: 8px; font-weight: 800; background: var(--surface-2, var(--surface)); }
.msb-table td.is-good { background: var(--ok-bg); color: var(--ok); }
.msb-table td.is-mid { background: var(--wait-bg); color: var(--wait); }
.msb-table td.is-low { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.msb-table td.is-none { color: var(--ink-mute); font-weight: 500; }
.msb-empty { color: var(--ink-mute); margin: 0; }
.msb-mine-title { margin: 18px 0 8px; font-size: 15px; }
.msb-mine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.msb-mine > div { display: flex; flex-direction: column; gap: 2px; }
.msb-mine strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.msb-mine span, .msb-mine-empty { color: var(--ink-mute); font-size: 13px; }
.msb-bars { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-items: end; height: 84px; }
.msb-bars li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.msb-bars span { display: block; width: 100%; height: var(--h); min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--ink-mute); }
.msb-bars .is-good span { background: var(--ok); } .msb-bars .is-mid span { background: var(--wait); } .msb-bars .is-low span { background: var(--bad); }
.msb-bars small { font-size: 13px; color: var(--ink-mute); }

/* E1-10 · Retorno avulso separado da frequência combinada */
.today-forecast { --return: #E3C27A; }
.forecast-bar .is-return { background: var(--return, #E3C27A); }
.forecast-legend i.is-return { background: var(--return, #E3C27A); }
.today-card-base { margin: 0 0 12px; color: var(--ink-mute); font-size: 14px; }

/* E1-06 · Proposta do próximo pelo profissional */
.np-sheet { display: flex; flex-direction: column; gap: 10px; }
.np-who { margin: 0; font-size: 15px; }
.np-kinds, .np-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.np-kinds button, .np-chips button { min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font: 600 14px var(--font-ui); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.np-kinds button[aria-checked="true"], .np-chips button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.np-kinds button { flex: 1 1 calc(50% - 3px); justify-content: center; }
.np-kinds button:last-child { flex-basis: 100%; }
.np-q { margin: 6px 0 0; font-weight: 700; font-size: 14px; display: block; }
.np-time { max-width: 160px; min-height: 44px; }
.np-summary { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.np-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.np-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule); }
.np-list li > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-list span, .np-list small { color: var(--ink-mute); font-size: 13px; }
.np-actions { display: flex; gap: 6px; }
.today-proposals { margin-bottom: 16px; }
.ns-proposal { margin: 6px 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ink); font-size: 14px; display: flex; align-items: center; gap: 8px; }

/* E0-10 · Sequência de lembretes: um botão grande por vez */
.rem-seq-card { margin: 12px 0; }
.rem-seq-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rem-seq-main { min-height: 52px; font-size: 16px; justify-content: center; width: 100%; }
.rem-seq-actions .btn:not(.rem-seq-main) { justify-content: center; }

/* Link de agendamento · reservas para conferir (celular já em outro cadastro) */
.link-review-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 640px) {
  .link-review-list li { flex-direction: column; align-items: stretch; }
  .link-review-actions { justify-content: flex-start; }
}

/* =========================================================
   Revisão das telas · onda 1 (21/10/2026)
   Hoje: "Agora" primeiro, avisos finos, uma lista só do método.
   Vazio do dia 1: componente único (emptyDay1 em web/lib/ui.js).
   ========================================================= */
.empty-day1 { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 26px; margin: 0 0 18px; border-radius: var(--radius); background: var(--brand-soft); color: var(--ink); }
.empty-day1-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); color: var(--brand-text); }
.empty-day1 h2 { margin: 4px 0 0; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; max-width: 30ch; }
.empty-day1 p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; max-width: 56ch; }
.empty-day1-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; }
.empty-day1-actions .btn { min-height: 48px; padding-inline: 20px; }
.empty-day1-secondary { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; }
@media (max-width: 540px) {
  .empty-day1 { padding: 22px 18px; }
  .empty-day1-actions { width: 100%; }
  .empty-day1-actions .btn { width: 100%; justify-content: center; }
}

.today-head { align-items: flex-end; }
.today-actions .btn-sm { min-height: 44px; }
.today-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); margin-bottom: 18px; }
.today-side .today-due { margin-bottom: 0; }
.today-side .due-row { flex-direction: column; align-items: stretch; }
.today-side .due-who { flex: 1 1 auto; }
.today-side .due-actions { flex-wrap: nowrap; }
.today-side .due-actions .btn-primary { flex: 1; justify-content: center; }
.today-now > header { margin-bottom: 12px; }
.today-now-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 18px; padding: 16px 18px; border-radius: 14px; background: var(--brand-soft); }
.today-now-card time { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--brand-text); }
.today-now-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.today-now-who strong { font-size: 18px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-now-who span { color: var(--ink-2); font-size: 14px; }
.today-now-kicker { margin: 0; font-size: 14px; font-weight: 700; color: var(--brand-text); text-transform: none; }
.today-now-card .btn { min-height: 48px; }
.today-now-empty { padding: 10px 0 6px; color: var(--ink-2); }
.today-now-empty p { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.today-pending { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--wait-bg); }
.today-pending h3 { margin: 0 0 8px; font-size: 15px; color: var(--wait); }
.today-pending ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.today-pending li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface); }
.today-pending li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.today-pending li span { color: var(--ink-mute); font-size: 14px; }
.today-pending .btn { min-height: 44px; flex: none; }
.today-late { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 12px 0 0; color: var(--wait); font-size: 14px; }
.today-late .link { border: 0; background: none; padding: 0; font: inherit; min-height: 32px; cursor: pointer; }
.today-sub { margin: 16px 0 2px; font-size: 14px; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em; }
.today-now .today-timeline li { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 10px 0; }
.today-now .today-timeline .btn { min-height: 44px; }
.today-rec { display: inline-flex; vertical-align: middle; color: var(--brand-text); }
.today-all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 14.5px; }
.today-notices { display: grid; gap: 0; }
.today-notices .today-handoffs { padding: 10px 14px; margin-bottom: 10px; }
.today-notices .today-handoffs p { font-size: 14px; }
.today-notices .today-proposals { margin-bottom: 14px; }
.today-ai { padding: 10px 14px; }
.today-ai p { font-size: 14px; }
.today-booked { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 4px 0 18px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); font-size: 14.5px; }
.today-booked svg { color: var(--brand-text); }
.today-booked strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.today-booked .link { margin-left: auto; display: inline-flex; align-items: center; min-height: 32px; }
.today-close-line { color: var(--ink); font-size: 15.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.today-close-line svg { color: var(--ok); }
.today-close-list .today-close-who { cursor: default; }
.today-close-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.today-close-actions .btn { min-height: 44px; }
.first-week-group { margin: 14px 0 8px; font-size: 14px; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em; }
.first-week-optional { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-mute); font-size: 14px; font-weight: 600; vertical-align: 1px; }
.first-week-list li.is-optional { border-style: dashed; }
.first-week-list li.is-done small, .first-week-list li.is-skipped small { white-space: nowrap; }
@media (max-width: 900px) {
  .today-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .today-head { align-items: stretch; }
  .today-actions { order: 2; }
  .today-actions .btn { flex: 1 1 0; justify-content: center; }
  .today-panel { padding: 16px; }
  .today-now-card { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .today-now-card time { font-size: 22px; }
  .today-now-card .btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .today-now .today-timeline li { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .today-now .today-timeline .btn { padding-inline: 10px; }
  .today-pending li { flex-wrap: wrap; }
  .today-pending .btn { width: 100%; justify-content: center; }
  .today-booked .link { margin-left: 0; }
}
.today-now .today-timeline li > .btn { grid-column: auto; justify-self: end; }
.today-rec { color: var(--brand-text); font-weight: 600; white-space: nowrap; }
.today-now .today-appt span { white-space: normal; }
/* Onda 1 · rodada 2: avisos no topo, estado com cor, um botão por linha, vitória do dia. */
.today-notices { margin-bottom: 4px; }
.today-notices .today-handoffs:not([hidden]) { margin-bottom: 12px; }
.today-state { font-weight: 700; color: var(--ink-mute); }
.today-state.is-ok, .today-state.is-now { color: var(--brand-text); }
.today-state.is-wait, .today-state.is-bad { color: var(--wait); }
.today-now-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.today-now-actions .btn { min-height: 48px; }
.today-win { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--ok-bg); color: var(--ok); font-weight: 650; font-size: 14.5px; }
.today-older { margin: 10px 0 0; color: var(--ink-2); font-size: 14px; }
.today-older .link { border: 0; background: none; padding: 0; font: inherit; font-weight: 650; min-height: 32px; cursor: pointer; }
.today-reminders.is-quiet { padding: 12px 16px; }
.today-reminders.is-quiet p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 14px; color: var(--ink-2); }
.today-reminders.is-quiet p svg { color: var(--brand-text); }
.today-side .due-actions { flex-wrap: wrap; }
.today-side .due-actions .btn-primary { flex: 1 1 100%; }
.today-side .due-actions .btn-ghost { flex: 1 1 100%; justify-content: center; }
.first-week-ready { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 10px 14px; border-radius: 12px; background: var(--ok-bg); color: var(--ink-2); font-size: 14px; }
.first-week-ready svg { flex: none; margin-top: 2px; color: var(--ok); }
@media (max-width: 640px) {
  .today-now-actions { grid-column: 1 / -1; }
  .today-now-actions .btn { flex: 1 1 0; justify-content: center; }
  .today-now-card .today-now-actions .btn { width: auto; grid-column: auto; }
}
.modal-container:focus { outline: none; }

/* Onda 1 · rodada 3 */
.today-appt .today-tags, .today-now-who .today-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; white-space: normal; overflow: visible; }
.today-state { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 14px; font-weight: 700; }
.today-state.is-ok, .today-state.is-now { background: var(--ok-bg); color: var(--ok); }
.today-state.is-wait, .today-state.is-bad { background: var(--wait-bg); color: var(--wait); }
.today-rec { font-size: 14px; }
.today-older { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 14px; border-radius: 12px; background: var(--wait-bg); color: var(--ink); }
.today-older svg { color: var(--wait); }
.today-older .link { color: var(--wait); text-decoration: underline; text-underline-offset: 3px; }
.today-side .due-actions .btn-ghost, .today-due .due-actions .btn-ghost { flex: 0 1 auto; border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; padding-inline: 6px; }
.today-appt .today-state, .today-now-who .today-state { display: inline-flex; font-size: 14px; }
.today-appt .today-rec, .today-now-who .today-rec { display: inline; color: var(--brand-text); }

/* Onda 5 (21/10/2026): Voltas (ex-Recorrência) com 3 abas e Lembretes enxuto. */
.rem-live .link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.rem-when { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; color: var(--ink-2); font-size: 14px; }
.rem-when svg { flex: none; margin-top: 2px; color: var(--brand-text); }
.rem-sent { margin-top: 26px; }
.rem-sent-list { list-style: none; margin: 0; padding: 0; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); }
.rem-sent-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 16px; align-items: baseline; padding: 10px 16px; border-top: 1px solid var(--rule); font-size: 14px; }
.rem-sent-list li:first-child { border-top: 0; }
.rem-sent-list span { color: var(--ink-2); }
.rem-sent-list small { color: var(--ink-mute); font-size: 13px; }
.rem-sent-empty { margin: 0; color: var(--ink-mute); font-size: 14px; }
.rem-off .btn { flex: none; align-self: center; }
.rem-blocked.is-soft { color: var(--ink-2); }
.rem-actions [data-act="sent"]:disabled { opacity: 1; border-color: var(--ink-mute); color: var(--ink-2); }
.rem-run-box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rem-run-box small { color: #B8CBBE; font-size: 13px; }
.rem-sent-title { margin: 0 0 10px; font-size: 19px; }
.rem-sent-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.rem-sent-more { margin-top: 10px; border: 0; background: none; padding: 0; font: inherit; font-weight: 650; cursor: pointer; min-height: 40px; }
.rem-example { margin: 4px 0; max-width: 420px; }
.rem-example span { display: inline-block; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--surface); color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.rem-first-note { color: var(--ink-2); font-size: 14px; }
.rem-hero .rem-hero-count span { max-width: 30ch; }
button.empty-day1-secondary { border: 0; background: none; padding: 0 4px; min-height: 44px; font: inherit; font-weight: 650; cursor: pointer; }

@media (max-width: 640px) {
  .vol-page.is-first-day .vol-live { display: block; }
  .rem-sent-list li { grid-template-columns: minmax(0, 1fr); }
}
.rem-list + .rem-reach, .method-empty + .rem-reach { margin-top: 14px; }
@media (min-width: 0px) {
  .rem-card:not(.is-blocked) .rem-actions [data-act="skip"] { flex: 0 0 100%; min-height: 32px; border: 0; background: none; box-shadow: none; color: var(--ink-mute); text-decoration: underline; text-underline-offset: 3px; }
}

/* Onda 7: "O método em um minuto" recolhido dentro do checklist do Hoje. */
.first-week-method { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--brand-soft); }
.first-week-method > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 700; font-size: 14.5px; color: var(--brand-text); }
.first-week-method ol { list-style: decimal; margin: 10px 0 2px; padding-left: 22px; display: grid; gap: 8px; }
.first-week-method li { display: grid; gap: 2px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.first-week-method li strong { color: var(--ink); font-size: 14.5px; }
.myday-page { max-width: 820px; }
.myday-proposed svg { flex: none; margin-top: 2px; }

/* Onda 7, rodada 2: o botão de quem está na cadeira mora no cartão escuro. */
.myday-hero-action { grid-column: 1 / -1; display: grid; gap: 8px; }
.myday-hero-cta { width: 100%; min-height: 52px; justify-content: center; gap: 8px; border: 0; background: #EEF3EC; color: #123E40; font-size: 16px; font-weight: 700; }
.myday-hero-cta:hover { background: #FFFFFF; }
.myday-hero-done { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: #DDEBDF; font-size: 14.5px; line-height: 1.45; }
.myday-hero-done svg { flex: none; margin-top: 2px; color: #8FE0A6; }
.myday-hero-change { justify-self: start; width: auto; background: transparent; color: #EEF3EC; border-color: rgba(238, 243, 236, .5); }
.myday-today-line { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.myday-today-line strong { color: var(--ink); }
.myday-today-line svg { transform: rotate(-90deg); color: var(--ink-mute); }
.myday-block-line { margin: 18px 0 0; }
.myday-block-line .btn { width: auto; }

/* Onda 7, rodada 3: a ação fica logo abaixo do atendimento (e da volta proposta) em qualquer largura. */
.myday-list li { grid-template-columns: 52px minmax(0, 1fr); }
.myday-action { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; gap: 10px; }
.myday-action:empty { display: none; }

/* Hoje · um aviso de cada vez acima da agenda (23/10/2026): primeiro o site desligado. */
.today-nudge { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.today-nudge-thumb { flex: none; display: grid; place-items: center; width: 40px; height: 60px; border-radius: 10px; border: 3px solid var(--ink); background: var(--brand-soft); color: var(--brand-text); }
.today-nudge-text { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.today-nudge-text span { color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.today-nudge-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.today-nudge-actions .btn { min-height: 44px; }
.today-nudge-thumb.is-chat { width: 44px; height: 44px; border-width: 0; border-radius: 50%; }
.today-nudge.is-attention { border-color: var(--attn); background: var(--attn-bg); }
.today-nudge.is-attention .today-nudge-thumb { background: color-mix(in srgb, var(--attn) 16%, transparent); color: var(--attn); }
.first-week-live { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 14px; font-weight: 600; }
.first-week.is-top { border-color: var(--brand); }
.first-week.is-top .first-week-list li.is-next { background: var(--brand-soft); }
.today-sitelink { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; padding: 8px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--rule-soft); font-size: 14px; color: var(--ink-2); }
.today-sitelink strong { color: var(--ink); overflow-wrap: anywhere; }
.today-sitelink-text { min-width: 0; }
.today-sitelink-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.today-sitelink-actions .btn { min-height: 44px; }
.today-nudge.is-attention .today-nudge-text { gap: 6px; }

/* Convite à recepção no Hoje (24/10/2026): três botões descem para a linha de baixo, alinhados ao texto. */
#today-reception-nudge .today-nudge-actions { flex: 1 1 100%; padding-left: 58px; }
@media (max-width: 600px) { #today-reception-nudge .today-nudge-actions { padding-left: 0; } #today-reception-nudge .today-nudge-actions .btn { flex: 0 1 auto; } }

/* Cartão "Próximo passo" (27/10/2026): um passo só; a lista inteira recolhida em "Ver tudo". */
.first-week-step { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--brand); background: var(--brand-soft); }
.first-week-step strong { display: block; font-size: 17px; line-height: 1.3; }
.first-week-step p { margin: 4px 0 12px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.first-week-step .first-week-actions .btn { min-height: 44px; font-size: 15px; }
.first-week-all { margin-top: 12px; }
.first-week-all > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 4px; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--brand-text); list-style: none; }
.first-week-all > summary::-webkit-details-marker { display: none; }
.first-week-all > summary svg { transition: transform .15s; }
.first-week-all[open] > summary svg { transform: rotate(180deg); }
.first-week-count { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.first-week-all .first-week-bar { margin: 8px 0 12px; }

/* Botão fixo "Marcar horário" no celular (27/10/2026): o polegar alcança a ação principal sem rolar.
   Abaixo do menu aberto (40) e dos modais (100); some com o menu aberto e em tela baixa (teclado). */
.today-fixed-cta { display: none; }
@media (max-width: 1023px) {
  .today-page:has(.today-fixed-cta) { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .today-fixed-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: block; padding: 10px 16px max(10px, env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--rule-soft); box-shadow: 0 -6px 18px rgba(15, 23, 42, .06); }
  .today-fixed-cta .btn { width: 100%; min-height: 52px; justify-content: center; font-size: 17px; }
  html.navigation-open .today-fixed-cta { display: none; }
}
@media (max-width: 1023px) and (max-height: 520px) { .today-fixed-cta { display: none; } }


/* Assistente no celular (27/10/2026): a tabela de serviços cadastrados usava a grade larga (regra posterior
   à do celular) e o preço caía por cima de "min"; e o botão de avançar fica fixo no rodapé do painel. */
@media (max-width: 720px) {
  .setup-table:not(.is-staged) .setup-tr:not(.is-head) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 6px; }
  .setup-table:not(.is-staged) .setup-tr > span:first-child, .setup-table:not(.is-staged) .setup-tr > span:last-child { grid-column: 1 / -1; }
  .setup-panel .setup-actions { position: sticky; bottom: 0; z-index: 5; margin: 12px -18px -20px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--rule-soft); border-radius: 0 0 18px 18px; }
  .setup-panel .setup-actions .btn-primary { min-height: 52px; }
  .setup-panel .setup-actions .setup-later { display: none; }
}

/* Hoje enxuto no celular (27/10/2026): um só "Marcar horário" (o fixo do rodapé); o do cabeçalho e o do
   quadro "Agora" vazio ficam só no computador. */
@media (max-width: 1023px) {
  .today-page:has(.today-fixed-cta) #today-appt, .today-page:has(.today-fixed-cta) #today-empty-new { display: none; }
  .today-page:has(.today-fixed-cta) .today-actions { flex: 1 1 100%; }
  .today-page:has(.today-fixed-cta) .today-actions .btn { width: 100%; min-height: 44px; justify-content: center; }
  .today-page:has(.today-fixed-cta) .today-now-empty p { margin: 0; }
}

/* Revisão do UX/UI (27/10/2026): Hoje de dia 1 sem quadro vazio, passo 2 com sugestões recolhidas, passo 3 com "Só eu atendo" em destaque. */
.today-free-note { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; }
.setup-more { margin: 0 0 12px; }
.setup-more > summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); font-weight: 650; font-size: 15px; cursor: pointer; list-style: none; }
.setup-more > summary::-webkit-details-marker { display: none; }
.setup-more[open] > summary { margin-bottom: 10px; }
@media (max-width: 1023px) {
  .today-page:has(.today-fixed-cta) .first-week-step :is([data-fw-go="appt"], [data-fw-go="invite"]) { display: none; }
  .toast-container { right: 12px; left: 12px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); align-items: center; }
  .toast { max-width: none; font-size: 14px; }
  .toast-container { pointer-events: none; } /* o aviso nunca bloqueia o toque no que está por baixo */
  /* Modo exemplo: o aviso sobe para logo abaixo da faixa âmbar fixa e não cobre o botão da mensagem nem a barra de baixo. */
  body:has(.today-example-strip) .toast-container { top: 164px; bottom: auto; }
}
@media (max-width: 720px) {
  .setup-panel .setup-actions .btn-primary { width: 100%; }
  .setup-table.is-staged .setup-tr { padding: 8px 12px; row-gap: 4px; }
  .setup-table.is-staged .setup-help { display: none; }
}
@media (max-width: 400px) {
  .setup-prefix .form-input { padding-left: 34px !important; padding-right: 2px !important; }
  .setup-suffix .form-input { padding-left: 8px !important; padding-right: 36px !important; }
  .setup-prefix > span { left: 8px; font-size: 14px; }
  .setup-suffix > span { right: 7px; font-size: 14px; }
  .setup-table.is-staged .setup-tr { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, .9fr) 36px; column-gap: 6px; }
  .setup-suffix input[type=number] { -moz-appearance: textfield; appearance: textfield; }
  .setup-suffix input[type=number]::-webkit-inner-spin-button, .setup-suffix input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
}

/* Hoje com dados (27/10/2026): "Quem já devia ter voltado" em linhas tocáveis, um só botão forte no Agora,
   "Depois" numa linha, "saiu sem a volta" em uma linha âmbar e "Próximo passo" como convite de uma linha. */
.due-list.is-compact { gap: 0; }
.due-row.is-compact { display: block; padding: 0; background: none; border-radius: 0; border-top: 1px solid var(--rule-soft); }
.due-row.is-compact:first-child { border-top: 0; }
.due-tap { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 8px 2px; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.due-tap .due-who { flex: 1 1 auto; min-width: 0; }
.due-tap .due-who strong { display: block; font-size: 16px; }
.due-tap .due-who small { display: block; color: var(--ink-2); font-size: 14px; line-height: 1.35; }
.due-wa { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-strong); color: var(--brand-text); }
.due-tap:disabled { opacity: .75; }
.today-pending.is-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--wait-bg); color: var(--wait); font-size: 14px; font-weight: 650; }
.today-pending.is-line > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.today-pending.is-line .btn { flex: none; min-height: 44px; width: auto; }
.today-later { display: flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--ink-2); font-size: 14px; text-decoration: none; }
.today-later strong { color: var(--ink); margin-right: 4px; }
.first-week.is-invite { padding: 10px 12px; }
.first-week-invite { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.first-week-invite .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; font-size: 15px; }
.first-week-more { flex: none; min-height: 44px; padding: 0 8px; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 650; color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.first-week.is-invite .first-week-all > summary { display: none; }
.first-week.is-invite .first-week-all[open] { margin-top: 8px; border-top: 1px solid var(--rule-soft); padding-top: 8px; }
.first-week-hint { display: none; margin: 0 0 12px; color: var(--brand-text); font-size: 14px; font-weight: 650; }
@media (max-width: 1023px) {
  .today-page.has-next .today-actions { display: none; }
  .today-page:has(.today-fixed-cta) .first-week-hint { display: block; }
  .today-page:has(.today-free-note) .today-head { margin-bottom: 4px; }
  .today-page .today-free-note { margin: 0 0 10px; }
  .today-now-who strong a, .today-appt strong a { display: inline-block; padding: 8px 0; }
  .today-pending.is-line .btn, .today-now-card .btn:not(.btn-primary) { background: var(--surface); }
  .today-now-card .today-now-actions .btn:not(.btn-primary) { box-shadow: none; }
}
.today-now-meta, .today-now header p, .today-state, .today-tags, .today-rec { font-size: 14px; }

/* Hoje com dados, 3ª rodada (27/10/2026): "Chamar" visível ao lado do ícone, "Combinar" em 14 px e nome do cliente com 44 px de alvo. */
.due-wa { width: auto; min-width: 44px; padding: 0 14px; gap: 6px; grid-auto-flow: column; border-radius: 999px; font-size: 14px; font-weight: 650; }
.today-pending.is-line .btn { font-size: 14px; }
.today-now-who .client-link, .today-appt .client-link { display: inline-flex; align-items: center; min-height: 44px; }

/* Hoje sem horário marcado (27/10/2026): sem "Abrir comanda" no topo do celular. */
@media (max-width: 1023px) { .today-page.no-agenda .today-actions { display: none; } }

/* Passo 1 no celular (27/10/2026): o campo focado não fica atrás do botão fixo do painel. */
@media (max-width: 720px) {
  html { scroll-padding-bottom: 110px; }
  .setup-form .form-input { scroll-margin-bottom: 110px; }
}

/* Assistente no celular (27/10/2026, desenho aprovado): cabeçalho "Passo N de 4" com 4 segmentos no lugar do
   título grande e dos 4 ícones; passo 1 cabe sem rolar (tipo, nome, WhatsApp e horário em uma linha). */
.setup-compact { display: none; }
@media (max-width: 720px) {
  .setup-head, .setup-rail { display: none; }
  .setup-compact { display: block; margin: 0 0 8px; }
  .setup-compact-step { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
  .setup-segs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .setup-seg { display: block; position: relative; width: 100%; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; }
  .setup-seg span { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 99px; background: var(--surface-2); }
  .setup-seg.is-done span { background: color-mix(in srgb, var(--brand) 55%, var(--surface-2)); }
  .setup-seg.is-current span { background: var(--brand); }
  .setup-seg:disabled { cursor: default; }
  .setup-panel { padding: 16px; }
  #st-title { margin: 0 0 4px; font-size: 28px; line-height: 1.15; }
  #st-lede { margin: 0 0 12px; font-size: 15px; line-height: 1.4; }
  #setup-salon .form-group { margin-bottom: 10px; }
  #setup-salon .form-input { min-height: 52px; font-size: 16px; }
  #setup-salon .setup-help { margin-top: 4px; }
  #setup-salon .setup-hours-sum > summary { min-height: 52px; }
}
#setup-salon .form-input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
#setup-salon .field-error { font-size: 14px; }
@media (max-width: 720px) {
  .method-page.setup { padding-top: 0; }
  .setup-compact { margin: 0; }
  #st-lede { font-size: 14px; margin-bottom: 8px; }
  #setup-salon .form-group { margin-bottom: 8px; }
  #setup-salon .setup-help { font-size: 14px; margin-top: 2px; line-height: 1.3; }
  #setup-salon #st-hours-label { display: none; }
  #setup-salon .setup-error { margin: 4px 0 0; }
}
@media (max-width: 720px) {
  .setup-panel { padding-top: 12px; }
  #setup-salon .form-group { margin-bottom: 6px; }
  #setup-salon .setup-hours-sum { margin-top: 0; }
}
@media (max-width: 720px) {
  /* Passo 1: o botão sai do fluxo (fixo no rodapé) para a página não ganhar rolagem sobrando. */
  .setup-panel:has(#setup-salon) { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }   /* barra fixa (73 px) + 16 px: nada fica atrás dela */
  .setup-panel:has(#setup-salon) .setup-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; border-radius: 0; }
}
@media (max-width: 720px) {
  /* Detalhes do passo 1 (27/10/2026): texto do botão do rodapé centralizado, rótulos e ajuda em 14 px, campos do passo 2 com 44 px. */
  .setup-panel .setup-actions .btn-primary { justify-content: center; text-align: center; }
  #setup-salon .form-label, #setup-salon .setup-help { font-size: 14px; }
  .setup-tr .form-input { min-height: 44px; }
}

/* Hoje no modo exemplo (27/10/2026). */
.today-example-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0 0 10px; padding: 0 4px 0 14px; border-radius: 12px; background: var(--brand-soft); color: var(--ink); font-size: 14px; }
.today-example-strip .link { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; background: none; border: 0; font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.is-example .today-later .chip, .is-example .due-who .chip { margin-left: 4px; }
.is-example .due-tap { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 2px 12px; }
.is-example .due-tap .due-wa { justify-content: center; width: 100%; }

/* Modo exemplo, 2ª rodada (nota 8,3 a 8,5): faixa fixa âmbar de uma linha, botão de contorno e etiquetas em cor. */
.today-example-strip { position: sticky; top: 0; z-index: 15; flex-wrap: nowrap; padding: 0 10px 0 14px; border: 1px solid var(--wait); background: var(--wait-bg); color: var(--wait); font-weight: 700; }
@media (max-width: 1023px) { .today-example-strip { top: 81px; } } /* só o celular tem cabeçalho de 80 px; no computador a faixa gruda no topo e não cobre a saudação */
.today-example-strip > span { white-space: nowrap; }
.today-example-strip .btn { flex: none; min-height: 44px; background: var(--surface); color: var(--ink); white-space: nowrap; }
.chip.chip-exemplo { padding: 3px 10px; border: 1px dashed var(--rule-strong); background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 700; }
@media (max-width: 400px) {
  /* Modo exemplo em telas estreitas: "Ver a mensagem pronta" tem de caber acima da barra fixa já na 1ª tela. */
  .is-example .today-now > header p { display: none; }
  .is-example .today-greet { margin: 6px 0 2px; font-size: 14px; line-height: 1.25; }
  .is-example .today-head { margin-bottom: 4px; }
  .is-example .today-now { padding-bottom: 12px; margin-bottom: 10px; }
  .is-example .today-later { margin: 6px 0 0; min-height: 0; }
  .is-example .today-panel { padding: 14px; }
  .is-example .today-example-strip { margin-bottom: 4px; }
  .is-example .due-head { margin-bottom: 2px; }
  .is-example .due-tap { padding-top: 4px; }
}

/* Paleta de controles (27/10/2026): cartão "Próximo cliente" com filete, e "Marcado" como etiqueta neutra de borda contínua
   (a etiqueta "Exemplo" é tracejada: as duas se distinguem lado a lado). Menta/petróleo ficam para ação, link e ativo. */
.today-now-card { background: var(--surface-2); border-left: 4px solid var(--brand); border-radius: 0 14px 14px 0; padding-left: 14px; }
.today-now-card time { color: var(--ink); }
.today-now-kicker { font-size: 13px; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; }
.today-state:not(.is-ok):not(.is-now):not(.is-wait):not(.is-bad),
.today-appt .today-state:not(.is-ok):not(.is-now):not(.is-wait):not(.is-bad),
.today-now-who .today-state:not(.is-ok):not(.is-now):not(.is-wait):not(.is-bad) { padding: 3px 9px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; }

/* Barra de avançar do assistente (27/10/2026): fade de 24 px acima dela (da cor do painel, `--surface`, para transparente em 4 paradas; sem fio duro no topo da barra) avisa que a lista continua, nos dois temas,
   e foco por teclado não para atrás da barra. */
@media (max-width: 720px) {
  .setup-panel .setup-actions { margin-top: 24px; border-top-color: transparent; }   /* 24 px livres: no fim da rolagem o fade não cobre a última linha nem o "Outro serviço" */
  .setup-panel .setup-actions::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; pointer-events: none;
    background: linear-gradient(to top, var(--surface) 0%, color-mix(in srgb, var(--surface) 82%, transparent) 25%, color-mix(in srgb, var(--surface) 45%, transparent) 60%, color-mix(in srgb, var(--surface) 0%, transparent) 100%); }
  html:has(.setup-actions) { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* Folha "Quem foi o último que você atendeu?" (27/10/2026): sobe de baixo, corpo rolável e rodapé fixo com
   "Salvar e ver a volta" e "Agora não" acima do teclado (--kb e --vvh vêm do visualViewport; sem ele, dvh). */
.invite-layer { position: fixed; inset: 0; z-index: 95; }
.invite-scrim { position: absolute; inset: 0; background: rgba(23, 22, 20, .5); }
.invite-sheet { position: absolute; left: 0; right: 0; bottom: var(--kb, 0px); display: flex; flex-direction: column; box-sizing: border-box; max-width: 520px; margin: 0 auto;
  max-height: calc(var(--vvh, 100dvh) - 16px); background: var(--surface); border: 1px solid var(--rule); border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: var(--shadow-lg);
  animation: invite-up .22s cubic-bezier(.16, 1, .3, 1); }
@keyframes invite-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .invite-sheet { animation: none; } }
.invite-grab { flex: none; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--rule-strong); }
.invite-head { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 8px 8px 0 18px; }
.invite-head h2 { flex: 1; margin: 6px 0 0; font-size: 22px; line-height: 1.2; font-weight: 750; letter-spacing: -.02em; }
.invite-x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--ink-mute); font-size: 28px; line-height: 1; cursor: pointer; }
.invite-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 18px 12px; }
.invite-support { margin: 0 0 14px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.invite-pick { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 0 0 14px; border: 1px solid var(--rule-strong); border-radius: 999px; background: transparent; color: var(--ink); font: 650 15px var(--font-ui); cursor: pointer; }
.invite-sheet .form-group { margin-bottom: 12px; }
.invite-sheet .form-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.invite-sheet .form-input { width: 100%; box-sizing: border-box; min-height: 48px; font-size: 16px; }
.invite-sheet .form-input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.invite-err { display: flex; margin: 6px 0 0; color: var(--bad); font-size: 14px; font-weight: 600; line-height: 1.4; }
.invite-err[hidden], .invite-dup[hidden], .invite-net[hidden] { display: none; }
.invite-dup { margin: 2px 0 12px; padding: 12px 14px; border-left: 3px solid var(--brand); border-radius: 12px; background: var(--brand-soft); color: var(--ink); font-size: 15px; font-weight: 650; line-height: 1.4; }
.invite-help { margin: -2px 0 8px; color: var(--ink-mute); font-size: 13.5px; line-height: 1.4; }
.invite-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.invite-chip { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 48px; padding: 8px 4px; border: 1px solid var(--rule-strong); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: 650 14.5px/1.2 var(--font-ui); text-align: center; cursor: pointer; }
.invite-chip[aria-checked="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--brand-soft); color: var(--brand-text); font-weight: 750; }
.invite-chip-check { display: none; }
.invite-chip[aria-checked="true"] .invite-chip-check { display: inline-flex; }
.invite-chip:focus-visible, .invite-save:focus-visible, .invite-later:focus-visible, .invite-x:focus-visible, .invite-pick:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.invite-foot { flex: none; padding: 10px 18px max(14px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule-soft); background: var(--surface); }
.invite-sheet .invite-save { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
.invite-sheet .invite-later { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; margin-top: 8px; background: transparent; font-size: 15px; }
.invite-net { margin: 0 0 10px; padding: 10px 12px; border-left: 3px solid var(--bad); border-radius: 10px; background: var(--bad-bg); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.invite-note { margin: 10px 0 0; color: var(--ink-mute); font-size: 13px; line-height: 1.45; text-align: center; }
.invite-later-body { display: none !important; }
/* Teclado aberto: título em 1 linha, apoio e contatos recolhidos; "Agora não" desce para o fim do corpo. */
.invite-sheet.is-kb .invite-head { padding-top: 4px; }
.invite-sheet.is-kb .invite-head h2 { margin-top: 12px; font-size: 17px; white-space: nowrap; letter-spacing: -.03em; }
.invite-sheet.is-kb .invite-support, .invite-sheet.is-kb .invite-pick, .invite-sheet.is-kb .invite-later-foot, .invite-sheet.is-kb .invite-note { display: none; }
.invite-sheet.is-kb .invite-later-body { display: flex !important; margin-top: 12px; }
.invite-sheet.is-kb .invite-body { padding-top: 0; }
.invite-svc-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.invite-svc { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 8px 14px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font: 700 15px var(--font-ui); text-align: left; cursor: pointer; }
.invite-svc small { color: var(--ink-mute); font-size: 14px; font-weight: 600; }
.invite-svc[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--brand-soft); color: var(--brand-text); }
/* Cartão "Próximo passo" com o cliente anotado (nome, motivo, serviço assumido com "Trocar", ação). */
.first-week-step.is-invitee .invitee-name { font-size: 24px; font-weight: 800; letter-spacing: -.03em; overflow-wrap: anywhere; }
.invitee-service { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; margin: 0 0 14px; padding: 4px 4px 4px 14px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--surface-2); font-weight: 700; font-size: 15px; }
.invitee-service > span { flex: none; max-width: 60%; overflow-wrap: anywhere; }
.invitee-swap { flex: 1 1 auto; min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--brand-text); font: 700 14px/1.2 var(--font-ui); text-align: right; cursor: pointer; }
.first-week-step.is-invitee .first-week-actions .btn { width: 100%; min-height: 52px; justify-content: center; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }

/* Hoje redesenhado (27/10/2026): menos por vez. Quem já devia ter voltado e o Agora à vista; o resto em linhas
   neutras (Pendências, Lembretes, conversa, Ver mais). Classes novas (hj-*): o modo exemplo segue nas antigas. */
.hj-grid { display: grid; gap: 12px; align-items: start; grid-template-columns: minmax(0, 1fr); margin-bottom: 12px; }
.hj-col { display: grid; gap: 12px; align-content: start; min-width: 0; }
.hj-col > [hidden] { display: none; }
@media (min-width: 1024px) {
  .hj-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 16px; }
  .hj-grid .today-panel { padding: 18px 20px; }
}
.hj-grid .today-panel { padding: 16px; margin: 0; }
.hj-grid .today-panel h2 { font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.hj-grid .today-count { min-width: 28px; height: 28px; font-size: 14px; }
.is-owner .hj-grid .today-due { border-color: var(--rule-strong); }
.hj-grid .due-head { margin-bottom: 6px; }
.hj-grid .due-head p { color: var(--ink-mute); font-size: 14px; }
.hj-grid .due-tap .due-who small { color: var(--ink-mute); }
.hj-grid .due-row.is-compact { border-top-color: var(--rule-soft); }
.hj-grid .due-all { border: 0; background: none; text-decoration: none; display: flex; align-items: center; width: max-content; min-height: 44px; margin-top: 0; padding: 0 2px; font-size: 14px; font-weight: 650; }
.hj-grid .first-week { border-color: var(--rule-strong); }
.hj-grid .first-week-step { border-color: var(--rule-strong); }

/* Botões do Hoje: contorno por padrão; um só cheio por bloco. */
.hj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); font: 650 14.5px var(--font-ui); white-space: nowrap; text-decoration: none; cursor: pointer; }
.hj-btn.is-fill { background: var(--btn-fill); border-color: var(--btn-fill); color: var(--btn-ink); }
.hj-btn:disabled { opacity: .6; cursor: default; }

/* Aviso urgente: uma frase e, para o Master, a ação. */
.hj-urg { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--attn-bg); border-left: 4px solid var(--attn); font-size: 15px; line-height: 1.4; }
.hj-urg p { flex: 1 1 100%; margin: 0; }
.hj-urg strong { font-weight: 750; }
.hj-urg[hidden], .hj-pend-rows[hidden], .hj-more[hidden] { display: none; }

/* Agora reduzido: o próximo cliente, Chegou e Abrir comanda, Depois recolhido. */
.hj-grid .today-now > header { display: block; margin: 0; }
.is-owner .hj-grid .today-now > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hj-grid .today-now > header p { margin: 4px 0 0; font-size: 14px; color: var(--ink-mute); }
.is-owner .hj-grid .today-now > header p { margin: 0; font-size: 13.5px; }
.hj-grid .today-now > header p:empty { display: none; }
.hj-next { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--brand); }
.hj-next time { font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hj-next > div { flex: 1; min-width: 0; }
.hj-next b { display: block; font-size: 16px; font-weight: 700; }
.hj-next b .client-link { font: inherit; color: inherit; text-decoration: none; padding: 11px 0; margin: -11px 0; }  /* área de toque de 44 px sem crescer o cartão */
.hj-next small { display: block; font-size: 13.5px; color: var(--ink-2); }
.hj-next .eb { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; }
.hj-acts { display: flex; gap: 8px; margin-top: 10px; }
.hj-acts .hj-btn { flex: 1; }
.hj-end { margin: 6px 0 0; font-size: 14px; color: var(--ink-mute); }
.hj-later { margin-top: 6px; }
.hj-later > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font-size: 14px; color: var(--ink-2); cursor: pointer; list-style: none; }
.hj-later > summary::-webkit-details-marker { display: none; }
.hj-later > summary svg, .hj-head svg { flex: none; color: var(--ink-mute); transition: transform .15s; }
.hj-later[open] > summary svg { transform: rotate(180deg); }
.hj-later ul { list-style: none; margin: 0 0 4px; padding: 0; }
.hj-later li { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--rule-soft); font-size: 15px; }
.hj-later li time { min-width: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hj-later li small { display: block; color: var(--ink-mute); font-size: 14px; }
.hj-later .link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 650; }

/* Linhas neutras: Pendências, Lembretes, conversa esperando, Ver mais. */
.hj-line-box:empty { display: none; }
.hj-line, .hj-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; color: var(--ink); font: inherit; text-align: left; }
.hj-line .t, .hj-head .t, .hj-prow .t, .hj-close-list .t { display: block; flex: 1; min-width: 0; font-size: 16px; font-weight: 700; }
.hj-line .t small, .hj-head .t small, .hj-prow .t small, .hj-close-list .t small { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink-mute); }
.hj-line:has(.hj-btn) { padding-block: 10px; }
.hj-line.is-tap { cursor: pointer; }
.hj-ic { color: var(--brand-text); display: inline-flex; flex: none; }
.hj-go { color: var(--ink-mute); display: inline-flex; flex: none; }
.hj-go svg { transform: rotate(-90deg); }
.hj-pend { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; }
.hj-pend .hj-head, .hj-more > .hj-head { border: 0; background: transparent; cursor: pointer; list-style: none; }
.hj-more > .hj-head::-webkit-details-marker { display: none; }
.hj-more { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; }
.hj-pend.is-open { border-color: var(--rule-strong); padding-bottom: 6px; }
.hj-pend.is-open .hj-head small { display: none; }
.hj-pend.is-open .hj-head svg, .hj-more[open] > .hj-head svg { transform: rotate(180deg); }
.hj-pend-rows { padding: 0 16px; }
.hj-prow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule-soft); }
.hj-prow .n { flex: none; min-width: 34px; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hj-prow .t { font-size: 15px; }
.hj-prow .hj-btn { flex: none; }
.hj-review { margin: 4px 0 8px; }
.hj-more-body { display: grid; gap: 12px; padding: 0 12px 12px; }
.hj-more-body > [hidden] { display: none; }
.hj-more-body .today-ai, .hj-more-body .today-proposals { margin: 0; }
.hj-more-body .btn { min-height: 44px; }

/* Fechamento do dia e "Nada mais hoje". */
.hj-grid .today-close { margin: 0; }
.hj-grid .today-close > header { margin-bottom: 4px; }
.hj-grid .today-close .today-close-line { margin: 4px 0 2px; color: var(--ink); font-size: 14px; }
.hj-close-list { list-style: none; margin: 8px 0 0; padding: 0; }
.hj-close-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule-soft); }
.hj-close-list .hj-btn { flex: none; }
.hj-zero h2 { margin: 0 0 6px; font-size: 17px; }
.hj-zero p { margin: 0; color: var(--ink-mute); font-size: 14px; }
.today-page.is-zero .hj-grid, .today-page.is-zero .today-free-note { display: none; }
@media (max-width: 1023px) {
  /* O botão fixo do rodapé é o único "Marcar horário"/"Abrir comanda" do topo no celular: o cabeçalho fica só com a data. */
  .today-page:has(.today-fixed-cta) .today-actions { display: none; }
}

/* Um só botão cheio por vista no celular: o "Marcar horário" fixo. Abrir comanda, Conectar de novo e o passo do
   "Próximo passo" viram contorno enquanto o fixo está na tela; no computador (sem o fixo) seguem cheios. */
@media (max-width: 1023px) {
  .today-page:has(.today-fixed-cta) :is(.hj-acts .hj-btn.is-fill, .hj-urg .hj-btn.is-fill) { background: transparent; border-color: var(--rule-strong); color: var(--ink); box-shadow: none; }
  .today-page:has(.today-fixed-cta) .hj-grid .first-week-step .btn-primary { background: transparent; border-color: var(--rule-strong); color: var(--ink); box-shadow: none; }
}
.hj-head .t small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hj-later > summary { min-height: 48px; }

/* Dispensa do aviso do WhatsApp (27/10/2026): "×" só do Master, 44×44, sem fundo nem borda, no canto; confirmação neutra. */
.hj-urg { position: relative; }
.hj-urg.has-x p { padding-right: 36px; }
.hj-urg-x { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.hj-urg-x:focus-visible { outline: 2px solid var(--brand); outline-offset: -6px; border-radius: 10px; }
.hj-urg.is-done { background: var(--surface-2); border-left-color: var(--brand); }
.hj-urg.is-done:focus { outline: none; }
.hj-urg.is-done p { padding-right: 0; }
.wa-desconectado { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--attn-bg); border-left: 4px solid var(--attn); font-size: 15px; }
#msg-wa-caiu[hidden] { display: none; }
.wa-desconectado .btn { min-height: 44px; }

/* Voltas (redesenho de 28/10/2026): fila com uma ação por cliente; painel à direita a partir de 1280 px.
   Escala de espaçamento --sp-1..6; texto de apoio nunca abaixo de 13 px. */
.vol-page { max-width: 1180px; }
.vol-head h1 { margin: 0; }
.vol-live { margin: var(--sp-2) 0 var(--sp-4); color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.vol-live:empty { display: none; }
.vol-tabs { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--sp-1); padding: var(--sp-1); margin: 0 0 var(--sp-4); border-radius: 16px; background: var(--surface-2); width: fit-content; max-width: 100%; }
.vol-tabs button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: var(--sp-2) var(--sp-4); white-space: nowrap; border: 0; border-radius: 12px; background: none; color: var(--ink-2); font: 700 14px/1.2 var(--font-ui); cursor: pointer; }
.vol-tabs button[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.vol-tabs b { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--wait-bg); color: var(--wait); font-size: 13px; }
.vol-tabs b[hidden] { display: none; }
.vol-tab-short { display: none; }
.vol-pros { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--sp-4); }
.vol-pros button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink-2); font: 650 14px var(--font-ui); cursor: pointer; }
.vol-pros button b { font-size: 13px; font-weight: 700; color: var(--ink-mute); }
.vol-pros button[aria-pressed="true"] { background: var(--btn-fill); border-color: var(--btn-fill); color: var(--btn-ink); }
.vol-pros button[aria-pressed="true"] b { color: inherit; }
.vol-split { display: block; }
.vol-panel { display: none; }
.vol-group { margin: 0 0 var(--sp-5); }
.vol-gh { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--sp-2); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 750; }
.vol-gh b { font-size: 13px; color: var(--ink-mute); }
.vol-group.is-amber .vol-gh { color: var(--wait); }
.vol-hint { margin: 0 0 var(--sp-3); color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.vol-list { list-style: none; margin: 0; padding: 0; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); overflow: hidden; }
.vol-recs { list-style: none; margin: 0; padding: 0; }
.vol-group.is-asked-group .vol-list { border-left: 4px solid var(--btn-fill); }
.vol-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-4); border-top: 1px solid var(--rule); }
.vol-row:first-child { border-top: 0; }
.vol-who { min-width: 0; overflow-wrap: anywhere; }
.vol-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.vol-name { font-size: 16px; color: var(--ink); font-weight: 700; }
.vol-badge { flex: none; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); }
.vol-badge.is-wait { background: var(--wait-bg); color: var(--wait); }
.vol-meta { margin: var(--sp-1) 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.vol-note { margin: var(--sp-1) 0 0; color: var(--ink-2); font-size: 14px; font-style: italic; }
.vol-slot { display: inline-flex; align-items: center; gap: 6px; margin: var(--sp-2) 0 0; color: var(--ok); font-size: 14px; font-weight: 650; }
.vol-nameless { color: var(--ink-2); font-weight: 650; }
.vol-final { color: var(--ink-2); font-size: 14px; }
.vol-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.vol-actions small { flex-basis: 100%; color: var(--ink-2); font-size: 13px; }
.vol-btn { flex: 1 1 auto; min-height: 44px; justify-content: center; background: var(--brand-soft); border-color: transparent; color: var(--brand-text); font-weight: 700; }
.vol-link { border: 0; background: none; padding: 0 var(--sp-2); min-height: 44px; min-width: 44px; white-space: nowrap; font: 700 14px var(--font-ui); color: var(--brand-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.vol-who .vol-link { min-height: 44px; padding: 0 var(--sp-2) 0 0; margin-top: 0; }
.vol-called { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 700; font-size: 14px; }
.vol-row.is-called { background: var(--surface-2); }
.vol-row.is-called .vol-name { color: var(--ink-2); }
.vol-open { display: none; }
.vol-more { display: block; margin: var(--sp-2) 0 0; }
.vol-foot { margin: 0 0 var(--sp-5); color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.vol-foot .vol-link { min-height: 44px; padding: 0 var(--sp-1); }
.vol-empty { margin: 0 0 var(--sp-5); padding: var(--sp-4); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); }
.vol-empty h2 { margin: 0 0 var(--sp-2); font-size: 18px; }
.vol-empty p { margin: 0 0 var(--sp-3); color: var(--ink-2); font-size: 14px; }
.vol-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
.vol-search { flex: 1 1 220px; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); min-height: 48px; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--surface); color: var(--ink-mute); }
.vol-search:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; }
.vol-search input:focus { outline: none; box-shadow: none; }
.vol-search input { flex: 1; border: 0; background: none; font: 16px var(--font-ui); color: var(--ink); min-height: 44px; outline: none; }
.vol-seg { display: inline-flex; padding: var(--sp-1); border-radius: 12px; background: var(--surface-2); }
.vol-seg button { min-height: 40px; padding: 0 var(--sp-4); border: 0; border-radius: 9px; background: none; color: var(--ink-2); font: 700 14px var(--font-ui); cursor: pointer; }
.vol-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.vol-thead { display: none; }
.vol-rec { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-1) var(--sp-3); width: 100%; padding: var(--sp-3) var(--sp-4); border: 0; border-top: 1px solid var(--rule); background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.vol-recs li:first-child .vol-rec { border-top: 0; }
.vol-rec:hover { background: var(--surface-2); }
.vol-c-name { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.vol-c-sub { color: var(--ink-2); font-size: 13px; }
.vol-c-svc, .vol-c-ev, .vol-c-pro { display: none; }
.vol-chev { color: var(--ink-mute); font-size: 20px; line-height: 1; }
.vol-skel { display: grid; gap: var(--sp-3); }
.vol-skel-row { display: grid; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); }
.vol-skel-row i { display: block; height: 14px; border-radius: 7px; background: var(--surface-2); }
.vol-skel-row i:nth-child(1) { width: 45%; } .vol-skel-row i:nth-child(2) { width: 75%; } .vol-skel-row i:nth-child(3) { width: 100%; height: 44px; border-radius: 10px; }
.vol-err { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius); border: 1px solid var(--bad); background: var(--bad-bg); color: var(--ink); }
.vol-err p { margin: 0; font-size: 14px; }
.vol-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); font-size: 15px; }
.vol-card { margin: 0 0 var(--sp-4); padding: var(--sp-4); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); }
@media (max-width: 640px) {
  .vol-head h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vol-live { display: none; }
  .vol-page.is-first-day .vol-live { display: block; }
  .vol-tabs { width: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vol-tab-long { display: none; }
  .vol-tab-short { display: inline; }
  .vol-tabs button { padding: var(--sp-2) var(--sp-1); }
  .vol-pros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .vol-pros button { flex: none; }
  .vol-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .vol-actions .vol-btn:only-child { grid-column: 1 / -1; }
  .vol-actions small { grid-column: 1 / -1; }
  .vol-search { flex-basis: 100%; }
  .vol-link { min-height: 44px; }
  .vol-name .client-link { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 640px) { [data-vol-count="back"] { display: none; } }
@media (min-width: 641px) { .vol-actions { flex-wrap: nowrap; } .vol-btn { flex: 0 0 auto; padding: 0 var(--sp-4); } .vol-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
@media (min-width: 1024px) {
  .vol-thead { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) 90px minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-2); font-size: 13px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
  .vol-rec { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) 90px minmax(0, 1fr) minmax(0, 1.4fr) 24px; }
  .vol-c-sub { display: none; }
  .vol-c-svc, .vol-c-ev, .vol-c-pro { display: block; font-size: 14px; color: var(--ink-2); }
}
@media (min-width: 1024px) {
  .vol-split { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--sp-5); align-items: start; }
  .vol-panel { display: block; position: sticky; top: var(--sp-5); padding: var(--sp-5); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); }
  .vol-row { cursor: pointer; grid-template-columns: minmax(0, 1fr) auto; }
  .vol-row .vol-actions { display: none; }
  .vol-row.is-called .vol-actions { display: flex; }
  .vol-row.is-selected { background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--btn-fill); }
  .vol-open { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink-mute); font-size: 22px; cursor: pointer; }
  .vol-pn-name { margin: 0 0 var(--sp-2); font-size: 20px; }
  .vol-pn-l { margin: var(--sp-4) 0 var(--sp-2); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 750; }
  .vol-msg { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: 14px 14px 14px 4px; background: var(--surface-2); color: var(--ink); font-size: 15px; line-height: 1.5; }
  .vol-pn-go { width: 100%; min-height: 48px; justify-content: center; }
  .vol-pn-sec { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
  .vol-keys { margin: var(--sp-5) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 13px; }
  .vol-keys .vol-link { font-size: 13px; min-height: 36px; }
  .vol-pn-empty { margin: 0; color: var(--ink-2); font-size: 14px; }
}
@media (max-width: 1279px) { .vol-keys { display: none; } }
:root[data-theme="dark"] .vol-pros button[aria-pressed="true"] { border-color: var(--btn-fill); }
:root[data-theme="dark"] .vol-search:focus-within { outline-color: var(--brand-text); }

/* Já voltam: mesma estrutura com 0, 1 ou 357 clientes (desenho v3/c3). */
.vol-sumcard { margin: 0 0 var(--sp-5); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); overflow: hidden; }
.vol-stats2 { display: grid; grid-template-columns: 1fr 1fr; }
.vol-stat { display: grid; align-content: start; gap: var(--sp-1); padding: var(--sp-4); }
.vol-stat + .vol-stat { border-left: 1px solid var(--rule); }
.vol-stat strong { font-size: 32px; line-height: 1.1; color: var(--ink); }
.vol-stat span, .vol-stat small { color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.vol-stat small { font-size: 13px; }
.vol-bar2 { display: block; height: 6px; margin-top: var(--sp-2); border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.vol-bar2 b { display: block; height: 100%; background: var(--ok); }
.vol-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 48px; padding: 0 var(--sp-4); border-top: 1px solid var(--rule); color: var(--brand-text); font-size: 15px; font-weight: 700; text-decoration: none; }
details.vol-line { display: block; padding: 0; }
details.vol-line > summary, .vol-declined > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 48px; padding: 0 var(--sp-4); cursor: pointer; list-style: none; font-weight: 700; }
details.vol-line > summary::-webkit-details-marker, .vol-declined > summary::-webkit-details-marker { display: none; }
details[open] > summary .vol-chev { transform: rotate(90deg); }
.vol-line-empty { margin: 0; padding: 0 var(--sp-4) var(--sp-4); }
.vol-won-list { border: 0; border-radius: 0; }
.vol-sec { margin: 0 0 var(--sp-3); }
.vol-tools { justify-content: space-between; flex-wrap: nowrap; margin: var(--sp-3) 0; }
.vol-export { display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; }
.vol-export:disabled, .vol-search input:disabled { opacity: .6; cursor: not-allowed; }
.vol-search { margin: 0; }
.vol-recs-card { margin: 0 0 var(--sp-3); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); overflow: hidden; }
.vol-recs-card .vol-more { margin: 0; width: 100%; text-align: center; border-top: 1px solid var(--rule); }
.vol-recs-card .vol-empty { margin: 0; border: 0; }
.vol-gh2 { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-2); border-top: 1px solid var(--rule); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 750; }
.vol-gh2 b { font-size: 13px; color: var(--ink-mute); }
.vol-recs-card .vol-group { margin: 0; }
.vol-recs-card .vol-group:first-child .vol-gh2 { border-top: 0; }
.vol-group.is-amber .vol-gh2 { color: var(--wait); }
.vol-when { display: grid; justify-items: end; text-align: right; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.vol-when em { font-style: normal; font-weight: 700; color: var(--wait); }
.vol-h { font-weight: 600; color: var(--ink-2); }
.vol-declined { margin: 0 0 var(--sp-5); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); overflow: hidden; }
.vol-declined > summary { color: var(--ink); }
.vol-declined .vol-list { border: 0; border-top: 1px solid var(--rule); border-radius: 0; }
@media (min-width: 1024px) {
  .vol-when { display: block; justify-items: initial; text-align: left; }
  .vol-h::before { content: " · "; }
}
@media (max-width: 400px) { .vol-stat strong { font-size: 28px; } }

/* Já voltam, 2ª passada (28/10): mesma estrutura do desenho em qualquer volume e largura. */
.vol-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.vol-bar[hidden] { display: none; }
.vol-prosel, .vol-d { display: none; }
.vol-d[hidden] { display: none !important; }
.vol-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 13px; font-weight: 650; }
.vol-card-head { display: grid; }
.vol-foot2 { display: block; }
.vol-hint2 { display: none; }
@media (max-width: 1023px) {
  .vol-recs-card { border: 0; background: none; border-radius: 0; overflow: visible; margin: 0; }
  #vol-recs { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); overflow: hidden; margin: 0 0 var(--sp-3); }
  .vol-recs-card .vol-more { margin: 0; }
}
@media (min-width: 1024px) {
  .vol-pros, .vol-m { display: none; }
  .vol-prosel { display: block; position: relative; flex: none; }
  .vol-prosel-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--sp-4); border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: 650 14px var(--font-ui); cursor: pointer; }
  .vol-prosel-btn b, .vol-prosel-menu b { font-size: 13px; color: var(--ink-mute); }
  .vol-prosel-menu { position: absolute; right: 0; top: calc(100% + var(--sp-1)); z-index: 5; min-width: 220px; padding: var(--sp-1); border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
  .vol-prosel-menu[hidden] { display: none; }
  .vol-prosel-menu button { display: flex; justify-content: space-between; width: 100%; min-height: 44px; padding: 0 var(--sp-3); border: 0; border-radius: 8px; background: none; color: var(--ink); font: 650 14px var(--font-ui); text-align: left; cursor: pointer; }
  .vol-prosel-menu button[aria-checked="true"] { background: var(--brand-soft); color: var(--brand-text); }
  .vol-d { display: grid; }
  .vol-d-stats { grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: 0 0 var(--sp-5); }
  .vol-dcard { display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); }
  .vol-dh { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: 13px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
  .vol-dh .vol-link { min-height: 32px; text-transform: none; letter-spacing: 0; }
  .vol-dnum { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); }
  .vol-dnum strong { font-size: 32px; line-height: 1.1; color: var(--ink); }
  .vol-dnum span, .vol-dnum small { color: var(--ink-2); font-size: 14px; }
  .vol-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .vol-d-won { margin: calc(-1 * var(--sp-3)) 0 var(--sp-5); }
  .vol-recs-card { margin: 0 0 var(--sp-5); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
  .vol-card-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .vol-card-head .vol-sec { margin: 0; margin-right: auto; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); gap: var(--sp-2); justify-content: flex-start; }
  .vol-card-head .vol-search { flex: 0 1 260px; min-height: 44px; }
  .vol-card-head .vol-tools { margin: 0; flex-wrap: nowrap; gap: var(--sp-3); }
  .vol-card-head .vol-export { border: 1px solid var(--rule-strong); border-radius: 10px; min-height: 44px; padding: 0 var(--sp-3); text-decoration: none; color: var(--ink); }
  #vol-recs .vol-gh2:first-child, #vol-recs .vol-thead + .vol-group .vol-gh2 { border-top: 1px solid var(--rule); }
  .vol-thead { padding-top: var(--sp-2); }
  .vol-foot2 { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 0 var(--sp-4); border-top: 1px solid var(--rule); flex-wrap: wrap; }
  .vol-hint2 { display: block; color: var(--ink-2); font-size: 13px; }
  .vol-foot2 .vol-declined { margin: 0; border: 0; border-radius: 0; background: none; }
  .vol-foot2 .vol-declined > summary { min-height: 44px; padding: 0; font-size: 13px; gap: var(--sp-2); }
  .vol-foot2 .vol-declined[open] { flex: 1 0 100%; }
  .vol-rec .vol-chev { display: block; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .vol-thead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vol-thead span:nth-child(n+2):nth-child(-n+4) { display: none; }
  .vol-rec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px; }
  .vol-c-sub { display: block; }
  .vol-c-svc, .vol-c-ev, .vol-c-pro { display: none; }
  .vol-card-head { flex-wrap: wrap; }
  .vol-prosel-l { display: none; }
}
@media (min-width: 1280px) { .vol-thead { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) 90px minmax(0, 1fr) minmax(0, 1.4fr); padding-right: calc(var(--sp-4) + 24px); } }

/* Já voltam: rótulos curtos a 1024 px, discretos no botão de profissional, sem contagem solta no celular. */
.vol-xs { display: none; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .vol-xl { display: none; }
  .vol-xs { display: inline; }
  .vol-card-head .vol-search { flex: 1 1 140px; }
  .vol-card-head { flex-wrap: nowrap; }
  .vol-card-head .vol-search input { min-width: 0; }
  .vol-dh { font-size: 13px; letter-spacing: .03em; }
  .vol-dcard { padding-right: var(--sp-5); }
}
.vol-prosel-btn { font-weight: 600; }
.vol-prosel-btn b { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-weight: 650; }
@media (max-width: 1023px) {
  .vol-group:not(.is-amber) > .vol-gh2 b { display: none; }
  .vol-c-sub { font-size: 14px; }
}
.vol-recs-card .vol-more { text-decoration: none; }

@media (min-width: 1024px) and (max-width: 1279px) {
  .vol-tab-long { display: none; }
  .vol-tab-short { display: inline; }
  .vol-tabs button { padding: var(--sp-2) var(--sp-3); }
  .vol-card-head .vol-sec { white-space: nowrap; flex: none; margin-right: 0; }
  .vol-card-head .vol-search { flex: 1 1 100px; min-width: 100px; }
  .vol-card-head .vol-tools { flex: none; }
  .vol-seg button, .vol-export { white-space: nowrap; }
}

.vol-seg button { white-space: nowrap; }
@media (max-width: 380px) { .vol-xm { display: none; } .vol-seg button { padding: 0 var(--sp-3); } }

/* Voltas, Chamar (rodada 9, 29/10): igual ao desenho c1/v1. */
.vol-live b { color: var(--ink); font-weight: 750; }
.vol-btn { border: 0; box-shadow: none; }
.vol-pn-eyebrow { margin: 0 0 var(--sp-1); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 750; }
.vol-pn-info { display: flex; gap: var(--sp-6, 32px); margin: var(--sp-4) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--rule); }
.vol-pn-info dt { font-size: 13px; color: var(--ink-2); }
.vol-pn-info dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.vol-pn-out { flex: 1 1 0; min-height: 44px; justify-content: center; background: var(--surface); border: 1px solid var(--rule-strong); color: var(--ink); font-weight: 700; box-shadow: none; }
.vol-pn-note { margin: var(--sp-4) 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.vol-pros-bar { display: none; }
@media (min-width: 1024px) {
  .vol-pros-bar { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; }
  .vol-pros-bar button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); font: 650 14px var(--font-ui); cursor: pointer; }
  .vol-pros-bar button b { font-size: 13px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-mute); }
  .vol-pros-bar button[aria-pressed="true"] { background: var(--btn-fill); border-color: var(--btn-fill); color: var(--btn-ink); }
  .vol-pros-bar button[aria-pressed="true"] b { background: rgba(255,255,255,.18); color: inherit; }
  /* Abas sublinhadas, sem a pílula cinza do celular. */
  .vol-tabs { background: none; padding: 0; gap: var(--sp-5); border-radius: 0; box-shadow: none; }
  .vol-tabs button { border-radius: 0; min-height: 52px; padding: var(--sp-2) var(--sp-1); border-bottom: 3px solid transparent; }
  .vol-tabs button[aria-current="page"] { background: none; box-shadow: none; border-bottom-color: var(--btn-fill); }
  .vol-live { margin-bottom: var(--sp-3); }
}
@media (min-width: 1280px) {
  .vol-pn-sec .vol-pn-out { flex-basis: 0; }
  .vol-foot { margin: var(--sp-3) 0 var(--sp-5); }
}
:root[data-theme="dark"] .vol-pros-bar button[aria-pressed="true"] { border-color: var(--btn-fill); }
@media (min-width: 1024px) and (max-width: 1279px) {
  /* 1024 px: abas e chips na mesma linha; os chips que não cabem rolam dentro do próprio grupo. */
  .vol-bar:has(.vol-pros-bar) { flex-wrap: nowrap; align-items: center; }
  .vol-bar:has(.vol-pros-bar) .vol-tabs { flex: none; margin-bottom: var(--sp-3); }
  .vol-bar .vol-prosel:has(.vol-pros-bar) { flex: 0 1 auto; min-width: 0; }
  .vol-pros-bar { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .vol-pros-bar button { flex: none; }
}

/* Painel de 330 px a partir de 1024 px, 380 px a partir de 1280; sem registros o painel some. */
@media (min-width: 1280px) { .vol-split { grid-template-columns: minmax(0, 1fr) 380px; } }
@media (min-width: 1024px) { .vol-split.is-empty { display: block; } .vol-split.is-empty .vol-panel { display: none; } }
/* Chips além dos 2 primeiros: no 1024 vão para "Mais"; a partir de 1280 ficam todos na linha. */
.vol-pros-more { display: contents; }
.vol-pros-mais { display: none !important; }
.vol-pros-extra { display: contents; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .vol-pros-more { display: inline-flex; position: relative; }
  .vol-pros-mais { display: inline-flex !important; }
  .vol-pros-extra { display: none; position: absolute; right: 0; top: calc(100% + var(--sp-1)); z-index: 5; flex-direction: column; gap: 4px; min-width: 200px; padding: var(--sp-2); border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-pop, 0 8px 24px rgba(0,0,0,.14)); }
  .vol-pros-more.is-open .vol-pros-extra { display: flex; }
  .vol-pros-extra button { justify-content: space-between; }
  .vol-pros-bar { overflow: visible; gap: 4px; }
  .vol-pros-bar button { padding: 0 10px; gap: 6px; }
}

/* Voltas · Combinar: o formulário da volta dentro do painel (desenho c2). Coluna estreita: tudo empilhado,
   cartão do serviço sem moldura própria (o painel já é o cartão). */
.ns-host { margin-top: var(--sp-4); }
.ns-host .ns-steps { gap: var(--sp-3); }
.ns-host .ns-step { padding: var(--sp-4) 0 0; border: 0; border-top: 1px solid var(--rule); background: none; border-radius: 0; }
.ns-host .ns-step header { display: none; }
.ns-host .ns-choice { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.ns-host .ns-fields { grid-template-columns: minmax(0, 1fr); }
.ns-host .ns-confirm { width: 100%; min-height: 48px; margin-top: var(--sp-3); }
.ns-host-foot { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-4); }
.ns-host-foot .btn { min-height: 44px; }
.vol-pn-eyebrow + .vol-pn-name { margin-top: 0; }

/* Rádios de "Combinar a volta": não marcado vazio com borda de contraste (no escuro o nativo ficava branco e parecia marcado). */
.ns-choice input[type=radio], .ns-other input[type=radio] { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; border: 2px solid var(--rule-strong); border-radius: 50%; background: transparent; }
.ns-choice input[type=radio]:checked, .ns-other input[type=radio]:checked { border-color: var(--brand); background: radial-gradient(circle, var(--brand) 0 42%, transparent 46%); }
.ns-adjust > summary { text-decoration: underline; text-underline-offset: 3px; }
/* Passo 1 do assistente: o campo com erro, ao receber o foco, para abaixo do cabeçalho fixo e deixa a barra "Passo 1 de 3" à vista. */
#setup-salon .form-input, #setup-salon .seg-card, #setup-salon [name="st-segment"] { scroll-margin-top: 210px; }