/*GENERALES*/
*{margin:0;padding:0;border:0;text-decoration:none;box-sizing:border-box;list-style: none;}
html{font-family:'Roboto',sans-serif; font-size:15px; text-rendering: optimizeLegibility;}
body{background: var(--gris-240); min-height: 100vh; display: grid; align-items: start;}

/*COLORES*/
:root{
  --rojo-mas-c:#FFD9D9;
  --rojo-c:rgb(242, 152, 152);
  --rojo:#e85254;
  --rojo-o:#b54040;
  --rojo-mas-o:#73191b;
  --issd-mas-c-2: #e1f4ff;
  --issd-mas-c: #c0e7fc;
  --issd-c: #20b6ca;
  --issd: #008393;
  --issd-o: #005a66;
  --issd-mas-o: #00414a;
  --verde-mas-c:#d2e683;
  --verde-c:#b8cf5f;
  --verde:#74B42E;
  --verde-o:#5C8E30;
  --verde-mas-o:#497d1c;
  --violeta-o: #543875;
  --violeta: #6b4794;
  --violeta-c: #9073b0;
  --naranja-o: #B76617;
  --naranja: #EC7E09;
  --naranja-c: #F4A521;
  --naranja-mas-c: #f6ce4a;
  --azul-o: #40427d;
  --azul: #4f57a1;
  --azul-c: rgb(122, 128, 186);
  --cesd: #2a9263;
  --cesd-o: #135336;
  --cesd-c: #4cc08c;
  --gris-30:rgb(30, 30, 50);
  --gris-70:rgb(70, 70, 90);
  --gris-100:rgb(100, 100, 120);
  --gris-130:rgb(130, 130, 150);
  --gris-170:rgb(170, 170, 190);
  --gris-210:rgb(210, 210, 230);
  --gris-230:rgb(230, 230, 245);
  --gris-240:rgb(240, 240, 255);
  --gris-250:rgb(245, 245, 255);
  --blanco:rgb(255, 255, 255);
  --magenta-mas-c-2: #FFE8EE; --magenta-mas-c: #ECC6D2; --magenta-c: #EC9FB9; --magenta: #DE3664; --magenta-o: #A62C50; --magenta-mas-o: #751236;
  --space:'Space Grotesk', 'Roboto', sans-serif;
  --roboto: 'Roboto', sans-serif;
  --iconos: 'Material Icons', sans-serif;
}
/* Cabecera */
header{
  background: var(--blanco);
  box-shadow: 0 0 12px rgba(0,0,0,.1);
}
  header div{
    padding: 25px;
    display: grid;
    grid-gap: 15px 25px;
    text-align: center;
  }
    header .logo{
      width: 100%;
      max-height: 50px;
      margin: 0 auto;
    }
    header h1{
      color: var(--issd);
      font-weight: 300;
      font-size: 1.5em;
      line-height: 35px;
    }
      header h1 b{
        display: block;
        font-size: 1.75em;
      }

/*Contenidos*/      
.contenedor-general{
  margin: 0 auto;
  width: 100%;
  max-width: 1320px;
  padding: 25px;
  display: grid;
  grid-gap: 25px;
}
  section{
    display: grid;
    grid-gap: 10px;
    margin-top: 10px;
  }
  section:not(:first-of-type){
    margin-top: 5px;
    padding-top: 20px;
    border-top: 2px solid var(--blanco);
  }
    h2{
      color: var(--issd);
      font-size: 1.5em;
      font-weight: 300;
      margin-bottom: 10px;
    }
    section > label,
    section > a{
      background: var(--blanco);
      padding: 51px 25px;
      text-align: center;
      font-size: 1.1em;
      font-weight: 500;
      color: var(--issd);
      border-radius: 10px;
      box-shadow: 3px 3px 8px rgba(0,0,0,.1);
      position: relative;
      transition: all .2s ease;
      z-index: 500;
    }
      section > label b,
      section > a b{
        text-transform: uppercase;
      }
      section > label::after,
      section > a::after{
        content: '>';
        font-weight: 900;
        font-size: 2em;
        transform: rotate(90deg) scaleX(50%);
        color: var(--issd-c);
        position: absolute;
        left: 48%;
        bottom: 15px;
        opacity: .25;
        transition: all .2s ease;
      }
        section > label:hover::after,
        section > a:hover::after{
          bottom: 5px;
        }
      label ~ ul{
        display: none;
      }
        #check_1, #check_2,
        #check_3, #check_4,
        #check_5, #check_6{
          display: none;
        }
          #check_1:checked ~ ul:first-of-type,
          #check_2:checked ~ ul,
          #check_3:checked ~ ul:first-of-type,
          #check_4:checked ~ ul,
          #check_5:checked ~ ul:first-of-type {
            display: grid;
          }
        ul li{
          color: var(--issd);
          background: var(--blanco);
          box-shadow: 2px 2px 6px rgba(0,0,0,.1);
          border-radius: 0 10px 10px 0;
          border-left: 5px solid var(--issd-c);
        }
          ul li:nth-of-type(2n){
            border-left: 5px solid var(--issd);
          }
          ul li a{
            display: block;
            padding: 12px 20px;
            color: var(--issd);
            font-weight: 400;
          }
            ul li:not(:first-of-type) a{
              border-top: solid 1px var(--gris-230);
            }
            #cursado ul li a::before{
              content: 'laptop_chromebook';
              font-family: var(--iconos);
              color: var(--issd-c);
              position: relative;
              top: 3px;
              margin-right: 8px;
            }
              #cursado ul li.campus-anteriores {
                border-left: solid 5px var(--gris-170);
              }
                #cursado ul li:hover.campus-anteriores {
                  border-left: solid 5px var(--gris-130);
                }
                #cursado ul li.campus-anteriores a{
                  color: var(--gris-130);
                }
                  #cursado ul li.campus-anteriores a:hover{
                    color: var(--gris-70);
                  }
                  #cursado ul li.campus-anteriores a::before{
                    content: 'screen_share';
                    color: var(--gris-170) !important;
                  }
                    #cursado ul li.campus-anteriores a:hover:before{
                      color: var(--gris-130) !important;
                    }
              #cursado ul li:nth-child(2n) a::before{
                color: var(--issd);
              }
                section > label,
                section > a{
                  background-size: cover !important;
                  background-position: center !important;
                }
                  a > span{
                    font-size: 13px;
                    display: inline-block;
                    margin-top: 5px;
                    font-style: italic;
                  }

        #cursado > label:nth-of-type(1){background: url(../img/carreras.svg);}
        #cursado > label:nth-of-type(2){background: url(../img/cursos.svg);}
        #inscripciones > a:nth-of-type(1){background: url(../img/inscripcion-cursado.svg);}
        #inscripciones > a:nth-of-type(2){background: url(../img/inscripcion-examen.svg);}
        #examenes > a{background: url(../img/campus-examenes.svg);}
        #estado-academico > a{background: url(../img/estado-academico.svg);}

footer{
  background: var(--issd-mas-o);
  text-align: center;
  padding: 20px 0 25px 0;
  align-self: end;
  border-radius: 25px 25px 0 0;
  margin-top: 25px;
}
  footer p{
    color: var(--blanco);
    font-size: 13px;
  }
  footer a{
    color: var(--issd-mas-c);
    font-size: 13px;
  }

/*Pagina campus anteriores*/
#campus-anteriores > p,
#campus-anteriores > p a{
  color: var(--issd-c);
  transition: all .2s ease;
}
  #campus-anteriores > p a{
    border-bottom: 1px dashed var(--issd-c);
  }
  #campus-anteriores > p a:hover{
    color: var(--issd-mas-o);
    border-bottom: 1px dashed var(--issd-mas-o);
  }
  #campus-anteriores > ul{
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-gap: 20px;
    margin-top: 10px;
  }
    #campus-anteriores > ul > li{
      font-size: 28px;
      font-weight: 300;
      text-align: right;
      background: none;
      box-shadow: none;
      border-left: 0;
    }
      #campus-anteriores > ul ul li{
        margin-bottom: 5px;
      }

/*Media home*/
@media screen and (min-width:560px) {
  section:not(#campus-anteriores){
    grid-template-columns: repeat(2, 1fr);
  }
    section h2{
      grid-column: 1/-1;
      /* background: linear-gradient(90deg, rgba(0,65,74,1) 0%, rgba(0,90,102,1) 20%, rgba(0,131,147,1) 70%, rgba(32,182,202,1) 100%); */
      /* padding: 10px 20px;
      border-radius: 0 25px 0 0;
      color: var(--blanco);
      font-weight: 500;
      border-left: 10px solid var(--verde-c);
      margin-bottom: 0; */
    }

}

/*Desabilitados*/
.desabilitado{
  /* pointer-events: none; */
  filter: grayscale(1);
}

@media screen and (min-width:768px) {
  .contenedor-general{
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 60px 75px;
  }
    header div{
      padding: 18px 0;
      display: grid;
      grid-template-columns: .8fr 1fr;
    }
    header h1{
      align-self: center;
      font-size: 2em;
    }
      header h1 b{
        display: inline;
        font-size: 1.35em;
      }
      h2{
        font-size: 1.75em;
        margin-bottom: 0;
      }
      section{
        grid-gap: 16px;
        position: relative;
        border-top: 0 !important;
        padding-top: 0 !important;
      }
        section > label,
        section > a{
          padding: 62px 15px 68px 15px;
          background-size: 350px auto !important;
          background-position: bottom center !important;
          background-repeat-y: no-repeat !important;
          background-repeat: repeat-x !important;
          background-color: var(--blanco) !important;
          font-size: 1.2em;
        }
          section > label:hover,
          section > a:hover{
            box-shadow: 2px 2px 12px rgba(0,0,0,.25);
        }
            section > label:hover ul,
            label:hover + ul,
            section > ul:hover{
              display: grid;
            }
              section:not(#campus-anteriores) > ul{
              position: absolute;
              z-index: 1000;
              top: calc(100% - 2px);
              width: 100%;
              max-width: 300px;
              }
                section > ul:first-of-type{
                  left: 0;
                }
                section > ul:last-of-type{
                  left: calc(50% + 8px);
                }
                  section > ul li{
                    box-shadow: 2px 2px 6px rgba(0,0,0,.1);
                  }
                    section > ul li:hover a{
                      color: var(--issd-mas-o);
                    }
                    #cursado ul li a::before{
                      display: inline-block;
                      transition: all .2s ease;
                    }
                    #cursado ul li:hover a::before{
                      transform: scale(1.3);
                    }
                      #cursado > label:nth-of-type(1),
                      #inscripciones > a:nth-of-type(1),
                      #examenes > a{
                        border-top: 5px solid var(--issd-mas-c);
                      }
                      #cursado > label:nth-of-type(2),
                      #inscripciones > a:nth-of-type(2),
                      #estado-academico > a{
                        border-top: 5px solid var(--verde-mas-c);
                      }
        #campus-anteriores{
            grid-column: 1/-1;
            margin: 0 auto;
            width: 100%;
            max-width: 800px;
        }
          #campus-anteriores ul{
              width: 100%;
              position: relative;
              left: 0;
              top: 0;
          }
            #campus-anteriores ul ul{
                width: 100%;
                grid-column: 2/-1;
            }
}

/*Error campus examenes*/
.error-campus{
  height: calc(100vh - 100px);
  display: grid;
  place-items: center;
  place-content: center;
  text-align: center;
  grid-gap: 20px;
  padding: 5%;
  box-sizing: border-box;
}
  .error-campus h1{
    font-size: 48px;
    color: var(--issd);
  }
  .error-campus h2{
    font-size: 24px;
    color: var(--issd);
  }
      .error-campus .icon-error::before{
        content: 'error_outline';
        font-family: var(--iconos);
        color: var(--issd-c);
        font-size: 120px;
        display: block;
      }