body,
html,
#root {
  height: 100vh;
  margin: 0;
  background-color: white; /*black;*/ /*rgb(250, 0, 204);*/
  overflow: hidden;
}

#pagina {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: green;
}

#titulo {
  font-size: xx-large;
  width: 100%;
  text-align: center;
  div {
    display: inline-block;
  }
}


#mesa {
  background-color: white; /* rgb(0, 0, 0); */
  height: 100%;
  width: 100%;

  display: flex;
  flex-direction: column;
  nav {
    z-index: 1;
  }
}

#mesa2col {
  height: calc(100% - 64px);
  width: 100%;

  display: flex;
  flex-direction: row;
}

#espaciodiseno-wrapper {
  background-color: rgb(162, 255, 138);
  width: 100%;
  overflow: scroll;
}
#espaciodiseno {
  background-color: white;
  height: var(--espacio-disenyo-alto);
  width: var(--espacio-disenyo-ancho);
  background-image: url(images/hoja-libreta-rojo.jpg);
  position: relative;
}

#espaciodiseno.enproduccion{
 background-image: url(images/hoja-libreta-azul.jpg);
}

#barra-menu {
  background-color: mediumseagreen; 
  box-shadow: 8px 8px 8px rgb(109 135 135);
}
#barra-menu:not(.enproduccion){
   background-color: var(--color-coral-intenso); /*red; */
}

#espaciopropiedades {
  background-color: #01579b;
  z-index: 2;
  min-width: var(--ancho-zona-propiedades);
  display: flex;
  flex-direction: column;
  .botones {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .contenido::selection {
    color: black;
    background-color: yellow;
  }
  .contenido {
    overflow: overlay;
    flex: 1;

    #uiform {
      background-color: white;
      height: 100%;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      img {
        margin: 20%;
      }
    }
  }
}

#menuizquierda {
  z-index: 1;
  position: fixed;
  left: var(--ancho-zona-propiedades);
  margin-left: 16px;
  top: 180px;
  width: 96px;
  height: 128px;
}

#menuderecha {
  z-index: 1;
  position: fixed;  
  right: 32px;
  top: 30%;
  width: 64px;
  background-color: cadetblue;
  box-shadow: 8px 8px 8px rgb(109 135 135);
}

#menuderecha li {
  margin: 8px;
}

#menuderecha li a img {
  width: 48px;
}

.debug div {
  padding: 5px;
}

.ui-draggable-dragging {
  box-shadow: 8px 8px 8px rgb(109 135 135) !important;
  z-index: 0;
}

.oculto {
  display: none !important;
}

#addAnotacion img {
  padding: 5px;
}

.imprimiendo { /* para forzar renders ANTES de imprimir*/ 
  .no-print,
  .no-print * {
    display: none !important;
  }
}

@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
  #espaciodiseno {
    background-image: none !important;
  }

  body,
  #root,
  #pagina,
  #mesa,
  #mesa2col,
  #espaciodiseno-wrapper {
    height: var(--espacio-disenyo-alto);
    width: var(--espacio-disenyo-ancho);
  }
  #mesa2col {
    flex-direction: row-reverse;
  }
  #titulo {
    text-align: left;
    margin-left:16px;
  }
}