/* ==========================================================================
   CALENDARIO Y HORAS — paso 2 de la reserva
   Lo pintan js/reserva/calendario.js y js/reserva/horas.js con los días
   y franjas definidos en js/config.js → agenda.
   ========================================================================== */
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cal__mes { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; text-transform: capitalize; }
.cal__nav { display: flex; gap: .4rem; }
.cal__nav button {
  width: 34px; height: 34px; border-radius: var(--radio-s);
  border: 1.5px solid var(--linea);
  display: grid; place-items: center;
  transition: border-color var(--tr), color var(--tr);
}
.cal__nav button:hover:not(:disabled) { border-color: var(--primario); color: var(--primario); }
.cal__nav button:disabled { opacity: .3; cursor: not-allowed; }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; text-align: center; }
.cal__dow { font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-suave); padding-block: .4rem; }
.cal__dia {
  aspect-ratio: 1; border-radius: var(--radio-s);
  display: grid; place-items: center;
  font-size: .84rem; font-weight: 500;
  transition: background var(--tr), color var(--tr);
}
.cal__dia:not(:disabled):hover { background: var(--menta); color: var(--primario); }
.cal__dia:disabled { color: #c9c4ba; cursor: not-allowed; }
.cal__dia.is-hoy { outline: 1.5px dashed var(--linea); outline-offset: -1.5px; }
.cal__dia.is-sel { background: var(--primario); color: #fff; font-weight: 600; }

/* ---- Horas, agrupadas en mañana / tarde ---- */
.slots-label {
  display: flex; align-items: center; gap: .6rem;
  margin: 1rem 0 .55rem;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris);
}
.slots-label::after { content: ""; flex-grow: 1; height: 1px; background: var(--linea); }

.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.slot {
  padding: .5rem .2rem; text-align: center;
  border: 1.5px solid var(--linea); border-radius: var(--radio-s);
  font-size: .78rem; font-weight: 500;
  transition: border-color var(--tr), background var(--tr), color var(--tr);
}
.slot:hover { border-color: var(--primario); color: var(--primario); }
.slot.is-active { background: var(--primario); color: #fff; border-color: var(--primario); font-weight: 600; }