/* Booking request flow (/reservar, /en/book) and request lookup (/mi-cita).
   Loaded only by those two pages; everything reusable already lives in
   css/components.css and is used from there — .btn, .card, .field, .notice,
   .media, .eyebrow, .cluster and the shell are not redefined here.

   Rules this file is built to (docs/reference-bar.json):
     COLOR-02  three non-neutral fills on the page and no more: the primary
               CTA's gradient (components.css), --plum-100 for a hover/selected
               wash, and --plum-ink for the one selected day and the one selected
               slot. Nothing here invents a hue.
     COLOR-03  no brand purple carrying text on a tint: --plum-ink or --ink only
     RADIUS-01 no new radius value — the four the shared layer already defines
               (photo 6 on thumbnails, control 10 on inputs and day cells, card
               12 on panels, pill on buttons and slots), never one value for all
     SHADOW-01 not one box-shadow in this file
     SPACE-01  every gap is a --space-* token, i.e. a multiple of 8px
     A11Y-03   every day cell, slot, radio row and button clears 44x44
     I18N-01   nothing is width-constrained by character count: Spanish labels
               ("Enviar solicitud", "Tus datos") set the size, and every control
               wraps rather than clipping
     TYPE-01   no font-weight above 500 anywhere in this file */

/* ---- page ---------------------------------------------------------------- */

.book__head {
  display: grid;
  gap: var(--space-md);
  margin-block-end: var(--space-xl);
}

.book__nojs {
  display: grid;
  gap: var(--space-md);
  justify-items: start;
  margin-block-end: var(--space-xl);
}

/* ---- step indicator ------------------------------------------------------ */
/* Always visible, at the top of the flow: BK-01 wants "Paso 2 de 5" readable at
   every moment, not a bar that only a sighted user can decode. */

.book-progress {
  display: grid;
  gap: var(--space-xs);
  padding-block-end: var(--space-lg);
  border-block-end: 1px solid var(--line);
  margin-block-end: var(--space-xl);
}

.book-progress__count {
  font-size: var(--step-caps);
  font-weight: var(--weight-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.book-progress__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
}

.book-progress__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--ink-muted);
  font-size: var(--step-small);
  line-height: 1.3;
}

.book-progress__num {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.book-progress__item.is-done .book-progress__num {
  border-color: var(--plum-300);
  background: var(--plum-100);
  color: var(--plum-ink);
}

/* Keyed on aria-current, which the server renders on step 1 and the client
   moves — so the step name is on screen even with JavaScript switched off. */
.book-progress__item[aria-current="step"] {
  color: var(--ink);
}

.book-progress__item[aria-current="step"] .book-progress__num {
  border-color: var(--plum-ink);
  background: var(--plum-ink);
  color: var(--surface);
}

/* Under 40rem only the current step keeps its name on screen — five Spanish
   labels in one row is what makes a step bar wrap into a mess (I18N-01). The
   other four stay in the accessibility tree rather than being display:none. */
@media (max-width: 39.999rem) {
  .book-progress__name {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .book-progress__item[aria-current="step"] .book-progress__name {
    position: static;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }
}

/* ---- steps --------------------------------------------------------------- */

.book-step {
  display: grid;
  gap: var(--space-lg);
}

.book-step:focus {
  outline: none;
}

.book-step__title {
  max-inline-size: 24ch;
}

.book-fields {
  display: grid;
  gap: var(--space-lg);
}

.field__req {
  color: var(--ink-muted);
  font-weight: var(--weight-body);
}

/* BK-09: the optional second choice. A fieldset because the two controls answer
   one question, and a legend because "Segunda opción" has to be read out before
   either of them, not guessed from their proximity. */
.book-alt {
  display: grid;
  gap: var(--space-xs);
  padding: 0;
  border: 0;
  margin: 0;
}

.book-alt__legend {
  padding: 0;
  font-size: var(--step--1);
  font-weight: var(--weight-ui);
  color: var(--ink-soft);
}

/* Side by side once there is room for two 3rem controls plus their labels;
   stacked below that, because a Spanish label ("Otra hora (opcional)") in a
   half-width column wraps to three lines on a 375px phone (I18N-01). */
.book-alt__pair {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 30rem) {
  .book-alt__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The consent error spans both columns of .field--check. */
.book-consent__error {
  grid-column: 1 / -1;
}

.book-error {
  margin-block-start: var(--space-xs);
}

.book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
}

/* 12rem, not 10: two of these plus the gap need more room than a 390px phone
   has, so they wrap to one full-width button each rather than squeezing "Enviar
   solicitud" onto two lines while "Atrás" keeps one (I18N-01). */
.book-actions .btn {
  flex: 1 1 12rem;
}

/* ---- step 1: services ---------------------------------------------------- */
/* A picker, not the printed menu on /servicios: each row is a control, so it
   carries its radio, its photo and — in one line — the price and duration the
   review step will echo back (BK-02). */

.book-options {
  display: grid;
  gap: var(--space-md);
  padding: 0;
  border: 0;
  margin: 0;
}

.option {
  display: grid;
  grid-template-columns: auto 4rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  min-block-size: 3.5rem;
  padding: var(--space-md);
  border: var(--border-hair);
  border-radius: var(--radius-card);
  background: var(--surface);
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.option:hover {
  background: var(--plum-100);
  border-color: var(--plum-300);
}

.option:has(.option__input:checked) {
  border-color: var(--plum-ink);
  background: var(--plum-100);
}

/* The focus ring belongs to the whole row, not to a 20px circle inside it. */
.option:has(.option__input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.option__input {
  inline-size: 1.375rem;
  block-size: 1.375rem;
  margin: 0;
  accent-color: var(--plum-ink);
}

.option__media {
  inline-size: 4rem;
}

.option__text {
  display: grid;
  gap: var(--space-2xs);
}

.option__name {
  font-weight: var(--weight-ui);
  line-height: 1.3;
  color: var(--ink);
}

.option__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--step-small);
  color: var(--ink-muted);
}

.option__price {
  color: var(--ink);
}

.option__from {
  color: var(--ink-muted);
}

.option__dot {
  inline-size: 3px;
  block-size: 3px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
}

/* ---- step 2: calendar ---------------------------------------------------- */

.calendar {
  display: grid;
  gap: var(--space-md);
}

.calendar__status {
  font-size: var(--step-small);
}

.calendar__note {
  font-size: var(--step-small);
}

.cal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.cal__nav {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.cal__nav .icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.cal__nav:hover:not(:disabled) {
  background: var(--plum-100);
  border-color: var(--plum-300);
}

.cal__nav:disabled {
  color: var(--ink-muted);
  border-color: var(--line);
  cursor: default;
}

.cal__title {
  font-weight: var(--weight-ui);
  text-align: center;
  color: var(--ink);
}

.cal__grid {
  display: grid;
  gap: var(--space-2xs);
}

.cal__row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2xs);
}

.cal__weekday {
  padding-block: var(--space-2xs);
  color: var(--ink-muted);
  font-size: var(--step--1);
  text-align: center;
}

.cal__day {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--space-2xs);
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: var(--space-2xs);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--step-small);
  font-variant-numeric: tabular-nums;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.cal__day:hover:not(.is-off) {
  background: var(--plum-100);
  border-color: var(--plum-300);
}

/* Availability is never carried by colour alone: an open day gets a mark under
   its number, and every cell says its full date and its state in its accessible
   name. */
.cal__mark {
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--plum-500);
}

.cal__day.is-off {
  border-color: transparent;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  cursor: default;
  text-decoration: line-through;
}

.cal__day.is-off .cal__mark {
  background: transparent;
}

.cal__day.is-today {
  border-color: var(--plum-300);
}

.cal__day.is-selected {
  background: var(--plum-ink);
  border-color: var(--plum-ink);
  color: var(--surface);
}

.cal__day.is-selected .cal__mark {
  background: var(--surface);
}

.cal__blank {
  min-block-size: 2.75rem;
}

/* ---- step 3: slots ------------------------------------------------------- */

.slots {
  display: grid;
  gap: var(--space-xl);
}

.slots__caption {
  color: var(--ink-soft);
}

.slots__group {
  display: grid;
  gap: var(--space-md);
}

.slots__title {
  font-family: var(--font-body);
  font-size: var(--step-caps);
  font-weight: var(--weight-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.slots__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--space-xs);
}

.slot {
  min-block-size: 2.75rem;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--step-small);
  font-variant-numeric: tabular-nums;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.slot:hover {
  background: var(--plum-100);
  border-color: var(--plum-300);
}

.slot.is-selected {
  background: var(--plum-ink);
  border-color: var(--plum-ink);
  color: var(--surface);
}

/* ---- step 5: review ------------------------------------------------------ */

.summary {
  display: grid;
  border-block-start: 1px solid var(--line);
}

.summary__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-md);
  border-block-end: 1px solid var(--line);
}

.summary__key {
  color: var(--ink-muted);
  font-size: var(--step-small);
}

.summary__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  color: var(--ink);
  text-align: end;
}

.summary__change {
  font-size: var(--step-small);
}

/* BK-05: the manual-confirmation notice sits here, LAST in the review step and
   so directly above the submit button on every viewport — the four policies go
   above it rather than between it and the button, which is what keeps the notice
   and the button inside one 375px viewport (TRUST-02 + BK-05 together). */
.book-notice {
  display: grid;
  gap: var(--space-xs);
}

.book-notice__lead {
  color: var(--ink);
}

.book-notice__q {
  font-weight: var(--weight-ui);
  color: var(--ink);
}

/* TRUST-02: all four owner-editable policies, visible before the request is
   sent — no accordion, because an answer behind a click is an answer nobody
   read. */
.book-policies__list,
.book-policies__item {
  display: grid;
  gap: var(--space-2xs);
}

.book-policies__list {
  gap: var(--space-md);
}

.book-policies__a {
  color: var(--ink-soft);
}

/* ---- confirmation -------------------------------------------------------- */

.book-done {
  gap: var(--space-lg);
}

.book-done:focus {
  outline: none;
}

.book-code {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--plum-300);
  border-radius: var(--radius-card);
  background: var(--plum-100);
}

.book-code__label {
  color: var(--ink-soft);
  font-size: var(--step-small);
}

.book-code__value {
  font-weight: var(--weight-ui);
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  color: var(--plum-ink);
}

.book-done__actions {
  gap: var(--space-md);
}

/* ---- /mi-cita ------------------------------------------------------------ */

.appointment-card {
  gap: var(--space-lg);
  margin-block-start: var(--space-xl);
}

.appointment-card:focus {
  outline: none;
}

.appointment-card__status {
  font-family: var(--font-body);
  font-size: var(--step-2);
  font-weight: var(--weight-ui);
  letter-spacing: 0;
  line-height: 1.25;
}

.appointment-card__help {
  color: var(--ink-soft);
}

.appointment-card__confirm {
  display: grid;
  gap: var(--space-md);
}

.appointment-card__policy {
  color: var(--ink-soft);
  font-size: var(--step-small);
}

/* ---- honeypot ------------------------------------------------------------ */
/* Off-screen rather than display:none — a bot reads the DOM and fills it, a
   person never sees or tabs into it (BRIEF §4, BK-13). */

.honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- wider viewports ----------------------------------------------------- */

@media (min-width: 48rem) {
  .book-actions {
    justify-content: flex-start;
  }

  .book-actions .btn {
    flex: 0 1 auto;
    min-inline-size: 10rem;
  }

  /* 8rem, because "12:00 p.m." plus the pill's padding needs 124px and a 6.5rem
     track broke it over two lines. */
  .slots__grid {
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  }

  /* A month is a fixed amount of information; letting it stretch to the full
     44rem shell turns 44px cells into 100px sheets with a number lost in the
     middle. Left-aligned, not centred (ALIGN-01). */
  .calendar {
    max-inline-size: 28rem;
  }

  .cal__day {
    min-block-size: 3.25rem;
  }

  .cal__blank {
    min-block-size: 3.25rem;
  }
}