body{
  margin:0;
  background:#008080;
  font-family:"MS Sans Serif",Tahoma,sans-serif;
  overflow:hidden;
}

/* LOADER */

#loader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#000;
  color:#00ff66;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family:"Courier New",monospace;
}

.loader-box{
  width:85%;
  max-width:500px;
}

.loader-box h1{
  letter-spacing:4px;
  font-size:30px;
}

.progress{
  width:100%;
  height:20px;
  border:2px solid #00ff66;
  margin-top:20px;
}

#bar{
  width:0%;
  height:100%;
  background:#00ff66;
}

#percent{
  display:block;
  margin-top:15px;
}

/* EXPLORADOR */

#explorer{
  display:none;
  padding:20px;
}

.window{
  width:100%;
  max-width:700px;
  margin:auto;
  background:#c0c0c0;

  border-top:2px solid #fff;
  border-left:2px solid #fff;
  border-right:2px solid #404040;
  border-bottom:2px solid #404040;
}

.titlebar{
  background:linear-gradient(
      to right,
      #000080,
      #1084d0
  );

  color:white;
  padding:8px;
  font-weight:bold;
}

.menubar{
  padding:8px;
  border-bottom:1px solid #808080;
  font-size:14px;
}

.menubar span{
  margin-right:15px;
}

.content{
  background:white;
  min-height:420px;
  padding:15px;
}

.sync{
  color:#666;
  font-size:13px;
  margin-bottom:20px;
}

.folder{
  padding:12px;
  cursor:pointer;
  user-select:none;
  border-radius:3px;
}

.folder:hover{
  background:#000080;
  color:white;
}

/* CONTRASEÑA */

#passwordModal{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.5);

  display:none;
  justify-content:center;
  align-items:center;

  z-index:9999;
}

.passwordBox{
  width:85%;
  max-width:320px;

  background:#c0c0c0;
  padding:25px;

  border-top:2px solid #fff;
  border-left:2px solid #fff;
  border-right:2px solid #404040;
  border-bottom:2px solid #404040;
}

.passwordBox h3{
  margin-top:0;
}

.passwordBox input{
  width:100%;
  box-sizing:border-box;
  padding:10px;
  margin-top:10px;
}

.passwordBox button{
  width:100%;
  margin-top:15px;
  padding:10px;
}

/* VENTANAS DE CARPETAS */

#folderWindow{
  padding:20px;
}

/* SOLO MÓVILES */

#desktopWarning{
  display:none;
}

@media (min-width:769px){

  #loader,
  #explorer,
  #passwordModal,
  #folderWindow{
    display:none !important;
  }

  #desktopWarning{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    color:#00ff66;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    font-family:"Courier New",monospace;
  }

  .warningBox{
    max-width:450px;
    padding:40px;
  }
}