/* Hoje, Agenda and Dia — the two "time" tabs (design 1, 2, B1, B2).
   Values 1:1 with docs/design/screens; colours from tokens.css only. */

/* ── Hoje: who is in the chair (design 1) ──────────────────────────────── */
.now-card {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 18px var(--gutter) 0;
  padding: 20px;
  border-radius: var(--radius-hero);
  background: var(--verniz);
  color: var(--card);
}
/* Nothing in the chair yet: the next one, quieter than "Agora". */
.now-card--next { background: var(--ink); }
/* A drop of polish — the design's lacquer swatch. */
.now-card__swatch {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--wine), var(--verniz) 40%), var(--wine) 70%);
  box-shadow: var(--shadow-polish);
}
.now-card__body { flex: 1; min-width: 0; }
.now-card__kicker {
  font: 600 12px var(--font-body);
  opacity: .85;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.now-card__name { margin-top: 4px; font: 700 26px/1.05 var(--font-display); }
.now-card__meta { margin-top: 4px; font: 400 14px var(--font-body); opacity: .9; }

/* A folga, said calmly. */
.calm-card {
  margin: 18px var(--gutter) 0;
  padding: 18px 20px;
  border-radius: var(--radius-card);
  background: var(--card);
}
.calm-card__title { font: 700 22px/1.1 var(--font-display); }
.calm-card__body { margin-top: 6px; font: 400 14px var(--font-body); color: var(--muted); }

.app-main > .flash { margin: 14px var(--gutter) 0; }

/* ── Agenda: week / month navigation (design B1) ───────────────────────── */
.week-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--gutter) 0;
}
.week-nav__range {
  display: flex;
  align-items: center;
  font: 500 14px var(--font-body);
  color: var(--muted);
}
/* Big enough for a thumb, though the glyph is small. */
.week-nav__arrow { padding: 4px 10px; font-size: 18px; color: var(--muted); }
.week-nav__arrow:first-child { padding-left: 0; }
.week-nav__summary {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--card);
  font: 600 13px var(--font-body);
  color: var(--ink);
}
.week-nav__free { color: var(--verniz); }

/* ── Agenda: one row per day ───────────────────────────────────────────── */
.week {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px var(--gutter) 0;
}
.week-day {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--card);
}
.week-day--off { opacity: .6; }
.week-day--today { outline: 2px solid var(--verniz); }
.week-day__weekday { font: 400 11px var(--font-body); color: var(--muted); }
.week-day__num { font: 700 20px var(--font-display); }
.week-day--off .week-day__num { color: var(--soft); }
.week-day__closed { font: 400 13px var(--font-body); color: var(--muted); }
.week-day__meta { margin-top: 6px; font: 400 12px var(--font-body); color: var(--muted); }
.week-day--today .week-day__meta { font-weight: 600; color: var(--verniz); }
.week-day__money { font: 700 15px var(--font-display); }

/* Booked vs free share of her open hours, in tenths (DaysHelper#booked_tenths). */
.week-day__bar { height: 10px; border-radius: 3px; background: var(--line); overflow: hidden; }
.week-day__booked { height: 100%; border-radius: 3px; background: var(--hue-4); }
.week-day--today .week-day__booked { background: var(--verniz); }
.week-day__booked--0 { width: 0; }
.week-day__booked--1 { width: 10%; }
.week-day__booked--2 { width: 20%; }
.week-day__booked--3 { width: 30%; }
.week-day__booked--4 { width: 40%; }
.week-day__booked--5 { width: 50%; }
.week-day__booked--6 { width: 60%; }
.week-day__booked--7 { width: 70%; }
.week-day__booked--8 { width: 80%; }
.week-day__booked--9 { width: 90%; }
.week-day__booked--10 { width: 100%; }

/* ── Agenda: month grid (design 2 · Mês) ───────────────────────────────── */
.month { padding: 14px var(--gutter) 0; }
.month__head,
.month__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.month__head { font: 500 11px var(--font-body); color: var(--muted); text-align: center; }
.month__grid { margin-top: 6px; }
.month-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--card);
}
.month-day--blank { background: transparent; }
.month-day--off { background: var(--line); }
.month-day--off .month-day__num { color: var(--soft); }
.month-day--today { outline: 2px solid var(--verniz); }
.month-day__num { font: 600 14px var(--font-body); }
.month-day__dots { display: flex; gap: 2px; height: 4px; }
.month-day__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--verniz); }
.month__caption { margin: 10px 0 0; font: 400 13px var(--font-body); color: var(--muted); }

/* ── Agenda: a voltar e ainda sem marcação ─────────────────────────────── */
.returning { padding-top: 20px; }
.days-section-title { margin: 0; font: 700 18px var(--font-display); }
.returning-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 18px;
  background: var(--card);
}
.returning-row .avatar { width: 40px; height: 40px; }
.returning-row__body { flex: 1; min-width: 0; }
.returning-row__name { font: 600 15px var(--font-body); }
.returning-row__meta { font: 400 12px var(--font-body); color: var(--muted); }
.returning-row__meta--late { color: var(--pending-ink); }

/* ── Dia: header + timeline (design B2) ────────────────────────────────── */
.day-header { padding: 8px var(--gutter) 0; }
.day-header .back-link { padding-top: 0; }
.day-header__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
}
.day-header__arrows { display: flex; }
.day-header__arrow { padding: 4px 10px; font: 500 18px var(--font-body); color: var(--muted); }
.day-header__arrow:last-child { padding-right: 0; }
.day-header__free { color: var(--verniz); }

.timeline {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 10px;
  padding: 18px var(--gutter) 0;
}
.timeline__time { padding-top: 4px; font: 500 12px var(--font-body); color: var(--muted); }
.timeline__end { padding-top: 4px; font: 400 12px var(--font-body); color: var(--soft); }

/* A booking, in her client's colour. */
.timeline-appt {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 64px;
  margin-bottom: 6px;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--slot-bg, var(--hue-1));
  color: var(--slot-fg, var(--ink));
}
.timeline-appt--hue-1 { --slot-bg: var(--hue-1); }
.timeline-appt--hue-2 { --slot-bg: var(--hue-2); --slot-fg: var(--card); }
.timeline-appt--hue-3 { --slot-bg: var(--hue-3); }
.timeline-appt--hue-4 { --slot-bg: var(--hue-4); }
.timeline-appt--hue-5 { --slot-bg: var(--hue-5); }
.timeline-appt--hue-6 { --slot-bg: var(--hue-6); }
.timeline-appt--pending { outline: 2px solid var(--pending); outline-offset: 2px; }
.timeline-appt--done { opacity: .6; }
.timeline-appt__name { font: 600 15px var(--font-body); }
.timeline-appt__meta { font: 400 12px var(--font-body); opacity: .75; }
.timeline-appt__price { flex: none; font: 700 14px var(--font-display); }

/* Lunch and blocks: time that is neither booked nor offered. */
.timeline-quiet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  margin-bottom: 6px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--line);
  font: 500 12px var(--font-body);
  color: var(--muted);
}
.timeline-quiet--block { padding: 6px 6px 6px 14px; }

/* A free window: what fits, and what to do with it (design B2/B3). */
.timeline-gap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 6px;
  padding: 10px 14px;
  border: 2px dashed var(--verniz-dash);
  border-radius: 16px;
}
.timeline-gap__title { font: 700 16px var(--font-body); color: var(--verniz); }
.timeline-gap__meta { font: 400 12px var(--font-body); color: var(--muted); }
.timeline-gap__actions { display: flex; gap: 6px; }
.timeline-gap .btn--sm,
.timeline-quiet .btn--sm { height: 32px; padding: 0 12px; font-size: 12px; }

.day-footer { padding: 16px var(--gutter) 0; }
.day-footer .btn { height: 54px; font-size: 15px; }