/* --------------------------------------------------------------------------
   Visitas — agenda
   -------------------------------------------------------------------------- */
.cmr-agenda { padding-block: 2rem 2.5rem; }

.cmr-agenda-intro {
  font-family: var(--serif);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.3;
  color: var(--verde);
  max-width: 60ch;
  margin-bottom: 1.1rem;
}

/* La reserva es una sola tarjeta: los tres pasos comparten borde para que se
   lean como un trámite y no como tres secciones sueltas. */
.cmr-reserva {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--crema);
  border-radius: var(--radio);
  overflow: hidden;
}

.cmr-reserva-col { display: grid; gap: .8rem; align-content: start; padding: 1.1rem 1.2rem; }

.cmr-reserva-col:first-child { background: var(--papel); border-right: 1px solid var(--crema); }

.cmr-paso {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--verde);
  text-transform: uppercase;
}

.cmr-paso-n {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  font-size: .7rem;
  color: var(--papel);
  background: var(--verde);
  border-radius: 50%;
}

.cmr-agenda-horario { font-weight: 700; font-size: .75rem; letter-spacing: .04em; color: var(--gris); }

.cmr-espera { padding: 2rem 0; font-size: .9rem; }

/* Los datos cierran la tarjeta, a lo ancho de las dos columnas. */
/* Los datos van dentro de la columna del horario, no debajo de la tarjeta:
   comparten columna con los turnos y rellenan el hueco que dejaba el
   calendario, que es bastante más alto. */
.cmr-datos {
  display: grid;
  gap: .8rem;
  padding-top: 1rem;
  margin-top: .3rem;
  border-top: 1px solid var(--crema);
}

/* Cuatro campos en dos filas de dos. El motivo era el que se llevaba una fila
   entera para él solo; puesto al lado de la institución, el formulario mide
   la mitad y sigue habiendo sitio de sobra para escribir. */
.cmr-datos-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.25rem; }

.cmr-envio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }