/* ---------------------------------------------------------------------------
   Plantillas de lámina
   ---------------------------------------------------------------------------
   Las tres se enseñan siempre y la que toca viene ya elegida por el tipo de
   actividad. Esconderlas detrás de un desplegable ahorraría sitio y costaría
   que nadie supiera que se pueden cambiar. */
.cmr-plantillas { margin-bottom: 1.2rem; }

.cmr-plantillas-fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-top: .4rem;
}

.cmr-plantilla {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  text-align: left;
  padding: .7rem .8rem;
  background: var(--blanco);
  border: 1.5px solid var(--crema);
  border-radius: 4px;
  transition: border-color var(--transicion), background var(--transicion);
}

.cmr-plantilla strong { font-size: .95rem; color: var(--verde); }

.cmr-plantilla span   { font-size: .8rem; line-height: 1.35; color: var(--gris); }

.cmr-plantilla:hover { border-color: var(--verde); }

.cmr-plantilla.es-activa {
  border-color: var(--verde);
  background: var(--papel);
  box-shadow: inset 0 0 0 1px var(--verde);
}

/* Formulario y lámina, lado a lado: la previsualización tiene que verse
   mientras se escribe, no después de pulsar algo. */
.cmr-evento-doble {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 2rem;
  align-items: start;
}

.cmr-evento-lamina canvas {
  width: 100%;
  height: auto;
  border: 1px solid var(--crema);
  border-radius: 3px;
  margin-top: .4rem;
}

@media (max-width: 900px) {
  .cmr-evento-doble { grid-template-columns: 1fr; }
  .cmr-plantillas-fila { grid-template-columns: 1fr; }
}

/* Una fila por conferencista: nombre, profesión, foto y quitar. En rejilla y
   no en columna porque son tres datos cortos y apilarlos alarga el formulario
   sin ganar nada. */
.cmr-conferencista {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto auto;
  gap: .5rem;
  align-items: center;
  margin-bottom: .5rem;
}

.cmr-foto-btn { cursor: pointer; white-space: nowrap; }

@media (max-width: 700px) {
  .cmr-conferencista { grid-template-columns: 1fr 1fr; }
}

/* El campo de la URL dentro de la burbuja. Sobre el fondo tinta de la burbuja
   el input tiene que ser claro y ancho: una dirección no cabe en un campo de
   botón, y verla entera es lo que evita pegar la equivocada. */
.cmr-bubble-url {
  width: 22rem;
  max-width: 46vw;
  padding: .35rem .6rem;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--crema);
  border-radius: 3px;
  outline: none;
}

.cmr-bubble-url::placeholder { color: var(--gris); }

.cmr-bubble-url:focus { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(8,68,56,.25); }