/* ---------- Modo Dark ---------- */
body.dark {
  background: #131319;
  transition: all 0.3s ease;
  transition: box-shadow 0.6s;
}
body.dark .contenedor-portada,
body.dark .img-area,
body.dark .social-icons a,
body.dark .botenes-perfil button,
body.dark .container-habilidad,
body.dark .footer,
body.dark .curso,
body.dark .contenido-certificado .subclase-certificado .certificados,
body.dark .contenido-certificado .subclase-certificado .certificados img,
body.dark .curso .servicios,
body.dark .inner  {
  background: #131319;
  box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.05),
               5px 5px 15px rgba(0, 0, 0, 0.5);
               transition: all 0.3s ease;
}
body.dark .contenido-certificado .subclase-certificado {
  background: #131319;
}
body.dark .inner {
  border: 12px solid #131319;
}
body.dark .name,
body.dark .about,
body.dark .social-fila span,
body.dark .social-fila span a,
body.dark .botenes-perfil button,
body.dark .footer p,
body.dark .habilidades-title h1,
body.dark .modal h1,
body.dark .curso h1,
body.dark .curso .servicios h2,
body.dark .curso .servicios .servicios-contenedor .inner .titulo h3 {
  color: #03a9f4; /*868686*/
  transition: all 0.3s ease;
}
body.dark .certificados h2 a {
  color: #EC1B1B;
}
body.dark .habilidades-title h1:before {
  background-color: #EC1B1B;
}
body.dark .social-fila i {
  background: #131319;
  box-shadow: 2px 2px 5px 1px rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}
body.dark .fa-medal:before, 
body.dark .fa-code:before, 
body.dark .fa-user-graduate:before,
body.dark .modal p,
body.dark .certificados p,
body.dark .curso .servicios p {
  color: #fff;
  transition: all 0.3s ease;
}
body.dark .btn,
body.dark .mododark,
body.dark .modal {
  background: #131319;
  box-shadow: -7px -7px 10px 0px rgba(255, 255, 255, 0.05),
        -4px -4px 5px 0px rgba(255, 255, 255, 0.05),
        7px 7px 10px 0px rgba(0, 0, 0, 0.5),
        4px 4px 5px 0px rgba(0, 0, 0, 0.5),
        inset 0px 0px 0px 0px rgba(255, 255, 255, 0.05),
        inset 0px 0px 0px 0px rgba(255, 255, 255, 0.05),
        inset 0px 0px 0px 0px rgba(255, 255, 255, 0.05),
        inset 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
        transition: all 0.3s ease;
}
body.dark .social-icons a:hover::before,
body.dark .contenedor-portada .icon:hover::before,
body.dark .botenes-perfil button:hover:before {
  background: #131319;
  box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
              inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
/*body.dark .mododark {
  background: #20b7ff;
}*/
body.dark .fa-sun:before {
  color: #fff;
}
body.dark .modal .boton-popup,
body.dark .curso .boton-popup {
  color: #000;
  background: #2C2C35;
  box-shadow: -5px -5px 10px rgb(255 255 255 / 5%), 5px 5px 15px rgb(0 0 0 / 50%);
}
body.dark .modal .boton-popup:hover:before,
body.dark .curso .boton-popup:hover:before {
  background: #fff;
}

/* ---------- Boton ---------- */
/*.mododark {
  background: #343D5B;
  border-radius: 1000px;
  border: none;
  position: absolute;
  cursor: pointer;
  display: flex;
  outline: none;
  left: 15px;
  top: 15px;
  box-shadow: 2px 2px 5px 1px #717977;
}
.mododark::after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  background: #F1F1F1;
  top: 0;
  left: 0;
  right: unset;
  border-radius: 100px;
  transition: 0.5s ease all;
  -webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
}
.mododark.active {
  background: orange;
  color: #000;
}

.mododark.active::after {
  right: 0;
  left: unset;
}
.mododark span {
  width: 30px;
  height: 30px;
  line-height: 30px;
  display: block;
  background: none;
  color: #fff;
}*/
/* ---------- Fin de Boton ---------- */



.mododark {
  position: absolute;
  display: flex;
  width: 60px;
  height: 30px;
  margin: 10px;
  left: 15px;
  top: 15px;
  outline: none;
  background: #131319;
  -webkit-appearance: none;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: 2px 2px 3px 1px rgba(0,0,0,1),
  inset -2px -2px 6px rgba(255, 255, 255, 0.1),
              inset 2px 2px 6px rgba(0, 0, 0, 0.8);
  transition: 0.5s;
  border: none;
}
.mododark.active {
  background: #20b7ff;
  transition: 0.5s
}
.mododark::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: unset;
  width: 30px;
  height: 30px;
  background: linear-gradient(to top,#131319,#555);
  border-radius: 20px;
  box-shadow: 0 0 0 1px #131319;
  transform: scale(0.98,0.96);
  transition: 0.5s ease all;
}
.mododark.active::before {
  left: unset;
  right: 0;
  transition: 0.5s
}
.mododark::after {
  content: '';
  position: absolute;
  left: 15px;
  top: calc(50% - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #555;
  transition: 0.3s;
}
.mododark.active::after {
  left: calc(35px + 15px);
  background: #63cdff;
  box-shadow: 0 0 5px #63cdff,
        0 0 15px #63cdff,
        0 0 30px #63cdff;
  transition: 0.3s;
}
.mododark span {
  width: 30px;
  height: 30px;
  line-height: 30px;
  display: block;
  background: none;
  color: #fff;
}






@media screen and (max-width: 450px) {
  .mododark {
    top: 3px;
    left: 3px;
    margin: 5px;
    width: 50px;
    height: 25px;
  }
  .mododark::before {
    height: 25px
  }
  .mododark span {
    line-height: 28px;
  }
  .mododark.active::after{
    left: calc(35px + 5px);
  }
}