/* UNICA hoja que entra dentro del lienzo. La cargan el editor y la pagina de render desde
   la misma URL. Aqui va solo lo ESTATICO: lo que depende del documento lo escribe
   compartido/estilos.js y lo asigna montar() por CSSOM. Si un valor apareciera en los dos
   sitios, un dia discreparian y el PNG dejaria de ser igual al preview. */

.lienzo {
  position: relative;
  overflow: hidden;
}

/* El borde se dibuja por dentro: una caja de 968x138 con borde 1.5 ocupa 968x138 exactos. */
.lienzo,
.lienzo * {
  box-sizing: border-box;
  margin: 0;
}

.lienzo > .fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Encima de la foto y debajo de TODO elemento. Sin foto hace de fondo de color. */
.lienzo > .velo {
  position: absolute;
  inset: 0;
}

/* El z-order es el orden del array de elementos, por eso ninguno lleva z-index. */
.lienzo > .el {
  position: absolute;
}

.lienzo > .el.texto {
  white-space: pre-wrap;
  word-break: break-word;
}

.lienzo > .el.imagen {
  display: block;
  max-width: none;
}