@border_color: white;

.agrandar (@factor) {
  -webkit-transform: scale(@factor);
  -moz-transform:    scale(@factor);
  -ms-transform:     scale(@factor);
  -o-transform:      scale(@factor);
}

.transition-duration (@duracion) {
  
  -webkit-transition-duration: @duracion;
  transition-duration: @duracion;
  -moz-transition-duration:@duracion;
  -ms-transition-duration:@duracion;
  -o-transition-duration:@duracion;
}


.contenedor{


  display: flex;
  width: 100%;
  overflow-x: auto;

}

.semestre{

  border-right:dashed #aaa 2px;

  padding:15px;


    width:190px;
    flex-shrink: 0;
    margin-right:3px;
   

}

.semestre h2{
  text-align: center;
  padding-bottom: 10px;
}

.materia{
  height:7.0em;
  border:solid #222 1px;
  background:white;
  margin:4px;
  padding:4px;
  text-align:center;
  .transition-duration(1s);
  overflow:hidden;
  position: relative;
  background: #fbefe4;
  color: #333333;
  margin-bottom: 10px;
}
.materia .check{
  color: #81b41e;
  position: absolute;
  bottom: -2px;
  right: 3px;
  display: none;
}
.materia .contenido{
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%,-50%);
}
.materia .contenido p{
  margin: 0px;
  line-height: 1.1em;
  color: #333333;
  text-decoration: underline;
  width: 145px;
  padding-left: 4px;
  padding-right: 4px;
  
}
.materia .contenido p span {
    font-size: 0.8em;
    line-height: 1.0em;
    display: block;
    margin-top: 2px;
}
.materia a{
  text-decoration: underline;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top:0px;
  left: 0px;
}
.fondo-materia {
    width: 191px;
    height: 7.5em;
    background: transparent;
    margin-left: -18px;
    padding-left: 18px;
    padding-right: 18px;
    margin-bottom: 0px;
    padding-top: 10px;
}
.materia .footer{

  height: auto;
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 1px #333333 solid;
  font-size: 0.9em;

}

.materia header{
  width:100%;
  display:block;
  border-bottom:1px solid @border_color;
  font-weight: bold;
  font-size:1.2em;
}




.det-mat{
  opacity:0.5;
  .transition-duration(500ms);
  top:7em;
  position:relative;
  font-size:0.8em;
  color:#444;
  margin-top:3px;
}

.det-mat p{
  margin:2px;
}


.materia section{
 /* margin:0.8em;*/
}

.materia footer{
  width:100%;
  border-top:1px solid @border_color;
}

/*Estilos de los departamentos*/
.CB{
  background:#17A768;
}

.ST{
  background:#F1601D;
}

.NFI{
  background:#F1AD1D;
}
.BU{
  background:E7E0D2;
}

.OG{
  background:#BBAE93;
}

.BU{
  background:#BB93AE;
}

.COM{
  background:#3AE;
}

.mate {
  background: #ddebf6;
  border: 2px solid #3376b3;
}
.mate .footer{
  border-top: 2px solid #3376b3;
}

.fisi {
  background: #f7cbaf;
  border: 2px solid #c45920;
}
.fisi .footer{
  border-top: 2px solid #c45920;
}

.ingl {
  background: #c7dfb6;
  border: 2px solid #558139;
}
.ingl .footer{
  border-top: 2px solid #558139;
}

.comp {
  background: #fee59d;
  border: 2px solid #be8e1f;
}
.comp .footer{
  border-top: 2px solid #be8e1f;
}

.semi {
  background: #e2dbf5;
  border: 2px solid #6f359e;
}
.semi .footer{
  border-top: 2px solid #6f359e;
}



.inge {
  background: #d0cece;
  border: 2px solid #404040;
}
.inge .footer{
  border-top: 2px solid #404040;
}

.prac {
  background: #fbe4d7;
  border: 2px solid #823c15;
}
.prac .footer{
  border-top: 2px solid #823c15;
}

.elec {
  background: #f2f2f2;
  border: 2px solid #a6a6a6;
}
.elec .footer{
  border-top: 2px solid #a6a6a6;
}



.admi {
  background: #fdd6dd;
  border: 2px solid #9d3586;
}
.admi .footer{
  border-top: 2px solid #9d3586;
}

.semt {
  background: #b5c7e6;
  border: 2px solid #213863;
}
.semt .footer{
  border-top: 2px solid #213863;
}

.bgpr{
  background: #ffffff !important;
  border: 3px solid var(--color-secondary) !important;;
}
.bgpr .footer{
  border-top: 3px solid var(--color-secondary) !important;;
}

.espacio{
  background: transparent;
  border: none;
}

.leyenda-texto{
  line-height: 30px;
  margin-left: 20px;
  
}
.leyenda-cuadro{
  width: 30px;
  height: 30px;
  float: left;
}

/*Estilos de los pre y correquisitos*/

.correquisito{
  background:rgb(51,216,230); 
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  .agrandar(1.1);
}

.prerequisito{
  background:rgb(87,230,51);
  .agrandar(1.1);
}

.previo{
  background:rgb(205,226,54);
  .agrandar(1.1);
}