/* --------------------------------------------------------------------------
   Ver como
   -------------------------------------------------------------------------- */
/* La banda va arriba del todo y empuja la página: flotando sobre la cabecera
   tapaba el menú, y lo que avisa es demasiado fácil de olvidar como para
   dejarlo debajo del pliegue. */
/* Abajo y fija, no arriba: la cabecera es `position: absolute` en lo alto de
   la página, así que una banda en el flujo normal se quedaba debajo de ella
   —tapando el logo y los botones del menú—. Abajo no colisiona con nada, se ve
   siempre sin importar por dónde vaya el scroll, y es donde estas bandas se
   esperan. */
.cmr-banda-ver-como {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1rem;
  padding: .55rem 1rem;
  background: #f3c969;
  color: #2a2000;
  font-size: .85rem;
  line-height: 1.4;
  text-align: center;
}

.cmr-banda-ver-como strong { font-weight: 700; }

/* Para que la banda no se coma la última línea del pie. */
.cmr-app.es-ver-como { padding-bottom: 3.4rem; }

.cmr-banda-ver-como .cmr-boton-mini {
  background: #2a2000;
  border-color: #2a2000;
  color: #f3c969;
}

.cmr-ver-como {
  display: grid;
  gap: .25rem;
  padding: .6rem .9rem;
  border-top: 1px solid var(--crema);
}

.cmr-ver-como-titulo {
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris, #7a7a70);
}

.cmr-ver-como-opcion {
  padding: .3rem .5rem;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: .85rem;
  text-align: left;
  cursor: pointer;
}

.cmr-ver-como-opcion:hover { background: var(--crema); }

.cmr-ver-como-opcion.es-actual { font-weight: 700; }

.cmr-ver-como-opcion.es-actual::after { content: " ·"; }

/* Las actividades dentro de la agenda del panel: el día de la casa son las
   visitas y los actos, y verlos juntos es lo que evita mirar en dos sitios. */
.cmr-agenda-actos { display: grid; gap: .8rem; }

.cmr-agenda-actos-cab {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .6rem;
}

.cmr-agenda-actos-cab .cmr-cierres-titulo { margin: 0; }

.cmr-acto-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }

.cmr-acto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .7rem .9rem;
  background: var(--papel);
  border: 1px solid var(--crema);
  border-radius: 8px;
}

.cmr-acto-cuando { display: grid; min-width: 6.5rem; font-size: .82rem; }

.cmr-acto-cuando span { color: var(--gris); }

.cmr-acto-que { flex: 1 1 14rem; display: grid; min-width: 0; }

.cmr-acto-que span { font-size: .8rem; }

.cmr-acto-asis { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }