/*
  utiles.less
  Contiene mixins para que los estilos de las aplicaciones puedan utilizarlos.
  La mayoría apunta a construir las variantes de estilos que son específicas
  para cada tipo de browser.
*/
/*
  utiles.less
  Contiene mixins para que los estilos de las aplicaciones puedan utilizarlos.
  La mayoría apunta a construir las variantes de estilos que son específicas
  para cada tipo de browser.
*/
@media all {
  
}
@media all {
  /*********************************************
    feedback
    *********************************************/
  #feedback_bien,
  #feedback_mal {
    -webkit-transition: all 500ms linear;
    -webkit-transform: scale(0.9);
    pointer-events: none;
  }
  #feedback_bien.agrandar,
  #feedback_mal.agrandar {
    -webkit-transform: scale(1.1);
  }
  /*********************************************
    panel
    *********************************************/
  /*********************************************
    grid 1
    *********************************************/
  .grid {
    -webkit-box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.8);
    box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.8);
  }
  #etapa_1_grid,
  #etapa_2_grid,
  #etapa_3_grid {
    width: 340px;
    height: 340px;
    position: absolute;
    left: 30px;
    top: 10px;
    background-color: #fff;
    /*
      .challenge {
        position: absolute;
        .unit {
          position: absolute;
          width: @lado-bloque;
          height: @lado-bloque;
          border: @borde-interno-pieza solid @color-borde-interno-pieza;
  	margin: -@borde-interno-pieza;
  	background-color: @color-fondo-pieza;
        }
        .top {
          border-top: @borde-pieza solid @color-borde-pieza;
  	margin-top: -@borde-pieza;
        }
        .bottom {
          border-bottom: @borde-pieza solid @color-borde-pieza;
  	margin-bottom: -@borde-pieza;
        }
        .left {
          border-left: @borde-pieza solid @color-borde-pieza;
  	margin-left: -@borde-pieza;
        }
        .right {
          border-right: @borde-pieza solid @color-borde-pieza;
  	margin-right: -@borde-pieza;
        }
      }
      */
  
  }
  #etapa_1_grid .block,
  #etapa_2_grid .block,
  #etapa_3_grid .block {
    position: absolute;
    width: 34px;
    height: 34px;
  }
  #etapa_1_grid .block.up,
  #etapa_2_grid .block.up,
  #etapa_3_grid .block.up {
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    margin-top: -1px;
    margin-left: -1px;
  }
  #etapa_1_grid .block.down,
  #etapa_2_grid .block.down,
  #etapa_3_grid .block.down {
    border-bottom: 1px solid #000000;
    margin-bottom: -1px;
  }
  #etapa_1_grid .block.right,
  #etapa_2_grid .block.right,
  #etapa_3_grid .block.right {
    border-right: 1px solid #000000;
    margin-right: -1px;
  }
  #etapa_1_grid .block.selected,
  #etapa_2_grid .block.selected,
  #etapa_3_grid .block.selected {
    background-color: #117EF6;
  }
}