/* ============================================================
   Agenda de llamadas (Contacto).
   Vive dentro de .contact, que en tema claro tiene fondo oscuro
   (--ink) y en tema oscuro pasa a --bg-raised: cada color se
   declara para las dos situaciones, igual que .contact .chip.
   Lógica en js/booking.js.
   ============================================================ */

.booking__paso {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-lg);
  min-width: 0;
}
.booking__paso:last-of-type { margin-bottom: var(--space-md); }

.booking__legend {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-contact);
  padding: 0;
  margin-bottom: var(--space-sm);
}

.booking__hint {
  font-size: var(--fs-sm);
  color: color-mix(in oklch, var(--c-arena) 70%, transparent);
  margin: -0.35rem 0 var(--space-sm);
}
:root[data-theme="dark"] .booking__hint { color: var(--ink-soft); }

/* ---- Paso 1: tipo de consulta ---- */

.booking__tipos { display: grid; gap: 0.5rem; }
@media (min-width: 40rem) {
  .booking__tipos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.booking__tipo { position: relative; display: block; cursor: pointer; }
/* El radio real queda accesible (foco, teclado, lectores) pero no se ve:
   el recuadro de al lado es el que se pinta. */
.booking__tipo input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.booking__tipo span {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in oklch, var(--c-arena) 24%, transparent);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.25;
  color: var(--c-arena);
  transition: border-color 0.25s var(--ease-out-quart), color 0.25s var(--ease-out-quart),
    background-color 0.25s var(--ease-out-quart);
}
:root[data-theme="dark"] .booking__tipo span { border-color: var(--line-strong); color: var(--ink-soft); }

.booking__tipo input:hover + span { border-color: var(--gold-contact); }
.booking__tipo input:focus-visible + span {
  border-color: var(--gold-contact);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--gold-contact) 28%, transparent);
}
.booking__tipo input:checked + span {
  border-color: var(--gold-contact);
  color: var(--gold-contact);
  background: color-mix(in oklch, var(--gold-contact) 12%, transparent);
}

/* ---- Paso 2: días y horarios ---- */

.booking__dias {
  display: grid;
  gap: 0.5rem;
  margin-bottom: var(--space-sm);
}
@media (min-width: 40rem) {
  .booking__dias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.booking__dia {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: flex-start;
  min-height: 3rem;
  padding: 0.6rem 0.9rem;
  text-align: left;
  border: 1px solid color-mix(in oklch, var(--c-arena) 24%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-arena);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out-quart), color 0.25s var(--ease-out-quart),
    background-color 0.25s var(--ease-out-quart);
}
:root[data-theme="dark"] .booking__dia { border-color: var(--line-strong); color: var(--ink); }
.booking__dia:hover { border-color: var(--gold-contact); }
.booking__dia[aria-pressed="true"] {
  border-color: var(--gold-contact);
  background: color-mix(in oklch, var(--gold-contact) 12%, transparent);
}

.booking__dia-nombre { font-size: var(--fs-sm); line-height: 1.2; }
.booking__dia-cuenta {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  color: color-mix(in oklch, var(--c-arena) 62%, transparent);
}
:root[data-theme="dark"] .booking__dia-cuenta { color: var(--ink-faint); }
.booking__dia[aria-pressed="true"] .booking__dia-cuenta { color: var(--gold-contact); }

.booking__horas { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.booking__hora {
  font-family: var(--f-mono);
  font-size: var(--fs-cap);
  /* 44px de alto real: mismo criterio de tap target que .contact .chip. */
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid color-mix(in oklch, var(--c-arena) 24%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--c-arena);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out-quart), color 0.25s var(--ease-out-quart),
    background-color 0.25s var(--ease-out-quart);
}
:root[data-theme="dark"] .booking__hora { border-color: var(--line-strong); color: var(--ink); }
.booking__hora:hover { border-color: var(--gold-contact); color: var(--gold-contact); }
.booking__hora[aria-pressed="true"] {
  border-color: var(--gold-contact);
  background: var(--gold-contact);
  color: var(--ink);
}

.booking__vacio {
  font-size: var(--fs-sm);
  color: color-mix(in oklch, var(--c-arena) 70%, transparent);
  margin: 0;
}
:root[data-theme="dark"] .booking__vacio { color: var(--ink-soft); }

/* .field y .booking__paso traen display propio, y un display explicito le gana
   al [hidden] del navegador. Sin esto, los campos por servicio se mostraban
   todos juntos aunque el JS los marcara como ocultos. */
.booking__paso[hidden],
.booking .field[hidden] { display: none; }