/* BIZARRO · Elección del medio de contacto (/contacto/) y reserva de reuniones (/reservas/) (Hito W, D-111 a D-120; Hito X).
   Se carga en ambas páginas. Usa los tokens y las clases de campo del sitio (styles.css); no agrega colores ni sombras.
   Sin JavaScript se ven todos los días con sus horas; booking.js agrega el selector de día. */

/* ---------- Elección del medio de contacto: filas con línea, sin tarjetas ---------- */
.channels-title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--negro); }
.channels li { border-bottom: 1px solid rgba(11, 11, 12, .2); }
.channels li + li { border-left: 1px solid rgba(11, 11, 12, .2); }
.channels__link {
  display: grid; align-content: start; gap: .35rem; min-height: 100%; padding: 1.35rem clamp(1rem, 2vw, 1.5rem) 1.5rem 0;
  color: inherit; text-decoration: none; overflow-wrap: anywhere;
}
.channels li + li .channels__link { padding-left: clamp(1rem, 2vw, 1.5rem); }
.channels__label { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; text-decoration-color: transparent; transition: text-decoration-color .2s; }
.channels__link:hover .channels__label, .channels__link:focus-visible .channels__label { text-decoration-color: currentColor; }
.channels__text { color: var(--gris); font-size: .96rem; }
.channels__link:focus-visible { outline: 3px solid var(--negro); outline-offset: -3px; }

/* ---------- Reserva ---------- */
.bk { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.hero__note { margin: 1rem 0 0; max-width: 40rem; color: var(--plata); font-size: .98rem; }
.bk__status:empty { display: none; }
.bk__status:focus { outline: none; }
.bk__form { display: block; }
.bk__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }

.bk fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.bk legend { padding: 0; margin-bottom: .75rem; font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; }
.bk__group { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
.bk__group legend { margin-bottom: 0; }

.bk__when { display: grid; gap: 1rem; align-content: start; }
.bk__when legend { margin-bottom: 0; }
.bk__when .field__hint { margin: 0; }
.bk__daypick[hidden], .bk__hint[hidden], .bk__day[hidden] { display: none; }
.bk__day { display: grid; gap: .6rem; }
.bk__day + .bk__day { margin-top: .5rem; }
.bk__day-title { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1rem; }
.bk__slots, .bk__choices { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Horas y modalidad: botones de opción. La opción elegida se invierte (negro sobre blanco), no depende solo del color. */
.bk__slot, .bk__choice { position: relative; display: inline-flex; }
.bk__slot input, .bk__choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bk__slot label, .bk__choice label {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 4.75rem; padding: .5rem 1rem;
  border: 1px solid var(--negro); border-radius: 3px; background: var(--blanco); color: var(--negro);
  font-family: var(--f-display); font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; pointer-events: none;
}
.bk__choice label { min-width: 7rem; }
.bk__slot input:hover + label, .bk__choice input:hover + label { background: var(--hueso); }
.bk__slot input:checked + label, .bk__choice input:checked + label { background: var(--negro); color: var(--blanco); }
.bk__slot input:checked + label::before, .bk__choice input:checked + label::before { content: "\2713"; margin-right: .45rem; font-weight: 700; }
.bk__slot input:focus-visible + label, .bk__choice input:focus-visible + label { outline: 3px solid var(--negro); outline-offset: 3px; }

.bk__who { display: grid; gap: .5rem; }
.bk__location[hidden] { display: none; }
.bk__submit { display: grid; gap: .75rem; justify-items: start; margin-top: .5rem; }
.bk__submit .field__hint { max-width: 34rem; }
.bk .field__error { margin: 0; }

@media (max-width: 62rem) {
  .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .channels li:nth-child(odd) { border-left: 0; }
  .channels li:nth-child(odd) .channels__link { padding-left: 0; }
  .channels li:nth-child(even) .channels__link { padding-left: clamp(1rem, 2vw, 1.5rem); }
  .channels li:nth-child(n + 3) { border-top: 0; }
  .bk__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 36rem) {
  .channels { grid-template-columns: minmax(0, 1fr); }
  .channels li + li, .channels li:nth-child(even) { border-left: 0; }
  .channels li + li .channels__link, .channels li:nth-child(even) .channels__link { padding-left: 0; }
  .bk__submit .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .channels__label { transition: none; }
}