body{
  #navbarcampus{
    .container{
      #menucampus{
        #ul-menucampus{
          .licampus{
            &.li-app-campus{
              border-left: 1px solid var(--negro10) !important;
              .enlace-app-campus{
                padding-top: 4px;
                padding-bottom: 2px;
                .texto-enlace{
                  padding: 0;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  gap: 4px;
                  svg{
                    margin: 0;
                    width: 40px;
                    height: 40px;
                  }
                }
                &:before{
                  content: "";
                  position: absolute;
                  left: 50%;
                  bottom: 0;
                  transform: translateX(-50%);
                  width: 0;
                  height: 0;
                  border: 6px solid transparent;
                  border-top: 0;
                  border-bottom: 6px solid var(--primario-2);
                  opacity: 0;
                  transition: all 0.15 ease-in-out;
                }
                &:hover{
                  .texto-enlace{
                    svg{
                      fill: var(--secundario-1);
                    }
                  }
                }
                &.active{
                  .texto-enlace{
                    color: var(--azul-1);
                    svg{
                      fill: var(--azul-1);
                    }
                  }
                  &:before{
                    opacity: 1;
                  }
                }
                &:not(.active) + .container-app-campus{
                  transform: scale(0.2);
                  opacity: 0;
                  pointer-events: none;
                }
              }
              .container-app-campus{
                width: 300px;
                position: absolute;
                top: 100%;
                right: 0;
                transform-origin: top right;
              }
            }
          }
          @media (min-width: 1200px){
        
          }
          @media (max-width: 1500px){
            .licampus{
              &:not(.li-app-campus){
                a{
                  font-size: 12px;
                  svg{
                    width: 16px;
                    height: 16px;
                  }
                }
              }
            }
          }
          @media (min-width: 1501px){
            
          }
        }
      }
    }
    .container-app-campus{
      display: flex;
      flex-direction: column;
      box-shadow: 0px 2px 6px var(--negro30) !important;
      background-color: white;
      padding: 16px 0;
      transition: all 0.2s ease-in-out;
      border: 2px solid var(--primario-2);
      a,
      span{
        padding: 0;
      }
      .section-app{
        position: relative;
        padding: 16px;
        border-bottom: 2px solid var(--gris-3);
        &:first-child{
          padding-top: 0;
        }
        &:last-child{
          padding-bottom: 0;
          border: none;
        }
        &.collapsable{
          .title{
            user-select: none;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin: 0;
            strong{
              font-size: 18px;
            }
            svg{
              width: 16px;
              height: 16px;
              transition: all 0.15s ease-in-out;
              transform-origin: center center;
            }
            &:hover{
              color: var(--azul-1);
            }
            &:not(.active) + .content{
              display: none;
            }
            &.active{
              padding-bottom: 4px;
              border-bottom: 1px solid var(--gris-3);
              svg{
                transform: rotate(180deg);
              }
            }
          }
          .content{

          }
        }
        .texto{
          font-size: 14px;
          & + *{
            margin-top: 10px;
          }
        }
        button{
          border: none;
          background-color: white;
          background: none;
          color: var(--primario-2);
          text-transform: uppercase;
          font-family: var(--font-2);
          font-size: 11px;
          font-weight: 500;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 2px;
          svg{
            transform-origin: center center;
            width: 20px;
            height: 20px;
            fill: var(--primario-2);
            transition: all 0.3s ease-in-out;
          }
          &:hover{
            color: var(--azul-1);
            svg{
              fill: var(--azul-1);
            }
          }
        }
        .enlaces-app{
          display: flex;
          align-items: end;
          justify-content: space-between;
          gap: 16px;
          .enlace-app{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px !important;
            border-radius: 16px;
            border: 1px solid var(--gris-3);
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
            img{
              width: 100%;
              max-height: 20px;
            }
          }
        }
        .container-codigo-vincular{
          display: grid;
          grid-template-columns: 1fr 80px;
          align-items: center;
          gap: 16px;
          padding-bottom: 6px;
          .codigo-vincular{
            text-align: left;
            font-family: var(--font-1) !important;
            font-size: 50px;
            font-weight: 900;
            line-height: 1;
            &.animado{
              color: var(--gris-2);
            }
            &.copiado{
              /* color: var(--gris-1); */
              color: var(--azul-1);
            }
            &.expirado{
              color: var(--danger-1);
            }
          }
          .btn-generar-codigo{
            &:hover{
              svg{
                transform: rotate(360deg);
              }
            }
          }
          .tiempo-expiracion-codigo,
          .tiempo-expirado-codigo{
            display: none;
            width: 100%;
            text-align: left;
            color: var(--gris-1);
            font-size: 11px;
            position: absolute;
            bottom: 6px;
            left: 0;
            padding-left: 20px;
            .minutos{
            }
            &.visible{
              display: block;
            }
          }
        }
        .dispositivos-vinculados{
          .dispositivo-vinculado{
            position: relative;
            display: grid;
            grid-template-columns: 30px 1fr 80px;
            align-items: center;
            gap: 6px;
            color: var(--gris-1);
            min-height: 60px;
            &:not(:last-child){
              margin-bottom: 6px;
              padding-bottom: 6px;
              border-bottom: 1px solid var(--gris-3);
            } 
            .dispositivo{
              display: flex;
              align-items: center;
              justify-content: center;
              svg{
                fill: var(--gris-2);
                width: 100%;
                height: 100%;
                max-height: 30px;
              }
            }
            .nombre{
              font-size: 11px;
            }
            .btn-desvincular-dispositivo{
              &:not(.active) + .confirmar-desvincular{
                display: none;
              }
            }
            .confirmar-desvincular {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 6px;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-color: rgba(0, 0, 0, 0.75);
              .texto{
                line-height: 1;
                color: var(--gris-3);
              }
              .botones-confirmar-desvincular{
                margin: 0;
                width: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 20px;
                .btn-confirmar-desvincular{
                  line-height: 1;
                  font-size: 14px;
                  font-weight: 300;
                  padding: 4px 16px;
                  color: white;
                  border: 1px solid var(--gris-1);
                  &:hover{
                    background-color: rgba(255,255,255,0.15);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  #menucampus-movil{
    position: fixed;
    height: 100%;
    .item-menu-asignatura{
      position: relative !important;
    }
    .menucampus-content{
      display: grid;
      min-width: 0;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr max-content;
      height: 100%;
      row-gap: 10px;
      .menucampus-top{
        .menu-asignatura-movil{
          overflow-y: auto;
          height: 100%;
          max-height: 84vw;
        }
      }
      .menucampus-bottom{
        display: grid;
        align-items: center;
        min-width: 0;
        grid-template-columns: 1fr 70px;
        column-gap: 10px;
        padding: 10px;
        border-top: 1px solid var(--gris-3);
        .select-idioma-pie-movil{
          align-items: start;
          margin: 0;
          padding: 0;
          .input-field{
            width: 75%;
          }
        }
        .menu-app-campus-movil{
          padding-left: 10px;
          border-left: 1px solid var(--gris-3);
          .enlace-app-campus{
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            font-family: var(--font-2);
            font-size: 16px;
            fill: var(--primario-1);
            &:before{
              content: "";
              position: absolute;
              left: 50%;
              bottom: calc(100% + 4px);
              transform: translateX(-50%);
              width: 0;
              height: 0;
              border: 10px solid transparent;
              border-top: 10px solid var(--primario-2);
              border-bottom: 0;
              opacity: 0;
              transition: all 0.15 ease-in-out;
              pointer-events: none;
            }
            svg{
              width: 100%;
              height: auto;
              max-height: 50px;
              fill: var(--primario-2);
            }
            &.active{
              color: var(--azul-1) !important;
              svg{
                fill: var(--azul-1);
              }
              &:before{
                opacity: 1;
              }
            }
            &:not(.active) + .container-app-campus {
              transform: scale(0.2);
              filter: blur(2px);
              opacity: 0;
            }
          }
          .container-app-campus{
            position: fixed;
            bottom: 94px;
            left: 10px;
            width: calc(100vw - 20px);
            height: calc(100% - 104px);
            z-index: 1000;
            transform-origin: bottom right;
            overflow-y: auto;
            button{
              &:hover{
                color: initial;
                svg{
                  fill: initial;
                  transform: none;
                }
              }
            }
            .close-app-movil{
              position: absolute;
              top: 0;
              right: 0;
              background: none;
              border: none;
              padding: 10px;
              z-index: 100;
              svg{
                width: 26px;
                height: 26px;
              }
            }
            .section-app{
              padding-bottom: 30px;
              &.section-codigo{

              }
              .texto{
                font-size: 16px;
                strong{
                  font-size: 18px;
                }
              }
              .container-codigo-vincular{
                grid-template-columns: 1fr 60px 60px;
                gap: 0;
                .codigo-vincular{
                  
                }
                .tiempo-expiracion-codigo,
                .tiempo-expirado-codigo{
                  font-size: 12px;
                  bottom: 10px;
                }
                button{
                  padding: 0;
                }
                .btn-copiar-codigo{
                  opacity: 0;
                  pointer-events: none;
                  &.visible{
                    opacity: 1;
                    pointer-events: all;
                  }
                  &.active{
                    color: var(--azul-1);
                    svg{
                      fill: var(--azul-1);
                    }
                    .copy1{
                      display: none;
                    }
                  }
                  &:not(.active){
                    .copy2{
                      display: none;
                    }
                  }
                  &.disabled{
                    opacity: 0.5;
                    pointer-events: none;
                  }
                }
              }
              .dispositivos-vinculados{
                .dispositivo-vinculado{
                  .nombre{
                    font-size: 14px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}